9 do's and don'ts of responsive design for navigation

    Websites need to be accessible everywhere, on all platforms, not only for the sake of a seamless user experience, but also for SEO optimization. Check our 9 do's and don'ts for designing your navigation for responsive websites.

    Subscribe to our blog

    It all started in 2015 when Google released Mobilegeddon, a mobile-friendly ranking algorithm created to give a boost to mobile-friendly pages in Google’s mobile search results. Search engines nowadays expect sites to be accessible on a wide variety of device dimensions as part of their SEO optimization strategy. From traditional computers and tablets, to the small screens of low-end smartphones, websites need to be accessible everywhere and on all platforms. In this post, we'll be looking at the do's and don'ts of designing navigation for multiple devices.

    How to approach complex navigation on responsive websites

    There are many aspects to take into consideration when creating websites for many different types of devices. Not only should the design fit the desired screen sizes, but, more importantly, content should also be specifically tailored to the devices in which the site will be displayed on. Jan Lemmens commented that responsive websites need a well thought out content strategy.

    Content hierarchy makes navigating a site logical and easy, and as such, is very important to bear in mind. There are different ways to go about this, but we'll assume three major categories: a flat list, a tree hierarchy and a tag based structure. In a flat list, all your pages are on the same level, there are no child or parent pages and all of them will have other pages as their siblings - this is often the case on blog sites. In a tree hierarchy, a node (page) can only have one parent but has many siblings or children.

    This is the traditional approach used in many contexts, not only for websites, but also for computer directory structures and family trees. The other approach is based on tagging: pages can be assigned multiple tags, and these tags are used to assign parents to pages. Now pages can have multiple parents and their siblings change based on the current tag used for navigation. This last approach is the most complicated, but allows for very flexible content hierarchies.

    Simple hierarchies, like flat lists, with few documents require simple navigation and potentially not much can go wrong. However, when hierarchies contain tens of thousands of documents, navigation is not a trivial choice anymore, especially considering the myriad of devices supported. Let's see what we can do (and should not do) when designing for multiple devices.

    The do's of responsive design for navigation

    Do (#1) Tailor your navigation to screen size

    Developing navigation is not an easy task, especially when designing one that's supposed to help visitors navigate on many different kinds of devices. Make sure you provide an appropriate navigation style for the visitor's screen size. Horizontal scrolling should be avoided on mobile devices, so make sure your navigation keeps the page in its normal vertical scrolling state. If the desktop site uses horizontal navigation, convert this to vertical by leveraging accordions.

    ‘Hit target size’ is another thing to consider - controlling devices with your fingers is really hard when buttons and links are too small. 

    Responsive design for navigation, do #1: tailor your navigation to screen size

     

    Do (#2) Tailor your navigation to the content

    Not every navigation will fit well within your site's design or your vision for it. Yet, when it comes to the site's navigation, you should focus on its content. Some navigation patterns are tailored more to navigations with a limited number of options, while others are well designed for sites with many layers within their hierarchy. Planning well ahead is your best option: when your site's information architecture is well defined, designing a navigation becomes a lot easier and clearer.

    Responsive design for navigation, do #2: tailor your navigation to the content

    Do (#3) Focus on content, minimize navigation

    On desktops there is lot of screen real estate, and as a result navigation often occupies a fair amount of screen space related to the actual content of the website. On mobile devices this is discouraged, because there is less room available for actual content. Make sure your mobile menu is as small as possible in its closed/inactive state so the focus is on your content. Only then, visitors are able to view as much content as possible on their small screens.

    Responsive design for navigation, do #3: focus on content, minimize navigation

    Do (#4) Use obvious names for icon labels

    When using labeled icons as a part of your navigation, make sure it's clear for visitors how the labels relate to the chosen icons. Without this connection, it's hard for them to understand what was intended by the icons and this will take them longer to figure out and will result in many errors. Use well established icons, such as a house for home and a pin for a map.

    Responsive design for navigation, Do #4: Use obvious names for icon labels

     

    Do (#5) Keep it simple

    Try to keep your navigation as simple as possible. This is probably the most difficult aspect while designing the site's navigation. It is paramount that visitors are able to quickly form a mental model of your site based on its navigation.

    Do (#6) Implement an effective search

    Sites need search options. Search accompanies traditional navigation and is most often used when navigation fails for a visitor. Visitors will rarely use the search function more often than the site's navigation. Visitors browsing patterns start with using the navigation of a site intertwined with searching.

     

    The don'ts of responsive design for navigation

    Don't (#1) Hide your navigation

    Sometimes navigation can be hard to find on mobile devices. Frustrated visitors will leave your site early and won't come back. This will result in a high bounce rate, which will negatively impact your site’s SEO. Make sure the navigation is easily visible and recognizable, so visitors keep browsing and prolong their stay, potentially increasing your site’s conversion rate.

    Don't (#2) Hide content

    Whether your site should contain the same content on mobile versus on desktop is still subject to a heated debate. I say: yes, it should. When the site does contain the same content, make sure the layouts, buttons, CTAs and other elements are adapted so that visitors have delightful browsing experience regardless of the device they utilize. Having different menu entries makes users feel alienated, breaks their mental model and that means they have to spend time to get to know your site all over again – that is, if they don’t leave for your competitors altogether.

    Don't (#3) Trust the CMS…

    … to perfectly fit in your content!

    When compiling content for responsive sites, don't trust the CMS to do the fitting. Content editors should make sure all content they enter (text, images, video, etc.) correctly fits within the design of the site on all supported dimensions; CMS can only get you so far. CMS can offer help, like resizing images not only for the different sizes in the design, but also by providing resolutions tailored to 'retina displays' and lower resolution displays. But making sure titles fit in the navigation or long words breaking design: that's up to the content team!

    Responsive design for navigation, don't #3: don't trust the CMS to perfectly fit your content

     

    Conclusion

    Developing a good menu system (navigation) requires a lot of planning ahead, knowledge of your users and knowledge of the supported form factors. Smart devices are available in a plethora of different sizes and shapes; you just have to make sure that sites are usable and navigable on all of them. Do some proper testing, don't just trust your gut feeling. Even after implementing the navigation it's still mandatory to continually make sure the site looks and works correctly on all devices.

    Published on 11/06/18    Last updated on 11/06/18

    #Digital Presence, #Digital Experience, #User Experience

    About the author

    Maarten Krijn is Consultant at AMPLEXOR. He is based in Belgium.

    SUBSCRIBE TO OUR BLOG

    Participate in this discussion