Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Notes for dealing with emails
GENERAL:
- every element must be in a html tag with inline styles
- complex/responsive designs will break
- tables are best as they are supported and handle fluid layout across almost all email clients
- images and containers require html style attrs align="", width="", and height="" to keep design
- use padding instead of margin as some clients ignore margins
Outlook 2007/2013
html tags override sizes, i.e. if you want a 48px <h6> it won't work, so use tags for sizing
user's security settings will define whether or not images load
<br> is ignored
Gmail
!important must be added to tags, and <style> containers are removed
IOS
various IOS will resize emails, use meta tags to prevent this
<meta content="width=device-width" name="viewport"/>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment