Recomendados
Más contenido relacionado
Similar a Techtalk
Similar a Techtalk (20)
Último
Último (20)
Techtalk
- 1. Quirks in Email Design problems, solutions and hacks Wednesday, January 18, 12
- 2. Problems • Lots of constantly changing variables • Your code is augmented or overridden • You re armed with only html and css Wednesday, January 18, 12
- 3. 65+ Email Clients Multiply the web-based clients by the number of major browsers Wednesday, January 18, 12
- 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. 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. 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 audience Wednesday, January 18, 12
- 7. Wednesday, January 18, 12
- 8. Wednesday, January 18, 12
- 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. The Basic Table Wrapper Wednesday, January 18, 12
- 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 rules Wednesday, January 18, 12
- 12. Email Hacks screw Google Wednesday, January 18, 12
- 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. Manipulating Content • Use simple CSS to detect the environment • Dynamically serve images by pointing your src attribute to a script Wednesday, January 18, 12
- 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> tags Wednesday, January 18, 12
- 16. Hacks at HubSpot Wednesday, January 18, 12
- 17. Tracking Pixel + Pretext Use alt text on the tracking pixel and put it after the opening <body> tag Wednesday, January 18, 12
- 18. Internal Boilerplate • Mobile styles • Table structures • Pretext pixel + tracking Wednesday, January 18, 12
- 19. Litmus-style Tracking Wednesday, January 18, 12
- 20. Targeted CTAs Wednesday, January 18, 12
- 21. Targeted CTA Code Wednesday, January 18, 12
- 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 experience Wednesday, January 18, 12