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 pre-load 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”:
- classes
- ids
- div based layout
- external style sheets
- background images
Things to “remember”:
- table based layouts
- in-line styles
- limited fonts
- images may be blocked by loading, so use “alt” attribute
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 in case 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 Yields</h2>
Example Yields
This makes it harder to do across multiple tags, but is the most consistent 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 consistent.
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 consistent, 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.
- Outlook – In a browser, select your page CTRL+A, then Copy it CTRL+C, then paste it into your email body.
- Mail Chimp – one of several emailing services out there which you can send emails from. Does list management, and you just upload your design, or use one of their templates.
- Constant Contact – another services to manage your list and send out emails.
Designing HTML Emails was originally found on Access 2 Learn
