How to Build Kickass Emails

HOW TO BUILD
KICKASS
EMAILSFRONT-END DESIGN CONFERENCE
JULY 2014

Slides & Resources:
litmus.com/lp/frontendconf

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. Yahoo! Mail 6%
7. Outlook.com 6%
8. Google Android 5%
9. Windows Live Mail 2%
10. Thunderbird 1%

Apple
45%
Microsoft
21%
Google
19%

Mobile
43%
Webmail
32%
Desktop
25%
Environment Breakdown
(JUNE 2014)

(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

Mobile
11%
Webmail
33%
Desktop
56%

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.

Email design is not
web design.

The ﬁrst step is acceptance…

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-speciﬁc styling )

So instead of…
<h1>This is a headline</h1>
<p>This is a paragraph.<h1>
<img src=”example.jpg” class=”mobile”>

<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…

One-column design
works best for email.

Keep your emails to a
maximum width of
600px (generally).

Never use margin.
Always use 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>.

Always deﬁne 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;}
HTML
CSS

Let’s talk about the
single-most misunderstood
part of email…

Responsive email is not
supported everywhere.

There’s a diﬀerence
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 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/

Responsive email classes
need to look like this…
*[class=“table”] {width: 100% !important;}
!
td[class=“table”] {width: 100% !important;}

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…

If you use one big image
as an email…
!
(or the majority of your email as images)

43%of users view email with images oﬀ
* Even after Gmail started displaying images by default.

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 ﬁrst 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.

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">
<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 →</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Border-based button

<tr>
<td>
<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
→</a></td>
</tr>
</table>
</td>
</tr>
</table>
Padding-based button

<tr>
<td>
<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 →</a></td>
</tr>
</table>
</td>
</tr>
</table>
Border + Padding-based button

Use preheader text for
better open rates.

+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;color:#ffffff;“>Insert preheader text
here</div>
Place as 1st content in email…

Find, use, & reﬁne reset styles
in the <head>.

#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:

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">

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">

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;
}
!
}

Stack native font ﬁrst…
!
!
font-family: Proxima Nova, ‘proxima_nova’,
Helvetica, sans-serif;
…for clients who don’t support them

Now let’s talk about
how to think like an
email hacker.

The best way to beat email is
to ﬁgure 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.

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…

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

Outlook version numbers
!
Outlook 2000 = 9
Outlook 2002 = 10
Outlook 2003 = 11
Outlook 2007 = 12
Outlook 2010 = 14
Outlook 2013 = 15

<!--[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)

Gmail can’t read,
Outlook can’t add.
!
#funtimes

To ﬁx…
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

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"]

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 aﬀect the email in Gmail,
Outlook, WebKit, & non-WebKit/Firefox?

Gmail Outlook WebKit Non-WebKit/Firefox
Check them oﬀ on a table…
Method #1
Method #2

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

<link rel="stylesheet" data-ignore="ignore"
href="css/style.css" />
!

<style data-ignore="ignore">
/* Styles here will not be inlined */
</style>
Select which CSS to inline…

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.

How to Build Kickass Emails

Contenu connexe

Plus de Litmus

Dernier

How to Build Kickass Emails