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.
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.
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.
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.
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”.