A few layout ideas for HTML email that adapt to small screens and respond to breakpoints. It also includes a few tricks to a few HTML email gotchas in such as margins in Outlook, 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.
- Webmail: Hotmail, Gmail, Yahoo!, AOL
- Desktop Mac: Apple Mail, Thunderbird, Outlook Mail (OSX)
- 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
- Gmail strips out the
<style>
tag and displayed only inline styles. Since this disables media queries on small screens, Gmail displays a shrunk version of the desktop layout.
- 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.
If you think you can make this better, please Download, Fork, & Commit. I'd love your see your ideas and make this as solid as can be.