Website Navigation - Responsive Design

Published: 08/04/2014

Navigation bars are generally designed in two ways - you'll either have navigation buttons stacked vertically or you'll have the buttons lined up side by side horizontally. Each option presents its own set of difficulties. In the past, you didn't have to put a whole lot of thought into how the navigation was organized beyond where it was on the page and the colors of the text and background because you were only building the website to work for one size of display. However, now that we are developing sites that need to change in height and width depending on the display dimensions of the device used to view the website (computers, tablets, and smartphones), it has made setting up the navigation more complex.

I usually prefer navigation that is set up to run horizontally across the page. I personally like the way it looks, but there is a problem with this option. Fonts don't shrink and expand like an image will. When you pick a font size, it stays that size no matter whether you're on a computer or a phone. To solve this problem, we use media queries to tell the font size to change when we get below a specified width, or breaking point, which is basically the point when we find the navigation gets bumped down to the next line because it's too wide for the page. At this point, we will tell the font to be smaller so it will still fit on one line across the page. However, you can't just keep making the font smaller for a phone because the font would become much too small to read. With most sites, you'll find the navigation changes for mobile devices to a hidden menu that comes out at the push of button. Most mobile menus are stacked vertically because you can always keep scrolling down. Although technically we could make the site wider than the display of the device, people are not used to that and would miss the content that is off the page. Since people are already accustomed to scrolling down the page to find additional content, we can continue the height of the page past the height of the device without confusing website visitors.

Vertically organized navigations certainly have their advantages, particularly for mobile devices that aren't very wide. Using a vertical navigation on a full site, however, can present its own problems. Typically when you have a vertical navigation, it is styled within the website to be the same height as an object next to it, like an image or a slideshow. But as you add/remove options to the menu, it can easily become taller or shorter than the image/slideshow positioned next to it, and as the width of the display changes, the image has to shrink in order to stay inside the screen. That not only changes the width of the image, but the height as well. Since fonts don't shrink and expand like an image will, the navigation is suddenly much taller than the image you have next to it, making the site feel disproportionate. We're basically running into the same situation - the navigation is too big (in this case, too tall) for the area it was designed for. Once again, we would change over to the system on mobile devices where the menu is hidden and you have to bring it out by clicking on the menu button to leave space for the actual content of the site.

Although making the navigation fit the screen isn't usually very difficult, it can be time consuming, and you can't mess up the navigation. Unfortunately most people have seen a menu that breaks and jumps down to a new row or goes outside of the area that was designed for it. This one simple oversight will make the site appear cheap and unbalanced, which makes keeping the formatting of the navigation very important. Who would have thought so much would go into making the buttons line up?


Author: Brice Wilson
Position: Front End Developer
Brice Wilson works at Business Promotion as a Front End Developer. In his free time, he likes playing soccer, rock climbing, and binge reading.

comments powered by Disqus