Designing E-Newsletters for Mobile Users

Our old email's multi-column layout made the text small when viewed on an iPhone.

Do you check your email before you get dressed in the morning?

 A recent survey showed that 35 percent of mobile workers check their email before doing anything else, including getting dressed or eating breakfast.

This is yet another data point as to why mobile matters. To put a finer point on it, by 2013, mobile will overtake desktop computers for web access. Clearly, web managers have a lot of work to do.

When optimizing for mobile, email templates are a good place to start. If you look at your email marketing stats, you may be surprised to find that a significant proportion of your list is opening your messages on a mobile device. For Forum One’s list, 44 percent of our opens come from iPhones. This is a large number even though iPhones frequently over-report open rates.

As we began redesigning Forum One’s own email templates, mobile was on the top of our minds. We wanted to update our design, but we also need our email communications to look and work well on popular smartphones.

Our existing email template suffered from a few problems. The two-column layout made the content small and difficult to navigate on a small screen. You ended up needing to scroll horizontally to see all of the content. The fonts and links were small and hard to use unless you zoomed in. The images weren’t used consistently. Sometimes they were touchable, other times not. And in general, the newsletter was long and wordy. We started out our small project with a few principles:

• One design: Create a unified design that works well across all platforms. Although MailChimp, our email marketing service, is capable of delivering a mobile-specific template, this would require our subscribers to opt into a special list segment, which few would do. Plus, the same user might read the message on either platform — it depends on where they are at the time. Given that a large number of our users are now on smartphones with modern mobile web browsers, we were confident we could develop a design that worked equally well across phones, tablets, and desktops.

• Design for a small screen: Minimize or eliminate the use of columns. Keep the design simple and the content easy to scan. Design for touch: This means allowing for lots of space between interactive elements, increasing the the size of fonts, and making every element completely “hot.” For instance, if a item has a headline, image, and blurb, touching any part of these items would lead to the full article on our website.

• Design for action, plan for distraction: Minimize “happy talk,” use editorial graphics to distinguish each item interest and build interest. Bestow a big, enticing graphic treatment on the lead feature. Let’s be real: People are often reading our emails while waiting for the bus, so everything must be obvious and enticing.

• Design for distinction: Our previous newsletter used one of MailChimp’s pre-baked templates. Although pretty, and pre-tested, we didn’t want our creative vision to be limited. Therefore, we expected that we would need to code our templates ourselves using MailChimp’s Templating Language.

We had a lot of stakeholders, but we wanted to be efficient and not have the project drag on. We started with a sketch from our Director of Mobile Strategy, Nam-ho Park:

We reviewed in a working session, and I refined Nam-ho’s sketch using Balsamiq Mockups, a rapid wireframing tool:

Next, our Interactive Art Director, Tim Deegan, created a mockup. We critiqued it collaboratively in another workshop and Tim refined in nearly real-time:

Finally, after a few rounds of light revisions, the new design was ready to be implemented by our Interface Engineer, Corey Lafferty, using MailChimp’s Templating Language. The one snag was that we were not able to use custom webfonts because they would not display in people’s email clients. So we swapped out our preferred font (Alternative Gothic No. 2) for our second choice (Trebuchet). Then we tested it in several desktop email clients and mobile phones.