5 Golden Rules For Mobile Email Design

Originally published at: http://www.sitepoint.com/golden-rules-mobile-email-design/

As I mentioned in my previous article, mobile email design is not only a content choreography issue, but involves many design elements.

We should never consider the design for mobile devices a simple matter of catering to "screen size". Instead we need to have a comprehensive approach that takes into account the very different ways that people use the web — and email in particular — on small devices.

We’re going to identify some of the key considerations in mobile email composition. These rules are not meant to necessarily answer all the requirements of email design for mobile devices, but they are certainly a very good starting point.

1. Keep email simple

Complexity kills — especially in email. Always avoid complicated structures that will inevitably fail when rendered on small screens. Remember that many devices simply don't support media queries (Gmail App for example), so you can't count on sophisticated content rearrangement techniques.

A linear and simple layout will deliver the best result in most cases.

The overall size of the email is also important: your email can be not fully loaded if it over a preset size (around 100Kb). I haven't tested this issue in all clients but both Gmail App and IOS devices exhibit this behaviour (and Gmail web app too).

In the screenshot below, you can see how the user has to click a link to view the entire message: this can discourage people from reading your email in full.

Link to download the remainder of the email.

2. Focus on email goals and mind the fold

Although I am not a fan of the "above the fold" issue (take a look at this old and very interesting article), the way emails are read on mobile devices means we should always consider their upper part as critically important.

A quick glance at this content is, in many cases, the best chance you'll have to draw your readers into reading more, so giving your them an easy to digest summary can make the difference.

A small paragraph at the top of the email can often do the trick.

This can also work very conveniently for some important clients that display these lines in their inbox list view (i.e. Gmail App, or Apple Mail on IOS and OSX).

Gmail app example

3. Resize fonts and images

This topic only applies to devices that support media queries. Unfortunately, we can't do anything for the others: sometimes they resize text and images themselves, but we can't really control this behaviour.

Media queries are currently supported by all IOS devices, the Android native email App (with some issues and remembering that Lollipop dropped it in favor of Gmail App), the newest Blackberry phones and a handful of others (for a more complete list, take a look at Campaign Monitor Guide to CSS or FreshInbox Email Client Media Query and Embedded Styles Support 2014).

Together they correspond to a significant and continuously growing percentage of email clients, so it's really mandatory to take care of them.

IOS devices have two main issues with font and image size:

  • Small font sizes are enlarged by default
  • Email width is based on the largest element

Font-size enlargement is usually not a critical problem, but in some cases it may cause some lines of text to be spliced potentially breaking your layout.

This can be easily fixed adding this line to your CSS:

* { -webkit-text-size-adjust: none; }

In the screenshot below you can see how the text size in the red area can change adding the -webkit-text-size-adjust rule (on the left) or removing it (on the right).

Font-size management also affects the user experience on mobile. Small text that might be easily readable on desktop devices can have a different effect on small screen.

In the example below, the summary text on the right version has been enlarged to make it easily readable and to attract users eyes:

Font resizing example

In general, increasing the font size on mobile devices is a good practice, and especially for emails, where reading time is extremely condensed and you need to capture users attention quickly.

About images

I've just written about images in my previous article: optimizing images for mobile devices is an easy task based on classic max-width responsive images technique.

You can also load targetted images for devices which support media queries (take a look at A Slick, New Image Swapping Technique for Responsive Emails on Email On Acid blog, or Optimizing images for mobile on Campaign Monitor).

4. Customize links and buttons

Email mobile design requires some tricks for links.

First, consider that the links will be clicked using… fingers, so keep them well spaced and strictly limit their number (Mobile device ergonomics and links in email newsletters article on Campaign Monitor blog addresses some interesting topics about this argument).

Size and spacing are a mandatory for buttons (typically they are Call to Actions links): make sure they are easily clickable and visible. Furthermore, always remember to add rules for anchors in your inlined CSS: Gmail App styles links as blue and underlines them by default.

One small potential problem is the links that Gmail and IOS add by default to telephone numbers (both), and to URL and email strings (in Gmail App only).

To avoid automatically auto-generated telephone links on IOS, you have to simply add this meta tag to your code:

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

The Gmail fix is a little trickier (and hackier): it consists of adding some invisible characters to ensure that a string is not recognized as a potential link (while obviously preserving it's presentation).

I've performed a set of tests using both HTML entities and "neutral" span tags. Only by breaking each part of the link with a span tag (the latest portion of the sample code) did I obtain the expected behaviour.

This is the result:

<p>(800) 234-5678</p>

<p><span>(800) 234-5678</span></p>

<p>(800) 234&ndash;5678</p>

<p><span>(800)</span> <span>234-5678</span></p>

5. Add spacing

My latest small tip for mobile email design is to consider increasing padding around main text content: this will significantly increase the readability of your email.


Continue reading this article on SitePoint

What about non webkit based e-mail applications? Outlook (for one?)

I’m not an expert in e-mail but I can imagine that won’t cover all bases (which will want me to avoid designs which might suffer from issues.)

The -webkit-text-size-adjust: none; rule is only valid for IOS. Outllok doesn’t support media queries and have many other problems.
Unfortunately, email design does not have a strong standard and requires a lot of testing and experience.

I agree with this article when it comes to the consumer market but when it comes to B2B communication or industrial companies many of these tips just like more web statistics are way off base and can actually be dangerous. There is a tendency for designers to caught up in the latest trends without really thinking of the impact it will have for the market they work in. All these new trends mean more interesting articles and more to write about but they can be misleading to all designers.

I work for a global company and every single one of our gobal staff uses Windows, IE and Outlook. I used to do live web streaming for corporate clients and every single one of them was the same situation.

In the corporate world the golden rules are:

  1. Assume everybody is using an older IE
  2. Assume everybody is using Outlook
  3. Assume maybe at best 2-5% of the company staff are even using mobile devices for work related functions.
  4. Assume a company employee is actually parked in front of their computer between 8:00 and 5:00 and not even thinking about their mobile device
  5. Plan for odd firewall issues or methods of IT to block certain kinds of content. Some companies block emails made up of all images or they will block any form of video content to keep their limited bandwidth pipe clear
  6. Assume a company has very crappy internet speeds, especially when factoring in how many people may be using that tiny stir straw of a pipe.

what you say is (sometimes) true. Email design can (and should) take care of oldest client, but it is also true that it must take into account the modern devices. I think that the design must be user-centric, but it must also be research: otherwise it becomes just a simple exercise

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">


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:


thanks for your valuable notes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.