Building Modern Emails

Let's learn about emails! This presentation has three parts:
1) Brief history of email (or, how did we get here?)
2) State of email in 2016 (or, why is email so complicated?)
3) Building good emails (or, how do we get around these complexities?)

Transcript

1. Building
   Modern Emails
   Billy Roh
   Thursday, 6 June 2016
   

   View Slide

2. View Slide

3. garbage_breath
   @hotmail.com
   

   View Slide

4. https://upload.wikimedia.org/wikipedia/en/0/0f/MSNHotmailInbox.png
   garbage_breath
   @hotmail.com
   

   View Slide

5. http://media.lifehacker.foxtrot.future.net.uk/wp-content/uploads/sites/55/2014/10/inbox-8.png
   

   View Slide

6. http://media.lifehacker.foxtrot.future.net.uk/wp-content/uploads/sites/55/2014/10/inbox-8.png
   from:
   to:
   cc:
   bcc:
   subject:
   message:
   attachment:
   

   View Slide

7. So much has changed, yet
   so much is the same.
   

   View Slide

8. Brief
   History
   of Email
   Part 1 of 3
   

   View Slide

9. 1970–1990
   Email’s Early
   and Awkward Years
   

   View Slide

10. 1971
    The First
    Networked Message
    https://s.yimg.com/ny/api/res/1.2/w0UQ4rDSpWhjurNh4MBv3g--/YXBwaWQ9aGlnaGxhbmRlcjtzbT0xO3c9ODAwO2lsPXBsYW5l/http://media.zenfs.com/en_us/News/afp.com/Part-DV-DV594758-1-1-0.jpg
    

    View Slide

11. 1977
    The First Inter-
    Network Message
    https://www.wired.com/wp-content/uploads/blogs/wiredenterprise/wp-content/uploads/2012/09/tx-2.jpg
    

    View Slide

12. 1989
    First ISPs
    Pop Up
    https://upload.wikimedia.org/wikipedia/en/thumb/7/7d/Screenshot_of_TheWorld.com_homepage.tif/lossy-page1-1244px-Screenshot_of_TheWorld.com_homepage.tif.jpg
    

    View Slide

13. 1990–2000
    Email
    Gets Popular
    

    View Slide

14. 1993
    IETF Accepts
    MIME Standard
    https://67.media.tumblr.com/3a707905f8f21a88465b54f7403fc6b7/tumblr_mgwdflLE4W1s3hncbo1_250.gif
    

    View Slide

15. 1996
    Hotmail launches
    (as HoTMaiL)
    http://news.cnet.com/i/ne/p/2006/1997-hotmail.jpg
    

    View Slide

16. 1997
    Yahoo! Launches
    Yahoo! Mail
    http://www.timdhodges.ca/pics/Inbox.jpg
    

    View Slide

17. 1998
    Greatest Rom Com
    of the Decade
    http://lovelace-media.imgix.net/uploads/14/8c8b98e0-1a94-0132-085d-0eae5eefacd9.jpg?
    

    View Slide

18. 2000–2010
    Email’s
    All Grown Up
    

    View Slide

19. 2003
    Blackberry
    Releases RIM 850
    https://i.ytimg.com/vi/snQxbl_TqL8/maxresdefault.jpg
    

    View Slide

20. 2007
    Apple
    Releases iPhone
    http://cdn.theatlantic.com/assets/media/img/posts/RTR1L0YV.jpg
    

    View Slide

21. 2008
    Google
    Releases Android
    https://upload.wikimedia.org/wikipedia/commons/b/be/HTC_Dream_Orange_FR.jpeg
    

    View Slide

22. State of
    Email in 2016
    Part 2 of 3
    

    View Slide

23. Douglas Crockford
    Major JavaScript contributor, creator of JSON
    The Web is the most hostile software engineering
    environment imaginable., second to email.
    

    View Slide

24. The Web is the most hostile software engineering
    environment imaginable, second to email.
    Douglas Crockford
    Major JavaScript contributor, creator of JSON
    

    View Slide

25. web_complexity =
    operating_systems * browsers
    

    View Slide

26. web_complexity =
    operating_systems * browsers
    Windows
    macOS
    iOS
    Android
    …
    IE
    Chrome
    Safari
    Firefox
    …
    

    View Slide

27. email_complexity =
    operating_systems * browsers * email_clients
    Windows
    macOS
    iOS
    Android
    …
    IE
    Chrome
    Safari
    Firefox
    …
    Mail.app
    Android Mail
    Gmail.com
    Outlook.com
    …
    

    View Slide

28. Combinations
    57
    

    View Slide

29. CSS Properties
    111
    

    View Slide

30. Oh no.
    

    View Slide

31. Building
    Modern Emails
    Part 3 of 3
    

    View Slide

32. Managing
    Complexity
    

    View Slide

33. Combinations
    57
    

    View Slide

34. 33%
    16%
    11%
    9%
    8%

    7%
    Mail for iPhone
    Gmail for web
    Mail for iPad
    Mail for Android
    Mail for macOS
    Outlook for Windows
    http://emailclientmarketshare.com/
    Percentage Cumulative
    33%
    49%
    60%
    69%
    77%

    84%
    

    View Slide

35. 4 email clients get you
    69% coverage.
    6 email clients get you
    84% coverage.
    Takeaway
    

    View Slide

36. How do we test on
    these clients?
    

    View Slide

37. View Slide

38. • Paste in your markup.
    • Test on all OS, email client
    combinations.
    • Helpful for replicating client-
    specific bugs.
    Litmus
    

    View Slide

39. Want Aol Mail in
    Safari?
    Done.
    http://1u88jj3r4db2x4txp44yqfj1.wpengine.netdna-cdn.com/wp-content/uploads/2012/07/aolmail_inbox_old.png
    

    View Slide

40. Want Aol Mail in
    Safari?
    Done.
    http://1u88jj3r4db2x4txp44yqfj1.wpengine.netdna-cdn.com/wp-content/uploads/2012/07/aolmail_inbox_old.png
    

    View Slide

41. Want Outlook 2000
    on Windows?
    Done.
    http://www.joelamantia.com/images/blog/angry_red_micro_notes.png
    

    View Slide

42. Want Outlook 2000
    on Windows?
    Of course!
    http://www.joelamantia.com/images/blog/angry_red_micro_notes.png
    

    View Slide

43. Want Lotus Notes 7
    on macOS?
    Done.
    http://www.joelamantia.com/images/blog/angry_red_micro_notes.png
    

    View Slide

44. Want Lotus Notes 7
    on OS X 10.10?
    Sure, why not.
    http://www.joelamantia.com/images/blog/angry_red_micro_notes.png
    

    View Slide

45. Keeping Styling
    Consistent
    

    View Slide

46. .parent
    .child
    .child
    .parent {
    padding: 20px;
    }
    .child + .child {
    margin-top: 20px
    }
    On the web
    

    View Slide

47. CSS Properties
    111
    Remember this?
    

    View Slide

48. • Padding and margins don’t
    work in Outlook.
    • Negative margins don’t
    work in Gmail.
    Gotcha!
    

    View Slide

49. It’s tables all the way down.
    Solution Part 1 of 2
    

    View Slide

50. table.parent
    tr
    td.h-spacing-small
    td
    table.parent-content
    td.h-spacing-small
    Part 1: Horizontal spacing
    table.parent
    

    View Slide

51. table.parent
    tr
    td.h-spacing-small
    td
    table.parent-content
    td.h-spacing-small
    Part 1: Horizontal spacing
    table.parent
    

    View Slide

52. table.parent
    tr
    td.h-spacing-small
    td
    table.parent-content
    td.h-spacing-small
    Part 1: Horizontal spacing
    table.parent
    td.h-spacing-small
    

    View Slide

53. table.parent
    tr
    td.h-spacing-small
    td
    table.parent-content
    td.h-spacing-small
    Part 1: Horizontal spacing
    table.parent
    td.h-spacing-small
    table.parent-content
    

    View Slide

54. table.parent
    tr
    td.h-spacing-small
    td
    table.parent-content
    td.h-spacing-small
    Part 1: Horizontal spacing
    table.parent
    td.h-spacing-small
    td.h-spacing-small
    table.parent-content
    

    View Slide

55. Part 1: Horizontal spacing
    td.h-spacing-small {
    width: 20px;
    }
    table.parent
    td.h-spacing-small
    td.h-spacing-small
    table.parent-content
    

    View Slide

56. table.parent-content: tr: td
    table.v-spacing-small: tr: td
    table.child
    table.v-spacing-small: tr: td
    table.child
    table.v-spacing-small: tr: td
    Part 2: Vertical spacing
    table.parent-content
    

    View Slide

57. table.parent-content: tr: td
    table.v-spacing-small: tr: td
    table.child
    table.v-spacing-small: tr: td
    table.child
    table.v-spacing-small: tr: td
    Part 2: Vertical spacing
    table.parent-content
    table.v-spacing-small
    

    View Slide

58. table.parent-content: tr: td
    table.v-spacing-small: tr: td
    table.child
    table.v-spacing-small: tr: td
    table.child
    table.v-spacing-small: tr: td
    Part 2: Vertical spacing
    table.parent-content
    table.v-spacing-small
    table.child
    

    View Slide

59. table.parent-content: tr: td
    table.v-spacing-small: tr: td
    table.child
    table.v-spacing-small: tr: td
    table.child
    table.v-spacing-small: tr: td
    Part 2: Vertical spacing
    table.parent-content
    table.v-spacing-small
    table.child
    table.v-spacing-small
    table.child
    table.v-spacing-small
    

    View Slide

60. Part 2: Vertical spacing
    table.v-spacing-small tr {
    height: 20px;
    }
    table.parent-content
    table.v-spacing-small
    table.child
    table.v-spacing-small
    table.child
    table.v-spacing-small
    

    View Slide

61. .child
    .child
    .parent
    

    View Slide

62. .child
    .child
    .parent
    table.parent
    .child
    .child
    

    View Slide

63. Great! I can just link to a
    CSS file on my server.
    

    View Slide

64. Nope, you can’t have external
    stylesheets in most clients.
    Great! I can just link to a
    CSS file on my server.
    

    View Slide

65. Nope, you can’t have external
    stylesheets in most clients.
    Great! I can just link to a
    CSS file on my server.
    Okay, how about I declare my CSS
    in a tag at the top?<br/>

    View Slide

66. Nope, you can’t have external
    stylesheets in most clients.
    Great! I can just link to a
    CSS file on my server.
    Sorry, Gmail doesn’t support that. And
    Gmail accounts for 16% of emails.
    Okay, how about I declare my CSS
    in a tag at the top?<br/>

    View Slide

67. Nope, you can’t have external
    stylesheets in most clients.
    Great! I can just link to a
    CSS file on my server.
    Sorry, Gmail doesn’t support that. And
    Gmail accounts for 16% of emails.
    Okay, how about I declare my CSS
    in a tag at the top?<br/>Oh no.<br/>

    View Slide

68. In-line styles.
    (We’re already doing this.)
    Solution Part 2 of 2
    

    View Slide

69. The Gmail
    Problem
    

    View Slide

70. • All styles in Gmail must be
    done in-line.
    • This means that emails in
    Gmail cannot be responsive.
    What’s the problem?
    

    View Slide

71. View Slide

72. View Slide

73. Emails that work on mobile
    devices work on desktops.
    But not the other way around.
    Let’s make emails mobile-first.
    Takeaway
    

    View Slide

74. Emails that work on mobile
    devices work on desktops.
    But not the other way around.
    Let’s make emails mobile-first.
    Takeaway
    

    View Slide

75. table.parent {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    }
    @media only screen and (min-
    width: 600px) {
    table.parent {
    max-width: 600px !important;
    }
    }
    Forced Narrow Layout
    table.parent
    

    View Slide

76. table.parent {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    }
    @media only screen and (min-
    width: 600px) {
    table.parent {
    max-width: 600px !important;
    }
    }
    Forced Narrow Layout
    

    View Slide

77. table.parent {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    }
    @media only screen and (min-
    width: 600px) {
    table.parent {
    max-width: 600px !important;
    }
    }
    Forced Narrow Layout
    necessary to override
    in-line styles.
    

    View Slide

78. .two-column
    .two-column
    Gmail
    table.two-column {
    width: 100%;
    }
    @media only screen and
    (min-width: 600px) {
    table.two-column {
    width: 48% !important;
    }
    }
    Multi-column Layout
    

    View Slide

79. .two-
    column
    .two-
    column
    .two-column
    .two-column
    Gmail
    Not Gmail
    table.two-column {
    width: 100%;
    }
    @media only screen and
    (min-width: 600px) {
    table.two-column {
    width: 48% !important;
    }
    }
    Multi-column Layout
    

    View Slide

80. Degrading
    Gracefully
    

    View Slide

81. View Slide

82. • Outlook is one of the most
    restrictive clients.
    • But you can create Outlook-
    specific CSS to cope.
    Dealing with Outlook
    

    View Slide

83. 
    

    View Slide

84. 
    

    View Slide

85. • Build for just the most-used email clients.
    • Test on Litmus.
    • Use tables for everything.
    • In-line all your styling.
    • Make your email mobile-first.
    • Use conditional styling for Outlook.
    Takeaways
    

    View Slide

86. I Can
    Email and
    So Can You
    Closing
    

    View Slide

87. https://upload.wikimedia.org/wikipedia/en/0/0f/MSNHotmailInbox.png
    

    View Slide

88. View Slide

89. View Slide

90. Thanks!
    

    View Slide