HTML Emails

HTML Emails.md

Properties to avoid

Property	Where
position	(Outlook, Gmail, Yahoo)
display	(Outlook, Gmail)
float	(Outlook)
---	---
height	(Outlook)
width in p/div	(Outlook)
padding in p/div	(Outlook)
background	(Outlook, Gmail)
min-width	(Outlook)
max-width	(Outlook)
---	---
opacity	(Outlook, Gmail, Yahoo)
box-shadow	(Outlook, Gmail, Yahoo)
---	---
rgba()	(Outlook)
data-uri	(all webmail)

Selectors to avoid

| E[attr] | (Outlook, Gmail) | | E:nth-child(n) | (Outlook, Gmail) | | ::before and ::after | (Outlook, Yahoo, Gmail) | | E F | (Gmail) | | E + F, E > F etc | (Outlook, Gmail) |

Inline your CSS as much as possible.

Basic layout

<table cellpadding="0" cellspacing="0">
  <tr>
    <td width="auto"></td>
    <td width="600" background="#ffffff">
      ···
    </td>
    <td width="auto"></td>
  </tr>
</table>

Responsive

<style>
@media only screen and (max-device-width: 480px)
</style>

<style> is supported in the head and body by everything except Gmail. Only use them for responsive styles.

References

• CSS support matrix campaignmonitor.com