Pro Yearly is on sale from $80 to $50! »

Mastering Email and the Internet's Cockroach

F4612f9492cccc0c61c9b5f80d0ca8a1?s=47 jng
September 04, 2015

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.

F4612f9492cccc0c61c9b5f80d0ca8a1?s=128

jng

September 04, 2015
Tweet

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

  17. None
  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/

  25. None
  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?

  39. None
  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?

  47. None
  48. None
  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