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
   

   View Slide

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
   

   View Slide

3. I. Email
   You scream, I scream, we all scream for Email
   

   View Slide

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
   

   View Slide

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
   

   View Slide

6. ?
   Is Email development just front-end?
   

   View Slide

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.
   

   View Slide

8. II. Approach
   Good UX = design + development
   

   View Slide

9. Not a Webpage…
   TL;DR; Mystery Content Gmail Truncates
   

   View Slide

10. …but an Email
    Hit me! again and again…
    

    View Slide

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
    

    View Slide

12. How many types of Emails do you send?
    

    View Slide

13. Email != Web page
    Keep it brief and to the point. Default to
    TL;DR;
    Make links and buttons obvious.
    Differentiate your communications.
    Design
    

    View Slide

14. ?
    Sounds good.
    So what's so hard about Email?
    

    View Slide

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
    

    View Slide

16. Litmus Email Testing
    litmus.com
    

    View Slide

17. View Slide

18. Outlook
    predictably broken
    

    View Slide

19. Campaign Monitor: the Ultimate Guide to
    CSS
    https://www.campaignmonitor.com/css/
    

    View Slide

20. Buttons
    Bulletproof Email
    Buttons
    http://buttons.cm/
    Litmus Buttons
    https://litmus.com/blog/
    

    View Slide

21. A Button ~ 2013
    

    View Slide

22. A Button now
    defined? color %>"<%= " align=\"#{align}\"" if defined? align %>>
    
    <%= text
    %>
    
    
    <%= button 'View Profile', '#', color: 'blue', align: 'left' %>
    

    View Slide

23. ?
    Frameworks: good or bad?
    

    View Slide

24. Ink
    zurb.com/ink/
    

    View Slide

25. View Slide

26. ?
    Responsive Layouts with Tables?
    

    View Slide

27. Antwort Responsive Layouts V0
    Legacy Antwort (v0) used stacked columns to transform layouts
    

    View Slide

28. Antwort Responsive Layouts V1
    
    
    
    
    
    
    
    @media screen and (max-width: 414px) {
    .force-row {
    width: 100% !important;
    max-width: 100% !important;
    }
    }
    

    View Slide

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
    
    
    Greater than mso 9?
    

    View Slide

30. Hack
    How to Make Content Stack on a Mobile Device
    labs.actionrocket.co/stacking
    

    View Slide

31. Doesn't feel right to me…
    
    
    
    
    …
    
    
    …
    
    
    
    
    

    View Slide

32. Snippet: meta data
    
    
    
    <% meta.each_with_index do |m, i| %>
    
    
    
    <%= image_tag "/shared/#{m[:icon]}", width: 16, height: 16 %>
    
    
    <%= m[:data] %>
    
    
    
    <% if i != meta.length - 1 %><% end %>
    <% end %>
    
    
    
    

    View Slide

33. Gmail
    2 steps forward, 1 step backward?
    

    View Slide

34. ?
    So how do you really hide
    elements?
    

    View Slide

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;
    }
    
    
    …
    
    

    View Slide

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
    

    View Slide

37. Gmail's Fudged Responsive
    

    View Slide

38. ?
    How to prevent Gmail fudging?
    

    View Slide

39. View Slide

40. Gap or a border on your in Gmail? Or spacing
    issues?

    Did you include display: block;?
    HD Scaling problems in Outlook :-(
    Images
    

    View Slide

41. Images cotd.
    1. Set in HTML for Outlook
    2. Do not set height attr on
    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;
    

    View Slide

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
    

    View Slide

43. Margin hack
    works Margin: 12px
    does not work margin: 12px
    

    View Slide

44. Inliners and CSS Hacks
    

    View Slide

45. Premailers
    a curse and a blessing
    

    View Slide

46. ?
    Why do we inline CSS?
    

    View Slide

47. View Slide

48. View Slide

49. JavaScript Inliners
    juice
    895 Stars
    10 issues
    styliner
    91 Stars
    6 issues
    

    View Slide

50. Ruby Inliners
    Roadie
    865 Stars
    4 issues
    premailer
    1466 Stars
    93 issues
    

    View Slide

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 ? ? Supposed to Yes<br/>Sometimes? Check issues. Try it.<br/>

    View Slide

52. Removed Comments
    

    View Slide

53. Not everything should be inlined
    <br/>/* Do not inline! */<br/>/* iOS autolinks */<br/>.ios-footer {<br/>a {<br/>color: #999999 !important;<br/>}<br/>}<br/>
    
    MyCompany.com
    123 Main St
    Springfield, MA
    
    

    View Slide

54. to inline or not to inline?<br/>

    View Slide

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);
    }
    

    View Slide

56. Does NOT combine multiple styles into
    CSS short-hand.
    Does not inline or strip included s<br/>Does not strip out comments.<br/>Does not remove spaces.<br/>Premailer Checklist<br/>

    View Slide

57. Check your workflow
    

    View Slide

58. Code Demos
    Workflow
    

    View Slide

59. Fin
    Julie Ng
    @jng5
    julie.io
    

    View Slide