How many times have you coded an HTML email and it went wrong? How many times has your HTML email ended in spam just because of silly errors? Coding a HTML email is similar to putting together a web page, but there are some exceptions we need to follow for the best results.. Here are a few issues and solutions to keep in mind while making HTML emails.

Issue 1: Broken Images
· Always post images on a publicly available webserver.
· Use GIF or JPEG image formats.
· If there are gaps under images use the CSS code given below.
<img style=“display: block;” …
· Almost all email programs have images blocked by default. Unless the user enables images, the Image will be hidden.
· Size tag for images is necessary.
· Make sure you insert the
<img style=“border-style: none ;”
· Always use an image ALT tag incase the image does not load it will be useful.
· Use HTML ‘ALIGN’ tag instead of CSS float tag.
· Use images inside a table for better alignment.

Issue 2: Broken Fonts
· This problem occurs when the receiver’s computer does not have the font installed.
· Always use usual web safe fonts like Times New Roman, Arial etc.
· Do not use fonts tag in CSS before the copy. Instead, use an inline font tag.

Issue 3: Broken Graphics/Videos
· Try to avoid CSS where possible, using tables and HTML tags instead
· If CSS is necessary, use only inline CSS.
· Some stuff like JavaScript, flash have very limited support. Make sure to convey the message in a simple text format.

Issue 3: Email ending in Spam
· An email with too many images and very little text is more likely to end up in spam.
· Where images are necessary, always supply detailed Alt tags

Issue 4: Email not rendering properly
· Always follow a table format for structure, avoiding modern web design practises like CSS
· Do not code too wide emails. (keep a max-width of 600px)
· Always provide an “open in a browser” option.
· Concentrate on the body tag rather than the head tag.
· Last but not the least check your syntax twice. Check for any missing braces improper nesting etc.
· Do not count on default styles in Email programs to operate like modern browsers, always overwrite with inline HTML and styles where possible.

Issue 5: Table Problems
· Always add a border to table when testing. So that you can find where table errors occur.
· Set width in each cell as well as the table.
· Use container table to set background color.
· Do not include plain text in table cells.
· Use a table header and footer for extra clarity.

Testing
· Always test several times before you send
· Remember your clients use different browsers. So use all standard browsers like Chrome, Firefox, IE, Opera, Safari for testing
· If you are confused take a print out.
· Always separate the part, which is creating problem.
· Call your friend for cross checking
· Use various resources available online for testing

So in short always use inline CSS when necessary. Avoid fancy flash and JavaScript. Always use old school table tags for structure, rather than DIVs and CSS, and test test test before you send.