Over the last year or so, responsive web design has become the best option for adapting websites to different devices and resolutions. Websites developed using responsive web design techniques adapt their layouts to display the content on the website in a way that makes the most sense for the real estate available on the screen. As responsive web design has become more prevalent, different techniques have evolved for handling how a user navigates through sites.

One size does not fit all

As screen resolution changes per device, the area in which websites can display navigation changes. Because of this, there isn’t one technique that is a fool-proof way of displaying navigation on websites.

Stacked Links

stacked top links

This has been the most common way to display navigation on responsive websites. This technique is easy to implement and has a large clickable area which aids with usability on different touch devices. On the downside, if you’re working with a longer navigation, the user could be forced to scroll through a long list of navigation choices in order to get to the content on your site.

 

Toggle

toggle navigation

For smaller resolutions, the navigation is hidden and a trigger button appears to toggle the display of the navigation. This technique aims to save real estate so that the user is not forced to scroll through navigation to get to content.­­ The toggle technique can be achieved with pure CSS; however, to create a smooth transition that is supported on most devices and browsers, you’ll want to use JavaScript.

 

Footer Anchor

footer anchor

In this technique, the navigation collapses to a trigger at lower resolutions. When this trigger is clicked, the user is then brought to the footer of the page which is where the navigation lives. The purpose of this technique is to move the navigation to the bottom of the page so that the user does not have to scroll through navigation to get to the content. This is a good solution for sites with larger navigation, including multi-tier navigation. Until this technique becomes more widely used, there is a risk that your users will find this method confusing.

 

Select Menu

select menu

In this technique, the navigation collapses to a dropdown menu at smaller resolutions. Like most of these techniques, the aim here is to save real estate at the top of the website and prevent users from having to scroll through a long list of navigation to get to the content. A benefit of this technique is that it forces the device/browser to use native controls to select an item in the dropdown, which makes it accessible in all devices. This technique may be potentially confusing and also offers very little styling control. It also requires JavaScript to implement and is tough to show multiple tiers of navigation.

 

Flyout

Flyout

This technique hides the navigation on the left side of the screen and uses a trigger or a swipe event to show the navigation. The Facebook iOS application was the platform that made this technique popular. It’s an elegant solution that allows for a lot of navigation and growth. Like most of these techniques, it is a new way of handling navigation so it could be confusing for users.

 

Priority

Priority Navigation

This technique hides part of the navigation on smaller resolutions and shows a trigger to show the whole navigation. The obvious issue with this technique is that you’re hiding potentially important links from your mobile users. This is, however, relatively easy to implement and does not require JavaScript to work.

 

As responsive design becomes more widely adopted as the solution for displaying websites on different devices and resolutions, I’m sure more techniques will arise. For now, these 6 techniques are the industry leaders in how navigation is handled in responsive design. Brad Frost has a community-driven list of examples that can be found here.

For more information about responsive web design, check out our blog, “Responsive Web Design and Its Impact on Mobile”.