Email design for mobile devices

Quick formatting tips for stylish emails in any inbox

Every morning, I get the French press ready and hop on my iPhone to check the barrage of emails I received through the night. More and more of us are doing this (maybe not the French press, but I highly recommend it); we check email on our phones even before we eat breakfast or open our computers. In fact, Litmus says that almost 10% of total email opens come from mobile devices.

When you’re building your emails, you may be considering the mail programs in which your audience is reading them (Outlook, Gmail, Mac Mail, etc), but it’s an equally good idea to plan for your emails to be read on a mobile device. Inboxes can be tricky, and making your email look good in all locations will take a little time and dedication.

Building an email for mobile readers isn’t difficult, though, and it may even mean making your job easier — the best emails utilize fundamental design ideas. Let’s talk about what you can do to ensure your mobile readers have the same reading experience as your desktop readers.

Simplify your content. Mobile screen real estate is valuable; keep your design clean and simple. Evaluate your content and remove some of the less-useful information. Think about if that sidebar of upcoming events or staff photos could be removed and used in another email. If you’ve got a lengthy description around your product, let images and/or links to your website do the talking.

If you have navigation toolbars, these can get squished, thus breaking your layout and making it hard for people to tap those links. Consider paring the links down to important places your reader can easily tap.

Include an easy-to-spot call to action. This is arguably the most important part of your email. It doesn’t matter how people are viewing it (mobile or desktop), you want folks to see your offer and click through. Keep your call to action easy-to-spot and above the fold. And consider using your subject line to give the reader a sneak peek inside.

Note: When designing for mobile, make sure the call to action is tappable (at least 44 x 44 pixels, per Apple’s Human Interface Guidelines).

Enlarge your fonts. Fonts for emails read on mobile devices should be considerably larger than those in traditional emails. iOS devices resize all fonts smaller than 12 pixels up to 12 pixels, which can break your layout. A good rule of thumb is to keep your headlines around 22 pixels and body text around 12-14 pixels.

Mind your images. Aside from the iPhone/iPad, mobile devices will automatically block your images and prompt the user to “turn images on.” Be sure to add alt text to your images. That way, the reader will see a text description of the image before it’s displayed.

Be purposeful with your layout. Let’s face it: Mobile devices are going to sizably scale down your layout. This makes it more difficult to tap on links and read the content. Try using a layout that has only one or two columns of content. Here are a few layout examples, two that are mobile-friendly and one that would be better-suited for desktop viewing:

Simple, clear layout	Perfect for newsletters	Sidebar + newsletter layout may be difficult to read on a mobile device

+++++

Since email for mobile is still a fairly new concept, there aren’t any hard and fast rules, but I hope these guidelines will help you design emails that look good in any inbox. For even more tips, read Anna Yeaman’s six mobile design tips, and share tips of your own in the comments section.

+++++

Like these tips? Sign up for Emma’s newsletters to receive tips & tricks in your inbox.