Fifteenth – the importance of navigating horizontally

A few weeks ago, we were given an article to read, more importantly to look at. It was “35 creative and effective website headers”  in Design Tutorials. There are some superamazing headers, that for me challenge the very definition of being a header, unless we use a very loose definition of “header-ness.” Some have very minimal navigation, and they liberally interpret horizontal navigation. Within that upper rectangle, called header, there are many non-horizontal solutions to present the navigational choices. And that upper rectangle, called header, is often times not so distinguishable from the rest of the page and not so much upper, than spreading towards the center of the page.

In this post I am to discuss the following question: Is it wiser to go large on a header or have a smaller navigation to allow for original content to sit ‘above the fold?’ This question is connected to the problem that every web designer faces: the economics of the 600 pixel average browser height. How to make an impression in such a restricted space despite the underlying understanding that the web is an infinitely flexible space that can contain theoretically infinite content.

The case study to read was about the change that designers made in CNN’s website when they decided to move the sidebar navigation to the top of the page and turn it into the header. Joshua Porter’s “The Challenges of Moving to Horizontal Navigation” details the transformation and underlines that it involved many word choices and choices of elimination of content. Though this change in the  CNN site constitutes a milestone in web history, I do not think, it serves us a universal lesson. To me it is important, since it is a news site, but for others, who are planning portfolio sites, the case might be different. Providing news means providing information. A navigation bar may help the reader to get the required information in a shorter time, which may work in favor of the site. I guess, this is one of the rare contradictions of the web: the easier and quicker one can get from a site what he or she needs, the longer time and more importantly, the more often, he or she will spend looking and reading that site. And here the presentation of detailed choices in navigation kick in. So the header will be “reduced” to functional buttons in order to leave more space and accent to the news content. The designer can still face it as a challenge and not necessarily as a drag.

But in other cases, the visual look of the header carries as many and as important information as the body itself. I guess, than it is not a bad choice to allow the header to speak for itself instead of introducing the content of the site. This is an example to that from the above mentioned article:

I do not think, it would be a wild exaggeration to say that the header is disproportionally large and that it is great. It barely has any navigation option, yet works as a gate to the inner content of the site.

Having all this above said, I guess, I am opting to give a Solomonic answer to the question above. I would say “It depends.” In case of a site that provides a lot of information, i. e. it tells the news, lists items to sell, lists providers of services, or dishes on the menu, navigation is very important, and headers are likely to be “sacrificed” for the task to “host” the navigation. In case we are talking about a site that is all about the look: a portfolio, online game, and I do not know what else, the header can be treated differently without risking to build a dysfunctional site.


About these ads
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: