dotCSS 2016: Hacking HTML Emails with CSS

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body style=“margin: 0; padding: 0;”>
<table cellspacing=“0” cellpadding=“0” border=“0” width=“100%”>
<tr>
<td align=“center”>
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="800">
<tr>
<td align="center" valign="top" width="800">
<![endif]—>
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 800px;"
align="center">
<tr>
<td align=“center” style=“font-size: 60px; color: #ffffff;”>
The Secret Hacks to Mastering HTML Email
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]—>
</td>
</tr>
</table>
</body>
@KevinMandeville #CSSSummit
HACKINGHTMLEMAILSWITH
CSS

HELLO,I’M@KEVINMANDEVILLE

IDESIGN+BUILDEMAILSAT

REMEMBERTHE“BROWSERWARS”?

LOL

MEETTHEEMAILCLIENTWARS

HUNDREDSOFEMAILCLIENTS.
NOSTANDARDS.
NODOCUMENTATION.*

http://emailclientmarketshare.com

10%
13%
25%
52%
WebKit
Gmail
Outlook
Other
RENDERINGENGINEMARKETSHARE(ASOFOCTOBER2016)

WEBKIT + OUTLOOK + GMAIL =
90%

INTERNETEXPLORER
MICROSOFTWORD
Outlook2000-2003
Outlook2007-2016
OutlookforMac2011+2016
OutlookiOS+Android
OUTLOOK
RENDERING
WEBKIT

WEUSETABLE(S)
BECAUSEOUTLOOK.

WENEED(ED)INLINESTYLES
BECAUSEGMAIL...

🎉GMAILNOWSUPPORTS 🎉
EMBEDDEDCSS+MEDIAQUERIES!!!

😍
😍
😍
😍
https://blog.google/products/gmail/better-emails-tailored-to-all-your-devices | https://litmus.com/blog/gmail-to-support-responsive-email-design

WEBKIT = 👍 👍

LET’SGETOURNINJAON

RESPONSIVEEMAIL
WITHOUTMEDIAQUERIES

FLUID-TO-FIXEDLAYOUTSTRUCTURE
100%
Fluid for mobile
Constrain for “desktop” width
600px

🚫OUTLOOKBOXMODELSUPPORT 🚫

OUTLOOKCONDITIONALS
HTML OR CSS (OWN <STYLE> BLOCK)

Outlook 2000 = 9
Outlook 2002 = 10
Outlook 2003 = 11
Outlook 2007 = 12
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 2010 = 14
Outlook 2013 = 15
Outlook 2016 = 16
OUTLOOKCONDITIONALS

<!--[if mso 12]> = targets only Outlook 2007
<!--[if lt mso 12]> = targets below Outlook 2007
<!--[if gt mso 12]> = targets above Outlook 2007
<!--[if lte mso 12]> = targets Outlook 2007 and below
<!--[if gte mso 12]> = targets Outlook 2007 and above
OUTLOOKCONDITIONALS

<div style=“width: 100%; max-width: 600px;”>
...
</div>

FABFOURTECHNIQUE
(FORMULTIPLECOLUMNS)

RÉMIPARMENTIEREmail Developer/Hacker
@HTeuMeuLeu

CSS
min-width: 160px;
width: 320px;
max-width: 480px;

CSS
min-width: 160px;
width: 480px;
max-width: 320px;

CSS
min-width: 480px;
width: 320px;
max-width: 160px;

CSS
.block {
display:inline-block;
min-width:50%;
max-width:100%;
width:calc((480px — 100%) * 480);
}
FABFOURPROPERTIES

min-width
Column widths for desktop
width
Bigger than min-width or smaller than max-width so either
one wins and is applied
FABFOURVALUES
max-width
Column widths for mobile

USECALCTODETERMINEWIDTH
width:calc((Breakpoint Value
— 100%) * Breakpoint);

PARENTVALUEOF500px(2-COLUMN)
CSS
.block {
min-width:50%; 250px WINNER
max-width:100%; 500px
width:calc((480px — 100%) * 480); -9600px
}

PARENTVALUEOF400px(1-COLUMN)
CSS
.block {
min-width:50%; 200px
max-width:100%; 400px WINNER
width:calc((480px — 100%) * 480); 38400px
}

CSS
.block {
min-width:240px;
width:50%;
max-width:100%;
min-width:-webkit-calc(50%);
min-width:calc(50%);
width:-webkit-calc(230400px - 48000%);
width:calc(230400px - 48000%);
}
FABFOURTECHNIQUEhttps://medium.freecodecamp.com/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848#.noo99iukv

WHATCANBE
DYNAMICINEMAIL?

LIVETWITTERFEEDhttps://litmus.com/blog/how-to-code-a-live-dynamic-twitter-feed-in-html-email

HTML
<div class="tweet" id="tweet-1">
<div class="tweet-avatar-wrapper">
<div class="avatar"></div>
</div>
<div class="tweet-wrapper">
<span class=“name”></span>
<span class="handle"></span>
<span class="timestamp"></span>
<span class="copy"></span>
</div>
</div>

#tweet-1 .name::before {
content: “Kyle Gardner”;
}

}
#tweet-1 .handle::after {
content: “@kyleagardner";
}

}
}
#tweet-1 .timestamp::after {
content: “1m”;
}

}
}
content: “1m”;
}
#tweet-1 .copy::before {
content: “Wow. @litmusapp’s #tedc15
email is #amazing”;
}
CSSCONTENTPROPERTYTODRAWELEMENTSONTOPAGE

THESINGLEGREATEST
MEDIAQUERYEVER...

WEBKITTARGETING
@media screen and (-webkit-min-device-pixel-
ratio: 0) {
/* Insert CSS here only enabled for WebKit */
}

WRAPTWEETCSS
INWEBKITONLY
MEDIAQUERY
@media screen and (-webkit-min-device-
pixel-ratio: 0) {
content: "Daenerys Targaryen";
}
content: “@MotherOfDragons";
}
#tweet-1 .copy::before {
content: "The First of Her Name, the
Unburnt, Queen of Meereen...";
}
content: "1m";
}
}

LINKTOEXTERNALSTYLESHEETTO
MAKEITDYNAMIC
TWITTERAPI

FALLBACKTODYNAMICIMAGEOFFEEDONOWN
WEBPAGEFORNON-WEBKITCLIENTS

WEBKIT:DYNAMICEXTERNALCSS NON-WEBKIT:DYNAMICIMAGE

750+TWEETS
IN24HOURS

INTERACTIVEEMAIL
CLICKEVENTSUSINGONLYHTMLANDCSS

HTML
<label>
<input type=“checkbox”>
<input type=“radio”>
CSS
:checked /* pseudo selector */
CHECKBOX+RADIOBUTTONSHACK

CHECKBOXHACK
https://litmus.com/builder/080f33c

CHECKBOXHACK
HTML
<label>
<input type=“checkbox”>
<div style=“width:
50px;height50px;background:red
;”>
</label>
CSS
<style>
input:checked + div {
background: blue !
important;
}
</style>

https://litmus.com/builder/2c88465

RADIOBUTTONSFOR
IMAGECAROUSELS
https://litmus.com/builder/c0bfd8a

MARKROBBINSGodfather of Interactive Email
@M_J_Robbins

✅✅✅✅✅✅✅✅✅✅
✅✅✅✅✅✅✅✅✅✅
✅✅✅✅✅✅✅✅✅✅
✅✅✅✅✅✅✅✅✅✅
✅✅✅✅✅✅✅✅✅✅
✅✅
✅✅
✅✅
✅✅
✅✅
✅✅
✅✅
✅✅
✅✅
✅✅
✅✅
✅✅
✅✅
✅✅
✅✅
✅✅
✅✅
✅✅
✅✅
✅✅
✅✅✅✅✅✅✅✅✅✅
✅✅✅✅✅✅✅✅✅✅
✅✅✅✅✅✅
117CHECKBOXES
✅

PUNCHEDCARDCODING
https://www.webdesignerdepot.com/2015/10/punched-card-coding-the-secret-of-interactive-email

36%
3%
61%
Interactive
Limited
Static
INTERACTIVEEMAILSUPPORT
http://blog.rebelmail.com/email-client-support

Biz Stone
CREATIVITYCOMESFROMCONSTRAINT.“

JOINTHEREVOLUTION(GETINVOLVEDINBUILDINGHTMLEMAILS)

litmus.com/lp/dotcss
Slides & Resources

🎉 THANKYOU! 🎉

dotCSS 2016: Hacking HTML Emails with CSS

More Related Content

What's hot

Similar to dotCSS 2016: Hacking HTML Emails with CSS

More from Litmus

Recently uploaded

dotCSS 2016: Hacking HTML Emails with CSS