Techtalk

477
-1

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
477
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Techtalk

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

×