Uploaded on

 

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
386
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
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