How to do a header without a header – tiny solution to a big problem

I recently had a post in which I talked all about how the name of the site should really only use <h1> on the front page, and on the other pages it should take a backseat to whatever header the content has (post title for example). Well, I just ran into a problem related to that approach with the new design. Before I proceed though I must confess, the title of this post is sensationalist because the problem isn’t big. The issue is with the category pages – my design does not include a category title on a category page.

Like on the front page, the category page has the title of the first post right below the header and as I was designing it I decided that it would be awkward to stick a category title between the header and the title of the first post. Since I wasn’t going to clutter the page with a category description, it would end up with two titles in a row, which somehow seems wrong. The category menu itself highlights the current category (so the user isn’t lost), but I also realized that since this isn’t a home page the site name no longer was using <h1>, and with post titles using <h2> tag this was a page without a proper header, which is really wrong. So I needed to bring <h1> to the category page and it only made sense that it should contain category name. But how…?

After looking around the page it hit me. The subtitle of the the site’s name – Web Developer, Designer and Enthusiast – why not replace it with the category name. It’s not very visible but in this case I don’t think that’s very important – the category posts really speak for themselves. At the same time, if I keep the site’s name as <h1> and the subtitle being part of it, I’ll have the category name as part of the header. So now, whenever the user is on some category page, for example JavaScript, in the header they’ll see this.

Category title example

Consistent design, clear message, makes sense to the user and a search engine sees it all as one big <h1>, it’s a win-win.

 

Web Developer, Designer and Enthusiast

Be the first to comment on this post

Leave a Reply

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>