Guide to writing HTML email

I’m involved in a project that required me to construct html for email and I have got to say that it’s a different animal. When designing for the web – I have to worry about Internet Explorer (v.6 especially!), Chrome, Safari and Firefox. On designing HTML email, there is way more to worry about – First of all, you have to make sure you aren’t blacklisted or your email will never even reach an eyeball — it will just go straight to the junk folder and deleted. Secondly, you have to create 2 version – a plain text version for email clients that do not support HTML and the HTML version which contains the fancy stuff. To do this, your email has to have the correct document type as laid out here:

Content-Type: multipart/alternative;

Content-Type: text/plain;
Content-Transfer-Encoding: 8bit

Insert your plain text message here

Content-Type: text/html;
Content-Transfer-Encoding: quoted-printable

Insert your html email message here

Insert the last boundary below to end the message.


In writing the html email itself – it is a completely different science, like what I mentioned earlier. Some things you should do or pay attention to are the ffg.:

  • Design in tables. Most of your CSS would NOT work.
  • Use inline styling. If you must use CSS, it should be inline.
  • Outlook doesn’t display background images.
  • When tiling images in a table – Gmail automatically adds a 1px margin. You need to put { display:block; } on the inline style for the image and a valign=”bottom” or { vertical-align:bottom; } on the cell.
  • Width should not be more than 620px.
  • Test, test and test — make sure your email isn’t ending up in the spam or junk folder.
  • Use this to check your spam score –
  • Update: Don’t use h1,h2,h3 tags. As it inherits default styling in Hotmail and seems to disregard inline styling for color.

Leave a Reply