html-email.md

   1 ---
   2 title: HTML emails
   3 category: HTML
   4 layout: 2017/sheet
   5 updated: 2017-08-30
   6 ---
   7
   8 ### Properties to avoid
   9
  10 | Property             | Where                   |
  11 | ---                  | ---                     |
  12 | `position`           | (Outlook, Gmail, Yahoo) |
  13 | `display`            | (Outlook, Gmail)        |
  14 | `float`              | (Outlook)               |
  15 | ---                  | ---                     |
  16 | `height`             | (Outlook)               |
  17 | `width` _in p/div_   | (Outlook)               |
  18 | `padding` _in p/div_ | (Outlook)               |
  19 | `background`         | (Outlook, Gmail)        |
  20 | `min-width`          | (Outlook)               |
  21 | `max-width`          | (Outlook)               |
  22 | ---                  | ---                     |
  23 | `opacity`            | (Outlook, Gmail, Yahoo) |
  24 | `box-shadow`         | (Outlook, Gmail, Yahoo) |
  25 | ---                  | ---                     |
  26 | `rgba()`             | (Outlook)               |
  27 | `data-uri`           | (all webmail)           |
  28
  29 ### Selectors to avoid
  30
  31 | `E[attr]`                  | (Outlook, Gmail)        |
  32 | `E:nth-child(n)`           | (Outlook, Gmail)        |
  33 | `::before` _and_ `::after` | (Outlook, Yahoo, Gmail) |
  34 | `E F`                      | (Gmail)                 |
  35 | `E + F`, `E > F` _etc_     | (Outlook, Gmail)        |
  36
  37 Inline your CSS as much as possible.
  38
  39 ### Basic layout
  40
  41 ```html
  42 <table cellpadding="0" cellspacing="0" role="presentation">
  43   <tr>
  44     <td width="auto"></td>
  45     <td width="600" background="#ffffff">
  46       ···
  47     </td>
  48     <td width="auto"></td>
  49   </tr>
  50 </table>
  51 ```
  52
  53 ### Responsive
  54
  55 ```html
  56 <style>
  57 @media only screen and (max-device-width: 480px)
  58 </style>
  59 ```
  60
  61 `<style>` is supported in the head and body by everything except Gmail. Only use them for responsive styles.
  62
  63 ## References
  64 {: .-one-column}
  65
  66 - [CSS support matrix](https://www.campaignmonitor.com/css/) _campaignmonitor.com_