The special challenge of designing and building HTML emails
You may be new to HTML, or you may have been born with a computer in your tiny hands; either way I’ve collected some tips and best practices for coding HTML emails. Whether you’re using Campaign Monitor, Constant Contact, MailChimp, or another email program, keep these standards in mind and you’ll be off to a good start at building clean, sturdy emails.
The (unofficial) constitution of the united coders of the world:
- The first rule is to forget everything you know about HTML for websites. Most of the cool features of modern web standards such as separating content from presentation do not work in the old school world of email.
- Keep the design simple. This may be a no brainer, but if you have voting power in what the design looks like- better yet, if you’re designing it yourself- simpler is always best. Plus it renders the most consistently across different email clients. Think one big header a simple one or two column body area and a footer.
- Set your email width to 600px. Much narrower and you don’t utilize the space well. Much wider and some email clients will force a horizontal scroll.
- Images should not contain important information. People may choose to receive the text-only version or may not have fast enough internet speed to load the images in their email. Either way, images will not always be seen and therefore should be secondary to the writing.
- There are certain elements that should always be present in your email. There should be an unsubscribe link (which is usually required if you’re using a email program such as Constant Contact or MailChimp), a link to view the email on a web page, and, if relevant, a link to your privacy policy.
What not to wear to dinner:
- Do not build your email with divs. Think like it’s 1995. Only tables are allowed at the… well, table.
- Multimedia. You can have text, inline CSS styling, and images – forget anything else. JavaScript = Junk Email.
- Borders. They just don’t work. If you simply must have a border, create extra rows and columns around your content.
- Keep in mind: Email services that are browser-based, like Gmail, Yahoo!Mail, Hotmail, etc., will strip out your DOCTYPE, BODY, and HEAD tags. You should still include them, but just don’t put any styling in them.
There is a controversy about whether or not to set widths and heights to images. (I can picture the debates now).
It’s worth 1,000 words:
- There is a controversy about whether or not to set widths and heights to images. (I can picture the debates now). The pro group believe that if you do, this keeps your layout consistent if images are turned off, and the anti group argue that setting them disrupts the flow of your email when images are turned off. Personally, I do set height and width to images because I believe it looks better when images are turned off.
- Avoid using background images. Not only are they usually pretty tacky, but they increase load time and don’t render well across some email clients. Stick to background colors instead.
- Give all images meaningful alt tags. This is what will show up if someone has images turned off. It’s also what screen readers scan.
- Stick to either JPGs or GIFs because not all email clients support PNGs.
- Images should use full image links (not relative urls) and should be hosted publicly online.
- Use a spacer.gif when creating space since some clients (Outlook) will not recognize empty table columns.
- Hotmail bug fix: On every image tag, simply add display:block, to ensure no extra padding is added to your images.
Get your style on:
- Use inline styles, not an external cascading style sheet.
- You can style your links. This means the default neon blue of links are not only unnecessary, they’re downright old-fashioned.
- Encode all characters. For example, instead of using the ©, use the ASCII code instead: ©. I use this very handy website for my conversions.
- Don’t Use Shorthand CSS. There is varying support for this between email clients and web apps. Some email clients, for example, won’t support 3-character hex codes for color (e.g. use #FFFFFF for white, not #FFF).
Testing, 1, 2, 3:
- Make sure to test in as many browsers as are available to you. This includes: Internet Explorer (multiple versions), Google Chrome, Mozilla Firefox and Safari.
- Sign up for all the major email clients to be sure your email looks good running the gamut. If you want to avoid the hassle you can sign up for a free account on DirectIQ which provides free testing. You can also pay to test by the email with MailChimp Inbox Inspector ($3 per email inspection). Other popular services out there include: EmailOnAcid, Litmus, and Campaign Monitor.
Rich Resources:
- You’ve got your beautiful code built and are ready to insert copy. Before you do, make sure to run it through this little guy so you don’t muck up your code.
- Working with an external CSS file? Convert it to inline styles.
- Find out what client supports what style element through this nicely laid out chart.
- Need help getting your HTML off the ground? HTML Boilerplate provides a good jumping off point.
- Before you send, check your code for bugs. I’ve used Premailer and HTML Tidy with good results.
Special thanks to:
Net.tutsplus.com, MailChimp.com, EmailDesignReview.com
