Usability tip: Implement web page titles as inverted breadcrumbs

In the past, I implemented web page titles (i.e. the code in the <title> tag) the same way that one would implement a breadcrumb – that is, from the least-specific to most specific. For example:

Web Site Name: Category: Page Name

That is similar to how a breadcrumb would look:

Home > Category > Page Name

Note that I said this is how I did it “in the past.” Today, I read 9 Common Usability Mistakes In Web Design over at Smashing Magazine, which states in mistake #3:

Putting the name of the website last puts more emphasis on what the page itself is about, rather than on website branding, which is still there.

This makes perfect sense, and the article illustrates the idea well with screenshots.

Needless to say, I’ll be refactoring web projects to invert titles at my earliest convenience.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>