Yesterdayishere.com » Using the Logo as a Link to the Homepage

Using the Logo as a Link to the Homepage

Web design - 6/7/2006 at 23:15 CET

In recent times, using the logo as a link back to the homepage has become the default way of handling the issue. Web designers use this method without thinking about it much, because everyone does it. They wrap the A element around the IMG element, and that does the trick. Maybe, but maybe not. While I think the method itself isn’t necessarily bad, using it does raise some usability questions.

A user who browses the web often, like yourself maybe, might instinctively go for the logo believing it is a link, but you have to assume others aren’t familiar with this method. An experienced web user has probably grown accustomed to it, but we’re building websites for everyone out there, not just the internet junkie. Users who aren’t aware the logo links back to the homepage might get confused when they search for a way back, which we want to avoid. Even if the user knows the logo could be a link, there might be better soultions to the problem.

We want to ensure the best possible usability on our websites, not just for the sake of the less experienced user, but everyone, so it’s a good idea to offer an alternative. Adding a simple text link “Back to the homepage” (or similar) somewhere in the header, is certainly an improvement. By doing this, we make sure all users are able to find the way back, quickly and avoiding any confusion. Now, even if the logo stays neglected or unexplored, there’s the text link that will do the job perfectly. The power of CSS is there, so you can additionally style the link, making sure it will be easily spotted.

The homepage itself of course does not need the “back home” link, which will confuse the user even more, so be sure to omit it.

8 Responses

  1. Nice post Bojane! Just post a little more frequently so your RSS feed doesn’t just sit in my NetNewsWire… ;)

    Author: Ivan Brezak Brkan, July 7th, 2006 at 20:00

  2. Seriously though, there is a certain texture to the web for those of us who are literate in cyberspace. For your image not to be a link, forcing me to look over the site for a home link is just, well, frustrating. I probably wouldn’t have thought that if you hadn’t written about it though :) I want to be able to feel the links, not have to see them.
    Just dropped in from Lovely Sites. Yours is, indeed, lovely. I’ll be back,
    xx

    Author: Clare, July 7th, 2006 at 23:03

  3. Beautiful blog you’ve got here.

    [damn you geniuses @$!%$@!%]

    What’s the harm in both linking the logo and providing a navbar/menu/sidebar link?

    Author: Tarun, July 8th, 2006 at 7:44

  4. @Ivan: I just might do that :)

    @Clare: thanks for your kind words.

    @Tarun: There’s no harm. I am suggesting that if you link the logo, you should also add a text link somewhere. If you link only the logo, that could in some cases be harmful.

    Author: Bojan, July 8th, 2006 at 11:49

  5. I was going to say the same thing as Tarun. I agree that all sites should have an obvious homepage link in the main navigation, but there is a good reason why the logo/branding area is usually linked to the homepage as well. With css layouts, it’s generally a rule that you should start a page out with some header text with the name of the page and/or site that is linked to the homepage. Since that link is right up at the top of the page, why not use it to add the logo as a background graphic and keep the linking behavior. Speaking of which, why did you decide not to link your logo to the homepage Bojan? I just noticed that you didn’t. Was that a concious decision? Just wondering…

    Author: Jason Beaird, July 9th, 2006 at 0:16

  6. It has sort of become a rule, Jason, but is this a written rule? Is it a web design concept we must follow? A standard of any sort? I don’t think so. It has just become a trend, a trick that’s now commonly used. In the “CSS community”, people expect it. People outside of it perhaps don’t. A
    person who uses the WWW rarely doesn’t. Therefore, if the logo, or the header text (site description, for instance) is the only hyperlink back to the index, the user unfarmiliar with the method may get confused. He or she may struggle to get back to where they started.

    Why didn’t I link the logo? It was a concious decision, because I think I don’t need to link it. I don’t have the IMG element there, anyway, the whole header is just one big background image. I think my visitors can navigate easily without the logo being a link back to the index. You’ve just confirmed that yourself, when you said you’ve noticed it only now :). The first item in my main menu is “Blog Home”, which I believe is quite enough.

    BTW I think you’ve done a good job with your logo and the header, because you have a slogan which includes the word “home”. That word is a clear sign which users can follow. You also have a link back home in your main nav, so users can navigate with ease.

    Author: Bojan, July 9th, 2006 at 1:03

  7. I guess I never really have seen people link the img element. Most examples I have seen for linking a logo has been done through CSS and some sort of method of image replacement. This leaves a text link in the markup but then for the full style gives an accessible text link that can still be read by screen readers, etc.. See my site for an example of this.

    But I do think for the rest of the world that doesn’t know CSS and doesn’t just expect that the logo will be a link, it’s still important to include a “home” link somewhere in the site navigation.

    P.S. Beautiful site design you have here.

    Author: Joshua, July 12th, 2006 at 16:46

  8. Joshua, whether it’s an image replacement of some sort (which is probably the most used technique) or any other method, that doesn’t really matter here.

    As you say, yes it leaves a text link, but it’s visible only with styles turned off. So, creating another way back to home is a good idea.

    Thanks for your comment.

    Author: Bojan, July 12th, 2006 at 17:13

Leave a Reply

Please Note: Your e-mail address is required, but never displayed. Your comment must be approved before it is displayed, so please do not post more than once.

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>