A few layout ideas for HTML email that adapt to small screens and respond to breakpoints.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
LICENSE
README.md
bg-email.jpg
gitignore
master.html

README.md

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

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.