Responsive Layouts for Email
A few layout ideas for HTML email that adapt to small screens and respond to breakpoints. It also includes workarounds for a few HTML email gotchas in such as dodgy box model support in Hotmail, auto-detected links in Yahoo!, and background images in Outlook.
This template is not meant to be used out of the box. Any email derived from this code should always be tested.
Demo
Tested In
- Webmail: Hotmail, Gmail, Yahoo!, AOL
- Desktop Mac: Apple Mail, Thunderbird, Outlook Mail
- Desktop Windows: Outlook (2007, 2010)
- iPhone (4, 4S, 5), iPod (Retina), iPad (1, 2, 3, Mini): iOS Mail, GMail
- Google Nexus (Android 4.3): Android Email, GMail
Known Issues
- Gmail strips out the
<style>tag and displays only inline styles. Since this disables media queries, Gmail displays a shrunk version of the desktop layout.
Tools and Resources
- Guide to CSS Support from Campaign Monitor.
- Responsive Email Design Guide from Campaign Monitor.
- Antwort from InterNations.
- HTML Email Boilerplate from Sean Powell.
- Bulletproof Email Background Images from Stig Morten Myre.
- Corporate Ipsum by Cameron Brister
- Placeholder Images by Brent Spore.
Download, Fork, Commit.
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.