Thursday, July 25, 2013

CSS3 Series, Part 3: Fixed headers

Fixed headers are a hot topic in the web design world, and they can be found on all types of websites. As you scroll down the page, you'll notice the header area "sticks" to the top, staying in place as you scroll down. The fixed header is a popular feature for good reason; it can provide a better user experience and improve the overall navigation of a site.

Fixed header benefits

The main benefit of fixed headers becomes obvious when browsing a site that has one: navigation. Especially with lengthy pages, a fixed header makes it easier to navigate to a different page without scrolling back up to the top of the site. This is especially important on one-page sites, so users can jump from section to section more quickly and efficiently.

The website Rockaway Relief is a one-page site using a fixed header to allow users
to easily jump from one section to the next.

Fixed headers are very easy to implement. They can be accomplished with just CSS, making them a simple addition to a site. However, many sites take it a step further and add more advanced features. For example, take a look at Daniel Filler's portfolio site. As you scroll down, a condensed version of the site's header fades in at the top of the page. Simple effects such as this can be added to make a fixed header function more smoothly or to add more interactivity to a site.

A fixed header can also be used to help draw attention to branding. On many sites with fixed headers, not only is the navigation included, but the logo is as well. As a user is browsing your site, they will be consistently associating the content with your brand. The website Grain & Mortar takes this approach, with a fixed header that always includes their logo.

Grain & Mortar displays their company's branding prominently in the fixed header.

Fixed header design issues

One of the biggest complications that you may run into when implementing a fixed header is screen space. It's important to take the overall design of your site into consideration, and determine if there is adequate space for a fixed header. It's important not to sacrifice design for a "cool" feature. If you know you want to implement a fixed header, first make sure your site will actually benefit from one, and then design your site in a way that will maximize the benefits of having a fixed header.

On some sites, fixed headers can be an intrusive feature, getting in the way of the content. You don't want the header to distract from the overall purpose of your site. Think about what your users' purpose may be, and what content they will be looking for on your site. Make sure your fixed header is helping them get to where they need to be instead of interfering.

Mobile devices need special attention as well for sites with a fixed header. There is a lot less screen space on mobile, so every pixel counts. If you know users will be accessing your site from a mobile device, take that into consideration. One solution may be to only have a fixed header on the desktop version of your site.

The mobile version of the Happy Cog site (left) drops the fixed header
from desktop version (right) entirely.

If you're going to do it, do it well

If you're planning on using a fixed header on your site, start by taking a look at some of these great examples:

About the author | Kayleigh Circle

Kayleigh is a web developer at TBH Creative, specializing in front-end development and responsive design. She likes to blog about a variety of web design topics, including design tips, the latest trends in the industry, and how to make your website more successful.

View more posts by Kayleigh

Subscribe to this blog