6 Essential Mobile Email Design Best Practices with Examples

A recent report and infographic from ReturnPath shows that mobile email usage has now clearly surpassed its desktop and webmail counterparts, which ties with data from Campaign Monitor showing the same trend. Given that mobile email use shows no sign of slowing, here are six key best practices, with examples, for creating attractive and effective emails for mobile devices.

1. Focus on Readability

Perhaps the most critical component of an effective mobile email is readability. Therefore, use large body and heading fonts along with sufficient white space help to make emails more readable. These examples from Notable and Zurb are extremely easy to read on a small screen.

Notable

Notable

Zurb

Zurb

2. Keep Layouts Simple

Because of the limited screen size, it's generally better to use simpler layouts, with a one-column layout being ideal. This example from Campaign Monitor shows good use of this approach and also how a single column email doesn't have to look 'boring.'

Campaign Monitor

Campaign Monitor

This email from BackBlaze takes a similar approach, and incorporates inline images by floating them to the left or right of the content.

BackBlaze

BackBlaze

Of course, there are always exceptions to the rule. These emails from 37 Signals and MOG contain multi-column layouts which still manage to be readable and clickable. If you are adopting a multi-column approach, they key is simplicity — use large images and not too much text.

37 Signals

37 Signals

MOG

MOG

3. Use Large Click Targets

People interact with mobile emails via their hands; therefore, any click targets such as buttons or links need to be large enough to tap on with a finger. These emails from Postagram and 37 Signals show perfect examples of big, clickable buttons.

Postagram

Postagram

37 Signals

37 Signals

4. Keep the Message Simple

Even more than they do on a desktop, people scan emails on their mobile devices. Moreover, reading on a mobile device is not especially easy, so it is critical for mobile emails to have a clear, concise message. Make one point and make it well. These emails from Paramore|Redd and Rdio are great examples of this principle in action.

Paramore|Redd

Paramore|Redd

Rdio

Rdio

5. Cut Away the Clutter

Because of the limited screen real estate, effective mobile emails remove the typical email 'clutter', such as navigation and social sharing buttons, in order to present a clean, simple design and keep the email message at the forefront. These emails from Pinterest and Twitter do this beautifully.

Pinterest

Pinterest

Twitter

Twitter

6. Be Bold

Because of their simpler layouts and more minimalist design aesthetic, a common complaint about mobile emails (at least, that I hear a lot) is that they are boring. They don't have to be! Through bold use of color, images, and typography, mobile emails can be just as visually compelling as their desktop counterparts, as these examples from Litmus and TYPO San Francisco show.

Litmus

Litmus

TYPO San Francisco

TYPO San Francisco

Even More Mobile Email Designs

Mint

Mint

Apple

Apple

Fab

Fab

HP

HP

LinkedIn

LinkedIn

Gemvara

Gemvara

Tennessee Tourism

Tennessee Tourism

Posted on: January 3, 2013 | 3 Comments

Recent Entries in "Email"

3 Comments Posted (Add Yours)

Keep in mind that many people view their emails in the preview panel. Since the smallest average preview panel is typically between 550 and 600 pixels wide, you should design your emails accordingly. You may even want to consider narrower to accommodate mobile browsers.

I am really impressed with your writing skills as well as with
the layout on your blog. Is this a paid theme or did you customize
it yourself? Either way keep up the excellent quality writing, it is rare
to see a nice blog like this one nowadays.

Post a Comment

*
*
 

Live Comment Preview

Subscribe

Subscribe to my RSS FeedSubscribe to my Web Design Blog RSS Feed

Categories

Proud member of 9rules network