clone your own copy | download snapshot

Snapshots | iceberg

Inside this repository

Download raw (3.7 KB)

# Notes on making an html email

**First thing first : this is a shitty work to do, but I found it quite interesting in fact (I was still angry and disappointed at some points)**

I only did my tests on Gmail and Outlook, so things might be different with other clients

I say that because :
  - you can't expect to use full CCS3 possibilities
  - you can't expect to have your own fonts on every devices (even with `<links>`, `@import`, `@font-face` or `base64`)
  - you can't expect your design to work exactly the same on all plateforms (hardware & softwares)
  - it's better to design html email with `<table></table>` to avoid design changes
  - your CSS should be inline, but...
  - CSS online inliners are not trust worthy (as you will see)
  - If your *one* of your style property in an element is not good for him, Gmail robot will strip *all* styling for the current element. This extreme behaviour is not observed in Outlook
  - you will always need to have fallback solution for your styling

### Why using table ?
  Apparently it's the best way to have a design that stays well in multiple platforms. Knowing also that floats, transforms, absolute/relative positionning doesn't work well everywhere, `<table>` are the safest way to control how your email will look like, even if it is not the prettiest coding method in 2018...

#### Notes on tables
  - margins will not work everywhere, use paddings instead, but this is not a fully confirmed behaviour.
  - you can nest a child `<table>` inside the `<td>` of a parent `<table>` if you want to play it simple for specific layout (like two columns with differents sized lines), or to have centered content.
  - You can have `<td>` with regular `<div>` inside like you do for regular html pages

### Some strange things that happened to me

#### Svg & Png story
Gmail did not wanted .svg type images (Outlook had no problem with them). I had to use .png instead. But the thing is .png with transparency rendered blurry for some reason, putting a background color solved the problem. But I had some problem with simple white background, for some reason... Turns out that it might also be that my file wasn't big enough in resolution, but that's not sure either.
#### True black
For a strange reason, the text of my email where transformed from regular black to greyish color, on both Outlook & Gmail. `#000000;`, `#000;`, `rgb(0,0,0);` didn't work. The problem was solved by simply putting `color:'black';` manually on each `<div>` with text in it. Leaving empty font color to have the default black didn't work either.
#### The `color: #000001;` secret
Gmail tends to override the color of links if you set them with a `color:#000000;` / `"black"`. You can use a slightly not full black to avoid that, like `#000001;`. Possibly compatible with previous point.
#### Inliners not Gmail compatible
Online inliners like [campaign monitor]( and [Mailchimp]( one's do a half good job, you'll need to correct things by hand. For example when declaring a font this way : `font-family 'MyFont';` it will be inlined `style="font-family:"MyFont";"` So you have double quotes inside double quotes, And Gmail will remove everything. You should then, by hand change that to `style="font-family: 'Myfont';"`
#### Gmail is sensitive
You should *always* put spaces after ";" "," and ":". So from this : `"font-family:'Arial','Calibri';color:#000001;"` you should make it like that : `"font-family: 'Arial', 'Calibri'; color: #000001;"`
#### Gmail is *really* sensitive
You should *never* have spaces inside quotes. When declaring fonts, things like `'My Font'` will be stripped out by Gmail (and all styling with it, remember), but things like `'My-Font'` or `'MyFont'` work well.