Tuesday, March 16, 2010
Font Squirrel appears to be a great font generator that will create the various formats needed for the cross-browser use of @font-face. Some colleagues and I have recently been waxing poetically on the legality of using purchased fonts using this CSS2 based method of font embedding. Especially when deployed for clients, in a commercial environment. While @font-face is a bit overdue to go mainstream (A List Apart was touting it as the next big thing in 2007), now that the browsers are coming of age, the tipping point is near. It will dominate other options that are currently bridging the gap, like http://typekit.com. However, we have come to the conclusion that now is the time to pay more attention to a fonts use policy. Some will explicitly forbid the designer/developer from exposing the font file online. Some will encourage it, and I assume,many more will not mention it. This means web shops should start gathering and using libraries filled with the fonts that encourage the use of @font-face. Here’s where I’m starting. As linked in the previous ALA article: Dieter Steffmann offers up a slew of freely usable fonts and I’m sure several more lists like this, @font-face and 15 Free Fonts You Can Use Today, exist.
Here’s a great explanation of the licensing issue we’re facing with @font-face:
…foundries don’t actually claim copyright in the typefaces themselves. Instead they claim copyright on the .ttf file (or whatever) as a piece of software. Then, when you buy the right to use the software, they make you click “Agree” to an EULA which prohibits you from uploading the file to your website. If you want your users to see your font over the web, then you need to send them that file, and the EULA says you can’t.
Posted in code, design, interweb, link, tech / Leave a Comment
Tuesday, October 06, 2009
Today’s update comes from me spending lots of time on Things Magazine. I love the site and their approach to discussing, pointing out, shouting about, whispering quietly amongst themselves, today’s potentially cluttered online culture. Sometimes they expound, sometimes they don’t. It’s art with some noise, noise with some meaning or even none at all. So I’ve borrowed heavily. It’s one of the few sites I leave Google Reader to read. Jammed in among popular noise makers, few sites demand such attention. There’s a couple of random patterns in use with these updated styles, the newest from Pattern Foundry and a squiggly lines pattern of my own creation which has stuck around.
Posted in code, design, interweb / Leave a Comment
Friday, April 03, 2009
What a novel idea, sell your own shoes online! In these tough economic times did Sole Technology stop messing around with overpriced under performing outsourced ecommerce and finally bring it all under their own umbrella?
It looks that way, congrats web dept, nice work!
Posted in california, code, design, interweb, skateboarding / 1 Comment
Friday, March 28, 2008
I recently had to schedule some blood work for a physical and was blown away to find an “Add To My Google Calendar” button on the confirmation page.
Posted in code, design, interweb / Leave a Comment
Wednesday, March 05, 2008
Activities: Microsoft’s version of microformats? They’re awfully similar & require no work for the developer. The downside? HTML documents will continue to lack the rich markup that microformats offer. We can continue using microformats to mark up our documents of course, but I wonder if this will stagnate their growth.
Posted in code, interweb, link, tech / Leave a Comment
Wednesday, February 27, 2008
Just a tip. If you’re ever using SWFObject to write out your flash files and ExternalInterface to communicate with them, in Internet Explorer (6 & 7), make sure that the ID of your embedded flash file is all lowercase.
Take this basic code for example, used to mute the audio in a flash file from within HTML:
Tuesday, December 18, 2007
I’ve recently been using, and falling in love with, a Javascript library you’ve probably heard of – jQuery. So when I needed Tool Tip functionality for a project, the one thing I was sure about was that jQuery was the way to go. I tried writing some things myself and didn’t like the results. Then I tried a couple of different jQuery based Tool Tip plugins, which worked OK, but I knew they were cumbersome & supurfulous.
Posted in code, interweb / 2 Comments
Thursday, May 31, 2007
No silly javascript, no crazy coding, no waiting for images to load. Just some good old fashioned HTML, CSS, and a single image. Once you do this, you’ll never make your web site navigation any other way.
Warning: If you aren’t into front-end coding for the web, you may want to skip this. For those that are (I love you that much more), this has been covered elsewhere and covered much better, so hopefully this is old hat.
Posted in code, interweb / 54 Comments
Thursday, December 07, 2006
This technique has been around for so long, but still too many people are not using it. It’s one of the easiest first steps you need to take toward making your site semantically correct and search engine friendly (see the final result in action).
Never, ever, put a company logo as a straight up image in HTML. It needs to be recognized by Google and if it’s just an image sitting in your code, no one can find it.
Let Google know your logo is an important item on your site by dropping it in an <h1></h1>. Then let Google read and index your company name by using real text, not an image:
The HTML for your logo should look like this:
<h1>My Company</h1>
Now use some CSS to replace your text with an image (Use the width & height of your own image):
* {margin: 0;padding: 0;}h1 {display: block;width: 250px;height: 46px;text-indent: -9999px;background: transparent url(my-company.jpg) no-repeat 0 0;}
Usually you’ll be linking your logo to your home page too, which is just as easy to accomplish:
The HTML:
<h1><a href="/" title="My Company">My Company</a></h1>
And the CSS for your anchor tag:
h1 a {display: block;width: 100%;height: 100%;outline: none;}
It’s as simple as that! Go edit your logo’s HTML.
See the final result in action, disable CSS styles to see it through google’s eyes. View source, copy & paste.
Update: For even more search engine love, be more descriptive in your H1:
<h1>My Company - My Companies Main Goal</h1>
Or, use any HTML element you deem most appropriate.
Did you find this post helpful?
Posted in code, interweb / 23 Comments
Powered by WordPress using the Minimal, Really Theme. Inspired by Things
- Set of iPhone wallpapers / Download (.zip)