• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Techtalk
 

Techtalk

on

  • 450 views

 

Statistics

Views

Total Views
450
Views on SlideShare
426
Embed Views
24

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 24

https://wiki.hubspotcentral.com 20
http://jonathan-kim.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Techtalk Techtalk Presentation Transcript

    • Quirks in Email Design problems, solutions and hacksWednesday, January 18, 12
    • Problems • Lots of constantly changing variables • Your code is augmented or overridden • You re armed with only html and cssWednesday, January 18, 12
    • 65+ Email Clients Multiply the web-based clients by the number of major browsersWednesday, January 18, 12
    • CSS Support • border • border-collapse • color • table-layout (wtf?) • (most of the typography stuff) • http://www.campaignmonitor.com/css/Wednesday, January 18, 12
    • 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
    • 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
    • Wednesday, January 18, 12
    • Wednesday, January 18, 12
    • 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
    • The Basic Table WrapperWednesday, January 18, 12
    • 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
    • Email Hacks screw GoogleWednesday, January 18, 12
    • 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
    • Manipulating Content • Use simple CSS to detect the environment • Dynamically serve images by pointing your src attribute to a scriptWednesday, January 18, 12
    • 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
    • Hacks at HubSpotWednesday, January 18, 12
    • Tracking Pixel + Pretext Use alt text on the tracking pixel and put it after the opening <body> tagWednesday, January 18, 12
    • Internal Boilerplate • Mobile styles • Table structures • Pretext pixel + trackingWednesday, January 18, 12
    • Litmus-style TrackingWednesday, January 18, 12
    • Targeted CTAsWednesday, January 18, 12
    • Targeted CTA CodeWednesday, January 18, 12
    • 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