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.

1. Responsive
HTML Email
https://flic.kr/p/idKefi

2. Benjy Stanton
Freelance web designer

3. Responsive
HTML Email

4. My Process
https://flic.kr/p/idJmHY

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. Design with data
https://flic.kr/p/i3Hm7i

7. http://emailclientmarketshare.com/

8. Progressive
enhancement

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. 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. 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. Accessibility

13. “People spend a lot of time worrying about
email clients with 1% usage; accessibility
is 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 the
design 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 with
real content
https://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)

24. 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

25. Keep Things Simple
• Use just 1 or 2 columns if you can
• Be generous with spacing
• Complicated designs take ages to test and debug

26. Consider how things
will look in the inbox

29. Building

30. http://zurb.com/ink/

31. http://zurb.com/ink/inliner.php

32. Inline your CSS
We need to do this because Gmail
strips CSS from the <style> tag.

33. http://inliner.cm/

34. Use tables
Use <table></table> because Outlook
has poor support for CSS based layouts
https://www.campaignmonitor.com/guides/coding/guidelines/

35. Attribute selectors
Use attribute selectors for any styles
contained in your media queries to make
sure Yahoo! ignores them.
https://www.campaignmonitor.com/guides/mobile/coding/

36. Use !important
Use !important in your media queries to
make sure the styles override any inline styles
https://www.campaignmonitor.com/guides/mobile/coding/

37. 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

38. http://emailchecklist.org/

39. Testing!
https://flic.kr/p/hLD7cN

40. http://mailchimp.com/

41. Test on real devices
• Gmail.com
• Outlook.com
• Yahoo.com
• AOL.com
• iPhone 5c
• iPad
• Mail (OSX)
• Thunderbird (OSX)
• Outlook (Windows)
• Windows Live Mail

42. http://benjystanton.co.uk/email-test.pdf

43. Inspecting is tricky
Test in old browsers like IE7 instead

44. 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.

45. http://mailchimp.com/features/inbox-inspector/

46. Stuck? Check the interwebs
• Campaign Monitor
• Litmus
• Email on Acid

47. Beating spam filters
• Use test services provided by ESPs
• Use www.mail-tester.com
• Write good content

48. Nearly there…
https://flic.kr/p/hVRbV8

49. Further Reading
Making Responsive HTML Emails
benjystanton.co.uk/blog/making-responsive-html-emails/
The Ultimate Guide to CSS
campaignmonitor.com/css/
The Email Design Guide
mailchimp.com/resources/email-design-guide
Can Email Be Responsive?
alistapart.com/article/can-email-be-responsive
Five Ways to Test an Email
litmus.com/blog/five-ways-to-test-an-email

50. Further Reading
Email Design Review
emaildesignreview.com
Let’s fix email
letsfixemail.com
The design of government emails
designnotes.blog.gov.uk/2014/09/04/the-design-of-government-emails
Litmus Email Builder
litmus.com/email-builder
What you need to know about using fonts in email
adestra.com/what-need-know-using-fonts-in-email

51. Further Reading
6 Email Client Hacks You Need To Know
freshinbox.com/blog/6-email-client-hacks-infographic
Best Practices for Plain Text Emails
litmus.com/blog/best-practices-for-plain-text-emails-a-look-at-why-theyre-important
The Ultimate Guide to Styled ALT Text in Email
litmus.com/blog/the-ultimate-guide-to-styled-alt-text-in-email
Image Blocking in HTML Email
campaignmonitor.com/resources/will-it-work/image-blocking/
Color blindness and email: Are you designing for accessibility?
www.campaignmonitor.com/blog/post/4267/color-blindness-accessibility-and-the-vision-
impaired-in-email-design

52. Thanks!
benjystanton.co.uk
@benjystanton
https://flic.kr/p/hXzsG9