A few responsive email patterns that go a long way when combined. Each code block can be used and reused to assemble emails.
Between desktop, mobile, and Outlook, HTML email is a three-headed dog from hell.
This is Responsive Email XX's successor.
###template-default.html
- Forces columns into rows
- Uses fluid images
- Includes two breakpoints
- Works most everywhere for desktop
- Relies on media queries for narrow screens
###template-fluid.html
- Works everywhere
- Fluid layout using
max-widthto shrink email's width - Fixed, wide layout for Outlook and Lotus 8
- Guide to CSS Support from Campaign Monitor.
- HTML Email Boilerplate from Sean Powell.
- Bulletproof Email Background Images from Stig Morten Myre.
- Image-Less Buttons from Alex Ilhan.
- Placeholder Images by Brent Spore.
- Responsive HTML Emails: a Different Strategy by Fog Creek.
If you can make this better, please download, fork, and submit a pull request. I'd love to work on this with a few folks and get it as solid as can be.