How to optimize your email for mobile devices
If your email subscriptions are anything like mine (as a fellow interactive marketer, I assume they might be), it seems like every other article that hits my inbox lately contains another new stat or case study regarding mobile. Whether we’re talking about the mobile web, mobile apps, mobile email, or mobile sites, the “M-word” is everywhere.
As more research regarding both the sales and usage of mobile devices — specifically smartphones — becomes available, many marketers are asking, “How should I be optimizing my email for mobile devices?” There are several strategies available that range from “ignore it” all the way to the creation of elaborate solutions to deliver device-specific content to mobile users. But how do you know which is right for you and, more importantly, your subscribers?
Get connected. Want to meet up with the companies that are leading mobile email into the future? Check out the exhibit hall at ad:tech New York, Nov. 3-4. Learn more.
Know your audience
This is no doubt advice you’ve heard it before: Relevancy is the new king in interactive marketing (although content still counts too). Relevancy doesn’t end with the type of content you deliver; it can also extend to how that content is delivered. This cannot be stressed enough when it comes to mobile email. If you don’t have data stating that you have a sizable number of subscribers viewing your emails on their mobile devices, the effort to modify your design or create a mobile version might not pay off.
How do you know if you have a mobile audience?
This is easier than you might imagine. Litmus, an online provider of email rendering and preview services, also offers an email analytics option. After you insert its campaign-specific tracking code in your email and send it, the tool collects information on which email clients (Gmail, Yahoo, Outlook, etc.) and mobile devices (iPhone, Blackberry, Android, etc.) your subscribers are using to open the email. (One important note: Email client data is only collected for opens — meaning that only those subscribers who enable images on your email are counted. This might sway your numbers slightly in favor of those email clients that enable images automatically.)
You might also be able to use web analytics data to find out how many users are viewing your website with a mobile device. You’re still left making some assumptions, but having a hunch is better than not having a clue.
Creating a mobile email solution
Now that you have the data, what can (or should) you do with them? Each marketer’s mobile audience is going to vary in size (how many users are viewing on mobile devices) and complexity (how many different types of mobile devices are in use). In our testing with clients, we’ve found that the number of customers reading email on mobile devices varies dramatically, sometimes even between audience segments. You should determine where your thresholds are for balancing user experience with ROI. Will you optimize for mobile when 2 percent of your opens are generated by mobile devices or wait until mobile views hit 20 percent?
Also keep in mind that some devices are more adept at handling HTML email. Apple, Android, and Palm devices generally display HTML emails intact, making any needed optimization minimal. Despite increased sales of alternative operating systems, some reports have suggested that usage of these HTML-friendly devices for the consumption of mobile email and web is higher simply due to their ease of use.
Creating a “view on a mobile device” link
The simplest way to create a mobile-friendly version is to include a “view on a mobile device” link at the top of your email in the preheader area. This is usually accomplished by taking a simple text file (in fact, the text part of your multi-part MIME message might work just fine), adding basic HTML line and paragraph breaks, and hosting it as an HTML file that links from the preheader text. Most, if not all, smartphones on the market today should be able to handle the display of this simplified version of your message. If you’re feeling ambitious, you could opt to include an image or two, but the key here is simplicity. Limit any extras and keep the format to one column.
Using a mobile stylesheet
@media is a CSS3 rule some web developers are using to enable mobile sites. This rule can be used to tell the mobile browser to display the site using a special set of rules that allow for a mobile-specific experience. Similar functionality is possible in email by telling the rule to display a mobile-oriented set of styles if the device screen is below a certain size. The method isn’t bulletproof and requires special planning, but it’s an exciting development for forward-thinking or mobile-heavy audiences.
Maintain a tracking trail
If you choose to create mobile versions of your message, don’t forget to maintain a tracking trail to continue to gather valuable data about the habits of your mobile audience. Your web analytics suite, hosting provider, or email service provider should have the capability to track basic metrics — and it’s even better if you can tie the data back to specific subscribers.
The final word
Still not sure where to start? Don’t worry too much — you’re not light years behind the masses. If nothing else, start to learn how — of even if — your customers are using mobile email. All those reports of rising sales and increased usage of smartphones will likely continue to flood your inbox, but taking the time to understand the nuances of your particular audience might reveal that you don’t need to worry about optimizing for mobile devices — at least not yet.
10 Email Mistakes You Can Easily Avoid
As we move into the last month of the year, let’s take a quick look at how you can improve your email newsletters and appeals in 2011.
Consider the following email pitfalls. Which of these is your nonprofit guilty of committing?
- You don’t track the results of your emails. How will you know what your audience respond to and what they dislike? How do you know if any of your emails are getting delivered? There are many low cost online tools that can help you track email results.
- You don’t review the results of your emails. If you do track your email results, make sure you take a look at these after each and every email send. Are your audiences still opening your emails? How many people are unsubscribing as a result of each send?
- You don’t target and segment your emails. Everyone in your audience receives the same email. This means that you can’t personalise emails, nor target your messages based on audience segment, which means that what you’re sending out is likely engaging no-one.
- Your email is written like a letter. Direct mail and email are different genres. You need to sharpen your typing fingers and focus on subheadings and bullet points in order to make your emails easy to skim. You should also be aiming to keep the email content under 300 words, and to ensure that your main content is above the page break.
- You fall in love with your own images. Images can be fantastic emotional drivers if they are relevant to your message. If they are not relevant, they all too often detract from the message that you are trying to convey. Don’t be afraid to experiment with limited images in your emails.
- You don’t use alt tags in conjunction with your images. Many email programmes disable images by default, which means that your audiences will not see the images that you have spent a lot of time selecting and incorporating into your message. Enable alt tags behind each image, so that your audiences still receive your core message.
- You don’t vary or consider your subject lines. Sending an e-newsletter out with the same subject line each time is guaranteed to make your readers yawn. Write your subject line before your message, as if your audiences don’t even open your email, they wont’ get to see the body text that you spent hours creating and refining.
- Your call to action is at the bottom of the email. At least one call to action should be above the page fold to prompt action, and this should be echoed in the middle and bottom of your email as well. Consider making each image a call to action, and incorporating a call to action in your subject line.
- You don’t clean up your email bounces. Repeatedly sending email to deactivated or nonexistent email accounts will get you marked as Spam, and your emails will eventually stop being delivered. Ensure that you have a programme in place to contact constituents with bounced email accounts. Could you send them an SMS to prompt them to update their details?
- You send your audiences an email every day of the week. The frequency and relevancy of your message is key to achieving engagement and conversions by email. Aim to email your audiences no more than once a week, and no less than once a month. This way, you won’t appear to be Spam, and nor will your constituents forget about you.
Designing and Coding
Tools of the Trade
If you want to get good at coding HTML email, here are the tools you’ll need…
1.A design application, like Adobe Photoshop, Fireworks, Dreamweaver, or
Illustrator. Use these tools to layout your template, and slice out your graphics
(like your company logo, and product photos). We’re really partial to Fireworks,
but to each his own.
2. A good, “pure” HTML/Text editor, like BBEdit and TextWrangler for the Mac, or
HomeSite, and NoteTab Pro for the PC. You could use “WYSIWYG” style tools to
generate HTML, like Microsoft FrontPage, or maybe Adobe GoLive or Macromedia
Dreamweaver. But they have their disadvantages. WYSIWYGs very often throw in
gobs of junk into your code (FYI, Microsoft says the extra code is to help with
“round tripping” which means you can export from Word to Powerpoint to HTML,
then back again, without losing anything). All this extra code usually ends up
just breaking things, or setting off spam filters. There are some WYSIWYGs out
there that generate “clean code” but we’ve found those are a bit “too perfect,”
because they’re designed for web pages, not HTML email (so they don’t know all
the things you have to “rig” in your code.). If you want to do HTML email
correctly, you should learn to code HTML “from scratch” with a good text editor.
Free HTML Email Templates:
If all this talk of designing and coding HTML is too nerdy for you, consider
using MailChimp’s built-in HTML email templates. They’re super flexible,
and can be customized to match any brand. Plus, they’ve already been
tested in all the major email programs. See some nice examples of what
our customers have done:
http://www.mailchimp.com/screenshots/template_examples/
and watch a demo movie of our template design tool:
Visit http://www.MailChimp.com 10
3.Your own web server, to host all your images and archives. You should create a
folder on your website for email newsletters. This is where you’ll store images,
then point to them with absolute paths in your HTML code. You might also want
a folder on your website to store archived newsletters. When we first started out,
we created a folder on our website called, /monkeywrench/ and then kept
campaigns under subfolders named by /date/ to store each campaign. Everybody
has their own organization style, though. Just be sure to come up with a system
and process for archiving, so that each newsletter isn’t a huge chore to publish.
Nowadays, we don’t even bother, because we use MailChimp’s built-in archive
functionality. It’ll save a copy of every campaign you send from our system. You
can build a page on your website called “Newsletter Archives” and paste a little
code snippet from MailChimp. We’ll keep your page updated with all your most
recent campaigns. Saves so much time.
4. An FTP program, like Fetch for the Mac, or CuteFTP for PCs. When you design
your email and slice out all your graphics, you’ll use FTP to move those files from
your computer to the server.
5.A test machine (or two), loaded with as many different email applications and
accounts as possible. You’ll want to check your HTML email designs under lots of
different scenarios. Unlike web design, where you only have to check your work
in a small handful of browsers, there are tons of email applications out there,
and they all handle HTML email differently. If you use MailChimp, you can use
our Inbox Inspector tool and let us do all the testing for you:
http://www.mailchimp.com/add-ons/inboxinspector/
Email usability: The science of keeping it short and sweet
You’ve probably heard the advice, ‘Keep your email campaign short and sweet’, often followed by, ‘… because no-one’s going to read loads of copy, anyway’.
As much as this seems like commonsense, we’ve all seen clients attempt to cram in as much information as possible, oblivious to reason. I believe this is largely due to another school of thought, which goes along the lines of, “My subscribers have signed up because they obviously want to read all about my brand values and 5 year plan.” With a lack of hard evidence to the contrary on hand, this can be an frustrating argument to dismiss.
See no email…
I was skimming through Jakob Nielsen’s research recently and came across a little gem in the form of an eyetracking heatmap. Based on data collected from recipients of an email newsletter, it denotes the areas where they looked the most in red and the least in blue:
From: ‘Email Newsletters: Surviving Inbox Congestion‘ – Jakob Nielsen’s Alertbox, June 12, 2006
Note the emphasis on reading the first two words of the headlines, followed by diminishing interest in the body copy. As the email extends downward, interest in the content rapidly drops off.
If this doesn’t prove how fickle the average subscriber is, then there’s more. Based on this research, Jakob observed that:
“…the average time allocated to a newsletter after opening it was only 51 seconds. “Reading” is not even the right word, since participants fully read only 19% of newsletters. The predominant user behavior was scanning. Often, users didn’t even scan the entire newsletter: 35% of the time, participants only skimmed a small part of the newsletter or glanced at the content.”
Ouch. Just when you thought you could get away with adding at least a tiny introduction to your newsletter, Jacob throws in the following salvo:
“People were highly inclined to skip the introductory blah-blah text in newsletters. Although this text was only three lines long on average, our eyetracking recordings revealed that 67% of users had zero fixations within newsletter introductions.”
It looks like we’ll be keeping our emails to the point this season, hey?
What can we learn from this?
You’re probably speed-reading this blog post, so we’ll get to the good stuff. Here are a couple of tips for getting the important bits of your email read:
- Keep it short – Interest in the content of an email diminishes as the email extends below the fold (as backed up by this study), so cut the copy and keep the most important points of the message near the top.
- Optimize your headlines – As the first two words of a headline are the most important, keep them informational. For example, a headline like “3 tips for improving email usability and response rates” could be rephrased as, “Email usability: 3 tips for improving your response rates”.
- Get to the point – Most readers will skip any long-winded greetings or introductory text, so decide if it’s worth including. If an introduction is necessary, avoid adding any important information to this section.
- Focus the message – Where possible, avoid covering too many topics and keep the message simple. You’re only going to have the readers attention for a few seconds, so make it count by using a standout call-to-action.
- Make it scan-friendly – Limit body copy to easily-readable paragraphs, preferably under 60 characters in width. Selectively use images to reinforce your message, as images often take less time to understand than words.
- Align to the left – Notice how little attention the right-hand column of the email above is getting? That’s because readers of left-to-right languages (like English) are accustomed to scanning from the top-left first. Keep this in mind when designing two- or more column layouts.
12 Fixes for the Image Spacing in HTML Emails
Have you ever noticed the small spacing below images in Hotmail and Gmail? Every browser renders this spacing except for IE 7 and lower. Just after writing this blog post: The Mystery of Hotmail’s Strange Image Spacing, and after lots of hair pulling, we realized that the culprit for this pesky occurrence was actually the DOCTYPE.
What I find even more interesting is that the latest DOCTYPE for HTML 5 causes the same image spacing issues! Because of this we might see browsers like Firefox, Safari, Chrome and Opera come out with an update in the near future. Until then, welcome to the party web developers.
The following DOCTYPES cause the spacing:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<!DOCTYPE html>
Examples before any fixes:
Below are some options for correcting the issue.
Option 1.) Add style=”display:block” to your image
Example:
<img src=”http://www.test.com/test.jpg” style=”display:block”>
This is the most popular fix but as you can see above, it causes a line break before and after your image. If you are working on an HTML email, this fix must be done inline for each image (like the example above) because Gmail does not support embedded or linked style sheets.
Options 2-8.) If your image height is greater than 16px, set the “align” attribute in the image to any of the following: absmiddle, middle, left, right, absbottom, texttop OR top
Example:
<img src=”http://www.test.com/test.jpg” align=”absbottom”>
Note: align=”baseline” and align=”bottom” do not work. Keep reading if your image height is less than 16px.
Option 9.) Place the image in a block element with a style=”line-height:10px” (or lower)
Example:
<div style=”line-height:10px”>
<img src=”http://www.test.com/test.jpg”>
</div>
<img src=”http://www.test.com/test.jpg”>
</div>
Option 10.) Place the image in a block element with a style=”font-size:2px” (or lower)
Example:
<div style=”font-size:2px”>
<img src=”http://www.test.com/test.jpg”>
</div>
<img src=”http://www.test.com/test.jpg”>
</div>
Obviously, this is only an option if you don’t have any text in the container.
Option 11 & 12.) Add style=”float:left” OR style=”float:right”
Example:
<img src=”http://www.test.com/test.jpg” style=”float:left”>
Both Gmail and Hotmail support the float property. Again, if you are working on an HTML email, this fix must be done inline for each image because Gmail does not support embedded or linked style sheets.
If your image is less than 16 pixels high:
Only seven of the above fixes will work:
- Add style=”display:block” to the image
- Add align=”left” to the image
- Add align=”right” to the image
- Add style=”float:left” to the image
- Add style=”float:right” to the image
- Place the image in a block element with a style=”line-height:10px” or equal to the image height
- Place the image in a block element with a style=”font-size:2px” (or lower)
Hopefully at least one of these work-a-rounds will meet your design requirements. If you are aware of additional fixes, don’t hesitate to share it below!
Outlook 2007 borders and 1px padding on table cells!
Today I came across a bug that left me fuming. I could not figure out why every single cell in my table heavy layout had a 1px padding around it and in some cases I was even missing my table borders. For those of you working in the sane world of web design, tables are a thing of the past, but in the world of email, tables are back with a vengeance.
As I became more and more disillusioned I started trying anything and stumbled across the fix. I knew I had to share this, so if you are experiencing any of the above, here is the fix and it’s a simple one.
Here’s an example of what a two cell table with an image and text would look like before the fix. Notice the 1px white border/padding around the table.
And here is how it’s supposed to look after the fix. No white border / padding.
And the fix?
table td {
border-collapse: collapse;
}
I don’t think I’ve ever even used this css before, but once I started grasping at straws I began to fiddle around with the CSS border attributes and tried it. I’ve never seen any browser or mail client except Outlook 2007 do this to table cells.
Here’s the full HTML from the example, and thank you Microsoft, for delivering the worst email rendering experience yet, we all thought Hotmail was bad, but you really stepped up to the plate!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Outlook 2007 Test</title>
<style media="all" type="text/css">
table td {
border-collapse: collapse;
}
</style>
</head>
<body>
<table width="200" border="0" cellspacing="0" cellpadding="0" style="border:solid 1px #48463b;">
<tr>
<td width="80"><img src="http://yourserver/graphic.gif" width="80" height="40" alt="graphic"></td>
<td width="120" style="background-color:#c1beb1; color:#ffffff; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; font-size:11px;">Another column<br>
plain text.</td>
</tr>
</table>
</body>
</html>
Email design Guidelines
Use tables for layout
Because clients like Gmail and Outlook 2007 have poor support for float, margin and padding, you’ll need to use tables as the framework of your email. While nested tables are widely supported, consistent treatment of width, margin and padding within table cells is not. For the best results, keep the following in mind when coding your table structure.
Set the width in each cell, not the table
When you combine table widths, td widths, td padding and CSS padding into an email, the final result is different in almost every email client. The most reliable way to set the width of your table is to set a width for each cell, not for the table itself.
<table cellspacing="0" cellpadding="10" border="0"> <tr> <td width="80"></td> <td width="280"></td> </tr> </table>Never assume that if you don’t specify a cell width the email client will figure it out. It won’t. Also avoid using percentage based widths. Clients like Outlook 2007 don’t respect them, especially for nested tables. Stick to pixels. If you want to add padding to each cell, use either the cellpadding attribute of the table or CSS padding for each cell, but never combine the two.
Err toward nesting
Table nesting is far more reliable than setting left and right margins or padding for table cells. If you can achieve the same effect by table nesting, that will always give you the best result across the buggier email clients.
Use a container table for body background colors
Many email clients ignore background colors specified in your CSS or the <body> tag. To work around this, wrap your entire email with a 100% width table and give that a background color.
<table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td bgcolor=”#000000”> Your email code goes here. </td> </tr> </table>You can use the same approach for background images too. Just remember that some email clients don’t support them, so always provide a fallback color.
Avoid unnecessary whitespace in table cells
Where possible, avoid whitespace between your <td> tags. Some email clients (ahem, Yahoo! and Hotmail) can add additional padding above or below the cell contents in some scenarios, breaking your design for no apparent reason.
CSS and general font formatting
While some email designers do their best to avoid CSS altogether and rely on the dreaded <font> tag, the truth is many CSS properties are well supported by most email clients. See this comprehensive list of CSS support across the major clients for a good idea of the safe properties and those that should be avoided.
Always move your CSS inline
Gmail is the culprit for this one. By stripping the CSS from the <head> and <body> of any email, we’re left with no choice but to move all CSS inline. The good news is this is something you can almost completely automate. Free services like Premailer will move all CSS inline with the click of a button. I recommend leaving this step to the end of your build process so you can utilize all the benefits of CSS.
Avoid shorthand for fonts and hex notation
A number of email clients reject CSS shorthand for the font property. For example, never set your font styles like this.
p { font:bold 1em/1.2em georgia,times,serif; }Instead, declare the properties individually like this.
p {
font-weight: bold;
font-size: 1em;
line-height: 1.2em;
font-family: georgia,times,serif;
}While we’re on the topic of fonts, I recently tested every conceivable variation of @font-face across the major email clients. The results were dismal, so unfortunately it’s web-safe fonts in email for the foreseeable future.
When declaring the color property in your CSS, some email clients don’t support shorthand hexadecimal colors like color:#f60; instead of color:#ff6600;. Stick to the longhand approach for the best results.
Paragraphs
Just like table cell spacing, paragraph spacing can be tricky to get a consistent result across the board. I’ve seen many designers revert to using double <br /> or DIVs with inline CSS margins to work around these shortfalls, but recent testing showed that paragraph support is now reliable enough to use in most cases (there was a time when Yahoo! didn’t support the paragraph tag at all).
The best approach is to set the margin inline via CSS for every paragraph in your email, like so:
p { margin: 0 0 1.6em 0; }Again, do this via CSS in the head when building your email, then use Premailer to bring it inline for each paragraph later.
If part of your design is height-sensitive and calls for pixel perfection, I recommend avoiding paragraphs altogether and setting the text formatting inline in the table cell. You might need to use table nesting or cellpadding / CSS to get the desired result. Here’s an example:
<td width="200" style="font-weight:bold; font-size:1em; line-height:1.2em; font-family:georgia,'times',serif;">your height sensitive text</td>
Links
Some email clients will overwrite your link colors with their defaults, and you can avoid this by taking two steps. First, set a default color for each link inline like so:
<a href="http://somesite.com/" style="color:#ff00ff">this is a link</a>
Next, add a redundant span inside the a tag.
<a href="http://somesite.com/" style="color:#ff00ff"><span style="color:#ff00ff">this is a link</span></a>
To some this may be overkill, but if link color is important to your design then a superfluous span is the best way to achieve consistency.
Images in HTML emails
The most important thing to remember about images in email is that they won’t be visible by default for many subscribers. If you start your design with that assumption, it forces you to keep things simple and ensure no important content is suppressed by image blocking.
With this in mind, here are the essentials to remember when using images in HTML email:
Avoid spacer images
While the combination of spacer images and nested tables was popular on the web ten years ago, image blocking in many email clients has ruled it out as a reliable technique today. Most clients replace images with an empty placeholder in the same dimensions, others strip the image altogether. Given image blocking is on by default in most email clients, this can lead to a poor first impression for many of your subscribers. Stick to fixed cell widths to keep your formatting in place with or without images.
Always include the dimensions of your image
If you forget to set the dimensions for each image, a number of clients will invent their own sizes when images are blocked and break your layout. Also, ensure that any images are correctly sized before adding them to your email. Some email clients will ignore the dimensions specified in code and rely on the true dimensions of your image.
Avoid PNGs
Lotus Notes 6 and 7 don’t support 8-bit or 24-bit PNG images, so stick with the GIF or JPG formats for all images, even if it means some additional file size.
Provide fallback colors for background images
Outlook 2007 has no support for background images (aside from this hack to get full page background images working). If you want to use a background image in your design, always provide a background color the email client can fall back on. This solves both the image blocking and Outlook 2007 problem simultaneously.
Don’t forget alt text
Lack of standards support means email clients have long destroyed the chances of a semantic and accessible HTML email. Even still, providing alt text is important from an image blocking perspective. Even with images suppressed by default, many email clients will display the provided alt text instead. Just remember that some email clients like Outlook 2007, Hotmail and Apple Mail don’t support alt text at all when images are blocked.
Use the display hack for Hotmail
For some inexplicable reason, Windows Live Hotmail adds a few pixels of additional padding below images. A workaround is to set the display property like so.
img {display:block;}
This removes the padding in Hotmail and still gives you the predicable result in other email clients.
Don’t use floats
Both Outlook 2007 and earlier versions of Notes offer no support for the float property. Instead, use the align attribute of the img tag to float images in your email.
<img src="image.jpg" align="right">
If you’re seeing strange image behavior in Yahoo! Mail, adding align=“top” to your images can often solve this problem.
Video in email
With no support for JavaScript or the object tag, video in email (if you can call it that) has long been limited to animated gifs. However, some recent research I did into the HTML5 video tag in email showed some promising results.
Turns out HTML5 video does work in many email clients right now, including Apple Mail, Entourage 2008, MobileMe and the iPhone. The real benefit of this approach is that if the video isn’t supported, you can provide reliable fallback content such as an animated GIF or a clickable image linking to the video in the browser.
Of course, the question of whether you should add video to email is another issue altogether. If you lean toward the “yes” side check out the technique with code samples.
What about mobile email?
The mobile email landscape was a huge mess until recently. With the advent of the iPhone, Android and big improvements from Palm and RIM, it’s becoming less important to think of mobile as a different email platform altogether.
That said, there are a few key pointers to keep in mind when coding your emails to get a decent result for your more mobile subscribers.
Keep the width less than 600 pixels
Because of email client preview panes, this rule was important long before mobile email clients came of age. In truth, the iPhone and Pre have a viewport of 320 pixels, the Droid 480 pixels and the Blackberry models hover around 360 pixels. Sticking to a maximum of 600 pixels wide ensures your design should still be readable when scaled down for each device. This width also gives good results in desktop and web-based preview panes.
Be aware of automatic text resizing
In what is almost always a good feature, email clients using webkit (such as the iPhone, Pre and Android) can automatically adjust font sizes to increase readability. If testing shows this feature is doing more harm than good to your design, you can always disable it with the following CSS rule
Optimizing emails for mobile with the @media query
Designing for the mobile web is nothing particularly new – or rare. With pretty much every decent handset available providing the “full web” experience, there are really not a lot of popular sites left that don’t include a mobile stylesheet for small screens.
It seems that mobile stylesheets haven’t proven to be quite as popular in email, despite the advantages they provide to devices that make use of the @media query. Lets take a look at optimizing your HTML email for mobile, including the finer points of using @media in Campaign Monitor.
Why optimize HTML email for mobile?
To be honest, viewing HTML email on a mobile device can be plain fiddly. Even on the iPhone, it’s common to have text automatically rescaled to a size that’s near unreadable, or in a way that can break your design. Wide emails often require horizontal scrolling, especially when there’s a large image involved.
By creating a separate set of styles to be used by devices that recognize the @media query, you can optimize your emails in a similar fashion to how web pages are being optimized for the mobile today. Devices that don’t recognize @media will degrade gracefully by simply reverting to your default styles.
How does this work?
We’ve done it before, but lets walk through Panic software’s example again. Here’s the design (on the iPhone):
And here’s the mobile stylesheet in the <head> section of the email:
@media only screen and (max-device-width: 480px) { .page { padding: 0px 10px 5px 10px !important; } body { padding: 10px !important; } #airmail-line { margin: 0 -10px !important; } .header { font-size: 16px !important; } .headline { font-size: 20px !important; } #screenshot { width: 275px; height: 190px; } }
Lets walk through this. First of all, there’s the condition:
@media only screen and (max-device-width: 480px) { ... }
What this says is, “Only use these styles if the screen dimensions are 480px or less” (480px being the width of a “flipped” iPhone’s display). Then, using the !important declaration to override any inline styles, change the padding of the body and the .page DIV, alongside the font-size of certain text when these styles are invoked. This maintains the pretty layout of the email and keeps the headings from being too large on the small screen.
What’s really cool is how the #screenshot is resized to fit the display. Here’s the screenshot at its original 550 x 380px in a desktop email client:
And here it is resized to 275 x 190px for a mobile display:
Resizing your images can prevent the sort of layout breakage, or unnecessary scrolling that can occur when an image is too large for the mobile devices’ viewport.
A final tip is the addition of -webkit-text-size-adjust: none; to prevent handsets from automatically resizing your text. For example, the iPhone scales small fonts up to 12px, so it can be used to override this. That said, all your text should be above 12px and desirably, 17-22px. Anna Yeaman at Style Campaign has an excellent write-up on text sizing which wraps this up nicely.
This is great, but which devices can display mobile stylesheets?
The good news is that devices with fairly solid CSS3 support – the iPhone, Android and Palm, which all use Webkit – have no trouble with the @media query. Here’s the same email in the Android and Palm Pre’s default mail clients:
We also tested @media handheld { ... } on these devices (iPhone OS 3, Android, Palm) and more (Blackberry 8900 Curve, Nokia N96, Pocket PC, Samsung Intrepid), without luck.
And finally, a tip for use in Campaign Monitor…
We usually recommend that you move a copy of your campaign CSS inline. In this case, as we’re using the @media query to override any inline styles, it’s better to make your default styles inline from the start and add your @media styles to within the <head> section of your email. Upon import of your campaign, uncheck “Move a copy of my CSS inline” and you’ll be done in time for dinner.
With growth in the iPhone’s market share not letting up any time soon, we anticipate that we’re to see this technique used more often. After all, it’s an elegant, non-destructive snippet of code that can make your emails just as much of a pleasure to read on mobile devices as it is on the big screen.
Mastering mobile email in 5 minutes
The support team has been pretty busy these last few weeks. Between answering support tickets, tweets and forum posts, we’ve found time to present on one of our favorite pet topics, being mobile email. Mat and I thought we’d share our presentations with you, as they’re both solid primers on optimizing HTML email on mobile devices and take no time to watch and read. What’s more, we’ve also selected our favorite resources on this topic for a bit of extra learning.
Feel free to lift our notes for your presentations – making you look smart is our business!
Optimising HTML Email for Mobile
If you like your presentations short, fast and loud, then I invite you to check out my lightning talk on making mobile email look great on the small screen. In 5 minutes and 17 slides (not counting the flashy intro), I tear through why optimizing email for mobile is worthwhile, some of the design challenges and considerations for mobile displays and basic techniques for achieving responsive layouts.
For code snippets and a higher-res view of the action, you can whip through the accompanying slides on Slideshare. Some of my favorite mobile email resources can also be found on the What Do You Know? presentation page.
As a side note, this presentation netted me the first prize on the night – a miracle, considering I was up against local web-scene heavyweights like Dmitry Baranovskiy. Here I am, pictured in my moment of triumph (photo credit: Stephen Lead).
How can I make my plaintext pretty?
The plaintext version of your Emma campaigns (automatically delivered to anyone in your audience who can’t receive html) may lack the style and grace of its html sibling, but it serves an important purpose. After all, up to 25% of your audience may receive that version – an estimate that can vary wildly based on your particular audience. So while plaintext may be the after-dinner mint to your html entree, it shouldn’t be a mere afterthought.
Here are our tips for making your plaintext pretty:
1. Don’t touch the plaintext until the html is done.
Emma builds your plaintext for you from the text of your html version. So it’s easiest if you focus on the html, get that completely done, and then turn your attention to the plaintext. If you do change the plaintext and then make changes to the html, you’ll notice the option appears to refresh your text to incorporate those changes.
2. Clean up your line breaks.
Plaintext is a fairly ignorant creature, and it doesn’t always get line breaks right. Which is why when you first preview your plaintext you may see some lines ending abruptly. Spend a minute cleaning up those line breaks and it will make a big difference (to do this, place your cursor in front of the first word on the next line and then hit backspace to remove the break and join the two lines).
3. Use spacing, dashed lines, and other characters to make things more readable.
Without the benefit of bold headlines, colors and other rich formatting, plaintext requires a bit more creativity when it comes to making headlines and important content stand out. Try putting spaces or dashed lines between sections, and using CAPS and asterisks in place of the bolds you’ve used on the html side.
4. For longer emails, consider putting a brief summary or menu at the top.
If your html campaign has two columns, remember that in the plaintext you have just one. Which means that sidebar that fits nicely at the top of one version will be pushed down to the very bottom in the other. If the sidebar is important, consider mentioning it near the top of your email so folks know there’s reason to scroll, or try incorporating the sidebar elements into the main body. Also remember that those nice images you used in the sidebar of your html won’t appear, so your captions will need to stand on their own.
5. What is the plaintext experience like? Send it to yourself and find out.
Here’s an idea that came to us in between writing points 3 and 4. It’s like a stack of pancakes hot off the grill, except that you can’t pour syrup on this idea and it doesn’t go well with bacon. The best way to proof your plaintext is the same way you proof your html – by sending it to yourself or someone in your test group. So make sure you’ve got the ‘email format preference’ field turned on in your audience, and then set at least one person in your test group to ‘plaintext.’ If you have two email addresses yourself, even better – you can set one to receive html and the other to receive text. And you’ll experience each version the same way your recipients will.
