Should I have a different mobile menu on my website?

In most websites that utilize responsive design, when your screen reaches a certain small size, the main menu will collapse into a mobile-friendly “hamburger” menu (three stacked lines which can be expanded on demand). Often, the actual items in the mobile menu (Home, About, Services, etc.) will stay the same as the desktop version – because that makes sense, right?

Not so fast.

Today, we’re going to take a look at why having a different mobile menu may be a good choice for your website. As with any website interface decision, it’s going to depend a lot on your goals, how you want your users to interact with your website, and any technical limitations you might be facing.

PROS: Why would it be a good idea to have different mobile menu?

• You can combine multiple menus into one. Many websites feature secondary or tertiary menus, in addition to the main navigation. These menus, which can usually be found in a smaller font across the very top of a site, or in the sidebar or a footer, will often feature specialized options that the average user might not need, such as “Login,” “Register,” or “Search.” However, on a responsive site, when your main navigation collapses, what happens to these additional menus? If you hide them for a more streamlined user interface, the options they offered may no longer be easily accessible. On the other hand, if you leave them in place, you can end up with a cluttered or confusing design. However, with a separate mobile menu, you get the best of both worlds – one easy-to-use menu that offers everything your users need.
• You can rename menu items. When it comes your mobile site, people may be viewing it while they walk down the street, step off the subway, or are stopped at a light (although we don’t condone browsing while driving). This means brevity is your friend. For example, if your desktop menu includes options with abstract labels which are supplemented by descriptive text (i.e. “The Plan – our strategic goals”), you can shorten these items for easier digestion on the go, with a different mobile menu.
• You can rearrange menu items. If you’ve found that most of your mobile users tend to go straight to your contact page (perhaps looking for directions), you could push your contact options to the top of your menu, rather than forcing them to scroll and search through options.

CONS: Why not have a different mobile menu?

• You have a very simple menu. If you only have a few, straightforward menu options, there may not be a benefit to having a separate mobile menu. Or, the benefit may be so minor that it’s not worth the time to set up and manage a separate menu.
• Your website platform does not technically allow it. In some cases, particularly if you’re using a more limited website building tool (especially a visual builder, like SquareSpace, Wix, GoDaddy SiteBuilder, etc.), having a separate mobile menu may be very difficult, or even impossible. However, on most popular content management systems, such as WordPress, Drupal and Joomla, you can easily create and manage multiple menus. By adding a couple of rules to your responsive stylesheet, you can hide your main menu and show your mobile menu for mobile users, and vice versa for desktop. In fact, there are even some WordPress plug-ins that will do this for you without any code at all. A great one is called Responsive Menu.

The Bottom Line: You probably need a different mobile menu.

For most websites, having a different mobile menu will enable you to offer your users a better, more streamlined experience. However, if you have a really dead simple menu, or you’re limited by the technology or flexibility of your website platform (in which case, it might even be worth considering switching to something else), you might be better off sticking with what you have.

Of course, if your website is designed with a mobile-first mentality, all of the these arguments still apply for having a different desktop menu – but remember, keeping things simple is usually better, so don’t feel like you have to get all fancy just because someone has a bigger screen.

If you’re confused about how to implement a separate mobile menu, or if you’re getting hung up in your CSS, you can contact us and we’ll be happy to provide some tips.