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.

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!

U23D, Gentle Honey, Zen and Tea, available as bbcolors color schemes (.zip)

Awhile back Daring Fireball created BBColors, a “free command-line tool for saving and loading text color preference schemes for BBEdit and TextWrangler”. I’ve been using it ever since, switching between the available color shemes. A color refresh for your code rejuvinates the soul.

Occasionally I’ll search the web for new color schemes available for download but have yet to find any, so I created a couple based on color sets from kuler.adobe.com, they’re available for download in bbcolors-color-schemes.zip. I hope other BBColor fans will find them a nice addition to their collection.

The .zip file contains 3 color themes based on the following Adobe Kuler color sets:

• U23D
• Gentle Honey
• Zen and Tea

Daring Fireball has instructions on installing and using BBColors. But here’s the jist on getting these new color schemes up and running:

1. Install BBColors
2. unpack bbcolors-color-schemes.zip
3. type "bbcolors -open" in your command line, revealing the location of saved color schemes
4. Drag and drop your new color schemes into the aforementioned directory
5. type bbcolors -load "Name of Theme"

I could barely contain my excitement in anticipation of what data would be passed along to Google Calendar. I called Susan over to share in the user experience unfurling before me. If this was going to get ugly, I could not face it alone.

Thankfully, we were not disappointed.

Highlights Include:

• Pre-populated end time. Now I know this should take about 15 minutes.
• Pre-popluated address. One click away from google maps.
• Relevant info in the description field.

Take this basic code for example, used to mute the audio in a flash file from within HTML:

1. function audioOff() {
2. thisMovie("foobar").audioOff();
3. }
4. var so = new SWFObject("movie.swf", "foobar", "10", "10", "8", "#ffffff");

Let’s pretend for a minute that the ID of your flash file (foobar) was mixed case:

1. function audioOff() {
2. thisMovie("fooBar").audioOff();
3. }
4. var so = new SWFObject("movie.swf", "fooBar", "10", "10", "8", "#ffffff");

When your ID is mixed case it fails in Internet Explorer.

Note: Using hyphens in your ID’s (foo-bar) will also fail. The hyphen fail is well documented on the web, so I certainly should have paid more attention to the use of mixed case. It’s always the simple things that take 3 days to figure out.

I planned on coming back & giving them another go myself, all I needed was a little motivation. Apple’s Final Cut Studio 2 site (found via Jody Ferry’s delicious links) provided just the amount of motivation I needed. Comparatively mine looks like ass, but you get the idea.

Screenshot of the Tool Tip in action:
(view the live example)

So from one Javascript noob to another Tool Tips using jQuery are so easy, it’ll knock your socks off!

If you haven’t already, you should also dive into the jQuery tutorials, you’ll never consider one of those inferior Javascript libraries again.

Update: In all my jQuery excitement, I overlooked the fact that if you didn’t want your Tool Tips to animate, there’s no need for any Javascript at all! I added some commented out CSS in the live example, should you prefer the non-Javascript route.

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.

Can’t wait for the results? Here’s the final navigation with CSS image replacement, used in the real world. Please, disable styles, view source.

How to do it
First, you should already be in the habit of making your navigation using unordered lists. If you’re not doing it, now is the time to start.

Setup your navigation in an unordered list:

1. <ul>
2.    <li><a href="#">Navigation item 1</a></li>
3.    <li><a href="#">Navigation item 2</a></li>
4. </ul>

Next, add a little CSS to control your list items:

1. ul li {
2.    display:block;
3.    float:left;
4.    list-style-type:none;
5.    }

Such basic CSS results in:

• Navigation item 1
• Navigation item 2

With a few margin and font adjustments, you could stop here and you’d have yourself a nice clean navigation. But only nerds (and search engines) like such bland, basic, HTML navigation. We’re here to please our designers and clients. So Let’s turn this basic HTML into something so sexy they’ll shed tears at first sight. Something that will look like this:

“Oh, and can you make it kind of POP on hover?”

Why yes; in fact we can.

Make yourself an image that contains both the :link state and :hover state of all your navigation items. Better yet, teach your graphic designer to do this for you. In the example below, the :link states are on top and their :hover directly below. Both areas must be the same height.

Here’s what the image looks like, with some guides:

You’ll then export that file and use it as a background-image for all of the links in your unordered list. Here’s where your guides come in handy. In this example, the link area has a height of 66 pixels and the first list item is 34 pixels wide, so we’ll setup some CSS defaults for the anchor tags:

1. ul li a {
2.    display:block;
3.    height:66px; width:34px;
4.    background:transparent url(navigation.png) no-repeat 0 0;
5.    text-indent:-9009px;
6.    }

You’ll notice the text-indent:-9009px; That pulls the text out of sight and out of mind. Make way for your pixel princess!

My second list item is wider, so let’s give that one an ID and change the width. We also need to pull the background-image 34 pixels to the left, since that’s where the image for the second list item starts.

1. <ul>
2.    <li><a href="#">Navigation item 1</a></li>
3.    <li id="navigation2"><a href="#">Navigation item 2</a></li>
4. </ul>
5.  
6. ul li#navigation2 a {
7.    width:60px;
8.    background-position: -34px 0;
9.    }

Now our regular old HTML unordered list is starting to get somewhere:

Now for the :hover & the real magic

All that’s left is to move the background-image on :hover. Since our list items have a height of 66 pixels, we’ll move the background-image up 66 pixels for each list item:

1. ul li a:hover {
2.    background-position: 0 -66px;
3.    }
4.  
5. ul li#navigation2 a:hover {
6.    background-position: -34px -66px;
7.    }

You’ll now have the start of one sweet ass, simple navigation:

• Navigation item 1
• Navigation item 2

Throw some margins in there for spacing, or add whatever tweaks you deem necessary. The final step is to laugh at how simple this is, and never look back.

Carry this same process throughout the rest of your navigation and you’ll end up with something so search engine friendly you’ll now be crying along with your client.

Here’s the final navigation with CSS image replacement, used in the real world. Please, disable styles, view source. If you look carefully, you’ll notice that once the client asks you to change the order of the list items, it’s as simple as moving around your LI’s in the HTML into any order you’d like.

If you have improvements, ways to make this more efficient, or you’d just like to share how long you’ve been using this technique for and how old it is; Please, leave your comments.

Update:
To get your hover state to stay in the hover state, to mark the users currently selected page for example, I like to use an ID or class on the body tag.

For example, on a contact page add:

1. <body id="contact">

And in your CSS hover state, add a line for body#contact:

1. ul li a:hover,
2. body#contact ul li a {
3.    background-position: 0 -66px;
4.    }

Did you find this post helpful?

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:

1. <h1>My Company</h1>

Now use some CSS to replace your text with an image (Use the width & height of your own image):

1. * {margin: 0;padding: 0;}
2. h1 {
3. display: block;
4. width: 250px;
5. height: 46px;
6. text-indent: -9999px;
7. background: transparent url(my-company.jpg) no-repeat 0 0;
8. }

Usually you’ll be linking your logo to your home page too, which is just as easy to accomplish:

The HTML:

1. <h1><a href="/" title="My Company">My Company</a></h1>

And the CSS for your anchor tag:

1. h1 a {
2. display: block;
3. width: 100%;
4. height: 100%;
5. outline: none;
6. }

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:

1. <h1>My Company - My Companies Main Goal</h1>

Or, use any HTML element you deem most appropriate.

Did you find this post helpful?