Beruflich Dokumente
Kultur Dokumente
Foreword
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
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.
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.
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>
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.
• Removing the fixed table width (which was round 600px) so that the main table filled all of the screen
• 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
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.
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/
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.