5 Golden Rules For Mobile Email Design

Design & UX
6

Very interesting article, Thanks for sharing.

In my experience as a Web Designer, building emails is FAR WORSE than building for IE6. At least, IE6 supported floats, line height without units. Oh boy, compared to emails, THOSE were the days, lol :slight_smile:

A few extra notes to complement this very good article:

Font Resizing

Although -webkit-text-size-adjust: none; does work on iOS devices, it also affects OSX applications like Safari, and at that point we might actually want the font size bumped up. So instead we can use:

 -webkit-text-size-adjust: 100%;

And you can use the same declaration for Windows Mobile, just change the vendor prefix:

 -ms-text-size-adjust: 100%;

Image Resizing

To fix images looking bad when resized in old IEs, you can use:

img { -ms-interpolation-mode:bicubic; }

This is not only for emails, is for websites too.

“Linked” Telephone Numbers in iOS

To avoid iOS devices from “linking” phone numbers, just add this meta tag in the <head> of the email:

<meta name="format-detection" content="telephone=no">

Outlook

Make Outlook maintain any custom line heights defined, just add this declaration:

body { mso-line-height-rule: exactly; }

–

This is what I use in my body selector:

body {
        width: 100% !important;
        margin: 0;
        padding: 0;
        /*Outlook: Make Outlook maintain any custom line heights defined*/
        mso-line-height-rule: exactly;
        /*OSX/iOS/Windows Mobile: Fix increasing font size to 13px*/
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }

And this is what I use in the <head> section of my emails:

<meta charset="utf-8">
<!-- Responsive: Tell browsers that this template is optimized for small screens -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- IE: Make IE use its best rendering engine rather than Compatibility View mode -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- OSX/iOS: Remove auto styling of phone numbers -->
<meta name="format-detection" content="telephone=no">

It goes without saying that I use HTML5 DOCTYPE for my emails:

<!DOCTYPE html>

Happy email grinding! :smile:

2 Likes