One of the first projects I worked on here at Brad Miller Design was an HTML email. I had never actually created one so I was starting from scratch. With a little research I ended up with an HTML document that looked exactly how it should… in FireFox on a Mac. As far as I was concerned, it was a success. Until I tested it in Safari, Gmail, AOL and Internet Explorer on a Mac and PC. Each had it’s own issues it was creating!
I finally found the help I needed with an online article that listed the capabilities of different email clients and web browsers of which I was unaware even existed. So here is a list of tips, tricks and things to consider before making your next HTML newsletter:
• Use tables to create your HTML email.
• Include all your styles in the document beneath the Body tag, don’t create a separate .css file. Gmail, Hotmail and other email clients don’t recognize these separate files.
• Some people say to use a percentage for the width of the email. I’ve found that designing your HTML email for the smallest email client that the email will be sent to is your best bet. There seem to be fewer cross platform issues this way. I always design emails with a width between 480 and 600 pixels.
• Use heading styles (H1, H2, H3), P, or A tags for font styles only when necessary. Instead define general font styles in each individual cell with content.
• Gmail, as well as some other email clients, do not read background colors. So if you’re used to just going into the page properties box and setting the color, you will need to add another step by creating a table at 100% with another table nested within. This second table that is nested acts as a frame, or a DIV, where all your main content goes.
• Gmail and Outlook 2007 do not recognize DIVs but SPANS on the other hand can be read almost all the time.
• Test your HTML email in Internet Explorer and FireFox preferably on both a Mac and PC. Also, send test emails to different email clients to see how they are being read and tweak as needed.
Since then, I have successfully created many more HTML emails that have worked perfectly because I always follow these tips. I hope these insights are as helpful to you, as they were to me. Happy coding : )
