Html Email Cheat Sheet

From WikiOD

Here is the cheatsheat of Html Email and basic guide on how to use Html Email

Properties to avoid[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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

Responsive[edit | edit source]

<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[edit | edit source]

{: .-one-column}

Credit:rstacruz