Designing Emails for Touch – 6 Beginner Tips

by

Fingers are less accurate than a cursor, so you’ll need to rework your email creative paying special attention to CTA buttons, pre-headers and navigation.

A guest post by Anna Yeaman.

 

1. 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).

 

{ Brooks Brothers and REI }

 

 

2. 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.

 

{ Bonobos and Groupon }

 

 

3. 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.

 

{ Diesel and Park & Bond }

 

 

4. 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.

 

{ Urban Outfitters and C.C. Filson }

 

 

5. 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.

 

{ Skinny Cahoona email with high contrast + large text }

 

 

6. 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.

 

{ Simple fluid email from Youzee}

 

 

None of these tweaks requires special mobile coding, just a mindset change. It’s time to get serious about designing emails for touch. It doesn’t have to be perfect, you can gradually rework sections over time, but you should make a start. Have you?

 

Anna Yeaman is the Co-Founder and Creative Director at STYLECampaign, an email creative agency in LA.

Related posts

  • http://www.nedcon.ro/ Thomas Gamble

    I’ve learned a lot from your blog here! Keep on going, I will keep an eye on it.

  • Mark Jason

    Inspiring ideas.

  • Anonymous

    Hi Clare, you’re right you don’t know when you hit send whether it will be read on the desktop or mobile (or both). A separate mobile version is one solution, but requires an extra click.

    Alternatively you can use media queries to alter the css depending on the screen properties (which would allow you to increase font sizes for iPhone users for instance). It’s one template that adapts it layout depending on where it’s read. There’s some examples on my blog, or just Google media queries.

    There’s also scalable designs, which the screens above use. The idea is to size elements to work in both environments. But like you said this can lead to jumbo sized creative on the desktop. It’s a balancing act and a compromise, but just one layout and easy to implement.

    There’s different approaches to mobile design: fluid, skinny, scalable, dynamic, responsive. Though designing for touch would be a component of all of them. Which you pick depends on your mobile usage stats, budget and the type of content you send out.

    Hope this helps