Quirks in Email Design <ul><li>problems, solutions and hacks </li></ul>
Problems <ul><li>Lots of constantly changing variables </li></ul><ul><li>Your code is augmented or overridden </li></ul><u...
65+ Email Clients Multiply the web-based clients by the number of major browsers
CSS Support <ul><li>border </li></ul><ul><li>border-collapse </li></ul><ul><li>color </li></ul><ul><li>table-layout (wtf?)...
How to Approach Email <ul><li>Know your browser distribution before attempting an advanced technique. </li></ul><ul><li>Hu...
Basic Solutions <ul><li>Code like it’s 1998 </li></ul><ul><li>Styles should be inline </li></ul><ul><li>Assume nothing: be...
 
 
Table Quirks <ul><li>“border: collapse” allows you to nest tables </li></ul><ul><li>Style your <td> tags, not <tr> tags </...
The Basic Table Wrapper
Common Gotchas <ul><li>Outlook will crash if you don’t specify a protocol for your images. </li></ul><ul><li>Hotmail turns...
Email Hacks <ul><li>screw Google </li></ul>
Hiding Content <ul><li>Resize images to 1x1px </li></ul><ul><li>“display: none” is poorly supported </li></ul><ul><li>Be D...
Manipulating Content <ul><li>Use simple CSS to detect the environment </li></ul><ul><li>Dynamically serve images by pointi...
Detecting Environments <ul><li><style> tags to target non-Gmail clients </li></ul><ul><li>pseudo selectors for iOS and App...
Hacks at HubSpot
Tracking Pixel + Pretext Use alt text on the tracking pixel and put it after the opening <body> tag
Internal Boilerplate <ul><li>Mobile styles </li></ul><ul><li>Table structures </li></ul><ul><li>Pretext pixel + tracking <...
Litmus-style Tracking
Targeted CTAs
Targeted CTA Code
Places to Improve <ul><li>Automated browser testing </li></ul><ul><li>Automatically move styles inline (a la  http://prema...
Upcoming SlideShare
Loading in...5
×

Techtalk

277

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
277
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
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.
  • &lt;tr&gt; 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 &lt;tr&gt; tags at all. Using &lt;div&gt; instead of &lt;td&gt; is a stylistic choice, but I recommend it. By using a &lt;div&gt;, you keep your box model rules in one place rather than spreading them across multiple &lt;td&gt; tags. Also, you can save the &lt;td&gt; 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 &lt;blockquote&gt; 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>http://www.campaignmonitor.com/css/ </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 http://premailer.dialect.ca/ ) </li></ul><ul><li>Better mobile targeting </li></ul><ul><li>Better end-to-end customer email experience </li></ul>
    1. A particular slide catching your eye?

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

    ×