Mastering Email and the Internet's Cockroach

E-Mail persists after many decades and will continue to survive Chat, Skype, etc. - just as roaches have survived the atomic bomb. Despite being a pest, E-Mail is also an effective marketing channel and the most personal communication you have with your users and customers.

You've survived Gmail's spam filter. Now let's make sure you also survive mobile devices with responsive E-Mail HTML. It's not as difficult as you think. Let's examine how developers have solved common problems with tried and true techniques for designing and developing bulletproof E-Mails.

Transcript

1. Mastering Email and the Internet's Cockroach Julie Ng REFRESH
 Tallinn, Estonia 4 September 2015
2. Julie Ng • American Developer in Munich • Previously Designer at ancestry.com for European Markets • UX Email Developer, Consultant • Refresh Munich e.V. Chairwoman • Runner, Climber
3. I. Email You scream, I scream, we all scream for Email
4. Email is... Graphic: Gilad Fried, Noun Project "this beautiful cockroach 
 of a social network " - Alexis C. Madrigal "Email Is Still the Best Thing on the Internet"
 The Atlantic, 14 August 2014
5. 6+ months ago Newsletter Offer for Asia 6 months ago Book Fight 6 months ago Email Confirmation Flight details
 Pricing incl. taxes
 Calendar .ics as attachment 4 days before Trip Reminder Time Zone Difference
 Pricing incl. Weather
 Currency 1 day before Boarding Pass Confirmation 1 day before Online Check-in Reminder Holistic User Experience with Email
6. ? Is Email development just front-end?
7. Holistic Email User Experience Confirmation With PDF invoice for your records. [Action Required] Billing Error Reminder Upcoming Payment Alert Credit cart expiring Receipt Thank you for your purchase Ready to ship Here's a tracking number It's shipped! incl. estimated arrival date Delivered Your neighbor signed for the package.
8. II. Approach Good UX = design + development
9. Not a Webpage… TL;DR; Mystery Content Gmail Truncates
10. …but an Email Hit me! again and again…
11. Email Cut Offs Source: Neil Bursnoll, Adestra adestra.com/avoid-gmail-clipping-emails Source: Geoff Phillips, Email on Acid emailonacid.com 102 kb Gmail Web Source: Ros Hodgekiss, Campaign Monitor campaignmonitor.com 20 kb Gmail iOS 15 kb Mail iOS
12. How many types of Emails do you send?
13. Email != Web page Keep it brief and to the point. Default to TL;DR; Make links and buttons obvious. Differentiate your communications. Design
14. ? Sounds good. So what's so hard about Email?
15. Developers love Email… Outlook.com drops margin
 and float support entirely Ros Hodgekiss, Campaign Monitor campaignmonitor.com/blog Responsive Email Without
 Media Queries Ted Goas medium.com
16. Litmus Email Testing litmus.com
18. Outlook predictably broken
19. Campaign Monitor: the Ultimate Guide to CSS https://www.campaignmonitor.com/css/
20. Buttons Bulletproof Email Buttons http://buttons.cm/ Litmus Buttons https://litmus.com/blog/
21. A Button ~ 2013
22. A Button now <table border="0" cellspacing="0" cellpadding="0" class="button<%= " #{color}" if defined? color %>"<%= " align=\"#{align}\"" if defined? align %>> <tr> <td align="center"><a href="<%= url %>"><!--[if mso]>&nbsp;<![endif]--><%= text %><!--[if mso]>&nbsp;<![endif]--></a></td> </tr> </table> <%= button 'View Profile', '#', color: 'blue', align: 'left' %>
23. ? Frameworks: good or bad?
24. Ink zurb.com/ink/
26. ? Responsive Layouts with Tables?
27. Antwort Responsive Layouts V0 Legacy Antwort (v0) used stacked <td> columns to transform layouts
28. Antwort Responsive Layouts V1 <!--[if mso]> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr><td width="50%" valign="top"><![endif]--> <table width="280" align="left" class="force-row"> </table> <!--[if mso]></td><td width="50%" valign="top"><![endif]--> <table width="280" align="right" class="force-row"> </table> <!--[if mso]></td></tr></table><![endif]--> @media screen and (max-width: 414px) { .force-row { width: 100% !important; max-width: 100% !important; } }
29. Targeting Versions of Outlook Name Version Outlook 2000 9 Outlook 2002 10 Outlook 2003 11 Outlook 2007 12 Outlook 2010 14 Outlook 2013 15 <!--[if mso]> <table>...</table> <![endif]--> <!--[if lte mso 11]> This will never show because Outlook 2000/2/3 uses bundled IE 6/7 as its rendering engine <![endif]--> Greater than mso 9?
30. <th> Hack How to Make Content Stack on a Mobile Device labs.actionrocket.co/stacking
31. Doesn't feel right to me… <table> <thead> <tr> <th> <table>…</table> </th> <th> <table>…</table> </th> </tr> </thead> </table>
32. Snippet: meta data <table class="metadata"> <tr> <td> <% meta.each_with_index do |m, i| %> <table class="m-<%= m[:key] %>" align="left"> <tr> <td align="center" valign="top" class="icon"> <%= image_tag "/shared/#{m[:icon]}", width: 16, height: 16 %> </td> <td valign="middle" class="data ios-grey-links"> <%= m[:data] %> </td> </tr> </table> <% if i != meta.length - 1 %><!--[if mso]></td><td><![endif]--><% end %> <% end %> </td> </tr> </table>
33. Gmail 2 steps forward, 1 step backward?
34. ? So how do you really hide elements?
35. Hiding Mobile Content .is-hidden { display: none; /* Gmail ignores this */ visibility: hidden; overflow: hidden; /* for gmail */ height: 0; /* for gmail */ max-height: 0; /* for gmail */ mso-hide: all; table { mso-hide: all; } } /* later inside media query...*/ .is-hidden { display: none !important; visibility: visible !important; max-height: none !important; } <!-- Note: .is-hidden must be on div --> <div class="treasure is-hidden"> <table>…</table> </div>
36. As of Android V 5.0 (Lollipop): - No more Email App. Only Gmail App. - Gmail fudges its own responsive, removing your widths. Use min-width: 100%; if you want table to have width: 100%; Caveat: 4.2 (Jelly Bean) does not support min-width: 100% to make width 100% in Email. Gmail Quirks
37. Gmail's Fudged Responsive
38. ? How to prevent Gmail fudging?
40. Gap or a border on your <img> in Gmail? Or spacing issues?
 Did you include display: block;? HD Scaling problems in Outlook :-( Images
41. Images cotd. 1. Set <img width="300"> in HTML for Outlook 2. Do not set height attr on <img> 3. Set width:100%; in inlined CSS 4. Use max-width: 300px in CSS (Windows Phone) 5. Adjust as needed in media queries, for example: width: 40%; height: auto; min-width: 80px; max-width: 200px;
42. Double check your markup. Check CSS order. 
 Something missing, overriding something else? Use !important only when you need to Spacer cells need spacer gifs or &nsbp; Debugging
43. Margin hack works Margin: 12px does not work margin: 12px
44. Inliners and CSS Hacks
45. Premailers a curse and a blessing
46. ? Why do we inline CSS?
49. JavaScript Inliners juice 895 Stars 10 issues styliner 91 Stars 6 issues
50. Ruby Inliners Roadie 865 Stars 4 issues premailer 1466 Stars 93 issues
51. CSS Inliners Compared Styliner Juice Premailer Roadie Language JavaScript JavaScript Ruby Ruby GitHub Favorites 91 895 1466 865 GitHub Issues 6 10 93 4 Affects Markup? ? sometimes… sometimes… Nokogiri… Shorthand CSS? ? Yes Yes No Respects HTML Comments? ? ? ? Yes Respects <style>? ? Supposed to Yes Sometimes? Check issues. Try it.
52. Removed Comments
53. Not everything should be inlined <style> /* Do not inline! */ /* iOS autolinks */ .ios-footer { a { color: #999999 !important; } } </style> <span class="ios-footer"> MyCompany.com 123 Main St Springfield, MA </span>
54. <style> to inline or not to inline?
55. Beware shorthand CSS .example { /* This works across all clients */ background-color: #ff0000; background-image: linear-gradient(#111111, #222222 50%, #111111); /* But the same as shorthand does not because Outlook does not understand linear-gradient, so ignores all values for background. */ background: #ff0000 linear-gradient(#111111, #222222 50%, #111111); }
56. Does NOT combine multiple styles into CSS short-hand. Does not inline or strip included <style>s Does not strip out comments. Does not remove spaces. Premailer Checklist
57. Check your workflow
58. Code Demos Workflow
59. Fin Julie Ng @jng5 julie.io