What Are The Drone Anti-jamming Systems Technology?
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
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
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
