Categories
Articles

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.