Are fixed headers a waste of space?

At this moment I’m trying to decide whether we should recommend using a sticky header for a new web project.

My immediate instinct is simply “yes”.

But is that down to personal taste? I do like the ability to jump to any part of a site, especially if I’ve scrolled down whilst reading through a long article. So yes, this is my personal taste.

For me, as much as I position myself as an expert when working on a client project, my word should not be taken for granted. Sure, I know what I’m doing, I’ve spent over 12 years doing it, but I don’t know everything. Far from it.

Things like this should be researched and backed up with facts, or at least to provide a context as to for why one solution is more suited to a particular application than another.

My personal taste should not impact on the best solution, in the same way we don’t like clients saying “I don’t like the colour green, change it to pink. I like pink. And so does my cat.”.

Some background reading

My first stop was an article on Smashing Magazine titled “Sticky Menus Are Quicker To Navigate” by Hyrum Denney.

I’d recommend reading the article if you’re interested in this, but for simplicity I’ll list the main points that stuck with me:

  • 22% quicker to navigate.
  • Of those that had a preference, ALL of them preferred the sticky navigation.
  • Design limitations.
  • Distracting and intrusive if not done carefully.
  • Mobile compatibility.

Also in this article was a link to “The trouble with sticky headers” by Marty Moore.

Marty looks into the issues that come with using sticky headers, and touches on things like:

  • They are intrusive
  • They block content
  • They should be as small as possible
  • Using for branding and navigation is a bad idea

It’s the last one I want to expand on.

Sticky headers for navigation. A bad idea?

If you have a read through Marty’s article, there’s one point that doesn’t sit right with me:

People come to your page for content, not navigation.

In essence, I believe this is true, but without navigation, how do people find the content?

This is where some clever spark will notice that I don’t currently have a typical main navigation on my site. for now, this is purely a blog and I don’t feel to much of a requirement for a main navigation menu until I expand the site itself.

But a large site, with many top-level areas, and sub-section upon sub-section of content? I’d want to be able to jump to a section in one simple interaction, not have to click down through many pages to get to the information I’m after.

So, are they a waste of space?

In my opinion, no.

The greater benefits to experience of the user in allowing them to be able to navigate from anywhere in the site to any other area of the site, outweighs that of the amount of screen real estate taken up on a mobile device. Just don’t take up too much space.

On a desktop-sized view of the site, the impact is less about space and more about the fact that the navigation is always in view. Just don’t do anything flashy that will distract the user from the task at hand.

Further reading if you really want to get into it

There’s a great article by Luke Wroblewski on A List Apart, if you really want to dive further in to the subject, called “Organizing Mobile“.

For the more technical aspect on mobile browser support when using position:fixed, Brad Frost has made a great video on Fixed Positioning in Mobile Browsers showing the repercussions on different devices.

2 thoughts on “Are fixed headers a waste of space?

  1. Personally i think fixed headers on smaller devices are a bit of a minefield and should be avoided as a permanent on screen element, however I also believe that on of the best alternatives is to have a fixed navigation / menu link. That way the user has consistency and an accessible route to navigation without giving up a whole portion of the screen to something that they already know exists.

    While most situations are catered for with good ia, I would guess that a fixed link to nav as a get out of jail free will almost always be appreciated.

    • A very good point, Dan. It’s not necessary to use a full-width header if you have a small link which expands to hold the navigation menu. And as you say, you’ll be taking up a smaller portion of the screen, a thumb sized area, on mobile devices with that solution.

      I also agree with the minefield of a sticky header on mobile devices, as shown in Brad Frost’s video that was linked in the article, but I hope that browsers will catch up in the long run.

      As long as there’s on screen access to the navigation at all times, not necessarily taking up the top 50 pixels and across the full width of the screen, then you can still have the benefit of faster, friendlier navigation.

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=""> <strike> <strong>