Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive HTML Email


Published on

This is a run down of my process for designing, building and testing responsive HTML emails. I’ve also included lots of links to articles and resources for further reading. This talk was presented at Port80 Winter Localhost 2014 in Newport, Wales.

Published in: Design
  • Dating for everyone is here: ❤❤❤ ❤❤❤
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ❶❶❶ ❶❶❶
    Are you sure you want to  Yes  No
    Your message goes here
  • Great summary, howevery the building part is quite short (could be a book indeed). Have a look at for HTML emails without in-depth knowlegte
    Are you sure you want to  Yes  No
    Your message goes here

Responsive HTML Email

  1. 1. Responsive HTML Email
  2. 2. Benjy Stanton Freelance web designer
  3. 3. Responsive HTML Email
  4. 4. My Process
  5. 5. 1. Gather content 2. List elements on paper 3. Sketch wireframes 4. Mock-up design 5. Write the code 6. Inline CSS 7. Test in web browsers 8. Test with ‘real’ email clients 9. Test on virtual email clients 10. Lift-off!
  6. 6. Design with data
  7. 7.
  8. 8. Progressive enhancement
  9. 9. Start with plain text • Encourages a ‘Content First’ approach • Not having a plain text will anger the spam filters • Some older email clients can’t handle html • Some people prefer plain text and will set their email clients accordingly
  10. 10. Images off by default • Most email clients block images by default • Content should make sense with images off • Style ALT text so email looks good even without images
  11. 11. Link to web view • People may have images turned off • The html may not be rendering properly • It’s a handy way to share the email
  12. 12. Accessibility
  13. 13. “People spend a lot of time worrying about email clients with 1% usage; accessibility is a much bigger issue” – Mark, Rebelmail
  14. 14.
  15. 15. • Tables are optimised to preserve logical reading order • Heading elements used • Text colour contrast is sufficient • Subject line is concise and descriptive • Headings summarise content that follows • Link text is meaningful (not “read more” or “click here”)
  16. 16.
  17. 17. Back to the design process
  18. 18. Client brief • main objective of the email • target audience • an early draft of the content • guidance on potential design style (including imagery and brand guidelines)
  19. 19. Start with real content
  20. 20. • Logo • Main image • Heading • Paragraph (or two) • A main call to action • Contact details • Social media icons • Small print • Unsubscribe link • View in a browser link
  21. 21. Make a list • List the elements on some paper • Mark them up as h1, p, button etc. • develop a hierarchy and a source order (good for mobile first approach)
  22. 22. How big should an email be? • 600px wide for “desktop” email clients • I’ve already decided on the source order, so no real need to mock-up at narrower widths • Height and weight: smaller the better
  23. 23. Keep Things Simple • Use just 1 or 2 columns if you can • Be generous with spacing • Complicated designs take ages to test and debug
  24. 24. Consider how things will look in the inbox
  25. 25. Building
  26. 26.
  27. 27.
  28. 28. Inline your CSS We need to do this because Gmail strips CSS from the <style> tag.
  29. 29.
  30. 30. Use tables Use <table></table> because Outlook has poor support for CSS based layouts
  31. 31. Attribute selectors Use attribute selectors for any styles contained in your media queries to make sure Yahoo! ignores them.
  32. 32. Use !important Use !important in your media queries to make sure the styles override any inline styles
  33. 33. Checklist • Proof read the copy • Check phone numbers and email addresses • Check you’ve included alt text and titles attributes • Remove unused CSS • Optimize images • Check email with images turned-off • Check images and links have absolute paths
  34. 34.
  35. 35. Testing!
  36. 36.
  37. 37. Test on real devices • • • • • iPhone 5c • iPad • Mail (OSX) • Thunderbird (OSX) • Outlook (Windows) • Windows Live Mail
  38. 38.
  39. 39. Inspecting is tricky Test in old browsers like IE7 instead
  40. 40. Outlook for free Start a Office trial, then don’t renew it. You still get to use Outlook for testing. Shhhh, don’t tell anyone.
  41. 41.
  42. 42. Stuck? Check the interwebs • Campaign Monitor • Litmus • Email on Acid
  43. 43. Beating spam filters • Use test services provided by ESPs • Use • Write good content
  44. 44. Nearly there…
  45. 45. Further Reading Making Responsive HTML Emails The Ultimate Guide to CSS The Email Design Guide Can Email Be Responsive? Five Ways to Test an Email
  46. 46. Further Reading Email Design Review Let’s fix email The design of government emails Litmus Email Builder What you need to know about using fonts in email
  47. 47. Further Reading 6 Email Client Hacks You Need To Know Best Practices for Plain Text Emails The Ultimate Guide to Styled ALT Text in Email Image Blocking in HTML Email Color blindness and email: Are you designing for accessibility? impaired-in-email-design
  48. 48. Thanks! @benjystanton