Keana Lynch

How to create HTML emails

Est. Reading Time: 5 minutes

An HTML email is just a basic web page but even if you are able to code complex websites, coding an HTML email is not an easy task and can be extremely frustrating. I have put together a list of things to keep in consideration when designing your email.

Keep it simple

You have to remember this is just an email. Do not try to embed an entire website into an email. Keeping it simple and staying focused on the message will make your email more appealing to the recipients and it will load smoother across all providers.

99% of CSS won’t work

Most browser based email services will strip out all CSS in your HTML that could potentially override the CSS on the rest of their pages. So that means no external styles sheets or embedded style sheets. Use very basic inline CSS (ex. <p style=”background-color:# 000; color:#FFF”>) and be prepared for even that not to work in all web mail services.  Also most web mail services ignore background images. So it is best to only use background colors.  The safest way to add styling is to use plain-old HTML attributes. (ex. <body bgcolor=”#FFF”>). Below is a list of inline styles that you can use and the email service providers they are compatible with.

Code Old School

When building your email template you have to code old school. Jump back to 1999. Remember all those tables, tr’s and td’s? Well get ready because when building an HTML email that is exactly what you will be doing. The code should be simple and hand coded rather than in a WYSIWYG editor. This ensures the code is clean and only includes supported elements. Use table layouts. No nesting or merging cells because layouts with positioning don’t work.  Use basic HTML attributes and font tags.  Test your code often in different mail services to see that everything is working consistently.

Think small!

This is only an email so keep it small and simple.  An email template should always be no larger than 650px wide. Most people view messages in their preview panes, which are narrow and small.

Images should be limited

Only use the images that you have to. Images are fine as long as there is also text within the email. All images should use absolute paths and be hosted on your server. This makes it possible for the images to load quicker and not be attachments in the email. Having to many images will cause your email to be marked as spam and never make it to the recipient’s inbox. Some email programs turn off images by default. So if your email is one giant image, the recipient will have to check a box to turn on images before they even see your email. Many won’t take the time to do this so make sure your emails are designed to still get the same message across in text if the images are never turned on. You can also provide a link at the top of your email to the HTML page on your site of the email. This will allow the recipient to view the full email if it is not displayed properly in their mail service.

Webmail services are tricky

Email services that are browser based (Gmail, Yahoo!Mail, Hotmail, etc.) are tricky. They will strip out all your DOCTYPE, BODY and HEAD tags. Anything you normally code inside those tags will be gone so plan for that when building your template.  There are many other inconsistencies that you will discover while testing in theses browser based services. See chart above as a css reference. If you can, try and code using html only.

Plain Text Format

It may seem obsolete but many people still prefer to view emails in plain text format instead of HTML emails or there email is unable to open HTML emails. Spam filters will also penalize you for not including a plain-text version of your email.  So always make sure you take the time to create a plain text format of your email.

Don’t forget to Test!!!

Just like after any other development process, TEST! Start out by setting up as many webmail test addresses you can (Gmail, Yahoo!Mail, Hotmail etc.) and install several desktop email programs (Outlook, Apple Mail etc.) for testing. Make sure you thoroughly test the email in as many sources as possible. Most likely the email will look slightly different in each one and there may be some issues you will have to fix. The key is to design with clean simple code so you have few testing errors.