AWDG - Comp to Code to Inbox


Published on

Published in: Technology, Design
1 Comment
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

AWDG - Comp to Code to Inbox

  1. 1. FROM COMP TO CODE TO INBOX Working with prehistoric code and staying sane Fabio Carneiro // @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 theworld of email, however.
  2. 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 leftbehind
  3. 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, andeverything 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 providingmodern rendering engines in IE9 and IE10.
  4. 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 familiarwith today.+ not ‘til late 90’s, w/HTML @ 4.0, that we see HTML email. year after, HTML email declared evil - there are folksout there who swear by plain-text emails. They are crazytown.
  5. 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 inmaking 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 getresult you want.+ and knowledge of how different email clients render code ...and there are a heck of a lot of email clients, bothdesktop and web-based.
  6. 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. 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. 8. CODING FOR YOUR AUDIENCE+ you can avoid feeling overwhelmed by focusing on the clients important to your end-user, the clients whichyour subscribers use
  9. 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. 10. Designers are mildly anti-social, but know YOUR TARGET USERS+ Campaign Monitor compiled in June of 2011, userbase was tested
  11. 11. Designers are mildly anti-social, but know YOUR TARGET USERS+ Hotmail: worlds 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. 12. BEST PRACTICES FOR HTML EMAIL+ actual effort that goes into creating HTML emails isn’t monumental. even easier if you had any experiencebuilding 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. 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 howto 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 inemail 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. 14. YOUEMAIL
  15. 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. 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. 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 ofyour 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. 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 theydon’t change email structure
  19. 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. 20. + use an automatic inliner line MailChimps CSS Inliner Tool...(
  21. 21. + ...or Dialect’s Premailer to save yourself a lot of work when inlining CSS. There’s no need to do it by hand.(
  22. 22. Practice number seven STABLE IMAGES <table background=”” border=”0” cellpadding=”10” cellspacing=”0”> <tr> <td valign=”top” width=”380”> <img src=”” 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=”” valign=”top” width=”280”> </td> </tr> </table> </td> ...+ set attributes for height and width + use fallback colors for backgrounds+ dont use spacer images if you don’t absolutely have to - use lots of <br />s + ani gifs work, but usesparingly+ avoid image-replacement for headings (use alt text if you do)
  23. 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. 24. Practice number eight TEST, TEST, TEST+ test on Hotmail...
  25. 25. Practice number eight TEST, TEST, TEST+ test on Gmail...
  26. 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 onthe fly.
  27. 27. Practice number eight TEST, TEST, TEST+ supplement your testing with services like Litmus
  28. 28. Practice number eight TEST, TEST, TEST+ build testbed templates, used to test specific things like background images or margins or padding
  29. 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
  31. 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. 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. 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. 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. 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. 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. 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
  39. 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 userswhile retaining designer’s vision
  40. 40. wood grain textures boundary-breaking elements drop-shadows on content3 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. 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. 42. + ...and you can get a better sense for the structure and simplicity by disabling the images
  43. 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=" 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 asimilar fallback color+ this accounts for each client that can handle bg images on tables (hotmail, gmail, yahoo), and covers outlook,which doesn’t
  44. 44. Wood grain background image MICROSOFT OUTLOOK+ no bg image, but suitable fallback color for graceful degradation
  45. 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. 46. Wood grain background image GOOGLE MAIL+ no problems here, either, though no box shadow present. not a big deal, really
  47. 47. Wood grain background image YAHOO! MAIL+ all is well here, too
  48. 48. Wood grain background image APPLE IOS+ and here, thanks to webkit, it works just fine
  49. 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. 50. Boundary-breaking element MICROSOFT OUTLOOK+ not here, of course, but the fail state isn’t so bad
  51. 51. Boundary-breaking element WINDOWS HOTMAIL+ didn’t work here, though that’s no surprise: hotmail doesn’t support margin-top at all
  52. 52. Boundary-breaking element GOOGLE MAIL+ doesn’t work here, either, even though gmail supposedly has no margin issues
  53. 53. Boundary-breaking element YAHOO! MAIL+ doesn’t work here!
  54. 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. 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 othersimply has a bg color+ note the width attribute set on each cell, and no overall width on the table itself.
  56. 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. 57. Drop-shadows on content WINDOWS HOTMAIL+ there’s nothing inherently tricky about this solution, so no surprise to see it working here
  58. 58. Drop-shadows on content GOOGLE MAIL+ and here
  59. 59. Drop-shadows on content YAHOO! MAIL+ and here
  60. 60. Drop-shadows on content APPLE IOS+ and finally here
  61. 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 reallygreat-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, allusing the methods I described
  62. 62. You don’t need to reinvent the wheel A LITTLE HELP there’s no need to start from nothing at first - you can use started code from HTML EmailBoilerplate...
  63. 63. You don’t need to reinvent the wheel A LITTLE HELP ...or from here. These were coded by me, and are the same templates that we use inMailChimp, under “Start-From-Scratch”.
  64. 64. You don’t need to reinvent the wheel A LITTLE HELP you can also find lots of resources from MailChimp...
  65. 65. You don’t need to reinvent the wheel A LITTLE HELP ...and campaign monitor. Their CSS compatibility page is a great resource. Their forums areeven better.
  67. 67. LIKE THE MIGHTYNYAN CAT @flcarneiro
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.