What is best practice for designing a Persistent Navigation (or navigation that stays visible and fixed when the user scrolls)

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/


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:

What is best practice for designing a Persistent Navigation (or navigation that stays visible and fixed when the user scrolls)

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: fixed CSS 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.
Category: interaction design Time: 2011-11-08 Views: 2

Related post

  • What is best practice for designing form error messages? 2012-09-26

    I've seen quite a lot of research on form design, but so far, I haven't come across any studies on error message design best practices. The only piece of advice seems to be that each error should clearly be associated with the invalid form field that

  • What are best practices for designing Sharepoint sites? 2012-02-27

    I'm putting together a document for our Art Directors and Creatives for what works best and what might not work best when designing for a sharepoint site. Sharepoint obviously lets you customize CSS and use custom master pages, but is there anything

  • What are best practices for (html) email digests? 2011-12-07

    Should Digests Emails (html version) contain a summary with anchor links? I get digest emails from Yahoo Groups and they contain a summary of messages at the top. Clicking the link in a summary takes me to an anchor within the email, so I can skip ri

  • Best practices for designing a finance dashboard 2012-01-31

    I'm creating a finance dashboard that allows the user to drilldown further into various kinds of metrics. Does anyone know of any best practices for designing something like this? I'm also looking for any reference sites that offer more information o

  • What are best practices for package authors to deal with package conflicts? 2013-02-24

    One occasionally encountered problem with LaTeX is incompatibility between packages. What are best practices for package authors to deal with package conflicts? For example: What is the best way to deal with package option conflicts? How should packa

  • What are best practices for defense against CryptoLocker type threats in an Active Directory environment? 2014-05-12

    What are best practices for defense against CryptoLocker type threats in an Active Directory environment? Are there Group Policies that could help? NTFS permissions? Anti-virus software? --------------Solutions------------- The biggest one is backups

  • What are best practices for in-app Facebook share? 2015-08-27

    What are best practices for implementing a share on Facebook feature in my app? I would like to enable users to share portions of my app (selected views) on Facebook. --------------Solutions------------- I think it depends what you're trying to do; a

  • What are best practices for securing source code on a development network? 2009-11-24

    At my company we are very protective of our source code. We have satisfied our paranoia by setting up a development LAN that we air-gap off from the Internet and the rest of our company networks. Within the development network, we have a few secured

  • What is best practice for UX surveys of a mobile application? 2012-06-17

    I developed an Android application and I want to make a survey/questionaire about the usability, user interface, user experience etc. of my application to get some feedback from users. But I don't know which kind of questions to ask... I would like t

  • What is best practice for the sending behaviour of contact forms? 2012-06-29

    In a recent question I posted that one of my favourite patterns for a contact form was to sit it in a fat footer so that it was present on every page. (Edit - This does not have to be a ploy to hide the email address which can be posted elsewhere on

  • Best Practice for designing UI for a multilingual site? 2012-09-02

    I'm in charge of UI for a company that offers a brand monitoring and social media analytics for international clients. We currently offer the system in 3 different languages, but this is expected to grow. I'm looking for some guidelines or heuristics

  • What are best practices for blocking UI when application is busy 2013-08-08

    I'm writing a web app using Twitter Bootstrap with PHP on server side. My app makes regular ajax requests via jQuery and i want to disable certain parts of the UI until the server completes processing and hands back the control to Client-Side. I wond

  • What are best practices for implementing ACL 2014-05-01

    I have a website that has certain menu items that need to be hidden from end users. The web site has PHP in the front-end and Java and Spring in the back-end, deployed on a Linux OS in a VM infrastructure, although the full technology stack isn't ful

  • What is best practice for consistency across different products? 2015-01-06

    We have a debate in the organization (a small startup) on what should be consistent across our two web based products. However, the target user group is different for each product and the use cases are completely different, e.g. use cases are for a d

  • What are best-practices for personal photo organization in Aperture? 2011-04-12

    I'm curious about best practices for photo and project organization. I'm starting to have too many projects to just have them listed by date, like iPhoto does. I've recently switched to Aperture, and see that there are endless ways of organizing phot

  • What is best practice for versioning SPD workflows/forms? 2011-12-05

    Is there a recommended best practice for utilizing version control (SCM) when creating or modifying workflows or InfoPath forms from within SharePoint Designer 2010? --------------Solutions------------- There isn't any good way of versioning workflow

  • What is best practice for test failures that have a low priority fix? 2012-04-11

    If I have a test that fails due to a known bug, but that bug is deemed lower priority to fix than other work, what should be done with the test? I can think of 2 options: Leave the test in the test set. However now every time the test set is run the

  • What are best practices for testing programs with stochastic behavior? 2012-10-18

    Doing R&D work, I often find myself writing programs that have some large degree of randomness in their behavior. For example, when I work in Genetic Programming, I often write programs that generate and execute arbitrary random source code. A proble

  • What are best practices for managing SSH keys in a team? 2013-01-23

    I work with small teams (<10) of developers and admins with the following characteristics: Most members of the team have >1 personal computer, most of which are portable Team members have access to 10-50 servers, usually with sudo I think this is pr

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C) avrocks.com, All Rights Reserved.

processed in 4.838 (s). 13 q(s)