2012_featured_starbucks Design

10 Tips How To Handle Responsive Navigation Menus Successfully

Responsive web design is quite a new approach to handling your website on different devices. While your content stays the same, the layout changes according to the screen resolution. Responsive design allows you to create a unique user experience on different platforms and at the same time keep maintenance efforts at a minimum.

There have been numerous articles lately that cover this topic. Some help us understand the anatomy of responsive websites with guidelines and tutorials, others shed light on the role of media queries, and yet others offer inspiring collections of responsive designs.

Let’s not focus on these more general aspects now. Instead, let’s take a look at one of the main challenges that come with responsive web design: responsive navigation menus. The desktop version of a website offers enough screen real estate to feature multi-layered navigation menus. However, the smaller the screen, the more difficult it gets to display the same content in a clear and usable way. Here are 10 tips how to effectively design your navigation menus both on big and on small screens.

Prioritize your content

Probably the most obvious way to go about the limited real estate on small devices is by prioritising your content. Define what content is important for your different users. In what kind of situations do people access your site from a mobile device? What are their goals and what content do they need to achieve these goals? Here are two examples of websites that simplify their navigation for mobile devices by prioritizing their content.

Only include high priority content


Prioritize your content and leave out less important items on smaller devices.

The website of The Sweet Hat Club prioritizes and rearranges the main menu items for mobile devices. Instead of showing all items lined up horizontally, the mobile version features only a few items in a vertical list. While the Twitter and Facebook links have been removed completely, the “Join” link has even been upgraded. It is no longer a common text link, but a colored button that draws immediate attention.

Show high priority content at the top


Place your most relevant content at the top.

The website of Barack Obama puts a clear focus on donations and support for Obama’s election campaign. The desktop version features three main content items at the very top, of which two offer information regarding the campaign. On the the mobile version, though, the entire space is taken up by a donation button, followed by content that only focuses on getting people involved. General information about Obama and his campaign are pushed far down the page.

Handle limited space with creativity

It’s a fact that there is less space on a small device than there is on our desktop. Designers are challenged to rearrange the layout of a site accordingly and to find room for all relevant content despite the screen size. At the same time, it is important to keep the look and feel of a design the same and reassure visitors that they are still on the same site.

Adapt your design to the space available


A flexible design allows you to keep the same look & feel across different devices.

The website of Oliver Russell does a great job in keeping up the same look and feel for different screen resolutions. Both the header and the navigation menu can easily be rearranged without the need to leave anything out. The words of the different content items simply turn by 90 degrees, allowing the colored backgrounds to be pushed even closer together.

Some designs works on all screen sizes


Choose a design that can easily be rescaled.

Flip has chosen for a very simple, yet smart navigation menu for their site. The clean layout and the clear colors remain the same across all different devices. What seems like a handy color encoding of different content items on the desktop version, is really a clever way to turn simple text links into buttons. On a mobile device, the navigation menu works nicely because the colored areas allow for imprecise finger taps.

Dropdown menus

Dropdown menus are a convenient and very popular way to structure complex content. Oftem, complex website even make use of drop down menus with multiple layers. On smaller screens, and more than that, on devices that rely on touch interactions, drop down menus need to be met with caution. There are no hover effects and the screen real estate can be very limited. Here are two examples of websites that managed to use drop down menus for their mobile sites in a very usable way.

Stick to the structure people are used to


Remember that hover effects don’t work on mobile devices.

The new site of Microsoft is a great example of how to arrange complex content on a small device. On default, the navigation menu is not displayed at all on mobile. Only when tabbing a little icon in the right top corner, the first content layer drops open. When tabbing on one of the items, the second layer drops open, giving the user a very clear overview of the available content.

Offer clear and finger-friendly links


Make sure that your links are big enough for imprecise finger taps.

Starbucks is also a nice example that shows how to use a drop down menu effectively for small devices. Again, on default the menu is hidden behind a small icon. This way, it does not interfere with other content. Once the user needs to navigate the site, they simply tab the little icon and the menu drops open. The different items are big enough to easily select them with your fingers. Once a content item has been selected, the menu disappears again.

Reposition your navigation menu

Another way to go about translating your navigation menu to smaller screen sizes is to let go of familiar structures. Make sure you don’t confuse your users with this, but it might just be the best way to adapt to different devices.

People navigate your site step-by-step


Offer your content sequentially, not all at the same time.

The website Boston Globe offers a huge amount of information. Not only the first, but also the second content layer contains a lot of items. Their solution to keep it as simple as possible for their readers to navigate the site on mobile was to split their first and second content layer. Visitors first select an item of the first layer, which directly brings them to that site. Then, there is a second drop down menu with the second content layer belonging to that specific category.

First welcome your visitors

Placing your navigation menu at the bottom of your site forces your visitors to first look at your site before deciding where to go next.

The website Brickartist.com is an interesting example of how to rearrange your navigation menu on mobile. On the desktop version, there is a very clear and prominent navigation menu. However, on small screens this navigation menu is moved all the way to the bottom of the site. This way, the visitor has to look at the header and some content first, then he can decide where to go next.

Abandon navigation menu

You can also decide to abandon your navigation menu completely. Of course this is only an option if your content is not too complex and if people can easily find their way around your site.

Guide your visitors


You might not need a navigation menu at all, if your content is straightforward.

On the desktop version of the Happy Cog website, you can either choose one of the main content items from the navigation menu, or you can scroll down the page to see the different items one by one. On the mobile version, there is only the second option available. The visitor has to scroll down the page to see the different content. Then, for every content category, there is another link for more details.

Make it visual


Use visuals to help your visitors find their way around your site.

The website of Mobile Web Best Practices also shows a clear navigation menu on their desktop version. The different categories have both names and a little icon to identify them. Besides, the categories are repeated below the header. This time the icon is much more prominent than the text. On the mobile version, the menu from the top just disappears and the user has to do with the big icons to navigate the site. The site goes from two different navigation alternatives to one. Still, the categories are clear and the style and icons used are consistent.

7 comments

  1. Cathy

    Great summary and examples! Thanks Sabina.

  2. Clinton

    Great article. Like the example of hiding the social share buttons as these are catered for natively on many devices.

    With regards to other techniques on displaying navigation on responsive websites, I have set up a calculator for responsive ‘full width’ navigation. You can find it here…https://github.com/clintonbeattie/flexinav

  3. Andy

    Thanks for the case studies. They are assistive for a designer, tackling the “how-best” question. Much appreciated, Sabina.

  4. Skweekah

    Pretty cool. Really creative use of space. Thanks for the roundup.

  5. DMD Media

    Thank you for your link Clinton!

  6. Hamideh

    thank you. it was a helpful article.

  7. Abe

    Great look at the obstacles and varied solutions to navigation consistency across devices. Thanks for all the examples!

Leave a Reply

Your email address will not be published. Required fields are marked *