As a web developer I am conscious of not only what I deliver to the end user, but also in the method I do so. Personally, I have a strong aversion to anything in my browser window that I do not have control over. Although I understand the need, at times, to have static content on a website, this shouldn’t be at the cost of irritation to the end user or sacrifice valuable site real estate.

The two most popular sites (those of course being Facebook and Twitter) have fixed headers. So if they are doing it, it must be a great idea that works well for all sites, right?

Wrong.

While employing a fixed header has some definite advantages, it is extremely important to understand the disadvantages as well.

ADVANTAGES

Status messages – Alerting the user of important changes or issues, such as site downtime or that you no longer support IE6 (granted, you shouldn’t be supporting IE6 – yeah, I said it – more on that in a future post).

Navigation – quick access to navigation is important so the user can get around. The more functional a site, the better.

DISADVANTAGES

Toolbars – It  is important to note that several users these days end up with a lot of toolbars on the browser window. This is fixed content on the browser window that will further reduce the real estate available to a website. This in turn leads not only to less of your site being viewable, but an extra degree of frustration to the end user. While it is an easy task, many do not know how to disable (let alone fully remove) extra toolbars.

most toolbars today have their own dropdown menu to disable/remove them. If not, you should be able to do so via the following:

  • IE – click on tools -> manage add ons -> Toolbars and Extensions
  • FF – click on Friefox drop down -> add-ons -> extensions
  • Chrome – click on wrench -> tools -> extensions
  • Safari – preferences -> extensions

Flash – Yes, the big evil flash that not only Apple doesn’t like, but most people don’t care for either. You will notice a lot of fun things happening if you happen to have flash content on your site and a fixed header or footer div. Sometimes the flash content doesn’t want to scroll under. Sometimes it will scroll under but cause weird ripple effect in the content above. What happens when Flash content collides with fixed content is, unfortunately, unpredictable.

Design – If your site has very strong colors or graphics, take a moment to think about how this affects the end user. For instance, if your header is a neon green (not only do you need a new design), how long do you think someone is going to tolerate it staring back at them? Remember your goal is to keep people on your site.

If you decide on a static header for your site, take some time to really think about if the information within it and if it is absolutely necessary to be  persistent. And most important:

  1. Give the end user an option to close it (provided it isn’t your main navigation). The ubiquitous little ‘x’ in the upper right corner has now all but become convention, and is an excellent implementation.
  2. Keep it minimal! Note that, at the time of this writing, Facebook’s header is only 38 pixels high; Twitter’s is 40 pixels.
  3. All of the above applies to fixed content in general. Sometimes sites have fixed footers. While theses scenarios are not nearly as common, it is important to keep the above in mind for those as well.

Do you have a static header on your site? Thoughts?

Advertisements