Professional Documents
Culture Documents
Contents
Introduction
01 02 03 04
06 07 08
The Growing Importance of Mobile Key Mobile Devices Designing for Mobile
06
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.
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.
4.
2.
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.
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.
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
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.
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.
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 »</a>
As you can see, the title is easy to read and the links are easy to touch.
@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 />
10
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>
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.
12
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>
13
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.
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
15