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
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?
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?
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
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
90. Thanks!