Thursday, June 29, 2006

HTML design for email: throw out everything you were taught

We recently spent some time redesigning our email newsletter, Conscious Clicks, to match the look and feel of our current website. One of the hardest things about designing email is that you aren't just worried about how it will display in all of the major browsers (Internet Explorer, Firefox and Safari) like normal web page design, but you also have to think about all of the services and software that people use to view their email. Of course, there is more to it than that.

Over the last couple of years, web design standards have been gaining more and more acceptance, and web designers have been taught to abandon HTML tables and embrace CSS and XHTML (check out the W3C and W3Schools for more on web standards). Well, when it comes to designing for email, throw out everything you were taught. While your email using CSS styles may display correctly in Outlook, chances are that GMail has completely stripped all of those styles from your email leaving it a big mess. The best way to design for email is to go back to using simple, well formatted HTML tables, and make sure to TEST, TEST, TEST. Of course, where to test really depends on who your audience is, but here is a good list to consider:

Email software: Outlook, Outlook Express, Thunderbird, Apple Mail, Entourage, and Lotus Notes
Web-based email: Hotmail, Yahoo Mail, Gmail, AOL/AIM Mail, SquirrelMail
*You may even want to test your email on cell phones and other portable devices.

So what's a web designer to do? Well, one of the easier ways to get around this problem is to use a template from your email marketing service of choice (e.g. Constant Contact, which we use for our newsletter, but with our own custom design). For all of the other designers looking to create your own custom newsletter, I encourage you to take a look at this very thorough and up-to-date article on How to Code HTML Email Newsletters. This article comes complete with a number of links to even more great resources.

Want to check out our newly redesigned email newsletter? Sign up for Conscious Clicks at the form in the top-left of this page.

Posted by Nick Fassler
Permanent link -  1 Comments -

Post a Comment