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
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
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.