The case for vertical navigation

widescreen website navigation

Primary navigation plays a large role in how we organize and optimize our website layouts. It's a required element, yet it often seems that it consumes space that could otherwise be used to convert a customer. By placing primary navigation at the top of the page, that leaves less above the fold for important calls to action.

One seemingly clever solution that many sites employ is to eliminate the primary horizontal navigation bar, in favor of a left-side vertical navigation element. However, the vertical navigation consumes horizontal space, forcing more line wrapping than with horizontal navigation, and hence, less room for important calls to action.

But let's not entirely discard the idea of vertical navigation, after all displays, are getting wider, not taller. The problem is that although displays are getting wider, the ability for the human eye to scan wide blocks of text remains poor. To solve this shortcoming we can, in most cases, move the vertical navigation outside of the standard website width.

By most cases, I'm talking about the fact that the majority of web users today are using a display that is much wider than the standard website width. While the standard website width is 960 to 1,000 pixels wide, the vast majority of displays are now greater than 1,200 pixels wide. For these users, that's at least 200 pixels of empty space; space that could be used for vertical navigation.

vertical navigation wide screen

If you think this method is worth a split test, here's a quick rundown of how and when to display the vertical navigation. Pass this on to your web developer, who may be familiar with the basic methods outlined, but hadn't previously thought to use them in the context of navigation location.
 

Developers

There are two ways to go about this:

  1. Ignore users with older browsers, in favor of a more robust solution
  2. Try to account for as many users as possible, using a less favorable approach

The CSS way (preferred)

The CSS way involves using HTML 5 / CSS 3 Media Queries. The downside to this approach is that you leave any user with a browser that doesn't support CSS3 behind. I could not find an actual statistic regarding the percentage of online users who sport a CSS 3 capable browser. But, by tallying up the percentages on modern browser use, it appears to be in the 70 – 75% range.

So, for a method that is a little more controlled, and it more future-proof (soon all browsers will support CSS 3, but not all will have JavaScript enabled), go with this approach:

The CSS Code

@media only screen and (min-width: 1350px) {
       ul#navigation { position: fixed; top: 0; left: 50%; margin-left: -700px; }
        ul#navigation li { display: block; }
}

 

The JavaScript way (less favorable)

You may wonder why this method is less favorable, considering that it works for over 95% of users. That is to say that less than 5% of internet users disable JavaScript within the web browser.

The primary reason that this approach is not as solid as CSS is that it's not a typical use of JavaScript. Rarely do you want to use JavaScript for layout purposes, that's a CSS job. And when you have two technologies performing the same task, things tend to get confusing for the current developer, and even more so for future developers.

The second reason that JavaScript is a less favored approached is that within a couple years, when the percentage of browsers that support CSS 3 breaches the 95% mark (speculation), you'll now have an approach that actually works for fewer people.

That being said, you're not going to break the moon by using JavaScript, and it may be very important that this approach work for as many users as possible.

The JavaScript method is simple, and preferably, even involves a little CSS. Using the same CSS as before, only modified slightly:

The CSS Code

ul#navigation.vertical { position: fixed; top: 0; left: 50%; margin-left: -700px; }

ul#navigation.vertical li { display: block; }

The JavaScript Code

if (screen.width > 1350) {
      var navigation = document.getElementById('navigation');
      navigation.className += ' vertical';
}

 

 

Resources

Current monthly browser statistics