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

Building Modern Emails

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?)

Bfb8a1489a81ab3faf55860402abb58e?s=128

Billy Roh

June 16, 2016
Tweet

Transcript

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

  2. None
  3. garbage_breath @hotmail.com

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

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

  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:

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

  8. Brief History of Email Part 1 of 3

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

  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

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

  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

  13. 1990–2000 Email Gets Popular

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

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

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

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

  18. 2000–2010 Email’s All Grown Up

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

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

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

  22. State of Email in 2016 Part 2 of 3

  23. Douglas Crockford Major JavaScript contributor, creator of JSON The Web

    is the most hostile software engineering environment imaginable., second to email.
  24. The Web is the most hostile software engineering environment imaginable,

    second to email. Douglas Crockford Major JavaScript contributor, creator of JSON
  25. web_complexity = operating_systems * browsers

  26. web_complexity = operating_systems * browsers Windows macOS iOS Android …

    IE Chrome Safari Firefox …
  27. email_complexity = operating_systems * browsers * email_clients Windows macOS iOS

    Android … IE Chrome Safari Firefox … Mail.app Android Mail Gmail.com Outlook.com …
  28. Combinations 57

  29. CSS Properties 111

  30. Oh no.

  31. Building Modern Emails Part 3 of 3

  32. Managing Complexity

  33. Combinations 57

  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%
  35. 4 email clients get you 69% coverage. 6 email clients

    get you 84% coverage. Takeaway
  36. How do we test on these clients?

  37. None
  38. • Paste in your markup. • Test on all OS,

    email client combinations. • Helpful for replicating client- specific bugs. Litmus
  39. Want Aol Mail in Safari? Done. http://1u88jj3r4db2x4txp44yqfj1.wpengine.netdna-cdn.com/wp-content/uploads/2012/07/aolmail_inbox_old.png

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

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

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

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

  44. Want Lotus Notes 7 on OS X 10.10? Sure, why

    not. http://www.joelamantia.com/images/blog/angry_red_micro_notes.png
  45. Keeping Styling Consistent

  46. .parent .child .child .parent { padding: 20px; } .child +

    .child { margin-top: 20px } On the web
  47. CSS Properties 111 Remember this?

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

    margins don’t work in Gmail. Gotcha!
  49. It’s tables all the way down. Solution Part 1 of

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

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

    table.parent
  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
  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
  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
  55. Part 1: Horizontal spacing td.h-spacing-small { width: 20px; } table.parent

    td.h-spacing-small td.h-spacing-small table.parent-content
  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
  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
  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
  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
  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
  61. .child .child .parent

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

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

    my server.
  64. Nope, you can’t have external stylesheets in most clients. Great!

    I can just link to a CSS file on my server.
  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 <style> tag at the top?
  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 <style> tag at the top?
  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 <style> tag at the top? Oh no.
  68. In-line styles. (We’re already doing this.) Solution Part 2 of

    2
  69. The Gmail Problem

  70. • All styles in Gmail must be done in-line. •

    This means that emails in Gmail cannot be responsive. What’s the problem?
  71. None
  72. None
  73. Emails that work on mobile devices work on desktops. But

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

    not the other way around. Let’s make emails mobile-first. Takeaway
  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
  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
  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.
  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
  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
  80. Degrading Gracefully

  81. None
  82. • Outlook is one of the most restrictive clients. •

    But you can create Outlook- specific CSS to cope. Dealing with Outlook
  83. <body> <!--[if gte mso 9]> <style> // Styling goes here

    </style> <![endif]—> </body>
  84. <body> <!--[if gte mso 9]> <style> // Styling goes here

    </style> <![endif]—> </body> // If greater than or equal // to Microsoft Office, Version 9
  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
  86. I Can Email and So Can You Closing

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

  88. None
  89. None
  90. Thanks!