@

Mobile Email Marketing Toolkit

Code & examples to make your email campaigns mobile friendly

Contents
Introduction

01 02 03 04
06 07 08

The Growing Importance of Mobile Key Mobile Devices Designing for Mobile

Examples: Ways to optimise email for mobile

Changing formatting and widths Showing and hiding content on different devices Changing the layout of mobile emails

06

Instructions: How to code emails for mobile

Changing formatting and widths Resize tables and images Showing and hiding content of different devices Changing the layout of mobile emails

09
09 10 11 13

About Emailcenter

15

Introduction
Mobile is perhaps the hottest topic in email marketing right now. It presents a great challenge to marketers to ensure that their growing number of subscribers accessing email on mobile devices can get the same quality experience as those using a desktop client. Our aim for this toolkit is to provide a set of examples and code that enable you to generate your own mobile optimized HTML emails perhaps in ways you did not think were previously possible. You will find not only a summary of the ways you can tweak your emails, but also the special CSS rules and HTML code for you to copy into your own emails.

The Mobile Email Marketing Toolkit emailcenteruk.com/mobile

The Growing Importance of Mobile

Each year we see an embrace for the technologies of the time. Over the last two years the trend has been mobile. Smartphone handsets now represent 30% of the entire UK mobile market and this figure is expected to grow rapidly in 2012. The use and popularity of tablet devices has also grown, with leaders in the market such as the iPad paving a new way of checking your emails on the go. In July 2011, Apple reported record profits through its iPhone and iPad sales, with Apple selling more than 20 million handsets in the first quarter. This has had a direct impact on the increase of email marketing messages being read on these mobile devices. Here is an example of how many opens have been recorded on different desktop, webmail and mobile clients from a typical consumer based email campaign:

Report taken from typical B2C campaign in Maxemail

The Mobile Email Marketing Toolkit emailcenteruk.com/mobile

Key Mobile Devices

Below is a snapshot of the main players in the smartphone market, including some insight into their market share and how email renders on each of them.

iPhone: By far the most popular email device, rendering HTML email on this is actually far easier than many webmail providers as it supports HTML5. However you are still restricted to a screen 320px wide so there are usability issues to think about. iPad: These devices can be thought of as similar to the iPhone but with a bigger screen. There are few limitations to be thought about with this device, but there are opportunities to include HTML5 features such as streaming video.

Android: An operating system for mobiles rather than a device, containing a built in email client. Screen sizes vary between devices, while again rendering is not so much of an issue as desktop clients.

Windows Mobile: This appears to have a tiny market share which is lucky as it does not render HTML email particularly well. In fact our advice is, because the footprint is so small, that there is no justification for spending extra resource to cope with this device.

Blackberry: Unlike versions of the iPhone or Android, there is a huge amount of change in HTML email capabilities between versions. For example, the Blackberry 8900 will render the text version (or if no text version show the HTML source code!), while later versions such as the Blackberry Curve do render the HTML, although nowhere near to the quality of iPhone and Android devices.

Why is email for mobile different?

There are three main differences between recipients receiving emails on their mobile or tablet device, compared to their desktop PC. 1. Bandwidth: Often mobile devices will be connecting to low bandwidth which are significantly slower in loading emails and downloading images than a desktop connection. On the go: Mobile devices are simply that - mobile. Therefore you can expect most recipients will be viewing their emails on their mobile while moving. This means they might not have time to scroll down and read your whole email, so the call to action needs to be visible. 3. Small screens: With a small screen your email becomes squashed or shrunken, making it harder to read. Additionally, the point and click device is no longer a mouse and cursor but the recipients clumsy big fingers, causing some to click on the wrong link. Multi-devices: With your customers accessing email via their work PC, home laptop, mobile and tablet there is a danger that if your email and landing pages are difficult to use or view then while a recipient might think of coming back to your email when on their PC, in reality once the message is marked as read it is lost in the clutter of the inbox. Indeed from our own analysis of those who open the email initially on their mobile device, only 3% will read the email on a desktop device at a later stage.

4.

2.

The Mobile Email Marketing Toolkit emailcenteruk.com/mobile

Designing for Mobile

Mobile web is growing at a rapid pace, and web designers are already taking into account customers browsing their sites using smartphone and tablet devices, stripping the site down to the basics with the option to view full site. This cant be done for email though, as you have to deliver a ready-made piece of HTML to the inbox, rather than re-direct them. Therefore to achieve the lowest common denominator of screen size it would mean compromising the message seen for perhaps 90% of your list on desktop email clients. However there is a way we can make emails work equally well on desktop and mobile devices. A current trend in web design is termed responsive design. This is moving away from designing a site with a fixed interface to creating a design that can be automatically optimized for devices other than the desktop upon opening in the browser. We can also utilize this technique to force mobile clients to dynamically alter the HTML email, meaning those viewing on a desktop get the best experience for them, those viewing on their mobile get an optimized version for their screen.

Desktop version

Mobile version

In this example we have changed the layout of the email to aid the viewing experience on a mobile device. Exactly the same email has been delivered, but we have changed the way it renders using our responsive design code.

The Mobile Email Marketing Toolkit

How it works the @media CSS rule

Within a HTML style tag where you can define CSS we can now create something called an @media rule. This allows us to define conditional CSS that is only applied if the screen resolution in which your HTML is viewed is of a certain size. Traditionally in email design we cannot use CSS reliably as it is often stripped out however as this CSS rule is only to be relevant to mobile devices, and iPhone and Android have excellent CSS support, we can use it to do anything from change font sizes through to even displaying a completely different email. Below is an example mobile stylesheet we have included in the <HEAD> tags of a HTML email. It will only be applied to screens whose maximum width is less than 480px, which is the width of an iPhone in landscape mode.
<style type=text/css> @media only screen and (max-device-width: 480px) { table[class=mobilewidth] {width: 380px !important;} table[class=100pcwidth] {width: 100% !important;} td[class=spacing] {border-top:solid #ffffff 10px !important;} table[class=features-table] {clear:both; !important; width: 100% !important;} table[class=first-table] {clear:both; !important; width: 100% !important;} } </style>

For each TD, DIV or TABLE tag to which we are applying the style, we must also add the appropriate class name. For example: <TD class=mobile> You might think we have defined this CSS in an unusual way so rather than using the usual class selector (.classname,) we have defined it as an attribute. There is a simple reason for this if you dont do this method the Yahoo webmail client will always display the mobile CSS. You will find as we go along there are other workarounds we show on each example to overcome webmail and desktop email clients limitations. There are also limitations with this code. It is only supported on iPhone and Android default mail clients. If you view your email on an app, or a webmail client on the device, the @media CSS is usually ignored. However our tracking shows around 96% of mobile opens are within the default mail client. We of course have only mentioned iPhone and Android here. Blackberry and Windows Mobile devices do not support this. The iPad will support this, but the high quality resolution on this device is such that the requirement to do so is not there.

The Mobile Email Marketing Toolkit emailcenteruk.com/mobile

Examples: Ways to optimise email for mobile

Now we have given you a basic introduction to mobile optimized HTML and CSS code here are some real-life examples you can use as a starting point for customizing your templates. Against each example we have provided the full HTML source, complete with our notes on what each piece of code does to aid your understanding.

1. Changing formatting and widths

Text on an iPhone has to be a minimum of 13px, otherwise the iPhone will automatically change the font size to this. This of course means that it can destroy your carefully designed table layout if your text now runs onto 2 lines (see example below). Fortunately you can add in a style to force the iPhone not to resize this text by adding webkit-textsize-adjust: none; within a style tag, or simply include as an inline style on the Body tag.
Desktop version Mobile version without prevening text resize Mobile version with code added to disable text re-sizing

On other occasions you might want to allow the iPhone to keep auto-resizing most text, but want to manually change the font-size of certain pieces of text. Simply create the CSS and then apply the class to the relevant tag, as shown as shown in the example code. Images often stretch an email so the email is at least the size of the widest image. On a mobile device we are aiming for a maximum width of 320px, so adding max-width: 100% within the Media tag to overcome this. Using this image which might be 600px wide, will now only be as wide as the maximum width of the screen. You could also use this with any percentage amount, so if you only ever want the image to be 50% of the screen add max-width: 100% instead.
Mobile version without standard image re-sized Mobile version with images re-sized

Desktop version

This can also be used to alter widths of other elements such as tables. Again just define a new class with the width within the media rule, and then add this class to your TD tags you wish to resize, ensuring you have no width on the TABLE tag itself.
The Mobile Email Marketing Toolkit emailcenteruk.com/mobile

2. Showing and hiding content on different devices

We have all been known to cram lots of content into our email newsletters. That is fine when we are viewing it on our PC, but on a tiny mobile device we cannot get away with too much clutter. What we can do with our @media rule though is to define what to hide or show on mobile and desktop/webmail devices. This can then be used to achieve outcomes such as: Showing iPhone-specific promotions such as Download our app just to iPhone viewers Hiding sections of the email on mobile devices which are too big, or perhaps link to non-mobile friendly landing pages Reduce the amount of content shown on the mobile device, to keep the length of the email more realistic for scrolling Here is our example of how we have effectively achieved this with two separate emails: Example 1: Hiding content on a mobile device note the sections no longer visible when opened on an iPhone
Desktop version Mobile version

Example 2: Showing content on the mobile device only one section is hidden on desktop/mobile devices
Desktop version Mobile version

Hiding content on a mobile device is easy, the more complicated route is hiding content so it does not appear on desktop and webmail devices, as the likes of Gmail dont support CSS such as Display: none. Our notes in the example take you through what is required. You can also combine the two examples so some things are hidden on mobile devices and some things are hidden on desktop and webmail clients.

The Mobile Email Marketing Toolkit emailcenteruk.com/mobile

3. Changing the layout of mobile emails

This tip is particularly appropriate where you might include numerous product offers in multiple rows and columns of the email. On a desktop, with an email width of 650 pixels it might be easy to display a row of 2 or 3 offers. However when we view this on a mobile device the offers are too small and we are forcing the recipient to zoom in, and get lucky when they attempt to click with their big fingers. Here is a simple example of how we can change the way we structure our HTML tables, and include a simple CSS style to force each offer onto a new line:

Desktop verson

Mobile version

It is likely that taking advantage of this example it will mean big structural changes to how your HTML is written for your template, but the benefits of having a more optimized layout are obvious.

The Mobile Email Marketing Toolkit emailcenteruk.com/mobile

Instructions: How to code emails for mobile

Using these code samples
This section takes you through the practical side of each example. With each one, there are links to the source code files, making it easy for you to copy the code for your needs. The code samples have been tested in all major desktop, webmail and mobile email clients, in multiple browsers including Internet Explorer, Chrome, Safari and Firefox. Clearly these email devices are changing constantly, and therefore there is a possibility more or less code will be supported after the time of writing you should always do a thorough test in all devices and browsers.

1. Changing formatting and widths

Source: Text Formatting: http://www.emailcenteruk.com/mobile/text-resize.html As well adjusting the layout of your email, you may should also consider the formatting of your text to ensure they are finger friendly. The following example will show you how to increase the size of a heading and a call to action.

Desktop version

Mobile version

Using the @media rule, you can define text colours, fonts and sizes. The following code has specified a mobileheader and a mobile-link font size.
@media only screen and (max-device-width: 480px) { div[class=mobile-header] {font-size: 20px !important;} a[class=mobile-link] { font-size: 18px !important;} }

In the body of the email, you simple specify the class on each element you want to adapt in the mobile version:
<div style=font-size: 28px class=mobile-header>Font formatting</div> <a href=# class=mobile-link>Find out more &raquo;</a>

As you can see, the title is easy to read and the links are easy to touch.

The Mobile Email Marketing Toolkit emailcenteruk.com/mobile

2. Resizing Tables & Images

Source: Table resize: http://www.emailcenteruk.com/mobile/table-resize.html Source: Image resize: http://www.emailcenteruk.com/mobile/image-resize.html Every single email should revolve around one main table, this is usually set at 600 650 pixels wide to accommodate desktops & laptops. Using the @media rule, you can amend your table width to be a more mobile friendly 320px.
Desktop version Mobile version

@media only screen and (max-device-width: 480px) { table[class=mobile-width] {width: 320px !important;} } <table cellpadding=0 cellspacing=0 width=600 class=mobile-width> <tr> <td>content</td> </tr> </table>

This relies on the table not containing an element which is wider than the table itself. For example, a 600 pixel wide image. This would stretch the table regardless of the HTML & CSS. The following code shows how to resize and image:
Mobile version 1 Mobile version 2

@media only screen and (max-device-width: 480px) { table[class=mobile-width] { width: 320px !important;} img[id=max-width] {width: 300px !important; height: 145px !important;} } <img src=http... width=600 height=290 id=max-width />

The Mobile Email Marketing Toolkit emailcenteruk.com/mobile

10

3. Showing and hiding content of different devices

Example 1: Hiding content on a mobile device Source: http://www.emailcenteruk.com/mobile/hide.html
Desktop version Mobile version

To hide content, add a new class to your element, and add a corresponding definition in your CSS as below:
<style type=text/css> @media only screen and (max-device-width: 480px) { tr[class=hide-in-mobile] {display: none !important;} } </style>

Example 2: Showing content only on the mobile device Source: http://www.emailcenteruk.com/mobile/show.html

Desktop version Mobile version

The Mobile Email Marketing Toolkit emailcenteruk.com/mobile

11

This is more complicated as your CSS definitions need to support a multitude of devices, not just a handful of mobile clients. Gmail, Outlook and other popular clients often have limited CSS support which is required to hide a DIV or TABLE. Therefore we have to use several methods for hiding the content. Firstly we can hide the content using standard display: none inline CSS. For Gmail though, this wont work, so we will have to add 3 extra pieces of inline CSS. Here is an example DIV:
<div class=show-in-mobile style=display: none; width: 0px; overflow: hidden; float: right>

The additional CSS is to set the width to 0px, then ensure there is no overflow, and finally as that still leaves a space we float it to the right of the email. So for all intents and purposes the content is invisible. You will notice we have a class on the DIV which of course when opened on a mobile device reverses this inline CSS so it is visible:

div[class=show-in-mobile] {display: block !important; width: 100% !important; overflow: display !important; float: none !important}

You can use both examples within the same email, and this can even be used to display 2 different emails depending on what device they opened it in. However, remember if you go down that route the size of the email is important, too big and the email will get clipped, meaning not all of the code will work if only part of the email is rendered. Therefore we advise putting your mobile content ahead of the desktop content in this scenario.

The Mobile Email Marketing Toolkit emailcenteruk.com/mobile

12

4. Changing the layout of mobile emails

Source code: http://www.emailcenteruk.com/mobile/layout.html
Desktop version Mobile version

This example requires you to build your HTML template in a certain way. Rather than creating tables that force layout based upon columns and rows, we create a different table for each column that will then be made into a row on the mobile device. These tables immediately follow each other in the code. Normally they would automatically sit under one another, but if we add an align to the table tag we can get them all on the same row, presuming the total width of the tables is within the available width. Table 1: <table width=428 align=left cellpadding=0 cellspacing=0 class=first-table>

Table 2: <table cellpadding=20 cellspacing=0 class=100pcwidth width=152>

The Mobile Email Marketing Toolkit emailcenteruk.com/mobile

13

The best way of us demonstrating this is with our video:

Watch video: http://screenr.com/8eos

In all desktop and webmail clients these tables will sit as shown on the example. However for mobile we need to force the tables to sit under one another by counteracting the align tag we added. Luckily there is some CSS called Clear:both which does exactly what we want. We also need to change the width of the tables so they fit the entire email, plus add padding in the form of a border on the second table so there is a gap between them. Mobile class for first table:
table[class=first-table] {clear:both; !important; width: 100% !important;}

Mobile class for 2nd table to adjust width and add border for padding:
table[class=100pcwidth] {width: 100% !important; border-top:solid #ffffff 25px !important;}

Finally due to one particular Outlook-specific issue, we have to add a workaround for the 3 feature articles. Outlook will not allow you to have tables immediately following one another without adding extra spacing causing your layout to go over multiple lines. Fortunately there is a way around this as Outlook supports its own special comment tags allowing us to add conditional formatting when opened in Outlook. We simply add in a block of CSS which reduces the width of the tables in Outlook only, meaning they now all sit on a single line.

<!--[if gte mso 9]> <style> .features-table { width: 190px !important; } </style> <![endif]-->

The comment tags need adding exactly as written above for them to be recognised by Outlook.

The Mobile Email Marketing Toolkit emailcenteruk.com/mobile

14

About Emailcenter
Emailcenter are an advanced CRM focussed email marketing service provider. We are a multi award winning agency and work in a wide range of sectors, with clients including Toptable, Go Compare, The Hoseasons Group, NS&I, England and Wales Cricket Board and Visit Britain. We specialise in providing a personalised service to aid the creation of smarter email programmes. Maxemail our technology platform boasts many market leading and innovative features, presented in an intuitive interface, offering the power of an enterprise solution, but in a way that all can understand. Get in touch to discuss any email marketing requirements you may have: Tel: 01327 811884 Email: info@emailcenteruk.com

The Mobile Email Marketing Toolkit emailcenteruk.com/mobile

15