Mobile email design (part 2)

In part 2, I look at the skinny approach to designing emails that work on an iPhone and a PC:

{ Missed the horizontal design in part 1 >> }

1.  Portrait or landscape?

In portrait mode, the visible area on the iPhone is 320 x 356 pixels:

iPhone visible area in portrait

In landscape 480 x 208 pixels:

iPhone visible area in landscape

This does not include the space taken up by the status, URL and button bar which are displayed by default.

We’ve been using a 370px wide template, since Feb this year. Last month we had a 44.29% click-through rate and our open rates have also been in the 40’s. I mention this, as we were concerned how a skinny template would perform on a PC, with so much blank space to the right:

Skinny template on a PC



2. Device width & scale

By default the iPhone sets the browser device width to 980px.  Most emails are around 650px wide (skinny 320px wide), when viewed in the browser they appear zoomed out:

Device wdith not set

By adding the following code, you can set a custom device width:

<meta name = “viewport” content = “width = 650″>

Here’s how the Banana Republic email displays after setting the device width to 700px:

Device width set to 700px

You can also adjust the default scale.

Setting scale

Here’s the code:

<meta name = “viewport” content = “width = 650, initial-scale = 1.0″>

Read more on setting the device width and scale on the Apple dev site.


3.  Narrow columns of text

Blocks of text over 320px wide can be difficult to read on an Android or iPhone, as they force users to scroll and zoom. I noticed many iPhone app websites favor a 2 or 3 column layout, consisting of 320px blocks of content like apps.selcukyilmaz below:

Narrow columns of text

This gave me the idea of an email with two 320px wide columns. Clients may be more receptive to a 2 column layout as it still looks traditional, coming in at 640px wide. Here’s an example I just designed.

We are going back to the single column for email because of mobile devices @dtboyd #spop10 via @LorenMcDonald

While I agree that a single column layout works well for mobile, fixed blocks of text over 320px wide are not mobile friendly. I favor a 320px single column layout, two 320px column layout or a fluid single column layout.


4. 12px + fonts

The iPhone auto scales small fonts up to 12px. To avoid this you can add the following code:


Though the takeaway is to make all your email text over 12px. Apple recommends a 17 - 22 pixel font for the iPhone.

Chad White points out that 64% of retailers use an 8-point font size or smaller in their email footer text. Chad has created the Boomer Legibility Initiative for a New Decade (BLIND) on LinkedIn, which asks us to increase our font sizes.


5. No Flash

Flash is not supported on the iPhone or iPad. For this reason I’ve been placing our videos on YouTube. The iPhone launches YouTube video full-screen in landscape mode:

YouTube video playing in iPhone

Placing your video on YouTube has the added benefit of playing in Gmail. If you have a YouTube URL the video is automatically displayed underneath the email:

YouTube video playing in Gmail



What’s next?

Part 3 in the mobile email series looks at pixel art  and part 4 fluid layouts.

If you missed part 1 >> - horizontal - check it out.

Also here’s a gallery of 11 skinny emails from 37signals, Threadless and many others…


5 Responses to “Mobile email design (part 2)”

  • Designing emails for the iphone | riaz kanani
    June 1st, 2010 06:05

    […] There are 2 parts – read them both in full here and here. […]

  • Email Marketing More mobile, syndicate self & list lethargy | The eMail Guide - The search engine for eMail marketing
    June 1st, 2010 12:01

    […] Mobile email design (part 2) In part 2, I look at the skinny approach to designing emails that work on an iPhone and a PC… […]

  • Jonathan
    June 22nd, 2010 13:09

    Great series! I am a web designer at a private school and am working hard on making our email communications work better on mobile platforms. It is a very tricky thing, especially since we are trying to support most platforms (iPhone, Android, Windows, Blackberry, Symbian). This series is really informative and helpful to think about different ways to design email that works on mobile, but also on the desktop environment. Thanks much!

  • Gregg Oldring
    July 12th, 2010 20:51

    This is great stuff. Have you seen Window 7 mobile or BlackBerry 6 yet? I haven’t seen them in action. I would love it if this worked for those devices as well.

  • Anna Yeaman
    July 14th, 2010 10:36

    Thanks for dropping by Gregg, was just looking over your mobile support chart the other day…

    No I’ve not seen them yet, just the BlackBerry 6 sneak peak video. I’ve been using DeviceAnywhere for mobile testing, they’re pretty good at adding new devices shortly after they are released.

    Current DA BlackBerry list: (click “view devices” next to the BlackBerry and it shows all the versions they currently support.)


Leave a comment: