Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mastering Email and the Internet's Cockroach

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.

jng

September 04, 2015
Tweet

More Decks by jng

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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
  4. 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.
  5. 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
  6. Email != Web page Keep it brief and to the

    point. Default to TL;DR; Make links and buttons obvious. Differentiate your communications. Design
  7. 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
  8. 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' %>
  9. 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; } }
  10. 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?
  11. <th> Hack How to Make Content Stack on a Mobile

    Device labs.actionrocket.co/stacking
  12. Doesn't feel right to me… <table> <thead> <tr> <th> <table>…</table>

    </th> <th> <table>…</table> </th> </tr> </thead> </table>
  13. 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>
  14. 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>
  15. 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
  16. Gap or a border on your <img> in Gmail? Or

    spacing issues?
 Did you include display: block;? HD Scaling problems in Outlook :-( Images
  17. 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;
  18. 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
  19. 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.
  20. 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>
  21. 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); }
  22. 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