by Chris Myhill
Director of Experience
When approaching the design of website navigation, it’s crucial to think about how it will look and behave on a small screen. Unfortunately, a lot of responsive websites neglect to prioritise the mobile view.
A hamburger menu can be a perfectly reasonable solution for simple websites. For more content & feature-rich sites though, they can be a barrier to content discovery and slow down the user journey.
Here are some examples of responsive navigation done right.
These great responsive websites don’t just fall back to hiding the entire navigation behind hamburger menu. They instead use mobile-first thinking, to prioritise what really matters on the smallest screens.
The site structure is lean and concise. There are just five sections, plus the ability to search. They’ve kept it punchy. No filler here.
This lean approach to information architecture really pays off at mobile. When you get down to the small screens, there’s no hiding needed at all. The entire contents of the site are visible the second you arrive.
Not only does this benefit content discoverability, but it keeps the codebase simple too. Avoiding fancy business means that bugs & display issues are much less likely.
Another example of how keeping your website structure simple can translate to a more effective mobile navigation.
Whilst a hamburger menu is used for the secondary website links, the all-important ‘donate’ call to action along with site search are prioritised at mobile. The BHF also draws further attention to these sections with icons on mobile. This keeps the overall layout tidier, and makes for nice big tappable areas.
The BBC is a service loaded with information. There’s just no way that everything could be shown in a single bar, even at the desktop breakpoint.
Rather than admitting defeat and hiding everything away, they’ve opted for the ‘greedy navigation’ technique.
Links are arranged in order of importance, from left-to-right. It displays as many links as there is space to show (depending on the user’s screen size). The remainder are tucked away behind a ‘more’ button.
This is a great way to prioritise when there’s just too much navigation to show at once, and simply consolidating the content structure isn’t an option.
Another great example of the ‘greedy navigation’ technique. The Guardian may have even been the progenitors of this design pattern.
Categories most important to their reader base (‘UK’, ‘World’, ‘Politics’, ‘Sport’) are arranged to the left. This means they’re always immediately visible, even at small mobile screens. The more secondary links are hidden away when there’s not enough space to show them.
The WWF have emphasised their most important calls to action in the navigation (‘Donate’ and ‘Adopt’). This is reflected at the mobile breakpoint, too.
Whilst they use a hamburger menu to hide the detailed site contents, those two critical calls to action are still immediately visible and accessible.
Nationwide do an extremely good job of consolidating their website navigation at the smaller screen sizes. The various product types are collapsed into a single section, ‘our products’. The larger buttons for login & help used at desktop have also been reduced to simple links, in the interest of saving space.
The space-saving techniques Nationwide have implemented means that they don’t resort to a hamburger menu. It allows them to instead pull out important links and contact information in the header, even on the smallest screens.
It may not be a glamorous brand, but Currys / PC World deserve a lot of respect for their responsive website design.
These guys were one of the first big retailers to truly push a mobile-first ecommerce experience . The mobile navigation keeps things simple, displaying recognisable app-like icons to take the user directly into key site features.
We couldn’t resist another excuse to praise this project. Rather than going for a traditional ‘navigation bar’, the UK government’s digital service has opted for an experience based entirely around search and in-page links.
This keeps the site incredibly simple and lightweight.
Because there’s not a traditional ‘navigation bar’ to show, the mobile experience is just the same as a desktop. A logo and a search bar. It’s fast and really intuitive. It’s an important example of how navigation starts with good information architecture.
If you keep things simple when planning your site’s structure, it can really pay off in your mobile experience.
There’s nothing wrong with the hamburger menu. It’s totally viable. But a better solution can often be found with a bit of forward planning. Challenge yourself to create a mobile-first navigation, and you’ll quickly see the benefits across all devices.
Need help? We’ve been crafting user experiences for over 10 years, and can help with yours too! Get in touch, and tell us about your project.
21st June 2022
What does it mean to design for everyone?
7th June 2022
The internet is entering a new era for privacy and authentication. But what could this mean for the applications we create?
20th April 2022
When it comes to using white space in web design, balance is key. Here’s how to achieve it.