Email Design for a Smartphone Era

Good UX Means Good Business

In a world where technology is rapidly advancing and user expectations are rising, it’s no longer enough to have an average user experience; to delight your users and surpass your competition you must strive for the exceptional.

Get the Guide

Smartphone penetration in the United States has reached 55% of the general population* and and the number of email opens on smartphones and tablets have increased 80% of the last six months**. These two facts have serious consequences for companies and organizations, and their communication platforms. Beyond the obvious need to build email to appear well-formed and structured for viewing on smaller screens, consumers are viewing thier email devices in a much wider variety of environments than just five years ago, so email needs to be responsive to get our clients messages opened and read wherever they are when they are scrolling through their inboxes, and the design itself needs to be simple and direct.
The first step is to consider the user flow, and the content structure in particular. On a mobile phone, the first piece of information that they will see is the From Name. From there, they will see the Subject Line, the Pre-header – a small snippet of text from the top of the email as a preview – and then once opened, the first few inches of the full email (AKA the viewport). So, step one is to plan the content flow to start with the most captivating and enticing headlines possible, and summarize the body content to draw the reader to open the full email. The time-honored principals of Journalism (and perhaps Tabloid Journalism in particular) will serve you well as you construct an inverted pyramid of messaging.
Once you have the content that you’re sure will draw the reader into the body of the message, it’s time to work on the design. A full technical discussion on how to build a responsive email is a subject for another time, but the primary considerations to keep in mind are as follows:

1. Contrast. As the creative needs to shrink to smaller screen, those elements need to be clear and stand out. So maintaining a good contrast is important.
2. Text size. The general consensus is that 13px is the minimum size to be easily readable on a phone. It’s recommended that you start larger, around 15-16px and find a nice balance between text and whitespace.
3. Imagery. Big, bold, beautiful and immersive will garner the most attention.
4. Layout. Through a web browser or a desktop email client multicolumn is a good way to go, but keep in mind in a responsive design when the email is viewed on a phone, the content needs to flow into a longer single column. Think though the hierarchy of information and plan how the content will stack.

The last point is about the context of the environment in which the user will open the email. If they are in line at the ATM or sitting quietly in a meeting there will be distractions competing for their attention. Therefore you have to keep everything simple and direct, be very clear with the call to action (big, bold buttons) and assume that there is no time for reading long paragraphs of information, so cut down the copy to the bare minimum.
* Exact Target, “Designing for the Mobile Inbox”
**Litmus, “Email Client Market Share Stats“