Ultimate Site Logo 2 – For real this time

After writing my first article on the subject, Ultimate Site Logo, I’ve come up with two significant enhancements.. With the original solution, there were two major flaws. The first one was a semantic one and the other one a more obvious and technical one.

This time around I think I’ve got all the details right. Well, if that’s not Kaizen, what is?

The old article

In the original article, Ultimate Site Logo, I described how to code a site logo to meet these needs:

• Search engine optimized
• Clickable
• Accessible
• Looks good
• Hover effect

If you haven’t already read it, this could be a good time to do so to fully grasp the concept. But if you feel confident enough, then by all means, do read on.

The semantic problem

In my first solution I suggested that <h1> would be an appropriate element to host the logo. Even though I already back then felt that a different element could be used, I personally was leaning more towards <h1>.

After reading up a little and listening to remarks from others I have now changed my mind. Especially after reading Chris Pearsons article The Definitive Guide to Semantic Web Markup for Blogs.

I now believe that <h1> should be reserved for the most prominent heading on each individual page. So for the front page, the logo (e.g. site name) might as well be the most prominent one, while on sub pages such as an article page, the articles title should be the most prominent one.

Therefor I now recommend using a div to hold the site logo. The code for this would be:

<div id="branding">
	<div id="logo"><a href="#"><span></span>In usability we trust</a></div>
</div>

Note: I haven’t actually implemented this technique on this site yet, but I will do so in an upcoming redesign. Still you can watch it in action on the example page for this article.

The flicker problem

In my last solution I changed the background-image of the <span> displaying the logo, when hovering over it. The problem with this is that if the hover-image wasn’t cashed, there would be an occasional flicker revealing the text underneath it, before the image was loaded. To solve this issue I now use CSS sprites instead.

A sprite is basically an image that contains several images, in this case two. The trick is to, with the help of CSS, just show a part of it at a time. By aligning the background-image to either the left or the right side of the <span>, a roll-over effect is created.

As you can see this image contains two version of the logo, one in normal state and one in hover-state. By making the container only half the width of the complete image, it’s easy to show the different versions by either aligning the background-image to the left or to the right side of the container.

The logo in it’s normal state, where only the left part of the image is visible in the containing <div> (the red area).

The logo in it’s hover state, where only the right part of the image is visible in the containing <div> (the red area).

The CSS to accomplish this is:

#logo span {
	background: url(../img/logo_sprite.png) left top no-repeat;
}
#logo a:hover span {
	background-position: right top;
}

It was actually a comment from r-doll on a different article of mine that made me realize that CSS-sprites would be the way to go in this solution too. Thanks a lot!

The (almost) complete CSS

I say almost complete because there is two additional Internet Explorer fixes, that is best put in a separate CSS-file only served to IE.

#logo {
	position: relative;
	margin: 0;
	width: 442px;
	height: 125px;
}
#logo a {
	position: absolute;
	width: 100%;
	height: 100%;
}
#logo span {
	position: absolute;
	z-index: 1;	
	width: 100%;
	height: 100%;
	background: url(../img/logo_sprite.png) left top no-repeat;
}
#logo a:hover span {
	background-position: right top;
}

Note: For a full explanation of the CSS and the additional fixes needed for IE, read the old article, Ultimate Site Logo.

Further improvements

If you can think of further improvements I would be more than happy if you would share it with me.

One issue that I’m aware of is when printing the web page. The logo just shows if you have print background images turned on, otherwise the text underneath the logo will show. If you have a solution for this, please let me know!

The files

• Watch the live demo
• style.css [The main style sheet]
• ie.css [Style sheet fed to IE alone]