- The document discusses best practices for coding HTML emails, as email clients have not advanced as quickly as web browsers and support a limited set of technologies. - Key recommendations include using and nesting tables for layout, keeping widths below 600px, setting attributes on tables for cross-client compatibility, keeping CSS basic without advanced selectors or properties, and inlining CSS for reliability. - Mastering archaic but necessary table-based HTML coding is a marketable skill for creating emails that render properly across many email clients. Focusing on the most popular clients helps avoid being overwhelmed by the diversity of email platforms.

1. 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 fidelity in the
world of email, however.

2. 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

3. 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 field.
+ 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.

4. 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
+ first 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 first 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.

5. Where email is concerned
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.

6. Where email is concerned
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 floating around their respective app stores.
+ i never really check personal emails on my PCs - only work emails

7. “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.

8. 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

9. 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

10. Designers are mildly anti-social, but know
YOUR TARGET USERS
+ Campaign Monitor compiled in June of 2011, userbase was tested

11. Designers are mildly anti-social, but know
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

12. 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.

13. 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 !

14. YOU
EMAIL

15. 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

16. Practice number three
STAY WITHIN 600PX
<table>
<tr>
<td width=”600”>
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>
+ 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

17. Practice number four
SET ATTRIBUTES
<table border=”0” cellpadding=”10” cellspacing=”0”>
<tr>
<td valign=”top” width=”380”>
oh god how did this get here i am not good with computer
<table border=”0” cellpadding=”10” cellspacing=”0”>
<tr>
<td valign=”top” width=”280”>
what is this i dont even
</td>
<td valign=”top” width=”280”>
</td>
</tr>
</table>
</td>
<td valign=”top” width=”180”>
</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.

18. Practice number five
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”>
oh god how did this get here i am not good with computer
</td>
<td valign=”top” width=”180” id=”sidebarContent”>
what is this i dont even
</td>
</tr>
</table>
+ keep to the basics: no floats, 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

19. 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;”>
oh god how did this get here i am not good with computer
</td>
<td valign=”top” width=”180” style=“color:#909090; font-family:Arial; font-
size:12px; text-align:left;”>
what is this i dont even
</td>
</tr>
</table>
+ always inline your css; gmail strips <style> css from head or body

20. + use an automatic inliner line MailChimp's CSS Inliner Tool...
(http://beaker.mailchimp.com/inline-css)

21. + ...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/)

22. Practice number seven
STABLE IMAGES
<table background=”http://fabio-carneiro.com/img/noise.gif” border=”0”
cellpadding=”10” cellspacing=”0”>
<tr>
<td valign=”top” width=”380”>
<img src=”http://fabio-carneiro.com/img/rageguytemplate.jpg”
height=”350” width=”500” />
<table border=”0” cellpadding=”10” cellspacing=”0”>
<tr>
<td valign=”top” width=”280”>
what is this i dont even
</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)

23. 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...

24. Practice number eight
TEST, TEST, TEST
+ test on Hotmail...

25. Practice number eight
TEST, TEST, TEST
+ test on Gmail...

26. Practice number eight
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.

27. Practice number eight
TEST, TEST, TEST
+ supplement your testing with services like Litmus

28. Practice number eight
TEST, TEST, TEST
+ build testbed templates, used to test specific things like background images or margins or padding

29. 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

30. WORKING WITH
THE BIG 5 CLIENTS

31. First and most definitely 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.

32. + 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

33. First and most definitely 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 filter 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

34. 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

35. 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

36. 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

37. 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, file 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

38. FROM COMP TO
CODE TO INBOX

39. 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 flexible enough to be used by 600,000 MailChimp users
while retaining designer’s vision

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

41. + 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

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

43. 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

44. Wood grain background image
MICROSOFT OUTLOOK
+ no bg image, but suitable fallback color for graceful degradation

45. Wood grain background image
WINDOWS HOTMAIL
+ handles bg images on tables just fine
+ even has the added bonus of supporting box shadow on container and text shadow on headings

46. Wood grain background image
GOOGLE MAIL
+ no problems here, either, though no box shadow present. not a big deal, really

47. Wood grain background image
YAHOO! MAIL
+ all is well here, too

48. Wood grain background image
APPLE IOS
+ and here, thanks to webkit, it works just fine

49. 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?

50. Boundary-breaking element
MICROSOFT OUTLOOK
+ not here, of course, but the fail state isn’t so bad

51. Boundary-breaking element
WINDOWS HOTMAIL
+ didn’t work here, though that’s no surprise: hotmail doesn’t support margin-top at all

52. Boundary-breaking element
GOOGLE MAIL
+ doesn’t work here, either, even though gmail supposedly has no margin issues

53. Boundary-breaking element
YAHOO! MAIL
+ doesn’t work here!

54. Boundary-breaking element
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

55. <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.

56. Drop-shadows on content
MICROSOFT OUTLOOK
+ We saw earlier that outlook handles table and cell background colors just fine, so no issues here

57. Drop-shadows on content
WINDOWS HOTMAIL
+ there’s nothing inherently tricky about this solution, so no surprise to see it working here

58. Drop-shadows on content
GOOGLE MAIL
+ and here

59. Drop-shadows on content
YAHOO! MAIL
+ and here

60. Drop-shadows on content
APPLE IOS
+ and finally here

61. 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

62. You don’t need to reinvent the wheel
A LITTLE HELP
htmlemailboilerplate.com
+ there’s no need to start from nothing at first - you can use started code from HTML Email
Boilerplate...

63. You don’t need to reinvent the wheel
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”.

64. You don’t need to reinvent the wheel
A LITTLE HELP
mailchimp.com/resources
+ you can also find lots of resources from MailChimp...

65. You don’t need to reinvent the wheel
A LITTLE HELP
campaignmonitor.com/css
+ ...and campaign monitor. Their CSS compatibility page is a great resource. Their forums are
even better.

66. GO FORTH AND
CONQUER ALL

67. LIKE THE MIGHTY
NYAN CAT
@flcarneiro