Web design trends can be dangerous. I realize that’s a strong statement, especially since no one has ever been physically harmed by an improperly used design trend. Nevertheless, implementing a trendy design feature without considering if it’s a good fit for your site can get in the way of one of the primary goals of all marketing websites: to provide easy access to information. And annoying your potential customers can cost you revenue.
The brief history of the web is littered with well-intentioned but not always well-implemented trends: flash-based splash screens, scrolling text banners, animated GIFs, overused stock photography, parallax scrolling.
One of the more recent web design trends is the use of fixed position mastheads, or “sticky” headers. These headers stay in one fixed position on the page and follow the user as they scroll down. Some sites will also fix the position of other elements such as secondary navigation, social sharing links, or calls-to-action.
Fixed position headers come in three flavors:
1. The header stays in one fixed position at the top of the page, maintaining all of its content and relative dimensions
2. The header compresses in order to preserve screen real estate and header content is either compressed or reorganized, displaying only key elements
3. On down scroll, the header moves with the rest of the page content but a compressed version of it appears in a fixed position when the user begins to scroll back up the page
A fixed position header can be a great asset to your site but there are several things to consider in the planning stages. All of these fall under the heading of user experience (UX). Does a fixed position header enhance the user experience or get in the way of it? Some of these questions can answered by creating a quick interactive mockup using tools like UXPin or InVision. This could save you hours of development and coding time.
Consider Your Content
Do you have a content rich site with deep scroll pages? A fixed position header can be useful if you’re scanning a deep information page and need to quickly navigate to another section of the site.
Consider the Context
Is there contextual information that would be useful to have in a fixed position? Providing an alternate or secondary header that contains anchor links can be useful for navigating deep information, like a product detail page.
MV-1, which builds wheelchair accessible vehicles, uses a contextual navigation for the Features section on their product detail pages. It snaps into a fixed position just below the main navigation bar once you scroll past it.
Consider Conversion Points
Is there a call to action item that would be useful to always have in the viewer’s line of site? You may want to include a “donate now” or “talk to support staff” button in a fixed position header so the viewer has easy access to these key marketing and service elements.
Consider the User Experience
Are you willing to suppress content in order to reduce the size of the fixed position header? In a similar way that “above the fold” has been translated by clients to “make sure all of the information is in the top third of the page,” maintaining all of the original content in the fixed header as the viewer scrolls will make using the site a bit difficult.
Be willing to reduce the header content to just a few key elements as a way of maintaining a good user experience (fewer choices are generally better). Think of it as taking just a few belongings with you on vacation instead of the entire contents of your house.
In that regard, you may want to use a fixed header scenario as a starting point for the information architecture and see if you can reduce the default header content down to just a few necessary elements. Do those social network or the employee log-in links really need to be in the header or can they reside in the footer? Big Duck Marketing (below) uses a bare bones fixed header and places all their secondary information in a robust footer.
Consider Mobile Devices
Are you going to maintain the fixed header for all mobile devices or suppress it for small tablets and smartphones? If you’re not building your sites using responsive design you’re limiting yourself (and your prospective clients) to the web of 10 years ago. And, given the limited screen real estate of a smartphone, think carefully about whether a fixed header is going to enhance the user experience or simply reduce the viewing range for content by a third.
The examples below reflect poor planning in regards to fixed headers. While the desktop headers for both sites are fairly unobtrusive, the mobile versions are not so elegant. The sticky header of a high-end coffee site (bottom left) takes up 50% of the viewport on an iPhone. While the sticky header for an illustrator’s portfolio site (bottom right) fairs a little better on mobile but, with a little extra effort, the header could have been reduced in height by half.
Fixed headers can be a real enhancement to your site if you take the time to consider how best to implement them. Have you seen any examples (good or bad) of fixed headers in the wild? Let me know in the comments section below.