Design & UX

5 Golden Rules For Mobile Email Design

Massimo Cassandro
Share

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.

Email summary example

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).

iPhone font size adjust

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).

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>(800) 234-5678</p>
<p>http://mydomain.com</p>
<p>myemal@mydomain.com</p>

<p><span>800-234-5678</span></p>
<p><span>(800) 234-5678</span></p>
<p><span>http://mydomain.com</span></p>
<p><span>myemal@mydomain.com</span></p>

<p>800&ndash;234&ndash;5678</p>
<p>(800) 234&ndash;5678</p>
<p>http:&#47;&#47;mydomain.com</p>
<p>myemal&#64;mydomain.com</p>

<p><span>800</span>-<span>234-5678</span></p>
<p><span>(800)</span> <span>234-5678</span></p>
<p>http<span>://</span>mydomain<span>.</span>com</p>
<p>myemal<span>@</span>mydomain<span>.</span>com</p>

Gmail automatic links

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.

Resources