Tips for Creating Your First HTML Email

Creating your first email newsletter or invitation can be daunting, especially after you do some reading and hear about how easily the design can come appart in email clients (especially older clients). However, there are a few rules of thumb that can help you get by. Below is a short list of things to remember when putting together an HTML email. There are also a lot of recourses online to help you with this – have a look at MailChimp’s resource section for some solid information.

Here are w few things to remember:

• Keep your table structure as simple as possible.
• Try to avoid using ‘margin’ to create space between images. Rather cut out an image that is the full width and hieght of the cell you want it in, even if it means adding in ‘white space’ around the image. Trying to add an image into the centre of a cell then adding padding around it to separate it from the cell edges can cause issues in some email readers.
• Your email table should be wrapped in one large table (1 row & 1 column). Set the wrapper width to 99% for webmail.
• Create the table structure first, before adding in any text/images.
• Background images can be stripped out of some email programs. If you use a background image, include a background colour in the cell attributes as well in case the bg image doesn’t appear.
• If using multiple columns in some rows, remember to use the colspan tag to ensure the rows that use fewer columns don’t mess up your layout.
• Keep all your CSS inline – in other words, don’t link your CSS to a separate file. Keep it embedded in the lines of code you want it to affect.
• Set any links to target=”_blank”. This is for webmail – no links should be opened in the email itself.
• Try avoid “span” or “div” tags because older email clients don’t recognise them.
• If you want to use a break tag, use the old style <br> not the self-closing XML one: <br />.
• Set the paragraph style for each <p> tag. Older email clients may not recognise global styles for child elements. Do the same for header tags.
• Older email clients tend to ignore the “margin” tag – use “padding” instead.
• Test your email on multiple platforms if possible – have a look at Adobe Browser Labs, Campaign Monitor, or MailChimp. These websites also have tons of useful information when it comes to designing your first email campaign.
• Remember to include an unsubscribe button and a link to view the web version of the email.
• Include a text-only version of your email. Bear in mind that text emails can only be about 60 characters wide, so keep it narrow. Also, links need to be typed out instead of embedded in “href” tags.
• Remember, GMail and some other web-based email clients will disable images by default – this can only be changed on the recipient’s side, so try use as few images as possible and get creative with background colours.