bsdstrategy/bsd-email-baseline — pull request #2 by douglasback (2012-01-27 17:16:27+00:00)
Title: Make responsive.html and responsive-inline.html

A first stab at a "responsive email boilerplate" —

responsive.html contains two <style> blocks: one in the head that contains a media query with mobile styles (breakpoint is max-width: 600px, the width of the table), and one in the body that contains the styles for the remainder of the email.

Instead of <div> elements, <td> elements with classes are assigned styles — Outlook 2007/2010 does not support padding/margin on <div> elements.

This is designed to be used with Premailer, which takes the embedded stylesheets and converts them into inline styles throughout the email. Prior to processing with Premailer, you should temporarily remove the media query styles in the <head>, as Premailer will ignore the media query (this winds up applying the media query styles throughout).

responsive-inline.html contains a version of responsive.html with inlined CSS.

There is also a [tracking document](https://docs.google.com/a/bluestatedigital.com/spreadsheet/ccc?key=0AmIqEN9iwo84dEJJOUUyZ1RUWDZoSXl0R3FHNXkxc3c) to list client/device support throughout the process.