Who is getting mobile optimisation right?

Many mobile-optimised corporate websites treat desktop visitors like second-class citizens. Scott Payton examines seven noble exceptions.

In his column last month, David Bowen explored the potentially damaging side effects of the stampede to mobile optimise corporate websites. In particular, he wrote, the migration to responsive web design ‘has too often been accompanied by a serious slippage in usability on desktops and laptops, and also in the unwise slashing of content.’

So which companies are – via responsive design or other approaches – successfully serving their mobile users without sacrificing ease of use or depth of content for those sitting in front of a computer?

Here are seven examples:

Same URL – but not responsive

Goldman Sachs and Nestlé show that pure responsive design is not the only way to offer a ‘full’ corporate site tailored to different devices.

Shrink the browser window on a desktop or laptop screen, and neither site collapses down into mobile ‘mode’ (which can be frustrating anyway for users who want a smaller browser window without a site’s navigation menus transforming into touchscreen-friendly versions). But visit Goldman Sachs or Nestlé on a smart phone and the mobile mode appears – on the same URL (rather than ‘m.company.com’, for example).

Taking this approach has freed both firms from the restrictions of making their site work on a fluid grid, allowing them to focus instead on providing the best experience to visitors according to the device they are using – not just the size that their browser window happens to be. For Nestlé – which, unlike Goldman Sachs, offers excellent navigation in desktop mode – this includes providing conventional left-column in-section menus to desktop users.

The desktop/tablet mode of Goldman Sachs’ site is not completely static: reduce the size of the browser window on a computer screen and the images, text and other page elements shrink slightly – suggesting that some thought has been given to screen/window size as well as device type.

Responsive sites that work

Bayer, Walmart and, with its brand new global site, Unilever, have all opted for the purely responsive route – but in ways that do not treat desktop and laptop users as second-class citizens (See more on Bayer in this week’s BC Tip). In each case, time and effort has been devoted to ensuring that page layouts and menu structures are intuitive, logical and clear on a standard computer – rather than ‘retrofitted’ from the starting point of the mobile version.

Such responsive design successes (in terms of serving both mobile and large-screen users well) seem all the more impressive when compared to the failures. Most of these – such as General Electric’s corporate site – fall into the category of throwing usability out of the window for desktop rather than mobile visitors. PepsiCo falls into this trap, too – as well as putting in place a navigation structure that appears to inhibit its ability to provide visitors with deep levels of content.

Yet while many responsive sites are failing desktop users, Telefónica falls into the opposite trap. Deskbound visitors to its responsive corporate site will find navigation straightforward. Mobile users will not. If they are not baffled by the use of the ‘hamburger’ icon to denote a language toggle rather than the main navigation menu (which many will be), they will almost certainly be disorientated by the numerous other navigation icons and tools that are neither conventional nor intuitive.

By contrast, Unilever, Bayer and Walmart all use a hamburger menu to signpost a primary and deeper navigation menu that slides out intuitively from the left. For sure, this has yet to be set in stone as a convention that absolutely everyone understands, but it is fast becoming an approach with which most people will be familiar and comfortable.

Is the hamburger icon alone enough to signpost a mobile site’s main menu? Bayer, Siemens and GSK– another company that has recently migrated to responsive design without demolishing the desktop navigation experience – have concluded that it is not, and added the word ‘menu’ alongside it. (See a recent BBC article on this topic for more on the extent to which the hamburger is understood in the world beyond design agencies.)

Different sites for different devices

Responsive or otherwise, all the examples above have one thing in common: each site sits on the same URL whether visited via desktop, tablet or mobile; they offer different ‘modes’ of the same site. Are there examples of separate mobile – and tablet – sites out there that hold their own against this approach?

Siemens – a veteran innovator in online corporate communications – proves that a separate mobile, and more recently also tablet, site can give you powerful freedom to tailor both content and navigation to the needs, and preferences, of users of different devices (putting video front and centre for tablet users, for example, due to the popularity of video consumption on tablets).

Yet looking across all examples of mobile optimisation, from responsive, via the ‘adaptive’ approaches of Goldman Sachs and Nestlé, to Siemens, the key to providing a good service to all users does not seem to lie in which web design approach you take – but in how well you execute it – on all devices. The tricky bit for those taking the responsive route is doing this without sacrificing the experience on one device for another. Difficult but, as some of the examples above show, not impossible. 

First published 27 May, 2015
< Back to Commentaries