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.
Text of Responsive HTML Email
1. ResponsiveHTML Emailhttps://flic.kr/p/idKefi
2. Benjy StantonFreelance web designer 3. ResponsiveHTML Email 4. My Processhttps://flic.kr/p/idJmHY 5. 1. Gather content2. List elements on paper3. Sketch wireframes4. Mock-up design5. Write the code6. Inline CSS7. Test in web browsers8. Test with real email clients9. Test on virtual email clients10. Lift-off! 6. Design with datahttps://flic.kr/p/i3Hm7i 7. http://emailclientmarketshare.com/ 8. Progressiveenhancement 9. Start with plain text Encourages a Content First approach Not having a plain text will anger the spam filters Some older email clients cant handle html Some people prefer plain text and will set theiremail clients accordingly 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 evenwithout images 11. Link to web view People may have images turned off The html may not be rendering properly Its a handy way to share the email 12. Accessibility 13. People spend a lot of time worrying aboutemail clients with 1% usage; accessibilityis a much bigger issue Mark, Rebelmail 14. https://www.campaignmonitor.com/guides/accessibility/ 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. http://colororacle.org/ 17. Back to thedesign process 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. Start withreal contenthttps://flic.kr/p/ic3Hi9 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. 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. How big should an email be? 600px wide for desktop email clients Ive already decided on the source order, so noreal need to mock-up at narrower widths Height and weight: smaller the better 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. Consider how thingswill look in the inbox 25. Building 26. http://zurb.com/ink/ 27. http://zurb.com/ink/inliner.php 28. Inline your CSSWe need to do this because Gmailstrips CSS from the