Design Element Spotlight: The Sticky Navigation

Est. Reading Time: 1 minute

In a world where speed and ease of use matters, sticky navigation bars are proving to be a valuable interface tool on the web.

I’ve rounded up a few examples of static of stick header and footers over the past week or so:

1) http://gillesmanzato.com/

2) http://webdesignerwall.com/

3) http://pinterest.com/

Pinterest’s is so wonderful because it had a header that scrolls and only the nav sticks. This means that the header section is more flexible and you are only sticking the section that people will actually need after they have scrolled.

4) http://www.bloom-london.com/

5) http://www.flickr.com/

6) http://www.hulu.com/

7) http://www.google.com/nexus/

The Cons:

Some of the issues with using a sticky header is that it does limit the design of any layout. You are confined to having the header exist in a short space. The Pinterest approach of having a scrolling header, but a sticky nav can resolve some of these issues and offer a bit more flexibility, however.

There is also the issue of browser and device support. It would definitely be something to keep in mind. Not all of your users are going to have the same experience with this technique.

Sticky footers and sidebars are also becoming more and more prevalent. It does takes a bit of discretion to use these things to that they do not become a nuisance and actually enable the user to have a better experience with the site.

One Trackback