Designing Emails for Touch – 6 Beginner Tips

 Vertical spacing

The lack of vertical spacing between the main CTAs in this Brooks Brothers email, invites mistaps in an otherwise great design. REI is less shy with their spacing. In Apple’s Human Interface Guidelines, they recommend a minimum target area of 44 x 44 points (the height of the blue, “Inbox” bar).

 Left justify for Android

Unlike iOS, Android devices don’t scale content to the width of the screen. This means emails are cut of at ~320px wide on Smartphone’s and 600px on the Kindle Fire. You can swipe to see more, but I’d still place crucial information – like the CTAs below -  aligned left. Or better still, design buttons that span the width of the screen.

 Product images as links

44px high buttons take up room that could be otherwise dedicated to content. By combining the two, you make the most of the available space. Experiment with drop shadows etc. to make product images appear more tappable. There’s no hover state on mobile devices, so users need visual cues.

 Don’t ignore the footer

Kudos to Filson, for making their footer text easy to read. UO have also given the footer some love, with five finger-sized tabs. Anything more than five, and they would become hard to read and tap. The blue toolbar at the bottom, is a good starting point when designing email navigation.

 Push contrast & font size

Push the contrast beyond what you’d do for the desktop, as content becomes hard to read once its scaled down. Try running a quick grayscale test. Also increase the size of your fonts, or the iPhone automatically scales it up, often breaking layouts. WP7 recommends no smaller than 15 points, Apple recommends a 17-22 pixel font. Lighter, cleaner content

On a recent cull of our newsletter, I remember thinking if I carry on at this rate, all we’ll have left is a green CTA button. Youzee beat me to it. This is their entire email (with just a bit of their logo cut off at the top). While you may not need to go this far, try condensing your copy and ditching any image weight that’s not essential.