10 tips for device responsive email

Sharon Jennings

26 November 2012

Device responsive email seems to be the gold at the end of the rainbow for email marketers. It also appears to be a closely guarded secret by anyone who’s managed it successfully. After a lot of Internet research and a lot of testing, retesting and testing again, I now understand why… it’s not easy!

So I’m afraid I’ll be closing ranks with the other email marketers who’ve smugly figured out this mobile-wizardry.  However, I’m happy to share what I feel are the main points of the new must-have for email:

  1. You need to use CSS and Media Queries.  You don’t need to worry about which clients strip out CSS as this is only needed by emails read on mobile devices. Having said that, it will not work on Gmail apps. Sorry, it just won’t. They will receive the original, desktop version.
  2. Make your email width fit to the size of a mobile. People don’t want to horizontally scroll. While this may mean converting the desktop two column design to one column, it is doable.
  3. Make your font sizes bigger. People don’t want to zoom. The font size recommendations are 14px for copy, and 20-22px for titles.
  4. Make it work if images are disabled. You should be doing that anyway!
  5. Make sure links & buttons are fat-finger friendly. The average adult finger takes up 45 pixels, so make them big, and/or leave a lot of space from other links around them.
  6. Consider your top navigation bar. It takes up valuable screen space above the fold, so you might want to move it to the bottom, or just scrap it entirely.
  7. Be wary of colour combinations. Screens may be dimmed to conserve battery, so the contrast between the font and the background colour is important.
  8. Make use of the 'snippet'. This is the first piece of text from your email, which appears as a preview in your mobile inbox. Do you really want your preview to say “Having problems viewing this email?”?
  9. Design for mobile first. If there are things you can strip out or simplify for mobile, do you really need them on the full email?
  10. Don’t lump tablets in with mobiles. People tend to use them as they would their PC or laptop, you just need to make sure that the links are touch-friendly.

So, good luck finding that elusive pot of gold!