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.
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.
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.
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.
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.
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.
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!
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.
About the author
Maarten Krijn is WCM Senior Consultant at AMPLEXOR, based in Belgium. Maarten is a certified Java SE 7 Programmer, skilled in Cascading Style Sheets (CSS), SDL Tridion, .NET Framework and Android Development. With a demonstrated history of working in the Information technology and Services, he joined the AMPLEXOR Digital Experience team in 2011.