Looking for best practices when designing a persistent navigation like below: NFL (the scores in the banner)http://www.nfl.com/
Facebooks blue header http://www.facebook.com/
Creatticas header and left buttons http://creattica.com/
2
-
1I think we need more context here to be of help with specific best practices. It really depends on the type of site, the content, page layout, etc.– DA01Nov 8, 2011 at 3:58
-
Its for a web app. For a health/fitness website. The navigation would house pages and well as buttons that are used for specific actions like 'logging an activity'. The point would be to have those buttons visible at all times, since they are the whole point of the site.– Christie DayNov 8, 2011 at 13:54
Add a comment
|
1 Answer
I haven't seen any formal write-ups on this convention, and I think "best practices" are a little dubious given the variety of UI layouts and aims, but having recently designed one of these I would offer a few pointers:
- Keep the navigation compact. Persistent nav takes up real estate, effectively permanently stealing that space from content. In our case, we very subtly compressed the header as it bumps the viewport and hide unnecessary elements. Your example at Creattica already has a fairly compact header, so this wasn't necessary
- Make transitions subtle. If you do change elements in the nav as you scroll down, try to be subtle about it - a well-done transition should be barely perceptible. TechCrunch has a very noisy transition that I find distracting - here it is at it's most awkward moment:
Note how the logo is a mess at this moment. They do have a very compact header nav once the clunky transition is over with.
- If relevant to you, make sure it degrades gracefully. In our case, we needed to support down to IE6, which doesn't have
position: fixedCSS support and needed a javascript shim, which in turn proved to be too taxing on the rendering and caused flashing, so we just turned this feature off for browsers without that CSS attribute.
answered Nov 8, 2011 at 18:17
