Tips On Developing HTML Emails and Email Templates

UPDATE: I’ve published Part 2 on developing HTML emails and email templates.
HTML emails are a whole different ballpark than HTML websites. Your approach will be different and your design will be different. For now, I’ll discuss more about the development part of it, then the design part of it.

• Your design should be no larger then 620 pixels. If possible, try using a fluid based layout. It should be small enough to be accommodated in Outlook’s preview window and on online email services that already have a left navigation and right navigation using screen real-estate.
• Table-based designs are supported better then CSS-based designs. I have come across numerous issues for online email services when it comes to displaying DIV containers.
• Set Your Background Color to White. This isn’t an ultra big issue, but some email services will change your background color to white regardless if you want it to or not. This can possibly throw off your design.
• Make Sure It Validates. Different applications will interpret the code differently. If you make sure it validates, you will make sure less problems happen.
• CSS Styles should be in-line. Because it isn’t reliable to use a stylesheet, all your CSS styles should be done inline (in the style=”" attribute).
• Test, test, test. Test popular email services like Yahoo, Gmail, Hotmail and Outlook. You should make sure your developed newsletter displays adequately in each of these applications.
• Don’t be afraid of being repetitive. Sometimes, you might just have to set the font size in the TD tag and in the P tag to get it to display correctly in the email services mentioned above.
• Font tags, although deprecated, do some in handy. In some occassions, you’ll notice that no amount of CSS styles will change something. Don’t feel bad about using font tags in HTML emails.

That’s all for now, hope that helps.

Related Posts

• Tips On Developing HTML Emails and Email Templates (Part 2)
• 7 Tips For Getting Your Emails Through Spam Filters
• Even More Tips On Getting Those First Visits To Your Website