After reading this article proposing that we should be moving away from using the nav burger icon, as it’s not truly part of a mobile first approach, our first thought was that it’s much easier said than done.

The article concludes that including a nav burger menu option is a lazy choice and is effectively trying to squeeze a ‘regular’ desktop site onto a screen that it isn’t designed for. The proposed solution is to design sites as highly focussed apps where all the actions the user can make are upfront and center, rather than hidden behind a menu icon. The trick is to boil everything down to it’s core function and “simplify our sites, simplify again, and then simplify a bit more”.

This sounds like perfect sense but how plausible is it if you’re working on a big site with lots of different functions? Would this result in lots of highly focussed app-like sites that the user has to navigate between or does this mean having to make hard decisions and trying to convince the client to ditch big parts of the site?

Which big content rich sites take the true mobile first approach? Here we take a look at a few examples:

National Rail

National Rail mobile site

The site isn’t responsive but the mobile version of the National Rail site takes a very similar route as the popular app. The site knows that users are here to find train times and the prominent ‘Journey Planner’ button takes centre stage. Special offers, blog articles and the help section are no where to be seen. It should be said that the desktop version of the site has a lot more information so the mobile version has made the mobile first no-no of hiding content.

The British Library

British Library mobile home page

The British Library gets off to a good start on mobile but then it soon becomes clear that the mobile homepage has been bolted on and a few clicks leads you to the un-responsive desktop site. Still, it’s interesting to look at the options the BL have chosen for the mobile homepage and I’m guessing this is the first move in the right direction of moving their massive site to a mobile-first design.

Rijksmuseum

Rijkmuseum homepage

The Dutch museum site is an excellent example of mobile-first design done well. There’s not a nav burger in site and the three main sections of the site are clearly signposted. As you dig deeper into the site you can see it’s been designed with a mobile audience in mind - navigation and labels are clearly laid out and content is concise. It would have been tempting to add more options on pages such as ‘What’s on’ but the designer has shown discipline and not strayed from the mobile-first path.

Rijksmuseum What's On page on desktop

Gov.uk

Gov.uk mobile page

Often considered the daddy of mobile first, uncluttered and functional design, gov.uk houses mountains of content but steers clear of the nav burger. The site is all about search and listings, lots and lots of listings. Further down the structure the site puts an onus on breadcrumb links to help the user navigate up and down the architecture. This focussed approach and lack of other menus makes the reams of content easy to browse.  

The Boston Globe

The Boston Globe mobile homepage

An early adopter of responsive design, The Boston Globe is a great example of a news heavy site that scales well for mobile. Content isn’t hidden but there is a lot of it which can lead to unwieldy, long pages on mobile. The Globe doesn’t trump for the nav burger but does hide a long list of links in the ‘Sections’ menu. It may scale well but it looks very much like it has been built desktop first and then squeezed down onto mobile.  

BBC

BBC mobile homepage

Another elder of the mobile scene, the BBC homepage takes a similar approach to The Boston Globe, trying to fit lots of options onto a screen the size of a playing card. Again, more options are hidden within a dropdown menu.

Re-architecting sites such as the BBC and The Boston Globe to be truly mobile first is a huge undertaking, and we imagine there’s dozens of people working on it as this blog is typed out. Some options could be to utilise search more, and focus the user on a prominent search box. Or perhaps listing the sections as big buttons that the user can delve deeper in to. This can lead to a very ‘tappy’ and frustrating user experience though, where the architecture has been broken down so much that the user has to keep constantly clicking to move onward.

In conclusion, big menus and lists of sections can be seen as a mobile first solution, if the site warrants it. If the user’s needs can be distilled into as fewer options as possible then that’s the ideal goal, but on big content-rich sites with multiple sections that are all equally important, then a handy list of options is most likely the best solution. We shared our thoughts on the cryptic code of the nav burger before but a simple ‘Sections’ or ‘Menu’ link shouldn’t be seen as a mobile first faux pas.