WHITE PAPER

Email design for Mobile Devices

Written by Ed Melly with Foreword by Dave Chaffey

Inside you will learn:

How should my campaigns change?

What are the issues?

What is the solution?

Design & content

Want to know more?

Email: info@smartfocus.com
Tel: +44 (0)117 943 5800
Visit: www.smartfocus.com/mobile
WHITE PAPER

Foreword

Mobile usage is growing rapidly. There have been significant year-on-

year increases in Apple iPhone adoption, the Android platform is gaining Mobile?
momentum and HP’s acquisition of Palm underlines its commitment to
mobile. Furthermore, the tablet market created by the iPad is expected to What do we mean by ‘mobile
continue growing rapidly. device’? The description now
embraces so much more than
just mobile phones and is used to
In its Internet Trends presentation of June 2010, Morgan Stanley predicted encompass devices such as the
that the population of mobile users will exceed desktop internet users within iPod touch, tablets and arguably
five years. Such predictions are not uncommon: Google CEO Eric Schmidt even netbooks. For the purposes of
said in October 2010 that: ”Search on mobile will eventually exceed that this paper, the terms ‘mobile’ and
of PCs... so, eventually, mobile will be a very, very strong revenue stream in ‘mobile device’ are used to describe
any portable internet-enabled
comparison to PCs”.1
gadget that isn’t covered by the
term ‘personal computer’.
The majority of our time on mobile devices is spent reading and responding
to email. It accounts for 42 percent of mobile internet time (compared to
just 10.5 percent using social media, for example).2

The mobile web grew 110 percent in the US [in 2009] and 148
percent worldwide3

The bottom line is that you can no longer assume that your audience is viewing your email on their 22inch desktop
computers. They’re now just as likely to be on the move, viewing content on a screen just a few inches wide. It is not
a case of if you should be considering mobile devices, but when. This white paper argues that the time has come to
take the necessary steps towards great mobile-friendly content in your emails and landing pages.

Dave Chaffey

©Copyright smartFOCUS. All rights reserved Page 2

WHITE PAPER

How should my campaigns change?

The first step is to thoroughly research your markets and your campaigns. Look carefully at where and how your emails are being
read, then act according to the information you can glean. If your readers are universally stuck in offices, happily using Lotus
Notes 6.5 to read your essay-cum-newsletter, then that email client should be your priority. You can stop reading here if that’s
the case...

However, if a significant proportion of your readers are using mobile devices, or certain campaigns are showing increased mobile
opens, then you must look at tailoring your emails for smaller devices. Another factor to consider is specific campaigns for which
mobile should be your focus. For example, any campaign that involves interaction with your offline presence would benefit greatly
from seamless communications targeted for mobile platforms. Similarly, any email triggered by an offline transaction (such as an
email receipt for a brick-and-mortar purchase) must work perfectly on a mobile device.

What are the issues?

Mobile devices do not present entirely new issues – they merely expose different facets of
problems that online marketers have always faced. Email is already an impulsive medium A Tale of Two Pizzas
that benefits greatly from brevity and relevance; mobile just amplifies that fact.4
Special offers received in emails
Rendering issues that have to be claimed offline are
excellent opportunities to make the
Does your email look good on a small screen or are you forcing your readers to scroll most of mobile-optimisation.
and work just to get at your message?
Receiving a special offer from Pizza
Your email must work in both Outlook 2010 and the latest mobile clients which Express leads you to a landing page
support emerging standards like CSS3. It needs to hold up on a widescreen monitor which clearly states ‘Please show
and a mobile screen a few hundred pixels wide. your code from your phone or
print out this page’. Perfect: if you
One approach is to create separate versions of your email and then let people choose feel like printing the page, you can,
between the two. Another is to actively target recipients who your analytics software but it might prove easier to just
believes are using a mobile, then send them the ‘mobile-optimised’ version. However
bring your phone to the restaurant,
both these approaches miss the point: people do not want to specify in advance where
enjoy the deal and help save a tree
(or on what) they are going to read your emails, nor should they receive a watered
into the bargain.
down version. The beauty of mobile devices is that they allow us to be constantly
connected. We can check emails on the way to work, then seamlessly transition to a
For a far less satisfying experience,
desktop to further examine those we have flagged when we arrive. It is this flexibility
take a look at Zizzi’s past
that should be embraced in the design and content of your emails, allowing them to
adapt to provide the best possible user experience however they are read. promotional offers. Its special
offer email links through to a
Content issues landing page with the condition
‘Photocopies or electronic
Does the content of your email rely on your readers being sat at a desk? Does it include vouchers on mobile telecoms will
calls-to-action and links that won’t work effectively on smaller screens or for those on not be accepted.’ Okay, but why?
the move? It is not much good ensuring your emails look amazing on mobile devices if Is this just an arbitrary impediment
they link through to websites that takes forever to load or render incorrectly. that is forcing customers to read
email from a PC connected to a
Of course it’s possible to retrofit email content to better serve mobiles, but you need printer?
to be careful when doing so. Bear in mind that seemingly innocuous instructions like
‘click here’ don’t hold much relevance when using a touch-screen. Little touches like Neither Pizza Express nor Zizzi
your wording can be the factor that makes your email feel like it truly belongs on a is entirely successful in coding
mobile. Ignore such things, and it will appear to be what it is: just an afterthought. mobile-friendly emails (or landing
pages), but at least Pizza Express is
If your content includes elements that are cumbersome on anything but a desktop getting the call-to-action right.
computer, it’s likely that your target audience simply won’t bother with your mails again.
Are you forcing people to download a PDF to access your information? A few hundred
megabytes is nothing on a desktop, but is a big deal on a slow EDGE connection.

©Copyright smartFOCUS. All rights reserved Page 3

WHITE PAPER

What is the solution?

The good news is that the majority of internet-enabled phones now include browsers and email clients that are based on the
WebKit rendering engine, which has fantastic HTML and CSS support. This includes the iPhone, Android devices, webOS, Samsung’s
Dolfin browser and the latest version of RIM’s browser. Design and code an email that works on the desktop, and you can be fairly
certain that it will render faithfully on all these devices. By embracing the concept of progressive enhancement, we can provide
different levels of experience for the capabilities of different devices. It is possible to ensure your emails not only render faithfully,
but really shine on mobile devices and smaller screens.

Design & content

The most obvious new consideration has to be screen ‘real-estate’. On mobile devices
there simply isn’t the space to create a cluttered email with numerous columns. The State of Play
Ensure your design is clean and simple (one or two clearly defined columns, good use
Keeping up with the current state of
of whitespace) and it should translate well to smaller screens.
the mobile market is daunting, not
least because of the breathtaking
It’s also important to remember your recipients are now just as likely to be using their pace at which it is evolving. Nokia
finger to navigate and follow links, not an accurate mouse. Giving this some thought remains the largest phone company
will avoid any resulting frustration. You should ensure that your calls-to-action are worldwide, but they have yet to make
blindingly obvious and easy to follow. This might mean including large buttons or a significant dent in the smartphone
market, which is currently dominated
using a larger font size for important links, while ensuring that the most important
by Apple and Google.
information is clearly differentiated from the rest of the email and not cluttered by
several links placed next to each other. Closely spaced links are hard to select on a Apple is a force to be reckoned with
touch screen. (1.7 million iPhone 4 handsets were
sold in the three days following its
Remember - brevity and simplicity have always been essential to emails, and mobile launch in 2010). Google introduced
the Android OS in 2008 and it is
only serves to reinforce that further – more than ever there is no room to waffle or
now found on a range of devices
present a cluttered experience. The mobile platform has dramatically altered reading worldwide; it is predicted that by
habits and certainly promotes more information ‘snacking’. 2014 it will be the most popular
mobile OS in the world.
Don’t just settle for avoiding content that doesn’t suit mobiles - actively experiment
with content that is aimed specifically at such devices. Have you developed an iPhone HP, Windows and Research in
or Android app? Then promote it in your footer. Create coupon landing pages that Motion (the maker of the Blackberry)
are all taking aim at the market
work perfectly on a mobile browser and encourage people to use that rather than
that was defined by Apple and
forcing them to print. If you can handle sign-ups in person, then make sure that your successfully interrupted by Google;
welcome email is designed to look great on a mobile. It is this seamless integration it remains to be seen whether their
between traditional online content, mobiles, apps and offline interaction that will attempts will succeed.
really impress your users and add genuine value to your brand.

Coding
Once you have thought about how your email campaigns can be adapted to smaller screens, it’s time to create these styles and
ensure they show up only on mobiles. Coding emails can sometimes feel like an exercise in frustration: you need to throw out
advances in web design and best practice and revert to coding using basic HTML tables because this is the only consistent way
to get your design to work across the raft of available email clients. However, these limitations can be over-come using recent
advances in CSS, specifically media queries5, which enable fine-grained controls over the application of specific styles.

©Copyright smartFOCUS. All rights reserved Page 4

WHITE PAPER

At smartFOCUS we decided to put our words into action and make our own newsletter, Gauge, more mobile-friendly as part of
our re-design. Once we’d decided what parts of the email we wanted to change for mobile devices, the first step was to apply ids
and classes to provide hooks for styling:

We then created an external style sheet that would over-ride our inline styles and table structure using these hooks, linking to it
in the head of our document like this6:
<style>@import url(“flexible.css”);</style>

The style sheet includes the CSS3 media query:

@media (max-width: 600px) { OUR STYLES }

This media query wraps all of our styles for smaller screens, telling the email client or browser to only apply them if the screen is
less than 600 pixels wide. You are not limited to a single media query, though, and you might want to make a variety of changes
based on different widths and other criteria.

Broadly, the steps we took for Gauge involved:

• Removing the fixed table width (which was round 600px) so that the main table filled all of the screen

• Scaling down the large font sizes for headings

• Assigning each image a max-width propertyof 100 percent, ensuring each was in its own table cell and would therefore scale
depending on the size of screen

©Copyright smartFOCUS. All rights reserved Page 5

WHITE PAPER

For some designs, it might also be relevant to remove parts that don’t work on smaller screens. Using media queries to apply these
styles has the added benefit of not sending parts of the design – such as larger images – to mobiles, speeding up rendering.

Images in our own email have a width and a height attribute. By giving individual images IDs (or classes for groups of similar
images), we can then make them flexible to so they will adapt tosmaller screens.

For example, if we had this image (of the smartFOCUS logo) in our email:
<img id=”logo” src=”whatever” width=”200” height =”40” alt=”smartFOCUS” />

…then we would want it to take up 100 percent of the table cell that contains it when the screen is a certain size (actually shrinking
the image, because the table cell is smaller than the image itself). In our style sheet we included this:
#logo { width:100; }

…ensuring the logo filled 100 percent of the table cell that it is in7. This process can be followed for every part of an email that
needs tweaking. Safari on the iPhone (and other mobile WebKit browsers) will adjust text size in order to increase legibility. This
behaviour can be over-ridden using the CSS property ‘-webkit-text-size-adjust’ by setting it to ‘none’. It is important not to abuse
this though, and to ensure that your design uses fonts that can actually be read.

The final step is to include the following meta tag in the head of your HTML document:
<meta name=”viewport” content=”width=device-width, minimum-scale=1.0, maximum-scale=1.0”>

This tag specifies that the width of your viewport should be that of the device itself, and that users should not be able to scale the
viewport at all. Variations on this meta tag can be used to suit your requirements - you will not always want to restrict users from
zooming in and out.

When viewing the Gauge redesign in the native Android client, it now looks like this:

On the left is how the email would have rendered if we had made no changes. It’s not bad, but the small tweaks we’ve introduced
in our external style sheet certainly add up, subtly improving the experience on mobile devices. Information such as our contact
details, social buttons and the ‘view in browser’ link are all visible straight away – our readers can get to them without zooming in
or scrolling around the small screen.

©Copyright smartFOCUS. All rights reserved Page 6

WHITE PAPER

Conclusion
As the distinction between ‘phones’ and ‘smartphones’ begins to blur and new form factors such as tablets are introduced, the amount of
people reading your emails on such mobile devices is set to increase massively.

By combining good design principles with intelligent coding, it is possible to provide the best possible experience for your readers,
regardless of the device they are using. Mobile usage is growing at a fast pace and email clients are becoming ever more capable, so
progressively enhancing your emails should not be considered merely a nice addition, but a central consideration in your design process.

We hope that you have found this whitepaper informative and valuable. If you did find it interesting then please pass a copy along to your
colleagues. For monthly tips and advice about Digital Marketing subscribe to our newsletter now http://bit.ly/bMaxq4. We’ll respect your
privacy and won’t flood you with emails or share your email address. We’d be delighted to discuss this whitepaper with you. You may
contact Tim Watson from http://bit.ly/bBE2Hx.

Resources
• This paper has necessarily presented a very Western take on the state of the mobile market. For a more rounded overview and
analysis of mobile market share around the world, Quirksmode (the website of mobile platform strategist and consultant Peter-
Paul Koch) is invaluable: http://www.quirksmode.org/mobile/

• Ethan Marcotte’s ALA article ‘Responsive Web Design’ has sparked massive debate in the web design community. It is a great
place to start to get a feel for using media queries and allowing your content (on the web or in an email) to become more
responsive: http://www.alistapart.com/articles/responsive-web-design/

Footnotes
1. Google conference call October 2010 via TNW: http://thenextweb.com/mobile/2010/10/15/android-pulling-in-1-billion-
revenue-this-year/

2. Nielson, ‘What Americans do Online’: http://blog.nielsen.com/nielsenwire/online_mobile/what-americans-do-online-social-

media-and-games-dominate-activity/

3. Quantcast(http://www.quantcast.com/docs/display/info/Mobile+Report) via Techcrunch (http://techcrunch.com/2010/01/05/

quantcast-mobile-web-apple-android/), January 2010

4. Remember all that ‘best-practice’ advice for creating effective emails? Tips such as keeping your important information above-
the-fold and including your logo in the top left-hand corner? All of this remains as relevant as ever. In fact, with screen real-
estate even scarcer and your customers’ time and bandwidth even more limited, this advice is essential.

5. See http://hacks.mozilla.org/2009/06/media-queries/ for a quick overview of media queries. The beauty of media queries is that
with a modern browser such as Firefox or Chrome, testing and seeing their effects is instantaneous and can be done on your
computer.

6. It is important to use the @import method, as this hides the style sheet from semi-capable clients like Yahoo!, which support
external style sheets but not media queries, and so applies all styles.

7. In this example, we do not need to use the !important declaration, because we are not over-riding a CSS style but HTML
attributes. When over-riding inline styles, the declaration is needed.

©Copyright smartFOCUS. All rights reserved Page 7