HTML EMail Coding: How to create an HTML email from scratch (Tricks and Tips) – Part 1
You know, some time ago, one of my clients asked me to make an email ad. “No problem” – I said, and made an HTML page with CSS, DIV and with validated XHTML 1.0 code. Then I put the whole thing into Outlook Express, emailed it to myself and got shocked! It looked nothing like the HTML page I just made.
I cruised the web for solutions and suggestions and I managed to find really good information regarding it; however, I could not find a detailed guide for it.
I cannot put all I’ve learned in 1 post, since it takes too much time, and I’ve been trying to do it and notice that it only slowed down my postings. So I’ll start little by little giving you some idea about how to code and HTML email.
So, let’s create an HTML email from scratch. There is a whole new HTML coding way for that.
So, now, here’s how it should be done:
1. Head Section
Just as a regular HTML page. You can change it to XHTML 1.0 validation and keywords and description <meta> if you’d like.
<!--DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Your Title</title> </head>
2. Body Section – not like a regular HTML or XHTML.
– Don’t use DIVs – some EMail clients just erase them, use good old TABLES.
– Do not set a background image, it will not work either.
– Use <bgcolor> for specifying the background color instead of anything else. For example, it should be “bgcolor=”#000000” rather than CSS styling. And do not shorten the colors like this: #000. Instead use the full color code #000000.
– Do not use email width larger than 640px if you can. Notice how Yahoo or Hotmail shrink the email field by putting their menu on the left and advertising on the right.
<body> <!-- Wrapper --> <table cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF" width="640" align="center"> <tr> <td>Sample text</td> </tr> </table> <!-- Wrapper ends --> </body> </html>