Tips On Developing HTML Emails and Email Templates
Monday, April 7th, 2008Categories: Web Development
RSS Comment Feed
Trackback
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. 
2006 Suzuki Hayabu 97 suzuki intruder battery (customized suzuki hayabu).
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
April 8th, 2008 at 1:18 pm
Good tips, Pat. I’ve been doing a regular email newsletter for a company for a few months now, and I’ve found that pure HTML is the most consistent choice. I’ve tried some inline CSS, but I’ve seen issues in Hotmail.
The hardest part is re-learning how to use a FONT tag - it’s been almost a decade since I’ve had to deal with one!
April 8th, 2008 at 2:00 pm
Cheers for the comment.
I’ve also noticed that Hotmail and Gmail don’t like CSS background and that table backgrounds are the best route.