HOW TO BUILD
KICKASS
EMAILSFRONT-END DESIGN CONFERENCE
JULY 2014
Hello, I’m @KEVINgotbounce.
I’m a designer @
Slides & Resources:
litmus.com/lp/frontendconf
STATE OF EMAIL
Hey guys, you know the
browser wars?
LOL. Check out the
EMAIL CLIENT WARS…
This is why email has
progressed slower
than the web.
So how does this all
break down?
We tracked
550,000,000+
email opens in June 2014
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. Y...
Apple
45%
Microsoft
21%
Google
19%
Mobile
43%
Webmail
32%
Desktop
25%
Environment Breakdown
(JUNE 2014)
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...
But, know your audience.
June 2014 Newsletter
100,000+
opens
Mobile
11%
Webmail
33%
Desktop
56%
Environment Breakdown
Email Client Breakdown
Web Version
6%
Gmail
25%
iPhone
8%
Apple Mail
26%
Other
8%
Outlook
27%
Rendering Engine Breakdown
Internet Explorer
3%
Other
28%
Firefox
4%
MSWord
24%
WebKit
40%
Email design requires
making decisions on which
clients to support.
Don’t spend 90% of
development time to satisfy
10% of users.
Focus on optimizing your
emails where your subscribers
open & engage with them.
HOW TO BUILD EMAILS
For starters…
Email design is not
web design.
The first step is acceptance…
Use <table>, not <div>.
The single
best piece of advice
I can give…
<td>
or
GTFO(GET TO FIXING OUTLOOK)
Every piece of content
needs its own <td>.
Only apply styling to <td>.
( Exceptions: <a>, <img>, <span>, & client/mobile-specific styling )
So instead of…
<h1>This is a headline</h1>
<p>This is a paragraph.<h1>
<img src=”example.jpg” class=”mobile”>
<h1>
<p>
<a>
<img>
<table>
<tr>
<td style=”#”>This is a headline<td>
</tr>
<tr>
<td style=”#”>This is a paragraph</td>
</tr>
<tr>
<img src=”e...
Keep your emails modular.
<td>
<td>
<td>
<td>
One-column design
works best for email.
Keep your emails to a
maximum width of
600px (generally).
Never use margin.
Always use padding.
Padding
Padding
Use HTML attributes for
styling when possible.
height width
cellspacing cellpadding
border bgcolor
90% of the time CSS styles
need to be inlined.
Why?
Because not all email clients
support <style> in the <head>.
Use <b>, not <strong>.
Use px, not em.
Use #ffffff, not #fff.
Use align, not floats.
Always define an align for <td>.
( Prevents webmail from centering text & content. )
iOS needs a special <span>
wrapper to overwrite default
blue link styling.
<span class=“appleLink”>iOS link</span>
!
!
!
!
.appleLink a {color:#4a4a4a !important;
text-decoration: none !important;}...
Let’s talk about the
single-most misunderstood
part of email…
Responsive email.
Responsive email is not
supported everywhere.
There’s a difference
between device support
and app support.
You can’t say “responsive
email works on an iPhone.”
It depends.
For example, the native iOS
mail app supports responsive
email. But the Gmail app on
iOS does not.
Responsive email works on an
app-by-app basis.
Responsive email support
iPhone native yes
iPad native yes
Android 2.1 native no
Android 2.2 native yes
Android 2.3 native...
Responsive email classes
need to look like this…
*[class=“table”] {width: 100% !important;}
!
td[class=“table”] {width: 10...
Attribute selectors are needed
to work around Yahoo! Mail.
Need to use !important to
overwrite inline styles.
Also, Firefox sucks with
responsive tables. Don’t use it.
Now let’s talk about the
single-most overlooked
part of email…
Images off view.
If you use one big image
as an email…
!
(or the majority of your email as images)
43%of users view email with images off
* Even after Gmail started displaying images by default.
Never forget ALT text.
Be playful about it…
Be playful about it…
Get creative with it…
Images are very well supported.
(Can use .jpg, .gif, .png)
Set images to display:
block; so they don’t
have extra spacing
Caution: Gmail caches images
now. Be wary of compressing
your images.
For email clients that don’t
support animated gifs, they
fallback to the first frame.
If you use an image for a
button in an email…
You don’t. You use
bulletproof buttons.
Bulletproof buttons are like…
regular buttons to web folks.
But they’re bulletproof because
they work everywhere, in all
email clients.
buttons.cm
Other button methods
https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-
email-design
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0...
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0...
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0...
Use preheader text for
better open rates.
Preheader text
+30%
higher CTR w/ optimized preheader text
<div style=“display:none;width:0px;height:
0px;max-width:0px;max-height:
0px;overflow:hidden;mso-hide:all;font-size:
1px;c...
Find, use, & refine reset styles
in the <head>.
#outlook a{padding:0;}
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;}
span, .ExternalClass font, .ExternalClass td,...
Use either <!DOCTYPE>:
!
<!DOCTYPE html>
!
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://
www.w3....
Use this for <meta> tags
!
<meta charset="utf-8">
<meta name="viewport" content="width=device-
width">
<meta http-equiv="X...
Wrap web fonts in @media tag
!
@media screen {
!
@font-face {
font-family: 'proxima_nova_rgbold';
url('proximanova-bold-we...
Stack native font first…
!
!
font-family: Proxima Nova, ‘proxima_nova’,
Helvetica, sans-serif;
…for clients who don’t suppo...
Now let’s talk about
how to think like an
email hacker.
The best way to beat email is
to figure out how to target
individual email clients.
Gmail is the worst email
client when it comes to
email development. Why?
Gmail does not render
classes or id’s in the
<head> of emails
Gmail does render HTML
elements (such as h1, p, etc.),
but this solves nothing.
But, this does allow us to
target Gmail.
We can use inline styles to
target Gmail and use CSS in
the <head> to overwrite them
for other email clients.
Did you know…
Outlook 2000-2003 use
Internet Explorer 6 or 7
as a rendering engine
Outlook 2007-2013 use
Microsoft Word as their
rendering engine.
Luckily, this means Outlook
can be easily targeted…
<!--[if mso]>
/* Insert HTML or CSS here */
<![endif]—>
!
!
<!--[if (IE)]>
/* Insert HTML or CSS here */
<![endif]-->
Outlook conditionals
!
lt = less than a specific version
gt = greater than a specific version
lte = less than or equal to a ...
Outlook version numbers
!
Outlook 2000 = 9
Outlook 2002 = 10
Outlook 2003 = 11
Outlook 2007 = 12
Outlook 2010 = 14
Outlook...
<!--[if mso 12]> = targets only Outlook 2007
<!--[if gte mso 12]> = targets Outlook 2007 and
above
<!--[if gt mso 12]> = t...
Fun fact…
Outlook sucks at math.
50 + 50 ≠ 100
Gmail can’t read,
Outlook can’t add.
!
#funtimes
To fix…
table{border-collapse:collapse !important;}
table, td{mso-table-lspace:0pt; mso-table-
rspace:0pt;}
Then, make <table> 2px
smaller in HTML width attribute
& add a 1px solid border
<table width=“298” style=“border: 1px solid
#000;”>
So, for a 300px table…
Or, you can always just
reduce the width so it
doesn’t add up to 100%
Better yet, let’s put our
hacker mentality to use…
Add a ghost <td> between
two <table>’s just for Outlook
<td>
Table A
<!--[if mso]></td><td><![endif]-->
Table B
</td>
A B
Outlook also has
200+ unique mso/-ms
CSS properties.
<span style=”mso-hide: all;”>This text will
not display on Outlook.</span>
For example…
Outlook.com also adds
“ecx” before every class
.ExternalClass div[class="ecxmyclass"]
WebKit
The single best hack
ever for email…
@media screen and (-webkit-min-device-pixel-
ratio: 0) { }
This targets all WebKit
email clients. Progressive
enhancement FTW.
The best use case for
media queries is email.
Media queries will
drive email innovation in
the coming years.
* PREDICTION *
HTML5 Video Background.
In an Email.
EXAMPLE
https://litmus.com/blog/how-to-code-html5-video-background-in-email
Dynamic Gravatar
animation. In an email.
EXAMPLE
https://litmus.com/blog/behind-the-email-launching-community
You can target Firefox…
@-moz-document url-prefix() { }
Split your development.
Chrome/Safari for newer clients in WebKit
and Firefox for older clients like Outlook.
So always think:
How will this affect the email in Gmail,
Outlook, WebKit, & non-WebKit/Firefox?
Gmail Outlook WebKit Non-WebKit/Firefox
Check them off on a table…
Method #1
Method #2
HOW TO OPTIMIZE
YOUR WORKFLOW
What do email designers
use for an editor?
Coda
6%
Sublime Text
23%
PSPad
6% Dreamweaver
65%
Email Editor Market Share
Use static site generators
to better organize your
email sections.
Dan Denney’s emayll
(Jekyll + YAML Front Matter)
https://github.com/dandenney/emayll
It’s ok to use HAML/SASS,
etc. to build emails.
Alex Ilhan’s Zenith
(SASS Framework)
https://github.com/Omgitsonlyalex/ZenithFramework
Use Grunt to better run
tedious manual tasks.
Remove excess CSS.
grunt-uncss
Be careful not to remove CSS
you want there even if it’s not
directly applied to an element.
Automatically inline your CSS.
grunt-email-builder
<!-- External styles -->
<link rel="stylesheet" data-ignore="ignore"
href="css/style.css" />
!
<!-- Embedded styles -->
<s...
Send tests to your
inbox & Litmus.
grunt-email-builder
Grunt can do all of these
functions simultaneously
in one build.
Follow these simple rules &
you’ll be an email ninja.
Questions?
Slides & Resources:
litmus.com/lp/frontendconf
Thanks!
How to Build Kickass Emails
How to Build Kickass Emails
How to Build Kickass Emails
How to Build Kickass Emails
How to Build Kickass Emails
How to Build Kickass Emails
How to Build Kickass Emails
Upcoming SlideShare
Loading in …5
×

How to Build Kickass Emails

3,471 views

Published on

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.

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,471
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
75
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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!

×