After writing my first article on the subject, Ultimate
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]
December 12, 2008 at 5:04 pm
I’m curious to hear your opinion on linking to the home page from the home page. Jakob Neilsen (who annoys me to no end, but does have a few good points) says “Don’t include an active link to the homepage on the homepage” in his 2003 list “The Ten Most Violated Homepage Design Guidelines”.
Personally, I like the link to always be there. I often click on it even when I know that I’m on the homepage just to be sure 🙂
December 12, 2008 at 7:41 pm
John: Yes I’ve seen that guideline too. For the sake of consistency I tend to have it link to the home page from the home page too. I doubt that this is a big usability problem, but I’m sure that Jakob Nielsen have the statistics to back it up. I think that this might be a thing that have changed since 2003 since people have been more accustomed to this practice. The power of conventions!
I use it too sometimes to refresh the home page, mostly on news sites. 🙂