Your business has gone mobile and you have built yourself a beautiful mobile website, but wait, you are still using the same email campaign template you have been using for years? Well, that is just NOT cool. If you pride yourself in being mobile friendly, then it is time to give your email campaigns that extra mobile flare.

Why Is Mobile Formatting So Important for Email?

Mobile devices have made checking emails so easy that you can do it anytime, anywhere: while watching TV, riding the subway, on your way to a meeting, or even on the toilet. Studies have shown more than one third of mobile Internet time is spent using mobile email. And more importantly, 56% of US consumers who have made at least one purchase using their smartphone have done so in response to a marketing message delivered via mobile email according to ExactTarget.

Is Your Email Template Mobile Friendly?

Take a look at your email campaign template. Is it mobile friendly?

7 Tips for Creating Mobile Friendly Email Campaigns

Before we start, it’s good to take a look at some general issues with coding HTML emails. Regardless of making your email campaigns mobile or not, these guidelines should still be followed.

• Use only tables for layout, not divs
• Set inline CSS for all stylings, and NEVER use CSS shorthand
• Define background color inside a container table instead of the body
• Make sure images have defined dimensions and avoid using PNGs
• Always provide alt text for images

We’ve gone through enough prep work, let’s now start going through the tips for making mobile friendly email campaigns.

1. Go Responsive or Go Home

When building a mobile website, you have the advantage of being able to custom tailor your content for the mobile devices, but with email you have no such luxury. That means you are forced to send the same content to all users regardless of whether they are on a 30″ super cool widescreen or a tiny BlackBerry screen. Responsive design is the only sensible option for mobile friendly email campaigns.

2. Legible Font Size for Desktop and Mobile

What’s a comfortable font size that could be read on big monitors or small screens? Our general rule of thumb here at Bluetrain Mobile is to set body text no lower than 13px. I believe that is a pretty good measure. You may also utilize relative values such as: medium, large, x-large, xx-large (I recommend never using small, x-small, and xx-small). Once you set the body text value, you should use em to define headings. For example, set the h1 tag font size to 1.6em, h2 to 1.4em, h3 to 1.2em, and so on.

3. One Column to Rule Them All

When there is a fair amount of text, multi-column layout almost never works on mobile. It’s best to stick to an one-column fluid layout that adapts to various screen sizes. By doing so, you’d have to set the container table and any scaling images to 100% width, but you must remember to set a max width (ideally 600px), otherwise your layout could become very wide and hard to read on desktop.

4. CSS3 Yes You Can

That’s right, you can use that fancy stuff called CSS3. Even though it’s not widely supported, but you should consider bringing the best aesthetics to the devices that are able to render CSS3 correctly. Campaign Monitor has a list of compatible CSS properties for good reference.

5. Fancy Call to Action

Is your call to action button too plain? Well, jazz it up with text shadow and rounded corners! Text-shadow and border-radius are two CSS3 properties that are commonly compatible with iPhone and Android’s native email client. Even though both properties contribute to small aesthetic details, sometimes small detail makes a big difference.

6. Use Media Queries

Media queries are a big player in any responsive design, and luckily they can be used in your mobile friendly email campaign as well! With media queries, you can specifically adjust the font size, change height and width of content blocks, and hide or show certain elements just for the mobile layout.

7. Have Touchy Feelings

Mobile users have different behaviors: links are for touching, not clicking. It’s best to keep in mind that calls to action should be big enough for the mobile user to touch with a large thumb! The recommended hot link area is at least 44px in height and width. Avoid having text links too close to each other.

Be Aware: Automatic Text Resizing

One important thing to keep in mind if you use small font size in your layout: webkit email clients (iPhone, Pre, and Android) will increase font size on text smaller than 13px, which could potentially break your layout. To avoid your text being resized, define “-webkit-text-size-adjust: 100%” in the CSS.

Conclusion

With millions of people checking email on smartphones, making sure your email campaigns are mobile friendly should be a big priority! Looking at our own data from Mailchimp, at 47% the iPhone is the most used email client among subscribers to our newsletter. What does your data tell you?

About the Author

Mike Mai operates the train of creative thoughts at Bluetrain Mobile. He loves web, mobile and social media. Language skills include Mandarin, Cantonese, and HTML5.
@mikemai2awesome