If you’re not marketing on mobile, you’re missing out

These days, having a website that performs well on smartphones and tablets is essential. In 2014, mobile overtook desktop as the go-to way to get online, and thanks to more powerful handsets and 4G connection speeds, devices can now be comfortably used for shopping, booking holidays and even applying for a mortgage.

Five years ago, mobile functionality was an afterthought, with desktop sites taking centre stage. The tables are turning, and it’s not hard to see why. Here’s a quick recap of the mobile revolution:

  • Between 2011 and 2016, smartphone adoption in the UK more than doubled, from 29% to over 70% (Statista)
  • Purchases on mobile – a sector dubbed m-commerce – accounted for more than 50% of UK ecommerce spending in 2016, according to Criteo
  • Tablets are growing in popularity. In 2011, 2% of UK homes had a tablet. By 2015, that figure was 55% according to Ofcom’s latest Consumer Market Report
  • Customers using their phones to check out a potential buy while out shopping increases conversion rates by 42%, making mobile crucial even for bricks and mortar businesses
  • That’s before we even get into apps – which are the most efficient channel for US retailers (Criteo)

The mobile-first approach is a popular choice for many of our clients. It’s a cost-effective way to capture their share of this growing market. By creating a single site that’s optimised for mobile but works on other devices, they can maintain an effective presence without creating multiple versions of their site.

Responsive and adaptive web design, where a site adjusts to suit a browser window or smartphone screen, can provide a one-size-fits-all solution. Along with mobile-friendly content and UI design, these approaches allow businesses to serve their customers a smooth and intuitive experience on any device.


Adaptive vs. responsive – the difference

According to The Next Web,

  • responsive designs are flexible and fluid, changing widths and sizes to look good on any device.
  • adaptive designs detect the device’s features and serve up different layouts and UI schemes accordingly.

But what about people still using desktops and laptops?

In the rush for mobile market share, it can be easy to forget that your desktop users are still out there, especially in older demographics.

Ofcom found that desktops are still the UK’s favourite way to get online, with 71% of adults using them in 2015 compared with 65% using smartphones. Within that statistic, there’s a strong age skew, with older users keeping the desktop figures afloat. 73% of 55-64 year olds use a computer and only 46% use a smartphone. (Among 16-24 year olds, the smartphones come out on top with 91% using them vs 77% on computers.) Read Ofcom’s full report (PDF).

Across the pond, Comscore found that although mobile use is booming, desktop-only users still outnumber mobile-only users for Google Sites, Facebook and Yahoo Sites, the top 3 US digital properties. The majority of US ecommerce still takes place on desktop, according to Criteo’s 2016 report. Desktop is also the go-to platform for entertainment, business and finance.

Why do websites need to be different on mobile anyway?

Mobile platforms are harder to use than desktops, and mobile users have some extra barriers to overcome. 

  1. Mobile devices are used on the go or in short bursts in between other activities. They’re also packed with apps and contacts that can disrupt what you’re doing with a text, call or notification.
  2. Your fingertips interact directly with a mobile device – they’re less precise than a mouse and not ideally suited to typing on a tiny mobile keyboard.
  3. Mobile devices have smaller screens. With less information visible at any one time, you need to remember information you’ve scrolled past, so there’s extra load on your working memory

To overcome these challenges, a few design and content conventions have emerged:

  • Big, finger-friendly buttons
    Having fewer, larger buttons means you can navigate effectively with your fingertip, and you don’t need the precision of a mouse pointer.
  • Simple CTAs
    Low attention levels and high cognitive load means simple, brief calls to action are the best way to signpost the actions a user can take.
  • Burger menus (and kebab menus – yum) which use space-saving icons to route users to navigation functions. Icons for search, location and like or favourite have become standardised too.
  • Not much text
    There isn’t much room on a mobile screen. To avoid clutter, content on top-level pages is kept short. If there’s lots to say, it’s either relegated to deeper-level pages or folded into concertina modules which can be tapped to open.  
  • Scroll and swipe-optimised navigation
    Rather than creating many URLs which must be loaded individually, mobile-first sites often have fewer, longer pages made up of modular blocks of content.
  • Integration with apps and phone functions
    A mobile-first site can link to your device’s map app or phone dialler to help you complete a task.
  • Content is linearised
    Because there’s only a small ‘window’ for the content to pass through on its way to your eyes, it’s presented in priority order, according to the site’s best guess of what you’re interested in. (In comparison, desktop sites can present many more content options in parallel on a single screen.)
  • Content is cut
    Lower-priority content may be demoted to deeper levels of the site, and you may need to request the desktop site to access some functions.
  • Mobile behaviours are catered for first
    Content supports practical, context-based tasks like looking up a physical location or checking weather.

Mobile-first UX pitfalls that alienate desktop users

Unfortunately, mobile-first design can result in bad desktop experiences, where a clean and usable mobile interface appears sparse and opaque to a desktop user. ‘What’s simple and appropriate on a phone can be simply dumb on a tablet or on a desktop,’ says Raluca Budiu of Nielsen Norman Group.

When mobile-first designs feed content bit by bit in a linear structure, or substitute full-blown interfaces for icons, the desktop experience suffers. Visually, there’s a lot of wasted space, and in terms of usability, the desktop user has to bear the burdens of mobile content consumption without any of the benefits.

‘On a 27″ cinema display you still get a lousy hamburger menu,’ says digital specialist Jens Boddum, neatly summing up the frustration of encountering an overly mobile-optimised site on your home computer.

What goes wrong?

  • Hiding useful information – content isn’t prioritised for a desktop user’s tasks, so what they’re looking for is hard to find
  • Raising desktop interaction costs – forcing a desktop user to scroll and click through large, sparse interfaces to find information that could comfortably fit on one desktop screen
  • Confusing icons – elements that are familiar and intuitive on a mobile device can be confusing on desktop. For example, it’s easy to overlook a tiny search icon in the top corner of a large screen because you’re scanning for a search bar.
  • Forgetting desktop users altogetherdoes Snapchat’s website work well on a desktop? After loading the huge, empty screen, it took 2 Sticky Content editors about 30 seconds of head-scratching before realising we should click on the ghost symbol.

Example: Windows 8

A classic example of a mobile-first mindset translating poorly onto desktop is Windows 8. Microsoft’s radical redesign of its flagship operating system attempted to unify desktop and mobile experiences. This harmonious vision also resulted in the Surface, Microsoft’s 2-in-1 tablet/PC. 

Unfortunately, replacing programs and menus with apps and tiles wasn’t a big hit with customers. The ‘Metro’ UI took up lots of space on the screen while hiding most functionality and content deeper in its structure. For desktop users, going from the old Start menu to the new tiled interface felt a bit like being shifted from Lego to Duplo.

Image of Windows start menu on desktop
The result? The critical reception was disastrous and users shunned the new-look apps.

Our recommendation for mobile-first content best practice

If you want to achieve some quick wins in multi-device usability, there are some content-based fixes you can make. (No coding required.) Why not smooth the way for your desktop visitors with some of these ideas?

User research is a must-have

Linearising your content involves putting it into priority order, but whose priorities are you working to? User research highlights which content is getting used most and where users tend to look for it, as well as showing up any roadblocks. Test on both mobile and desktop to get a balanced picture of your users’ needs.

Audit and spring-clean your content

It’s possible you’ve got too much content, even for desktop. Have a bit of a clear-out with a full website audit and see where your content can be streamlined. You could do this by editing your copy to make it shorter, cleaner and clearer, and if need be by removing or demoting older pages. After that, the job of choosing which content to showcase on mobile screens should be a bit easier.

Practise the art of short copy

Shorter is sweeter when it comes to mobile. A short headline, link or intro usually works well on desktop too, tempting a reader to find out more. Practise condensing your headings and links into self-contained strings that fit neatly on one line on a mobile screen. Both desktop and mobile users will benefit.

Ease your user’s journeys (not just the ones that matter to your business)

Armed with findings from user testing, use your CMS to tune up your site architecture and help people get where they want to be, with navigation buttons, headings and other signposts written in plain language.

Include a failsafe

Even with your best efforts, some people will prefer to retreat to the familiar functionality of a desktop site on their phones. If you have a mobile site or an adaptive design, there should be a clear, visible ‘see desktop version’ CTA available so that users can load up a teeny tiny version of your full site. (Facebook Messages, we’re looking at you.)

Multi-platform best practice example 

Techcrunch.com uses an adaptive design (AKA progressive enhancement) to make good use of every screen size.

Desktop: the top nav includes contact CTA buttons, social buttons and search. Headline stories are presented in two columns. Screen space to the top and right is used for ads, with the Renault ad cordoned off with a banner to provide a clear visual boundary between ad and content.

Image of Tech Crunch site on desktop

Tablet

Nav menu is simplified, social and secondary nav elements are removed or condensed, and the search box becomes an icon. Right-hand advert is sacrificed.

Image of Tech Crunch site Tablet

Large phone/small tablet

Search icon becomes more prominent and nav menu is simplified further. Content modules are linearised in a single vertical column. All ads sacrificed.

Image of Tech Crunch site on small tablet

Smartphone

Search and nav elements disappear, replaced by a burger menu (2) that contains the search bar and the nav elements in concertina form. The rocket icon (3) opens up a sidebar with additional articles.

1. Image of Tech Crunch site on mobile2. Image of Tech Crunch on mobile3. Image of Tech Crunch site on mobile