Creating HTML Emails

Last Updated: 23 Oct 2023
|
Author: 111.225.149.107
Page locked

This page is currently locked for editing by another user. You have to wait until this user finishes editing or the lock expires.
Currently locked by: 13.59.136.170
Lock expires at: May 9, 2024 04:15 AM (61 min)
This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
= Creating HTML Emails - Tips & Tricks =

HTML emails are funny... most modern web browsers fully support standard XHMTL 1.0/CSS2.1 when displaying web pages. Email clients, such as Outlook and Entourage, even in their most recent versions, are not nearly so compliant. Furthermore, many web based email clients strip out a lot of markup before they display HTML emails, which means your carefully crafted design may be bastardized in any number of different ways.

Here are a number of tips & tricks that help get things through unmolested. These are current as of April 2010.
== Layout Techniques ==

 * **Use tables for layout. Lots of tables.** Table support seems to be pretty solid; support for positioned ''<div>''s less so. If you're doing something REALLY simple, you might be able to get away with a positioned ''<div>''.
 * If you're making a static width email, **make sure it isn't more than 600px wide.**
 * **Use inline styles, attached to specific tags.** External style sheets are a lost cause, and some web clients, [[http://www.gmail.com/|Gmail]] included, strip out some style declarations made with an inline style sheet (e.g. using the ''<style>'' tag). The annoying thing about this is that it means you have to repeat your styles over and over again, but it's better than not having your email show up properly. 
 * That means that if you're coloring your links (and who isn't?), you need to put an inline style on **EVERY** link. If you don't do this, Gmail will color your links the standard blue:<code html>
<a href="http://www.apple.com/" style="color:#fe8913">Apple Website</a>
</code>
 * **There's a tool called the [[http://premailer.dialect.ca/|Premailer]],** which lets you plug styles in via a stylesheet and then it will move them inline automatically. This is useful if you're producing a web version (you should!) and you don't want to put inline styles all over the place.
 * Here's **a list of inline styles that are pretty well supported**. For all the gory details, see the [[http://www.campaignmonitor.com/css/|Campaign Monitor EMail Client CSS Support Page]]. The short list:
   * background-color
   * border
   * padding
   * color
   * font
   * font-* (e.g. font-family, font-style, font-size, etc.)
   * letter-spacing
   * line-height
   * table-layout
   * text-* (e.g. text-align, text-decoration, text-indent, text-transform)
 * **Keep your emails pretty simple.** Most mail readers are going to have a hard time with anything complicated. If you look at most of the HTML emails you //get//, you'll see that a lot of them have a simple header, body content, and a footer with unsubscribe information. Not much in the way of fancy layout or graphics.
 * **It's generally best to keep messages on a white background.** Some mail readers strip out background colors on the body. If you //really// want to have a colored background, you can make a 'bodyImposter' ''div'' that sits right inside the body and has your background color:<code html>
<body style="margin:0;padding:0;">
<div id="BodyImposter" style="margin:0;padding:0;width:100%;color: #2c2c2c; background-color: #2c2c2c;">
	content goes here
</div>
</body>
</code>
 * **''Mailto:'' links** (e.g. ''<a href='mailto:bob@bobsmith.com'>Mail Bob Smith</a>'') **//do//** work in emails, but they'll open whatever the default mail client is on your recipient's machine. That can be a little disconcerting for users if they are, for example, reading your message in their [[http://www.gmail.com/|Gmail account]], click a ''mailto:'' link, and it opens their Outlook 2007 for work. Use them, but use them with caution.
 * **Use HTML character escape sequences**, such as ''&reg;'' for <html>&reg;</html>, instead of inserting the characters directly. Most email clients theoretically support UTF-8, allowing for direct insertion of characters like <html>&reg;</html>, but best to play it safe.

== Text Version ==
When doing the text version, please visit:

 * **Use ASCII**: Use only ASCII characters in your text email messages. This means replacing ''&reg;'' with ''(R)'', ''&copy;'' with ''(C)'', ''&trade;'' with ''(TM)'', etc.
 * Replace verbiage such as ''Click Here'' with ''Please Visit: {URL}''

== Using Images ==

It somewhat goes without saying these days, but host the images for your email on your website. Don't attach them to the email itself. Here are some tips for how to best host them:
 * **ALWAYS date-stamp the filename of every image.** For example, use '''header_072808.gif''' rather than '''header.gif'''. Otherwise, when people go to look at your email a year later and you've changed or moved the image, it will look funny.
 * Corollary: **NEVER, EVER move your images**. If you send an email referencing ''/images/foo.gif_081308.gif'', and then you decide to store all your images in an ''img'' folder (instead of ''images'') all those old emails will break.
 * If you're sending a lot of emails, **you might consider grouping all the images in an email folder** and then inside dated folders, rather than putting a date on each image: <code>
/emails/newsletter_030410/images/header.gif
/emails/newsletter_031510/images/header.gif
/emails/newsletter_041010/images/header.gif
</code>
 * **Make liberal use of ''width'' and ''height''**, particularly on images. Most mail clients don't download images by default, and if you don't assign a ''width'' and ''height'', they won't lay your message out properly until the user clicks 'download images' (which they may never do).
 * **Always use the ALT tag**, and make it descriptive. People may be more likely to click 'Download Images' in their email client if they see an ALT tag that looks interesting.
== JavaScript / Forms / Flash ==

Don't use any JS / Forms / Flash. Most mail clients block all rich media (e.g. flash) as well  JavaScript and form submissions.  Link to forms on your website, and just deal without JS & flash.

== Baseline Support (a.k.a. The Worst Email Clients) ==

As of August 2008, Gmail and Outlook 2007 (which uses the Word rendering engine) are the worst email clients. If you can get it to work in those, it will probably work most anywhere else without too many tweaks.

== Mail Client Specific Tricks ==

Your email may be read in any mail client, so you'll probably want to pay attention to all of these.
==== Yahoo Mail ====
 * The new version of [[http://mail.yahoo.com|Yahoo Mail]] screws up ''<p>'' spacing; you need to set<code html>
<style>
p {
	margin-bottom: 1em;
}
</style>
</code>
(Incidentally, Yahoo Mail does understand inline style sheets, which is why you can use one here even though the advice above says not to use them)
==== Outlook 2007 ====
 * In a stroke of pure stupidity, Microsoft decided to switch Outlook 2007 to using the rather broken Microsoft Word HTML rendering engine. The [[http://www.campaignmonitor.com/blog/archives/2007/01/the_truth_behind_the_outlook_2.html|reasoning behind this]] is that Outlook creates HTML email with the Word engine, and they want those emails to display the same way when someone gets them. Unfortunately, this breaks HTML emails for the rest of us.
 * The Word engine [[http://www.campaignmonitor.com/blog/archives/2007/01/microsoft_takes_email_design_b.html|doesn't support a lot of stuff]], including background images, background colors (in some cases) and padding and margins (in some cases). 
 * You'll definitely want to test your HTML emails in Outlook 2007, and make them look as good as you can. They'll probably never look as good as other clients.
Page locked

About Me

Recent Changes

Get In Touch

Follow
