Download raw (1.7 KB)

# Notes on making an html email

First thing first : this is a shitty work to do.

I say that because :
  - you can't expect to use full css3 possibilities
  - you can't expect to have your own fonts
  - 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>```
  - your CSS should be inline

## Why using table ?
  Apparently it's the best way to have a design that stay well in multiple platforms. Knowing also that floats, transforms, absolute/relative positionning doesn't work well every where. Table are the safest way to control what your email will look like, even tho it's not the easiest coding method in 2018.

## Notes on tables
  - margins will not work, use padding in your ```<td>``` to position your elements
  - you can nest ```<table>``` inside ```<td>``` of another ```<table>``` if you want to play it hardcore...
  - or you can have ```<td>``` with regular ```<div>``` inside

## Some strange things that happened to me

### Svg & Png stories
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 resolved the problem. But I had some problem with simple white background, for some reason...

### 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.