Infographics
, studies and censuses show that mobile is growing. And in email, it’s becoming crucial.

In that mindset, we must start optimizing email marketing for smaller devices. There’s a lot to do, so here are some insights to help you jumpstart your development for email on-the-go.

A few pointers:

1. Average smartphone resolution is 320px by 480px.

It’s easiest to start there, then grow for an audience with a larger screen.

2. Keep the emails short and to the point.

A strong call to action to bring them back to your website to get more details will yield better results – especially if your landing page is optimized for mobile. Stick to one point; avoid trying to do too much in one email.

3. Don’t crowd your header with images.

Your logo is plenty. Images take up a lot of real estate and make your email long. Visual content is important, but you’re better off with many, small images (that have a clear “alt” since many email clients block images).

4. Stay on top.

Got something important to say? Put it on top (and keep the call to action near it).

5. Keep it under 75.

Stay within 75 characters of text per line – 55 if you exclude spaces. Because if a line of text is too long, the reader will probably get lost and your text becomes less legible.

6. Font Size.

Text font in mobile email should be bigger than the standard email. Apple devices scale small text size to a minimum of 13px. So for the body, the text size should be between 14-16px and 21-22 px for the headline.

7. Fat fingers.

If you use buttons as your call to actions, make sure there’s room to touch them.

8. High contrast = High impact.

A high contrast between the images and the content make your email much more legible.

9. Stay single.

At most, you should use two columns when taking mobile into account – its simplicity and clarity help for readability on small screens. If you are using two columns, the left-hand side column (where you have a small image and short caption, like the date) should be less wide than the right-hand side column (where you’ll have the description and other information).

10. Size Matters.

Keep it under 70 KB since bigger emails take more time to load. What’s more, Gmail mobile only loads upto 102KB, and blocks the rest.

11. Media query.

Use a Media query to create emails that are responsive, adjusting to the width of the screen. It’s not perfect though, since it goes in the header and, many email clients remove it. Make sure you cover your bases accordingly with inline code.

@media only screen and (max-device-width: 480px) {
    .mobilecss{
       padding:10px;
    }
}

The Viewport Meta Tag

This meta tag allows you to adjust the width on the email client of your mobile device to ensure the email displays properly. Without the tag, the email client will process the email the same way it would on a computer, shrinking everything to make it fit on a screen, rendering it unreadable so doing.

Note: if your email is 320px wide, it’s best to change `device-width` to `320px`.

Ex : <meta name="viewport” content="width=device-width, initial-scale=1, maximum-scale=1">

 

One last thing…

Test. Always test. It’s the only way for you to ascertain that your email is displaying properly everywhere you want it to.

Right now you must be asking yourself, what tools I can use to test on all of those devices?

Well on the new CakeMail version coming soon we will have previews for most mobile browsers directly in the app, but you can also open an account on Email On Acid. It’s inexpensive and they cover a broad range of browsers & devices.

Please wait...

Author Jonathan Angelicchio

More posts by Jonathan Angelicchio