Mobile email HTML design tips

The rise of the smartphone has been phenomenal.

It seems as though almost everyone (aprt from my Nan) has either an iPhone or Android “hand-hold-e-computer-machine” (Nan again).

More than 70% of people read their email in a mobile app, 10 years ago it was about 20%. No wonder Nan can’t keep up!

With this ever increasing mobile activity for emails, we thought it was time to give you some tips on creating a mobile friendly version of your marketing emails.

I personally think that its more time efficient to create an online mobile friendly version (similar to a weblink) rather than setting up two versions of each email, but the tips below are valid for both methods:

  • Make sure that you are sending a text alternative to your HTML version.

Mobile email readers are small. The big devices close to or under 1150 pixels, while common mobile email readers are in a range of 320 pixels.

Bare these screen displays in mind depending on your audience:

  • Email for desktop viewing = 600 pixels
  • iPhone 5S portrait = 640 pixels
  • iPhone 5S landscape = 1136 pixels
  • iPad 2 portrait = 768 pixels
  • iPad 2 landscape = 1024 pixels
  • Stick to a single column layout and make sure the content is left aligned
  • Keep images to a minimum and make sure they are small in size
  • Automatic text resizing – many mobile devices automatically resize your fonts, which can impact on the design. Use the CSS rule below to disable this:
    -webkit-text-size-adjust: none;
  • Space your links out! It can be troublesome clicking the correct link on a touch screen so make it as easy as possible.
  • Is your website mobile friendly? It’s all well and good optimising your email marketing for mobile devices but make sure the landing pages you are directing them to are as well.
  • Test your work – make sure that you thoroughly test your web version before going live.
    There are some great tools out there for this, such as Litmus.