Home Resources Blog

Email on the iPad

I know what you’re thinking – just as we’re coming to grips with optimizing our email newsletters for mobile, suddenly we have tablets like the iPad and Kindle Fire to make things interesting again. So here’s the good and the bad news. The good: if you’ve already created a responsive design for the iPhone, then adapting this for the iPad and similar devices is dead easy. The bad: it still requires extra testing, coding and sooner-or-later, it’s going to be what all your clients are asking for.

Before we provide any solid answers on whether or not we should all be optimizing our email campaigns for tablet devices, lets look at their uptake and some basic techniques for adapting your design for small, yet not-so-small screens.

Why optimize for tablet devices?

The skinny is that tablet devices are getting popular. I’m sure you know of more than a few people who begged for Kindle Fires for Christmas, then got slipped a Motorola Xoom by Santa instead. Or snapped up an iPad 2 the moment they were launched. Our friends at Return Path collected the hard numbers in a recent report, citing:

“In our last study we reported a 15% increase in iPad use relative to iPhone use… What we find is that the use of iPads has exploded – with an increase of 73% in email views on iPad devices between April and September of 2011. Email views on the iPad jumped by 12% between March… and April, then continued the steady climb upward.”
– ‘Mobile, Webmail, Desktops: Where Are We Viewing Email Now?‘, Return Path, 2011

In June 2011, we found that iPad usage accounted for almost 15% of opens tracked on mobile devices and 3% of email opens overall. Given Return Path’s recent findings and our own observations, this is rapidly growing and potentially cannibalizing iPhone market share while it’s at it. We’ll be sure to provide usage stats for other tablet devices as they come to hand, so watch this space.

Adapting mobile code for slightly larger screens

As mentioned earlier, if you’re already in the habit of optimizing your campaigns for mobile screens (or have exported a template from our template builder), then you’ve already done most of the legwork. What’s remains is the addition of a slightly different @media query, targeting the display dimensions of tablet devices. Here’s a typical @media query for mobile devices, followed by the adapted equivalent for the Kindle Fire, iPad and Xoom:

.codeblock {
width:92%;
display:block;
padding:20px;
overflow:none;
word-wrap:break-word;
margin-top:20px;
margin-bottom:20px;
background: #ededed;
font-size: 0.8em;
}

/* iPhone, Android and other smartphones */
@media only screen and (max-device-width: 480px) { table[class=container] { width: 320px; /* width of iPhone in portrait orientation */ } }

/* iPad, Kindle Fire and Xoom */
@media only screen and (min-device-width: 590px) and (max-device-width: 1280px){ table[class=container] { width: 768px; /* width of iPad in portrait orientation, can also try width: 100%; */ } }

The good team at Email on Acid have a brilliant summary of all the different @media query combos you can use to target specific tablet devices (and orientations), however for the sake of brevity and maintenance, it’s probably worth focusing on 2 generic ones like in the sample above.

If the above is a bit of a mystery, I highly recommend reading our ‘Mobile Email Design in Practice‘ post, as well as creating and exporting a template from our template builder to see how it all clicks under the hood.

So, should I rejig my email design for tablet devices?

Ultimately, this decision should be made by consulting the email client usage report in your Campaign Monitor account. For example, 4.9% of all opens for our recent December newsletter originated from an iPad. In March (when the iPad 2 launched), this figure was 2.7%. In 9 months, the iPad’s share of opens has nearly doubled. That indicates to us that even if the iPad is a minor player in the email client scene at present, it’s probably not going to remain that way for good. Either way, having the know-how when it comes to optimizing your email campaigns for tablet devices is going to become an increasingly sought-after skill in an email designer’s stable, so it makes good sense to test out these techniques now, before your clients force you to.

Do you optimize your designs specifically for tablet devices? Do you have any great tips? Let us know in the comments below.

  • Brian Thies

    Mobile @media coding is the equivalent of coding a website for multiple IE6 browsers, in which the IE6 browsers are always changing. With the yearly introduction of new tablets and phones, this coding will change over and over. As many are finding out, the resolution settings on the phone can also change how it’s displayed (not just the screen size), which throws another unforeseen element into the fray. In the age of standards, mobile email coding is once again thrown in a blender set on purée.

    As a Kindle owner, I have no problem using the basic pan/zoom functions to navigate web pages & email. Tablet users are use to this, and it takes less than a week to become an expert. As for phones, it’s a losing battle. What works today might not accommodate the new devices released next month, and in a year you’ll be pulling your hair out again. The biggest killer of them all? Budget. For complex designs the time it takes to reconstruct the look in each device simply won’t fit within the client’s budget.

    For sanity & time to market, scroll/pan/zoom is not a bad thing. Your thoughts?

  • Jenni

    Designing for iPad and Kindle doesn’t seem too bad, but even thinking about designing something with cross-browser/system compatibility for Android gives me a headache.

  • Anna

    I’ve less patience than you Brian. The 600px cut off on the Kindle Fire drives me nuts…always having to swipe to see the last 50-100px. Also being able to read but not tap links on the iPad without zooming. Though I agree about budget, your usage no’s have to justify the extra resources for a responsive layout.

    Still if your are sending out mostly a big scalable image (like most retailers) it’s more a question of just reworking for touch. No extra design budget (discounting the mobile optimized landing page you’re ideally linking to).

    As for Android.. I’d love to see those native vs. app stats. Because it’s under reported, and like Jenni said a total headache, we’re all too focused on iOS.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free