Successfully reported this slideshow.
Your SlideShare is downloading. ×

How to Build Kickass Emails

How to Build Kickass Emails

Download to read offline

Email is perceived as a dark art in the web design and development world. My presentation will dispel the myths of email development and uncover what's possible now. I'll review the tips and tricks I wish I knew when I started building emails and how to approach building them as a web designer/developer. I'll also go over innovative techniques (with examples!) to make your emails stand out in the inbox.

Email is perceived as a dark art in the web design and development world. My presentation will dispel the myths of email development and uncover what's possible now. I'll review the tips and tricks I wish I knew when I started building emails and how to approach building them as a web designer/developer. I'll also go over innovative techniques (with examples!) to make your emails stand out in the inbox.

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

How to Build Kickass Emails

  1. 1. HOW TO BUILD KICKASS EMAILSFRONT-END DESIGN CONFERENCE JULY 2014
  2. 2. Hello, I’m @KEVINgotbounce.
  3. 3. I’m a designer @
  4. 4. Slides & Resources: litmus.com/lp/frontendconf
  5. 5. STATE OF EMAIL
  6. 6. Hey guys, you know the browser wars?
  7. 7. LOL. Check out the EMAIL CLIENT WARS…
  8. 8. This is why email has progressed slower than the web.
  9. 9. So how does this all break down?
  10. 10. We tracked 550,000,000+ email opens in June 2014
  11. 11. Top 10 Email Clients (JUNE 2014) ! 1. Apple iPhone 25% 2. Gmail 14% 3. Outlook 13% 4. Apple iPad 12% 5. Apple Mail 8% 6. Yahoo! Mail 6% 7. Outlook.com 6% 8. Google Android 5% 9. Windows Live Mail 2% 10. Thunderbird 1%
  12. 12. Apple 45% Microsoft 21% Google 19%
  13. 13. Mobile 43% Webmail 32% Desktop 25% Environment Breakdown (JUNE 2014)
  14. 14. Environment Breakdown (JANUARY 2011 - JUNE 2014) 0 18 35 53 70 Jan-11 Apr-11 Jul-11 Oct-11 Jan-12 Apr-12 Jul-12 Oct-12 Jan-13 Apr-13 Jul-13 Oct-13 Jan-14 Apr-14 Desktop Mobile Webmail
  15. 15. But, know your audience.
  16. 16. June 2014 Newsletter
  17. 17. 100,000+ opens
  18. 18. Mobile 11% Webmail 33% Desktop 56% Environment Breakdown
  19. 19. Email Client Breakdown Web Version 6% Gmail 25% iPhone 8% Apple Mail 26% Other 8% Outlook 27%
  20. 20. Rendering Engine Breakdown Internet Explorer 3% Other 28% Firefox 4% MSWord 24% WebKit 40%
  21. 21. Email design requires making decisions on which clients to support.
  22. 22. Don’t spend 90% of development time to satisfy 10% of users.
  23. 23. Focus on optimizing your emails where your subscribers open & engage with them.
  24. 24. HOW TO BUILD EMAILS
  25. 25. For starters…
  26. 26. Email design is not web design.
  27. 27. The first step is acceptance…
  28. 28. Use <table>, not <div>.
  29. 29. The single best piece of advice I can give…
  30. 30. <td> or GTFO(GET TO FIXING OUTLOOK)
  31. 31. Every piece of content needs its own <td>.
  32. 32. Only apply styling to <td>. ( Exceptions: <a>, <img>, <span>, & client/mobile-specific styling )
  33. 33. So instead of… <h1>This is a headline</h1> <p>This is a paragraph.<h1> <img src=”example.jpg” class=”mobile”>
  34. 34. <h1> <p> <a> <img>
  35. 35. <table> <tr> <td style=”#”>This is a headline<td> </tr> <tr> <td style=”#”>This is a paragraph</td> </tr> <tr> <img src=”example.jpg” class=”mobile”> </tr> </table> Do this…
  36. 36. Keep your emails modular.
  37. 37. <td> <td> <td> <td>
  38. 38. One-column design works best for email.
  39. 39. Keep your emails to a maximum width of 600px (generally).
  40. 40. Never use margin. Always use padding.
  41. 41. Padding Padding
  42. 42. Use HTML attributes for styling when possible. height width cellspacing cellpadding border bgcolor
  43. 43. 90% of the time CSS styles need to be inlined.
  44. 44. Why? Because not all email clients support <style> in the <head>.
  45. 45. Use <b>, not <strong>.
  46. 46. Use px, not em.
  47. 47. Use #ffffff, not #fff.
  48. 48. Use align, not floats.
  49. 49. Always define an align for <td>. ( Prevents webmail from centering text & content. )
  50. 50. iOS needs a special <span> wrapper to overwrite default blue link styling.
  51. 51. <span class=“appleLink”>iOS link</span> ! ! ! ! .appleLink a {color:#4a4a4a !important; text-decoration: none !important;} HTML CSS
  52. 52. Let’s talk about the single-most misunderstood part of email…
  53. 53. Responsive email.
  54. 54. Responsive email is not supported everywhere.
  55. 55. There’s a difference between device support and app support.
  56. 56. You can’t say “responsive email works on an iPhone.” It depends.
  57. 57. For example, the native iOS mail app supports responsive email. But the Gmail app on iOS does not.
  58. 58. Responsive email works on an app-by-app basis.
  59. 59. Responsive email support iPhone native yes iPad native yes Android 2.1 native no Android 2.2 native yes Android 2.3 native yes Android 4.x native yes Gmail mobile apps no Mailbox iOS app sorta Yahoo! mobile apps no Windows Mobile 7 no Windows Mobile 7.5 yes Windows Mobile 8 maybe BlackBerry OS 6 yes BlackBerry OS 7 yes BlackBerry Z10 yes Kindle Fire native yes http://stylecampaign.com/blog/2012/10/responsive-email-support/
  60. 60. Responsive email classes need to look like this… *[class=“table”] {width: 100% !important;} ! td[class=“table”] {width: 100% !important;}
  61. 61. Attribute selectors are needed to work around Yahoo! Mail.
  62. 62. Need to use !important to overwrite inline styles.
  63. 63. Also, Firefox sucks with responsive tables. Don’t use it.
  64. 64. Now let’s talk about the single-most overlooked part of email…
  65. 65. Images off view.
  66. 66. If you use one big image as an email… ! (or the majority of your email as images)
  67. 67. 43%of users view email with images off * Even after Gmail started displaying images by default.
  68. 68. Never forget ALT text.
  69. 69. Be playful about it…
  70. 70. Be playful about it…
  71. 71. Get creative with it…
  72. 72. Images are very well supported. (Can use .jpg, .gif, .png)
  73. 73. Set images to display: block; so they don’t have extra spacing
  74. 74. Caution: Gmail caches images now. Be wary of compressing your images.
  75. 75. For email clients that don’t support animated gifs, they fallback to the first frame.
  76. 76. If you use an image for a button in an email…
  77. 77. You don’t. You use bulletproof buttons.
  78. 78. Bulletproof buttons are like… regular buttons to web folks.
  79. 79. But they’re bulletproof because they work everywhere, in all email clients.
  80. 80. buttons.cm
  81. 81. Other button methods https://litmus.com/blog/a-guide-to-bulletproof-buttons-in- email-design
  82. 82. <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td> <a href="http://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text- decoration: none; border-radius: 3px; -webkit-border-radius: 3px; -moz- border-radius: 3px; background-color: #EB7035; border-top: 12px solid #EB7035; border-bottom: 12px solid #EB7035; border-right: 18px solid #EB7035; border-left: 18px solid #EB7035; display: inline-block;">I am a button &rarr;</a> </td> </tr> </table> </td> </tr> </table> Border-based button
  83. 83. <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#EB7035" style="padding: 12px 18px 12px 18px; - webkit-border-radius:3px; -moz-border-radius: 3px; border-radius:3px;” align="center"><a href="http://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">I am a button &rarr;</a></td> </tr> </table> </td> </tr> </table> Padding-based button
  84. 84. <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" style="-webkit-border-radius: 3px; -moz-border- radius: 3px; border-radius: 3px;" bgcolor="#e9703e"><a href="https:// litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #e9703e; display: inline-block;">I am a button &rarr;</a></td> </tr> </table> </td> </tr> </table> Border + Padding-based button
  85. 85. Use preheader text for better open rates.
  86. 86. Preheader text
  87. 87. +30% higher CTR w/ optimized preheader text
  88. 88. <div style=“display:none;width:0px;height: 0px;max-width:0px;max-height: 0px;overflow:hidden;mso-hide:all;font-size: 1px;color:#ffffff;“>Insert preheader text here</div> Place as 1st content in email…
  89. 89. Find, use, & refine reset styles in the <head>.
  90. 90. #outlook a{padding:0;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} body, table, td, a{-webkit-text-size-adjust:100%; -ms-text-size- adjust:100%;} table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} img{-ms-interpolation-mode:bicubic;} body{margin:0; padding:0;} img{border:0; height:auto; line-height:100%; outline:none; text- decoration:none;} table{border-collapse:collapse !important;} body{height:100% !important; margin:0; padding:0; width:100% ! important;background-color:#f9fafa;} Here’s an example:
  91. 91. Use either <!DOCTYPE>: ! <!DOCTYPE html> ! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
  92. 92. Use this for <meta> tags ! <meta charset="utf-8"> <meta name="viewport" content="width=device- width"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
  93. 93. Wrap web fonts in @media tag ! @media screen { ! @font-face { font-family: 'proxima_nova_rgbold'; url('proximanova-bold-webfont.woff') format('woff'), url('proximanova-bold-webfont.ttf') format(‘truetype'); font-weight: normal; font-style: normal; } ! }
  94. 94. Stack native font first… ! ! font-family: Proxima Nova, ‘proxima_nova’, Helvetica, sans-serif; …for clients who don’t support them
  95. 95. Now let’s talk about how to think like an email hacker.
  96. 96. The best way to beat email is to figure out how to target individual email clients.
  97. 97. Gmail is the worst email client when it comes to email development. Why?
  98. 98. Gmail does not render classes or id’s in the <head> of emails
  99. 99. Gmail does render HTML elements (such as h1, p, etc.), but this solves nothing.
  100. 100. But, this does allow us to target Gmail.
  101. 101. We can use inline styles to target Gmail and use CSS in the <head> to overwrite them for other email clients.
  102. 102. Did you know…
  103. 103. Outlook 2000-2003 use Internet Explorer 6 or 7 as a rendering engine
  104. 104. Outlook 2007-2013 use Microsoft Word as their rendering engine.
  105. 105. Luckily, this means Outlook can be easily targeted…
  106. 106. <!--[if mso]> /* Insert HTML or CSS here */ <![endif]—> ! ! <!--[if (IE)]> /* Insert HTML or CSS here */ <![endif]-->
  107. 107. Outlook conditionals ! lt = less than a specific version gt = greater than a specific version lte = less than or equal to a specific version gte = greater than or equal to a specific version
  108. 108. Outlook version numbers ! Outlook 2000 = 9 Outlook 2002 = 10 Outlook 2003 = 11 Outlook 2007 = 12 Outlook 2010 = 14 Outlook 2013 = 15
  109. 109. <!--[if mso 12]> = targets only Outlook 2007 <!--[if gte mso 12]> = targets Outlook 2007 and above <!--[if gt mso 12]> = targets above Outlook 2007 (Outlook 2010/2013) <!--[if lte mso 12]> = targets Outlook 2007 and below <!--[if lt mso 12]> = targets below Outlook 2007 (Outlook 2000/2002/2003)
  110. 110. Fun fact…
  111. 111. Outlook sucks at math.
  112. 112. 50 + 50 ≠ 100
  113. 113. Gmail can’t read, Outlook can’t add. ! #funtimes
  114. 114. To fix… table{border-collapse:collapse !important;} table, td{mso-table-lspace:0pt; mso-table- rspace:0pt;}
  115. 115. Then, make <table> 2px smaller in HTML width attribute & add a 1px solid border
  116. 116. <table width=“298” style=“border: 1px solid #000;”> So, for a 300px table…
  117. 117. Or, you can always just reduce the width so it doesn’t add up to 100%
  118. 118. Better yet, let’s put our hacker mentality to use…
  119. 119. Add a ghost <td> between two <table>’s just for Outlook
  120. 120. <td> Table A <!--[if mso]></td><td><![endif]--> Table B </td> A B
  121. 121. Outlook also has 200+ unique mso/-ms CSS properties.
  122. 122. <span style=”mso-hide: all;”>This text will not display on Outlook.</span> For example…
  123. 123. Outlook.com also adds “ecx” before every class .ExternalClass div[class="ecxmyclass"]
  124. 124. WebKit
  125. 125. The single best hack ever for email… @media screen and (-webkit-min-device-pixel- ratio: 0) { }
  126. 126. This targets all WebKit email clients. Progressive enhancement FTW.
  127. 127. The best use case for media queries is email.
  128. 128. Media queries will drive email innovation in the coming years. * PREDICTION *
  129. 129. HTML5 Video Background. In an Email. EXAMPLE https://litmus.com/blog/how-to-code-html5-video-background-in-email
  130. 130. Dynamic Gravatar animation. In an email. EXAMPLE https://litmus.com/blog/behind-the-email-launching-community
  131. 131. You can target Firefox… @-moz-document url-prefix() { }
  132. 132. Split your development. Chrome/Safari for newer clients in WebKit and Firefox for older clients like Outlook.
  133. 133. So always think: How will this affect the email in Gmail, Outlook, WebKit, & non-WebKit/Firefox?
  134. 134. Gmail Outlook WebKit Non-WebKit/Firefox Check them off on a table… Method #1 Method #2
  135. 135. HOW TO OPTIMIZE YOUR WORKFLOW
  136. 136. What do email designers use for an editor?
  137. 137. Coda 6% Sublime Text 23% PSPad 6% Dreamweaver 65% Email Editor Market Share
  138. 138. Use static site generators to better organize your email sections.
  139. 139. Dan Denney’s emayll (Jekyll + YAML Front Matter) https://github.com/dandenney/emayll
  140. 140. It’s ok to use HAML/SASS, etc. to build emails.
  141. 141. Alex Ilhan’s Zenith (SASS Framework) https://github.com/Omgitsonlyalex/ZenithFramework
  142. 142. Use Grunt to better run tedious manual tasks.
  143. 143. Remove excess CSS. grunt-uncss
  144. 144. Be careful not to remove CSS you want there even if it’s not directly applied to an element.
  145. 145. Automatically inline your CSS. grunt-email-builder
  146. 146. <!-- External styles --> <link rel="stylesheet" data-ignore="ignore" href="css/style.css" /> ! <!-- Embedded styles --> <style data-ignore="ignore"> /* Styles here will not be inlined */ </style> Select which CSS to inline…
  147. 147. Send tests to your inbox & Litmus. grunt-email-builder
  148. 148. Grunt can do all of these functions simultaneously in one build.
  149. 149. Follow these simple rules & you’ll be an email ninja.
  150. 150. Questions?
  151. 151. Slides & Resources: litmus.com/lp/frontendconf
  152. 152. Thanks!

×