Mobile-first is the future of web design

Published on Saturday, 6 December 2014.
At 1,035 words, this article should take about 5 minutes to read.
This article is more than 8 years old.

Mobile isn’t a watered-down version of desktop – it is a vital and flourishing platform that deserves equal weight and merit. Perhaps, given the figures, more weight should be attributed to so-called “mobile versions” of emails.

A US consumer device preference study (Q3 2013) determined that 65% of emails are now opened on mobile device – smart phone, tablet, or laptop. This figure is up from 61% the previous year, showing a definite trend towards mobile interaction. The majority of smartphone users check their emails once an hour from 8am to 9pm with almost 60% of this being during traditional working hours (9am to 6pm) and almost 40% of users spend approximately 15 seconds viewing each email. What this shows is that a lot of people are checking their inboxes regularly but briefly.

Although individual metrics vary from company to company, and even campaign to campaign, IBM subsidiary and emarketing giants SilverPop estimate that around 80% of emails aren’t even opened and, of those, less than 4% result in a click. A recent Google survey showed that 52% of users are less likely to engage when an email has been poorly optimized or not optimized at all, and a massive 48% of users actually became frustrated and annoyed saying that poor mobile-responsiveness was an “indication of the business simply not caring”.

With this in mind, it simply makes sense to have an emarketing campaign that is well-optimised for mobile devices.

Reverse the Process: Mobile-first Design

Mobile devices have a variety of quirks that can cause havoc with design, for example screens dimmed to save battery can make text hard to read unless the text/background visual contrast is over 80%.

Mobile devices differ from desktops, on the whole, by not having finger-friendly typewriter-style keyboards and precise cursors to help the user navigate around – relying on the user jabbing at the screen with fingers, thumbs, or a stylus.

Using a phone with a thumb (other branded smartphones are available)

A quick poll around the office this morning determined (in a highly-questionable “scientific” manner) that 15 people click links with their finger, 16 use their thumb, and a whopping zero use a stylus. The Massachusetts Institute of Technology held a study of human fingertips to investigate the Mechanics of Tactile Sense, which found that the average adult fingertip is around 50px wide, and the average thumb is 72px. A quick look around the internet brings up a fair few pages with “suggested” sizes for mobile buttons: Apple recommend 44px, Microsoft suggest 34px, and good old Nokia knock that down to 28px – less than half the width of the average thumb. The prevalence of auto-correct is testament to the average user’s lack of precision!

HTML emails are built primarily from images – .jpgs, .pngs, and .gifs, which look fantastic but, as email clients are the devil, can cause issues. Almost all email clients do not download images automatically. Of the six big desktop clients (Apple Mail, Lotus Notes IBM Notes, Thunderbird, and various Outlooks) only two download images by default. Of the four big web-based clients (AOL, Gmail, Outlook.com, and Yahoo) over half block images – indeed, Gmail discovered that 43% of their users browse emails with images-off as standard. On mobile devices it gets worse with 12 out of 19 clients replacing gorgeous images with ugly red x’s. Replacing calls-to-action with HTML-styled text buttons means that your CTA is always visible – perhaps not quite as pretty as the original design but better than a blank page.

Email newsletters litter their copy with text links which, while good practice for website SEO, seems rather unnecessary on an email given the suggested font-size is around 16px (roughly 12pt – or 1em if you want to get all technical) making them considerably more difficult to hit with an unwieldy thumb while you’re standing up on a crowded train heading to work.

The Baymard Institute discovered that the optimal line length is around 50 to 75 characters (including spaces) – if a line is too long, the reader will zone out, if it is too short their reading rhythm is thrown off. Another thing to bear in mind is that some mobile devices force a text-resize for fonts below 13px that potentially disrupts carefully planned layouts. As different operating systems and email clients render text in different ways, allowing for flexibility in the live build will produce an email that works across the board.

If you don’t need it on the mobile version, do you need it on the desktop version?

Starting a design with the “mobile version” and restructuring the content as the space increases allows an email to be succinct, relevant, and easy to digest. Given you have 15 seconds to get your message across on a screen around 3” by 5”, easy-to-digest content becomes paramount.

Which brings me on to email menus: Users don’t treat emails like websites – they scan the content of the email and decide if there’s anything worth clicking on. With Landscape to Portrait usage being roughly 50/50, and minimum landscape height being around 320px, do you really need that nav bar taking up valuable CTA real estate?

tl;dr:

Design a mobile-friendly email first – big buttons, high-contrast, minimal copy, optimised for images-off; then work out how to display that on a bigger screen.

Edit:

Following the recent announcement from Google that mobile-friendly designs will rank approximately 30% higher than desktop-only sites, it seems all the more important to consider the implications of mobile-first design.

“Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices.” ~ Google

Fin

onward-journeys module