AWDG - Comp to Code to Inbox

FROM COMP TO
CODE TO INBOX
Working with prehistoric code and staying sane

Fabio Carneiro
fabio-carneiro.com // @FLCarneiro

+ How do we get from an idea or design comp all the way through to code and inbox?
+ If you’re designing a website, design’s not as huge a concern. It’s not always easy to maintain that ﬁdelity in the
world of email, however.

FIRST, SOME
BACKGROUND

+ Let’s, really quickly, talk about the history of email, so we can see where it all started and when it got left
behind

Where websites are concerned

LIFE IS GOOD

Work on
HTML 5.0
HTML 1.0 HTML 2.0 HTML 4.0 XHTML 1.0 begins
1991 1995 1997 2000 2004

1996 1998 JavaScript 1.5 2005 2006
CSS1 CSS2 Work on JQuery 1.0
1994 JavaScript 1.0 CSS3
begins
W3C
Founded

+ Right now, web design is cozy. If you’re fortunate, you haven’t coded a site to work in IE6 in 2 or 3 years, and
everything is more or less on a level ﬁeld.
+ When it’s not, you have all sorts of JavaScript to force compatibility.
+ Browsers are pretty great, and even Microsoft (pardon the obligatory mockery) has vested interest in providing
modern rendering engines in IE9 and IE10.

Where email is concerned

LIFE IS MEH

Electric IBM Telex First ‘@’ HTML email HTML email
Telegraph Radiotype Networks emails sent arrives declared evil
1833 1939 1956 1971 1997ish 1998

HTML 4.0

1965
Email debuts
at MIT & SDC

+ ﬁrst forms of electronic messaging appear with telegraph in 1833, radiotype in 1939, telex in 1956
+ email makes appearance in 1965, at MIT & at System Development Corporation (the ﬁrst software company)
+ in ’71, on ARPANET, an email was sent from one machine to another using the ‘@’ syntax we’re all so familiar
with today.
+ not ‘til late 90’s, w/HTML @ 4.0, that we see HTML email. year after, HTML email declared evil - there are folks
out there who swear by plain-text emails. They are crazytown.


LIFE IS MEH

2011

+ jump to today, HTML email is a given & really hit its stride - as a force of economy. despite importance in
making people money, world of HTML still like wild west.
+ W3C has very little reach in email, your tools limited to ability to use and manipulate table-based code to get
result you want.
+ and knowledge of how different email clients render code ...and there are a heck of a lot of email clients, both
desktop and web-based.


LIFE IS MEH

2011

+ along with dozens of web- and desktop- clients come mobile platforms: Blackberry, iOS, Android.
+ each have own native mail applications, plus however many that are ﬂoating around their respective app stores.
+ i never really check personal emails on my PCs - only work emails

“I’ve made a
huge mistake.”

+ This is the state of email. It’s just like how the state of the web used to be.

CODING FOR
YOUR AUDIENCE

+ you can avoid feeling overwhelmed by focusing on the clients important to your end-user, the clients which
your subscribers use

Designers are mildly anti-social, but know

YOUR TARGET USERS

+ Litmus compiled client usage in 2010, showed the big 4 clients, with iphone at number 5


YOUR TARGET USERS

+ Campaign Monitor compiled in June of 2011, userbase was tested


YOUR TARGET USERS

+ Hotmail: world's largest webmail service w/~364 million users, Yahoo! (280 million) and Gmail (191 million)
follow
+ at MailChimp, Hotmail is the most popular, followed by iOS and Yahoo mail

BEST PRACTICES
FOR HTML EMAIL

+ actual effort that goes into creating HTML emails isn’t monumental. even easier if you had any experience
building websites in the late 90‘s and early 00‘s.
+ if you haven’t, or if you’re rusty, these 8 principles will get you started.

Practice number one

USE & NEST TABLES
<table>
<tr>
<td>
oh god how did this get here i am not good with computer
<table>
<tr>
<td>
what is this i dont even
</td>
<td>
lol wut
</td>
</tr>
</table>
</td>
<td>
</td>
</tr>
</table>

+ seriously important: tables for structure. might be cringe-worthy for a modern webdes/dev, but knowing how
to work arcane HTML a marketable skill.
+ don’t just use one table: nest the crap out of your tables. easiest way to ensure email will retain its structure in
email clients.
+ safely go 13 or 14 levels deep with nested tables. coding HTML emails is exactly like I N C E P T I O N !

Practice number two

CLONE BODY
<body>
<table id=”bodyTable” height=”100%” width=”100%”>
<tr>
<td>

<table>
<tr>
<td>
oh my god how did this get here i am not good with computer
</td>
</tr>
</table>

</td>
</tr>
</table>
</body>

+ some email clients strip the body tag, so it’s a good idea to replace it with something else - a table works best
+ other clients ignore styling applied to the body, so using a table helps you maintain styling
+ clients also support bg images on tables, but make sure you provide a fallback color

Practice number three

STAY WITHIN 600PX
<table>
<tr>
<td width=”600”>
<table>
<tr>
<td>
</td>
<td>
lol wut
</td>
</tr>
</table>
</td>
<td>
</td>
</tr>
</table>

+ keep your email widths around or below 600px - you have to account for small preview panes in email clients.
+ the bonus is that a 600px-wide email scales down nicely on mobile devices, email remains readable

Practice number four

SET ATTRIBUTES
<table border=”0” cellpadding=”10” cellspacing=”0”>
<tr>
<td valign=”top” width=”380”>
<tr>
</td>
</td>
</tr>
</table>
</td>
</td>
</tr>
</table>

+ setting HTML attributes on tables helps cover instances where email clients ignore CSS , and ensures stability of
your email
+ use cellpadding/spacing on tables, but set your widths on the <td>; doing this forces a box-model structure.
+ avoid %-based widths if you can.

Practice number ﬁve

KEEP CSS BASIC
#contentContainer{background-color:#DDDDDD; border:2px solid #BBBBBB;}

#mainContent{color:#505050; font-family:Georgia; font-size:14px; text-align:left;}

#sidebarContent{color:#909090; font-family:Arial; font-size:12px; text-align:left;}

<table border=”0” cellpadding=”10” cellspacing=”0” id=”contentContainer”>
<tr>
<td valign=”top” width=”380” id=”mainContent”>
</td>
<td valign=”top” width=”180” id=”sidebarContent”>
</td>
</tr>
</table>

+ keep to the basics: no ﬂoats, positioning, shorthand hex, complex selectors and avoid most compound rules;
clients may ignore css that’s too “advanced”
+ css3 doesn’t work in many places either, but it’s okay to try rounded borders or box/text shadow since they
don’t change email structure

Practice number six

INLINE YOUR CSS
<table border=”0” cellpadding=”10” cellspacing=”0” style=”background-
color:#DDDDDD; border:2px solid #BBBBBB;” >
<tr>
<td valign=”top” width=”380” style=”color:#505050; font-family:Georgia; font-
size:14px; text-align:left;”>
</td>
<td valign=”top” width=”180” style=“color:#909090; font-family:Arial; font-
size:12px; text-align:left;”>
</td>
</tr>
</table>

+ always inline your css; gmail strips <style> css from head or body

+ use an automatic inliner line MailChimp's CSS Inliner Tool...

(http://beaker.mailchimp.com/inline-css)

+ ...or Dialect’s Premailer to save yourself a lot of work when inlining CSS. There’s no need to do it by hand.

(http://premailer.dialect.ca/)

Practice number seven

STABLE IMAGES
<table background=”http://fabio-carneiro.com/img/noise.gif” border=”0”
cellpadding=”10” cellspacing=”0”>
<tr>
<img src=”http://fabio-carneiro.com/img/rageguytemplate.jpg”
height=”350” width=”500” />
<tr>
</td>
<td background=”http://fabio-carneiro.com/img/catpattern.png”
valign=”top” width=”280”>
</td>
</tr>
</table>
</td>
...

+ set attributes for height and width + use fallback colors for backgrounds
+ don't use spacer images if you don’t absolutely have to - use lots of <br />s + ani gifs work, but use
sparingly
+ avoid image-replacement for headings (use alt text if you do)

Practice number eight

TEST, TEST, TEST

+ perform practical tests using your own accounts across a variety of clients and browsers
+ at the very least, test on Outlook...


TEST, TEST, TEST

+ test on Hotmail...


TEST, TEST, TEST

+ test on Gmail...


TEST, TEST, TEST

+ and test on Yahoo...
+ There’s no replacement for practical testing. You have the benefit of looking through code and trying fixes on
the fly.


TEST, TEST, TEST

+ supplement your testing with services like Litmus


TEST, TEST, TEST

+ build testbed templates, used to test speciﬁc things like background images or margins or padding

Bonus practice! Number nine

DON’T BE PERFECT

+ allow yourself a margin of error: pixel-perfection will only drive you crazy.
+ the more complex your design, the higher your margin of error has to be

WORKING WITH
THE BIG 5 CLIENTS

First and most deﬁnitely least

MICROSOFT OUTLOOK

+ the most popular desktop client. before 2007, outlook rendered emails using the IE6 engine.
+ not optimal, but way better than now: 07/10 uses Word to render HTML.

+ before we continue, i’d like to give you a moment to mull over the stupidity; i’d love to know how many people,
over the years, have felt this way

First and most deﬁnitely least

MICROSOFT OUTLOOK

1. Support for background images is limited to the <body> element
2. Partial and buggy margin and padding support
3. No support for CSS height
4. No support for <ul> or <ol> CSS styles
5. CSS3? AAAAAAHAHAHAHAHAHAHAHAHAHA!

+ bg image support: <body> as css, on <td> only with mso ﬁlter hack (bloated)
+ buggy padding/margin support; either only work on some elements, stick with padding and use on <td>s
+ keep top/bottom padding consistent across all <td>s, also, don’t leave cells empty

Gathering your junk mail since 1996

WINDOWS HOTMAIL

1. Background images are limited to <table> and <td> elements
2. <body> is stripped from the email, so a replacement is necessary
3. No support for margin-top or the compound margin rule
4. Colors for headings below h1 are overridden
5. Support for CSS3 border-radius, box-shadow, and text-shadow

+ bg image support: <td> as attribute, <table> as attribute
+ hotmail replaces <body> with a <div>, needs clone for bg
+ overrides heading color below h1 if css not inlined & marked !important, also adds margin to h2 adjacent to h3
+ no margin-top support, no support for compound margin rule
+ css3 support for box-shadow, text-shadow

We know your underwear size

GOOGLE MAIL

1. Background images are limited to <table> and <td> elements
2. <style> gets stripped from <head> and <body> - inlined CSS is required
3. Support for CSS3 text-shadow
4. CSS of any type can be overridden by native Gmail CSS - always test your emails

+ bg image support: <td> as attribute, <table> as attribute
+ <style> stripped from emails, requires css to be inlined, no support for selectors of any kind

Come for the emails, stay for the chat spam

YAHOO! MAIL

1. Background images are fully supported
2. Changes link colors unless class “.yshortcuts” is overridden in email CSS
3. Support for CSS3 text-shadow
4. Inserts obtrusive JavaScript keyword handlers that can’t be defeated

+ bg image support: full support
+ overrides link colors unless class “.yshortcuts” overridden in email css
+ yahoo inserts obtrusive javascript keyword handlers, no way to defeat

We’ll happily take more of your money

APPLE IOS

1. Background images are fully supported
2. Small display size is the biggest downside
3. File size may be an issue depending on service provider or user location
4. Requires “-webkit-text-size-adjust:none;” to prevent text resizing on iOS devices
5. Overrides link styling if an address or keyword is found, and there’s no defeat

+ bg image support: full support
+ small display is biggest downside
+ depending on service provider/location of user, ﬁle size may be an issue
+ requires “-webkit-text-size-adjust:none;” to prevent automatic text resize on iOS devices
+ overrides link styles if address or keyword is found, no way to defeat

From comp to code to inbox

DESIGN BY JON HICKS

+ back in Oct 2010, MailChimp contracted designers to create some templates, this one gave me a heart attack
+ code for consistency in as many clients as possible, but ﬂexible enough to be used by 600,000 MailChimp users
while retaining designer’s vision

wood grain textures

boundary-breaking elements

drop-shadows on content

3 items that were really daunting at ﬁrst:
+ wood grain. not only that, they’re bg images
+ boundary-breaking elements (headings in raised boxes)
+ dropshadows for content elements/images

+ so, i coded the template using those best practices I spoke of before: tables, basic CSS and all
+ how it looks in a browser is shown here

+ ...and you can get a better sense for the structure and simplicity by disabling the images

wood grain textures

<table border="0" cellpadding="0" cellspacing="0" height="100%"
width="100%" id="container">
<tr>
<td align="center" valign="top">
<br />
<table background="http://gallery.mailchimp.com/i/
wdgrn.gif" bgcolor="#EBC697" border="0"
cellpadding="0" cellspacing="0" id="templateWrapper">
<tr>
...

+ in each section, the wood grain image is placed as a table background attribute, and it’s backed-up with a
similar fallback color
+ this accounts for each client that can handle bg images on tables (hotmail, gmail, yahoo), and covers outlook,
which doesn’t

Wood grain background image

MICROSOFT OUTLOOK

+ no bg image, but suitable fallback color for graceful degradation


WINDOWS HOTMAIL

+ handles bg images on tables just ﬁne
+ even has the added bonus of supporting box shadow on container and text shadow on headings


GOOGLE MAIL

+ no problems here, either, though no box shadow present. not a big deal, really


YAHOO! MAIL

+ all is well here, too


APPLE IOS

+ and here, thanks to webkit, it works just ﬁne

boundary-breaking elements

<table border="0" cellpadding="8" cellspacing="0"
style="background-color:#F8F8FA;
border-top:solid 1px #FFFFFF;
border-bottom:solid 2px #AB9577;
margin-top:-5px;>
<tr>
<td align="center" valign="middle">
Plushies are here!
</td>
</tr>
</table>

+ this was a trickier item; i was never hopeful that it would work, because it really required negative margin.
+ the heading box is a nested table, with all the styling you’d expect.
+ did it work?

Boundary-breaking element

MICROSOFT OUTLOOK

+ not here, of course, but the fail state isn’t so bad


WINDOWS HOTMAIL

+ didn’t work here, though that’s no surprise: hotmail doesn’t support margin-top at all


GOOGLE MAIL

+ doesn’t work here, either, even though gmail supposedly has no margin issues


YAHOO! MAIL

+ doesn’t work here!


APPLE IOS

+ hooray for webkit! It’s working here, and that’s pretty good
+ since this part of the design didn’t affect the email’s readability, deliverability, or content,
it’s okay that it failed so hard

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="10" width="8"><br /></td>
<td align="center" bgcolor="#FFFFFF" rowspan="2"
valign="bottom" width="182">
<table...
.../table>
</td>
</tr>
<tr>
<td bgcolor="#8B7659" width="8"><br /></td>
</tr>
</table>

drop-shadows on content

+ these dropshadows, because they’re simple, were made with table cells
+ two cells used - one for the notch at the top to create a height diff between the shadow and content, the other
simply has a bg color
+ note the width attribute set on each cell, and no overall width on the table itself.

Drop-shadows on content

MICROSOFT OUTLOOK

+ We saw earlier that outlook handles table and cell background colors just ﬁne, so no issues here


WINDOWS HOTMAIL

+ there’s nothing inherently tricky about this solution, so no surprise to see it working here


GOOGLE MAIL

+ and here


YAHOO! MAIL

+ and here


APPLE IOS

+ and ﬁnally here

More great designs that made me cry

DESIGNER TEMPLATES

+ Using the best practices I mentioned, along with careful coding and lots of iterative testing, you can build really
great-looking emails that will work across various email clients with few issues
+ Each of these emails were built to be stable enough and simple enough to use by 850,000 MailChimp users, all
using the methods I described

You don’t need to reinvent the wheel

A LITTLE HELP

htmlemailboilerplate.com

+ there’s no need to start from nothing at ﬁrst - you can use started code from HTML Email
Boilerplate...


A LITTLE HELP

github.com/mailchimp/Email-Blueprints

+ ...or from here. These were coded by me, and are the same templates that we use in
MailChimp, under “Start-From-Scratch”.


A LITTLE HELP

mailchimp.com/resources

+ you can also ﬁnd lots of resources from MailChimp...


A LITTLE HELP

campaignmonitor.com/css

+ ...and campaign monitor. Their CSS compatibility page is a great resource. Their forums are
even better.

LIKE THE MIGHTY
NYAN CAT

@ﬂcarneiro

AWDG - Comp to Code to Inbox

Recommended

Recommended

More Related Content

Similar to AWDG - Comp to Code to Inbox

Similar to AWDG - Comp to Code to Inbox (20)

Recently uploaded

Recently uploaded (20)

AWDG - Comp to Code to Inbox