Really Simple Responsive HTML Email Template

Things I’ve Learned About Responsive Email Design

Navigation bars in email
My personal recommendation is don’t do it. You’re already dealing with limited space and the user’s limited attention span. Lets not complicate things. I don’t have any stats to back up this opinion, so feel free to present some metrics to prove to me that it is worth it.
Building responsive emails
A list of things to remember when building responsive emails:

  • Use !important in your media queries to over power inline CSS
  • Apple recommends minimum button height be 44px on mobile devices
  • Create your images @2x for retina displays, and remember to set the height and width otherwise they will break Outlook
  • Remember to compress those images to reduce the file size
  • Keep subject lines fewer than 50 characters
  • Preheader text is even more important on mobile
  • Minimum font size on mobile should be 13px, recommended is 16px for text and 22px for headings
  • Don’t use navigation bars in emails
  • Your best bet is to stick with a single column layout, much simpler than supporting multiple columns
  • Sure you can use grids it just gets a bit trickier and requires some conditional hacks for Outlook
  • Don’t forget your landing pages should be responsive too
  • iOS styles links, dates, addresses and phone numbers as underlined blue text, to get around this have a media query class to override
  • Use px over ems
  • Use Margin not margin (capital “M”) so margins work in Outlook.com
View Details Load Comments