My Conclusion on Best Practice HTML for eMail Marketing Campaigns

I have been asked to come up with a new twist on the banner ad - one with a real HTML text input box that a user can type his/her phone number into and a button that, once clicked, will call a SIP softswitch that will in turn ring both the advertiser's number and the customer's.

This was all well and good until I was asked if I could provide the same functionality as the banner ad, only as something that can be emailed.

Having vehemently avoided all advertising-related WebDev work for the past 12+ years, I assumed this would be an easy task and we could just send out the same HTML+CSS+Javascript that I had already coded up. Well, I was wrong.

Here are my conclusions as to the best practices for writing HTML for email campaings, such that it has the largest reach and covers the largest number of users' email clients:

1. Create your own container DIV into which all content for your email exists. Don't count on the BODY tag existing or having any particular settings.


2. Avoid designs that require positioning (ie no position:absolute; top:20px; left:20px; etc)


3. Do not use background images - neither CSS (background-image) or HTML-based (bgImage).


4. Use IMAGE tags, however, not to convey anything important


5. Use ALT tags on every image.


6. Always add HEIGHT and WIDTH to every image


7. Design for images being turned off. Over 50% of today's email clientys have images turned off.


8. Add a tag at the top of your email. "Having trouble reading this email? click here.


9. Use in-line styles. Do not make use of the <style> tag.


10. Message window should be 570px or less wide


11. Design for the preview pane - make sure most of the message gets acrossin the top 300px of the email. This is the approximate height of the horizontal preview pane in most email clients.
    
    

I will try to post what I end up with as the final markup when I get finished with it.

- Shannon Norrell