Skip to content

A few layout ideas for HTML email that adapt to small screens and respond to breakpoints.

License

Notifications You must be signed in to change notification settings

joyouscob/Responsive-Email-XX

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

A few layout ideas for HTML email that adapt to small screens and respond to breakpoints.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published