Your SlideShare is downloading. ×

Techtalk

460

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
460
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Quirks in Email Design problems, solutions and hacksWednesday, January 18, 12
  • 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. 65+ Email Clients Multiply the web-based clients by the number of major browsersWednesday, 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 audienceWednesday, 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 WrapperWednesday, 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 rulesWednesday, January 18, 12
  • 12. Email Hacks screw GoogleWednesday, 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 scriptWednesday, 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> tagsWednesday, January 18, 12
  • 16. Hacks at HubSpotWednesday, January 18, 12
  • 17. Tracking Pixel + Pretext Use alt text on the tracking pixel and put it after the opening <body> tagWednesday, January 18, 12
  • 18. Internal Boilerplate • Mobile styles • Table structures • Pretext pixel + trackingWednesday, January 18, 12
  • 19. Litmus-style TrackingWednesday, January 18, 12
  • 20. Targeted CTAsWednesday, January 18, 12
  • 21. Targeted CTA CodeWednesday, 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 experienceWednesday, January 18, 12

×