A cheat sheet for mobile email design

Optimize for happy readers

Picture the scene — it’s late in the afternoon, you’ve spent two hours polishing copy for your monthly newsletter blast, and a considerable amount more time making sure it looks spiffy on your shiny 27-inch display. The innovative three-column layout you’ve gone for enables you to really highlight your many calls-to-action, and you’re confident this thing is going to hit it out of the park. You hit Send.

Bad news starts trickling in. Open rates are down, but not disastrously so. Engagement rates, however, are in the cellar. Worse still, you’re getting angry emails from your list about “tiny text.” Not only have you failed to engage your audience, you’ve somehow actively antagonized them.

What just happened?

Welcome to your first taste of failing to optimize your email campaigns for mobile. To avoid a repeat of this sorry situation, let’s walk through our four-step mobile email design cheat sheet so you get it right next time.

Step 1: Know your enemy (and pick a partner)

Let’s get one thing out of the way right up front: you simply have to be putting out mobile-optimized content when it comes to newsletters. Studies show that anywhere from 33 percent to 55 percent of email marketing messages are currently opened on mobile — a number you can only expect to rise in the next few years.

Mobile-optimized email content leads to higher conversions.

 

Mobile-optimized campaigns convert better, too. MailChimp’s exhaustive six-month investigation back at the tail-end of 2014 showed that responsive design resulted in a 15-percent increase in clicks from mobile visitors.

Mobile Email Design Responsive Click Rates
Increased responsive click rates highlighted at the Litmus blog.

Fine-tuning your campaigns for the range of device sizes and email clients out there is potentially a huge amount of hassle, however. Email clients are mostly the culprit here. Firstly, there’s a huge variety of them. Secondly, their respective takes on CSS support make browser manufacturers look like model citizens.

Mobile Friendly Email CSS
Rolling your own mobile-friendly email CSS is not for the faint-hearted.

To cut a long, painful story short, you don’t want to be doing the heavy lifting here yourself.

With that in mind, if you haven’t already, sign up with a modern Email Service Provider (ESP) to access a range of pre-made templates that are already optimized for mobile which you can then go on to customize.

GoDaddy Email Marketing for Mobile
GoDaddy Email Marketing tools help your content shine across devices.

Providers such as MailChimp, Constant Contact, and GoDaddy all give you tools to quickly put together mobile-ready content and avoid painful hand-coding.

Step 2: Simplify, simplify, simplify

Once you’ve picked an ESP, it’s time to refine your concept of what appropriate content actually is for your campaigns. Remember, you’re dealing with tiny screens and short attention spans.

Ruthlessly edit. Cut your copy down to the bone and get straight down to business. Every word counts.

Hone your CTAs. Each campaign should focus almost exclusively on one primary call-to-action you want the reader to complete.

Go one-column to begin with. Multi-column can be a recipe for pain on mobile devices, so embrace the constraints of a single-column layout starting out. Don’t be afraid of “the fold” here — your copy’s job is to get folks past it if necessary.

Step 3: Stick to mobile-first defaults

We’ve set the stage for a successful mobile email with some sensible upfront work — now it’s time to get a little more granular.

FreshMail Harizo Template
Pre-made templates such as FreshMail’s Harizo give you a clean, crisp, mobile-friendly starting point.

Start with an eye-catching mobile-ready template from your ESP. Then make sure you’re paying attention to the following mobile-first defaults which give you the highest possible chance of delighting readers and displaying smoothly across devices:

Fonts: Use web-safe fonts with a minimum size of 16px for body text.

Text links: Remember that the finger is the mouse. Avoid having links nestled together where they can be hard to target.

Formatting: Structure is your friend. Use short paragraphs — and lists where appropriate — to keep things easy on the eye.

Big buttons: Call-to-action buttons also need to be easily clickable. Aim for a minimum size of 44 x 44 px.

Graphics: Again, look to avoid overload. Choose graphics with one prominent point of interest, and go easy on their use.

If you’re looking for a classy example of much of this in action, sign up to Craig Mod’s Roden Explorers Club newsletter, which is both an excellent read and a minor masterpiece in terms of mobile-first design. Smashing Magazine’s deep-dive on mobile email typography should also give you plenty more creative inspiration.

Step 4: Always be testing

Testing is the ongoing difference that makes the difference. Make sure you’re doing both of the following:

Pre-flight and preview all your campaigns. Most modern ESP tools give you the ability to both pre-flight and preview against common user configurations, and also send test campaigns to specified recipients.

Take advantage of ongoing reporting and split-testing. Once you have an overall setup you’re happy with, extract the most juice out of it by split-testing elements such as headlines and calls-to-action and constantly reviewing campaign metrics.

Conclusion

Getting emails optimized for mobile is a task you simply can’t skip. Fail to tackle mobile email design and you’re leaving money on the table, and potentially antagonizing list members to boot.

Though the background mechanics of getting it right can be dauntingly technical, modern tools take care of most of the grunt work for you, so use them.

Let’s recap our four steps to success:

  1. Understand the problem and use a modern ESP service to give yourself a headstart.
  2. Rigorously pare down your content to make it pop on small devices.
  3. Leverage pre-built templates with a firm eye on mobile best practices.
  4. Pre-flight all campaigns and take advantage of reporting and split-testing options.

We’d love to hear your thoughts on how best to knock it out of the park with mobile-optimized email campaigns. Any tips or tricks we’ve missed? Hit us up in the comments section below with your thoughts!