Best practices for emails to mobile devices

More and more people are reading emails on smartphones. For some senders a majority of the recipients open their emails on mobile devices.

On the web, you can make a page “responsive” — which means that the server detects what kind of a device is asking for the page, and renders it accordingly. You can have one design for desktop, one for tablet, one for smartphone, etc.

That doesn’t work with email. People who talk about “responsive” email design are confused.

To design emails for mobile devices you have to choose a layout that will work for all email browsers on whatever kind of device. In short, that means keep it simple.

I’ve looked up a bunch of articles on the topic, and this, I think, is the best way to go. Follow these principles for your emails so they’ll display well on mobile devices.

  • Link to a “view this in a web browser” version
  • Use a single column layout
  • The width should be 580px or smaller
  • Use tables for positioning
  • Put your call to action near the top
  • Leave room around clickable text and objects to accommodate fat fingers
  • Don’t put links too close together
  • Consider small buttons (40 x 40 pixels with 10 pixels of padding) instead of text links for calls to action
  • Min. 14px for text and 22px for headlines
  • Break up the text more by using short paragraphs
  • Limit images to no more than 250px wide, and keep the file size small (less than 20k)
  • Always use alt tags on images
  • As with all e-mails, do not use css (except inline)

Of course that’s only half the battle. If you want your recipients to take the next step to a landing page, you also have to optimize that for mobile — and for m-commerce. That’s another matter.

Leave a Reply

Your email address will not be published. Required fields are marked *

sixteen + 13 =