In recent years the use of tablets and mobile devices for browsing the web has skyrocketed, with almost half of all web traffic now coming from such a device. Statistics like this can only mean one thing; ensuring your website looks and works well across all devices (e.g. making it ‘responsive’) is massively important.

There are a number of things to consider in responsive web design and development, but one of the biggest is the navigation menu – after all it’s critical to the user’s experience of your website. So to break this down let’s begin with…

The problem with non-responsive navigation on mobile

Here is a pretty basic navigation menu on desktop. It consists of seven links all side by side. desktop-nav It works really well on desktop, since there is plenty of space, but how will that work at smaller resolutions? mobile-nav Ah, not so great. What kind of impression does that leave to a potential customer? Personally, if I visited a website and the menu looked like the above, I’d assume that the site was broken. Remember first impressions of your website and brand are everything.

Best practices for navigation menus on mobile devices

There are plenty of ways to make responsive navigation menus on mobile devices, but for simplicity here are a handful of our favourite methods.

Overlay menus

Overlay menus have gained popularity recently. As the name suggests, they cover the content of the screen with the menu when the user interacts with a button. Here’s a pretty basic example: [jsfiddle url=”” height=”450px” include=”result”] And here’s how it looks on a website we created for 10Ten Recruitment. overlay-responsive-mobile-menu-example

Slide-down menus

In the early days of responsive web design this was one of the most used methods because it offers a simple and un-invasive way to display the menu on mobile devices. It has now somewhat lost it’s popularity, with the advent of tablet devices, since it can look a little odd on devices with larger resolutions and screen sizes as it also pushes the content of your web page down the screen. Still, this option is really easy to create so here it is on the list. [jsfiddle url=”” height=”450px” include=”result”] And again below you can see how it looks on a project we’re working on for AquaWaves. slide-down-responsive-menu-example

Off-screen menus

Off-screen menus are the option of choice typically on ecommerce websites. As the name suggests, menus like this are hidden to the side of the screen out of view until a button has been pressed by the user, at which point the menu slides beautifully into view. This solution is hugely popular at the moment and is what we’d suggest if your site has lots of navigation links. [jsfiddle url=”” height=”450px” include=”result”] Here’s an example from the website we designed and built for Esterform. off-screen-responsive-menu-example

Just make sure the user experience is intuitive

As we mentioned, this article just outlines a handful of mobile menu implementations – trust us when we say there are more, but these are the most popular.

Designing and building websites on mobile devices is certainly a challenging, but fun, aspect of our work here, especially now that we’re seeing many of our clients’ websites receiving more traffic on mobile and tablet devices combined, than on desktop computers alone. The whole user experience (UX) on mobile devices must now be given equal (if not more) thought.

Another really important consideration is making sure that your users’ know what to click on to reveal your navigation menu. This icon is often referred to as the “hamburger” icon (those 3 lines stacked on top of each other). All the examples above require the user to click the hamburger icon to display the menu, so making sure the user knows what to click is huge, so that they immediately recognise how to navigate your website.

Could mobile menus still change and evolve?

Definitely! Mobile browsing on the web is still in relative infancy, so we wouldn’t be surprised if we see “best-practice” for mobile menus evolve in 2018, as we start to learn a great deal more about how users interact with websites on mobile devices.

One possible adjustment that could take off would be regarding the placement of the hamburger icon itself, which we’ve come to expect to be either at the top right or left of the mobile screen in the header. But is this really the best place for it?

Screens can be pretty big these days, even on mobile devices, with products like the iPhone 7 Plus (which is 5.5″). When you take into account how most people operate their phone – placing it flat in their palm, using their thumbs to make selections, then placing the menu button at the top actually makes it pretty difficult to get to (unless you’ve got giant hands), essentially forcing the user to reposition their phone or use the index finger on their other hand.

This might seem like a minor issue, but we believe it’s something to take into consideration as so many people use their phone while multi-tasking. Come on, I’m sure you’ve been walking your dog with one hand and holding your phone browsing Amazon with the other, right?

Here’s an alternative solution

Below you can see a quick example of how we think mobile menus could be positioned and how they could function in the future You’ll see in this example that the menu link is fixed to the bottom of the screen, and once clicked, it reveals the menu in the area immediately around the button making the links just as easy to access with your thumb, holding your phone in one hand. [jsfiddle url=”” height=”450px” include=”result”] Of course this solution won’t work for everyone, but if you’ve got relatively few links on your site then this could be a viable option.

How can you tell if your navigation on mobile is working?

Having read this guide you’re probably left thinking: “How can I tell if the way we’ve implemented the navigation menu on mobile is working for our users?” Well it’s relatively straight-forward using a free tool called HotJar. HotJar is a tool that allows you to do many things, two of which will be extremely useful to help you find out whether your navigation menu is working well on mobile; 1) Heatmaps, and 2) Recordings. heatmaps

Why Heatmaps

These let you see where people are clicking (or tapping on mobile) so you can see what elements on your page get the most interaction. If you sign up to the free version of HotJar you can set up a heatmap test on the homepage of your website and let it gather results. You can then go back and check the results on both desktop and mobile. In this case, you’ll want to study the mobile heatmap and see whether your navigation is getting lots of interaction.

Why Recordings

This is probably the more useful of the two, as, again with a free HotJar account, you can set up a test on your site to actually record visitors navigating it. Yep, thats right – you can watch someones screen (on mobile devices as well as desktop) as they move around your site. This one will allow you to see in great detail how a user interacts with your mobile navigation menu.

Does your business need help with mobile?

Hopefully this guide has helped you think on a slightly deeper level about how your business approaches the navigation of your website on mobile devices and has perhaps got you thinking about implementing one of the other solutions we mention. Maybe it’s even got you itching to set up some heatmaps and recordings using HotJar? Of course, if you would like to talk further about the user experience of your website on mobile devices, just let us know.

Want to know exactly how users experience your site on mobile? Get in touch with us and discover exactly how your website is performing on mobile devices with a free mobile audit. Just mention it within your message in the contact form.

Subscribe to our newsletter!

Get the latest tips and advice through the Authentic Style newsletter

Please enable JavaScript in your browser to complete this form.

by subscribing you’ll receive periodic emails from us with helpful website tips.

Let’s create something
great together.

All great things start with a chat. Use the adjacent form or our project planner to get things started.

Project Planner

We’re currently accepting projects
Please enable JavaScript in your browser to complete this form.

Authentic Insights