$30 off During Our Annual Pro Sale. View Details »

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