Designing HTML Emails

To design HTML emails, basically you will want to throw out everything I've taught you over the last 2 terms; and design HTML like its 1999. Just like there are different web browsers, there are different email clients. Most clients don't preload images any more, almost none execute any javascript, and most limit the CSS you can use. However, the most popular email client Outlook, specifically Outlook 2007 - which is used in most businesses - uses MS Words render engine to view HTML. Which means many of the new (last 5 to 8 years) of web technology, you cannot use reliably.

Things to "forget about":

Things to "remember":

How to design for Email

Determine the need of the email (spread info, sign up for information, make a purchase, etc). 99.999% of emails are not an end of communication, but a means to get the reader to do something.

Once that end goal is determined, you need to define the look, build the email, and set the link to the goal page so the reader can accomplish the goal.

Building the Email

Determine how many rows and columns you will need. Start to layout your table as such.

Using Photoshop to layout the design, then slice up the layout may not be a bad thing, but keep in mind, with most people not loading images by default, you don't want to rely on the images. Use text as much as possible, with actual images when you need it. Always use the alt text incase people can't get your email.

Using In Line Styles

Since styles may not be loaded, in-line styles is "allowable". An in-line style uses the style attribute of a tag as such:

<h2 style="font-size: 14px; margin: 5px 0; border-bottom: 2px solid #003366; color: #990000">
Example Yeilds</h2>

Example Yields

 

This makes it harder to do across multiple tags, but is the most consitant way to spread the information.

Note: a good practice is to have a link at the top "If you can't read this email click here" with click here being a link for people to view the email through their web browser.

 

Testing your Email

Email on Acid (EOA) is an online tool where you can upload your email, and it will show what it would look like in different email clients. It will also give you suggestions of what to change to make sure it is consistant.

You should also manually verify - just in case.

Landing Pages

 

Landing Pages should look like your email. They should use the same language, as well as the same style. This keeps the message consistant, and makes it more likely for the reader to follow through with the action.

Tools to send out the EMail

There are various ways you can send out the email it self.