email design for mobile devices

Email design for Mobile DevicesWritten by Ed MElly with Foreword by davE ChaFFEy

Want to know more?

Email: [email protected]: +44 (0)117 943 5800visit: www.smartfocus.com/mobile

Inside you will learn:

how should my campaigns change?

What are the issues?

What is the solution?

design & content

WHITE PAPER

WHITE PAPER

©Copyright smartFOCUS. All rights reserved

ForEWord

Mobile usage is growing rapidly. There have been significant year-on-year increases in apple iPhone adoption, the android platform is gaining momentum and hP’s acquisition of Palm underlines its commitment to mobile. Furthermore, the tablet market created by the iPad is expected to continue growing rapidly.

In its Internet Trends presentation of June 2010, Morgan Stanley predicted that the population of mobile users will exceed desktop internet users within five years. Such predictions are not uncommon: Google CEo Eric Schmidt said in october 2010 that: ”Search on mobile will eventually exceed that of PCs... so, eventually, mobile will be a very, very strong revenue stream in comparison to PCs”.1

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 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

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

Mobile?

What do we mean by ‘mobile device’? The description now embraces so much more than just mobile phones and is used to encompass devices such as the iPod touch, tablets and arguably even netbooks. For the purposes of this paper, the terms ‘mobile’ and ‘mobile device’ are used to describe any portable internet-enabled gadget that isn’t covered by the term ‘personal computer’.

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 that benefits greatly from brevity and relevance; mobile just amplifies that fact.4

Rendering issues

does your email look good on a small screen or are you forcing your readers to scroll and work just to get at your message?

your email must work in both outlook 2010 and the latest mobile clients which support emerging standards like CSS3. It needs to hold up on a widescreen monitor and a mobile screen a few hundred pixels wide.

one approach is to create separate versions of your email and then let people choose between the two. another is to actively target recipients who your analytics software believes are using a mobile, then send them the ‘mobile-optimised’ version. however both these approaches miss the point: people do not want to specify in advance where (or on what) they are going to read your emails, nor should they receive a watered 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 desktop to further examine those we have flagged when we arrive. It is this flexibility 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.

Content issues

does the content of your email rely on your readers being sat at a desk? does it include calls-to-action and links that won’t work effectively on smaller screens or for those on the move? It is not much good ensuring your emails look amazing on mobile devices if they link through to websites that takes forever to load or render incorrectly.

of course it’s possible to retrofit email content to better serve mobiles, but you need 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 your wording can be the factor that makes your email feel like it truly belongs on a mobile. Ignore such things, and it will appear to be what it is: just an afterthought.

If your content includes elements that are cumbersome on anything but a desktop 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.

a Tale of Two Pizzas

Special offers received in emails that have to be claimed offline are excellent opportunities to make the most of mobile-optimisation.

receiving a special offer from Pizza Express leads you to a landing page which clearly states ‘Please show your code from your phone or print out this page’. Perfect: if you feel like printing the page, you can, but it might prove easier to just bring your phone to the restaurant, enjoy the deal and help save a tree into the bargain.

For a far less satisfying experience, take a look at Zizzi’s past promotional offers. Its special offer email links through to a landing page with the condition ‘Photocopies or electronic vouchers on mobile telecoms will not be accepted.’ okay, but why? Is this just an arbitrary impediment that is forcing customers to read email from a PC connected to a printer?

Neither Pizza Express nor Zizzi is entirely successful in coding mobile-friendly emails (or landing pages), but at least Pizza Express is getting the call-to-action right.

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. Ensure your design is clean and simple (one or two clearly defined columns, good use of whitespace) and it should translate well to smaller screens. It’s also important to remember your recipients are now just as likely to be using their finger to navigate and follow links, not an accurate mouse. Giving this some thought will avoid any resulting frustration. you should ensure that your calls-to-action are blindingly obvious and easy to follow. This might mean including large buttons or using a larger font size for important links, while ensuring that the most important 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 touch screen.

remember - brevity and simplicity have always been essential to emails, and mobile only serves to reinforce that further – more than ever there is no room to waffle or present a cluttered experience. The mobile platform has dramatically altered reading habits and certainly promotes more information ‘snacking’.

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 or android app? Then promote it in your footer. Create coupon landing pages that work perfectly on a mobile browser and encourage people to use that rather than forcing them to print. If you can handle sign-ups in person, then make sure that your welcome email is designed to look great on a mobile. It is this seamless integration between traditional online content, mobiles, apps and offline interaction that will 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.

The State of Play

Keeping up with the current state of the mobile market is daunting, not least because of the breathtaking pace at which it is evolving. Nokia remains the largest phone company worldwide, but they have yet to make a significant dent in the smartphone market, which is currently dominated by apple and Google. apple is a force to be reckoned with (1.7 million iPhone 4 handsets were sold in the three days following its launch in 2010). Google introduced the android oS in 2008 and it is now found on a range of devices worldwide; it is predicted that by 2014 it will be the most popular mobile oS in the world.

hP, Windows and research in Motion (the maker of the Blackberry) are all taking aim at the market that was defined by apple and successfully interrupted by Google; it remains to be seen whether their attempts will succeed.

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:

• Removingthefixedtablewidth(whichwasround600px)sothatthemaintablefilledallofthescreen

• Scalingdownthelargefontsizesforheadings

• Assigningeachimageamax-widthpropertyof100percent,ensuringeachwasinitsowntablecellandwouldthereforescaledepending on the size of screen

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.

WHITE PAPER


Conclusionas 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• ThispaperhasnecessarilypresentedaveryWesterntakeonthestateofthemobilemarket.Foramoreroundedoverviewand

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/

• EthanMarcotte’sALAarticle‘ResponsiveWebDesign’hassparkedmassivedebateinthewebdesigncommunity.Itisagreatplace 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/

footnotes1. 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.

email design for mobile devices

Documents