Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • These are the only things supported by all browsers. Believe it or not, Google is the worst offender of CSS support, and there is very little support to adhere to standards.
  • Before jumping in to fix all those problems, the most important thing is to have a logical approach. Your audience should be dictating the kind of email you should/shouldn’t be designing. Each client has very prevalent advantages and disadvantages that you should be very aware of.
  • Here’s our table structure for the monthly and weekly emails.
  • As you can see, everything essentially boils down to nested tables. Sadly, a table is the most stable element in an HTML email.
  • <tr> tags actually have limited utility in email. They can’t take any useful display/positioning/box rules, and since typography and colors need to be on their specific element, it’s best not to bother with <tr> tags at all. Using <div> instead of <td> is a stylistic choice, but I recommend it. By using a <div>, you keep your box model rules in one place rather than spreading them across multiple <td> tags. Also, you can save the <td> tags for fine-tuning your spacing.
  • Content gets buried way way way down there in order to keep everything standardized.
  • A small, unobtrusive technique to avoid funky looking pretext. Use a pixel’s alt text (might as well use your tracking pixel).
  • I’ve designed an internal email boilerplate (a bit different from the one Adam wrote) that we’re using for notification emails. Should make email designing a lot faster and less painful. Plus, it comes with some extras built in.
  • A fun little tracking pixel that records whenever someone opens, forwards or prints our emails. This data gets pushed to the usage tracking database and comes standard in the internal email boilerplate.
  • Targeted CTAs which you may have already heard about. We can manipulate the state of a forwarded email by hiding content and swapping it when it’s wrapped in a <blockquote> tag.
  • Here in the style block, we use a bit of CSS to do the swapping. This works on about half of our customer base (and eventually, I’ll do some better testing to see if it’s affecting subscriptions).
  • Techtalk

    1. 1. Quirks in Email Design <ul><li>problems, solutions and hacks </li></ul>
    2. 2. Problems <ul><li>Lots of constantly changing variables </li></ul><ul><li>Your code is augmented or overridden </li></ul><ul><li>You’re armed with only html and css </li></ul>
    3. 3. 65+ Email Clients Multiply the web-based clients by the number of major browsers
    4. 4. CSS Support <ul><li>border </li></ul><ul><li>border-collapse </li></ul><ul><li>color </li></ul><ul><li>table-layout (wtf?) </li></ul><ul><li>(most of the typography stuff) </li></ul><ul><li> </li></ul>
    5. 5. How to Approach Email <ul><li>Know your browser distribution before attempting an advanced technique. </li></ul><ul><li>HubSpot: Outlook (45%), Apple (22%), iOS (12%), Gmail (5%). </li></ul><ul><li>Avoid inline important flags since they can’t be overwritten later. </li></ul><ul><li>Generally, understand style inheritance. </li></ul><ul><li>File size limits exist. </li></ul>
    6. 6. Basic Solutions <ul><li>Code like it’s 1998 </li></ul><ul><li>Styles should be inline </li></ul><ul><li>Assume nothing: be painfully explicit about what css rules you set and unset </li></ul><ul><li>Acid test everything </li></ul><ul><li>Code to your audience </li></ul>
    7. 9. Table Quirks <ul><li>“border: collapse” allows you to nest tables </li></ul><ul><li>Style your <td> tags, not <tr> tags </li></ul><ul><li>Don’t worry about <thead>, <tbody>, <tfoot> </li></ul><ul><li>Avoid using <td> tags for sectional spacing (use <div> instead) </li></ul>
    8. 10. The Basic Table Wrapper
    9. 11. Common Gotchas <ul><li>Outlook will crash if you don’t specify a protocol for your images. </li></ul><ul><li>Hotmail turns <h2>+ tags “Kermit the Frog” green if you don’t use !important. </li></ul><ul><li>Fancy CSS buttons look like crap in Outlook 2007+ because of poor padding support. </li></ul><ul><li>Outlook 2007+ use the MS Word engine </li></ul><ul><li>Gmail can strip out your CSS rules </li></ul>
    10. 12. Email Hacks <ul><li>screw Google </li></ul>
    11. 13. Hiding Content <ul><li>Resize images to 1x1px </li></ul><ul><li>“display: none” is poorly supported </li></ul><ul><li>Be DRY: create a “hide” CSS class when appropriate (not supported by Gmail) </li></ul>
    12. 14. Manipulating Content <ul><li>Use simple CSS to detect the environment </li></ul><ul><li>Dynamically serve images by pointing your “src” attribute to a script </li></ul>
    13. 15. Detecting Environments <ul><li><style> tags to target non-Gmail clients </li></ul><ul><li>pseudo selectors for iOS and Apple </li></ul><ul><li>@media queries for mobile devices </li></ul><ul><li>“@media print” to detect when someone prints </li></ul><ul><li>Forwarded messages are wrapped in <blockquote> tags </li></ul>
    14. 16. Hacks at HubSpot
    15. 17. Tracking Pixel + Pretext Use alt text on the tracking pixel and put it after the opening <body> tag
    16. 18. Internal Boilerplate <ul><li>Mobile styles </li></ul><ul><li>Table structures </li></ul><ul><li>Pretext pixel + tracking </li></ul>
    17. 19. Litmus-style Tracking
    18. 20. Targeted CTAs
    19. 21. Targeted CTA Code
    20. 22. Places to Improve <ul><li>Automated browser testing </li></ul><ul><li>Automatically move styles inline (a la ) </li></ul><ul><li>Better mobile targeting </li></ul><ul><li>Better end-to-end customer email experience </li></ul>