Web Design for Mobile + Email Design


Maximize mobile without sacrificing desktop

I listened in on a webinar about email campaign design for mobile given by Litmus and ExactTarget. Check it out yourself, http://litmus.com/blog/mobile-email-webinar. This is a review of what was covered.

Current State

Design for mobile email campaigns is a relatively new topic. Web Design for mobile has been around a bit longer, but both are rapidly changing as mobile devices are rapidly improving.

The number of smartphones is increasing:

  • 17% of 314.7M phones sold in Q1 2010, 49% increase from Q1 2009
  • B2C increasing more than B2B as smartphones become more affordable

Email use is most of what we do on our phones (42%):

  • up 11% from 2009
  • social media is only 10.5%
  • 30% are engaged, reading and replying
  • a lot of time spent gazing at the inbox

Mobile Optimization Considerations

So, when should you consider optimizing your email campaigns for mobile?

  • If you have a mobile or SMS app already
  • If your site is heavily trafficked by mobile users
  • If your email list shows high mobile percentage

We use Campaign Monitor for our email testing and sending and they have an area that lists how your email recipients are opening your email. All the statistics you need, broken out by device or email client. You can also consider adding in an opt-in link to a mobile version of your email campaign the next time you send one out just to see what kind of response you get.

Mobile Device Considerations

When it comes to mobile email, there are really just two devices you need to consider: enabled or limited.

Enabled (Android, iPhone...)

  • emails probably render fine
  • capable of even more than desktop clients (webkit, CSS3)

Limited (older BlackBerrys, smaller screens...)

  • emails require extra work
  • won't display plaintext but will actually strip down the html

Inbox Recommendations

People are spending a lot of time looking at their email inbox from their mobile devices. You can use this to your advantage and really make an impact with what text is read here.

There's a maximum of 35 characters in the subject line that can be viewed from a mobile device. Preheaders (the first line of the email, the email preview) allow for a maximum of 90 characters. Another piece that's viewed is the from name, which can be taken advantage of if possible. Although it's good to stay consistent.

Email Recommendations

Keep in mind the usual techniques, but consider your mobile audience without sacrificing the desktop view. Use short, direct content and a clear call to action.


  • The fold is a little smaller on a mobile device (320x230px) than it is for a typical email client and should be considered.
  • Think in terms of 320px. If you do one column, it should have a width of 320px, or you can do two columns each 320px.


  • Font size should be between 18-22px, which is recommended by Apple in app development.
  • Buttons should be the size of your thumb…around a half inch. Make links display:block to maximize clickability.
  • Consider vertical and horizontal rhythm. iOS is built on a 44px repetition.


From the webinar:

A great article reviewing Transmit's approach to desktop/mobile email design with their audience in mind: