The object of ‘responsive web design’ is to make a website equally attractive and functional on all screen sizes. One of the reasons that many people recommend ‘mobile first’ design is that if you get the site working well on a mobile device, you should be able to use the extra space on larger screens to make it work even better. If you start with the large screen display – and most designers do – then the cut-down versions could be progressively compromised.
For the website layout aimed at large screen displays, the designer instinctively goes for some sort of drop-down menu navigation system spread across the top of the page, with the content underneath. As the screen size diminishes, the horizontal row of navigation labels can be shrunk in some way to fit – but only up to a point. What happens after that, by the time we reach smartphone screens, is that the navigation itself has to go. The standard technique is to hide it as a ‘hamburger menu’. Here’s the new site from instrumentation manufacturer Ion Science to show how it’s done:
See those three bars? That’s the ‘hamburger menu’. Click on those, and you’re taken to a screen showing the navigation items.
At the Ion Science site, this technique is implemented impeccably. But it’s making the assumption that visitors know what the three bars mean, and that they can be bothered to go through an extra step to click the icon to reveal its contents. I’ve not seen conclusive evidence that either is the case, but the ‘hamburger menu’ is certainly the trend with most designers, so perhaps we should defer to their experience. However, on another well-designed new 2016 site, from industrial equipment manufacturer Atlas Copco, the designers have chosen to explain what the new icon means:
Is there a better technique than the ‘hamburger menu’? If such a thing exists, it would involve careful consideration of the site’s whole information architecture. Many smartphone apps have four or five very clear navigational icons, usually at the bottom of the screen, so maybe it’s not necessary to ‘give up’ on a horizontal navigation bar on small screens. Here’s the ‘Downcast’ app on my iPhone:
My feeling is that if we start with a clean sheet of paper and think ‘mobile first’, we might come up with a website structure which works better on mobile screens and at least as well on large screens as if we’d started with those in mind. This is because a structure designed for small screens inevitably focuses on simplicity, and in my opinion that’s always a good thing.
It’s certainly better than the structure of the website trying to replicate a corporate organisational chart, something we’ve been unable to get away from over the past 20 years.