Guidelines for developing HTML emails

Author:

mario

POST TAGS:

CATEGORIES: Web Development

DATE: Friday, April 1st, 2011 at 10:40 pm

Most developers will treat an email the same way as a web page but they are in fact two different things. If you want to be successful, and by successful I mean reducing to the most the amount of emails considered as SPAM by email clients, here are some rules that you need to follow. In this short series I will teach you how to develop and launch an email/newsletter campaign like the pro’s. Our goal is to have itdelivered to the inbox and correctly displayed on majority of email clients.

This first part of the series will talk about the DO’s and DON”Ts. Let’s get started:

DO’s and DON’Ts

Read the The CAN-SPAM Act, this will keep out of trouble. This is the most important thing to do, believe me!
Style your email/newsletter using only embeded CSS. Email clients do not support external CSS, better said they BLOCK the use of external CSS files to keep their own layout clean.
As an example look at the below references:Regular CSS “rel” in web pages inside the tag:
<head> <style type="text/css"> .style1 {font-size: 12px;color: #F00; font-family:Arial, Helvetica, sans-serif} </style> </head><body> <span class="style1">TEXT HERE</span> </body>

Inline CSS in email newsletters inside a tag:

<span style="font-size:12px; color:#F00; font-family:Arial, Helvetica, sans-serif">TEXT HERE</span>
Style every single paragraph and fonts. You have to define the same rules over and over.
If you have a link try to keep it standard… yes, underlined. The reason why is just because we want people to know there is a link and we have to go for the obvious stuff… but hey, this is important, in an email you MUST give it the tags even if they are links just to make sure that they are going to be displayed, remember that email clients have their own CSS and this style sheets get applied to email messages if the don’t have any rule like for instances color, decoration, elements position, etc.
Use <br /> instead of <p> as in internet explorer the <p> tag inserts more space than in other browser and this could lead to a broken layout.
Use spacer to force tables to display specific width and height attributes, you can achieve that by using 1pxX1px transparent gif images.
Use HTML tables to layout your design. Email clients have their own rules for DIV tags and will most likely mess up your design and elements positioning.
If you know Photoshop, fireworks or Image ready learn the proper way of slicing images to make them independent and place them in your design.
Keep the general size of the email below the 100K, the lower the better.
Don’t use words that can be potentially picked up by SPAM filters because your email/newsletter will end up being rejected by the server, or in the best case, going straight to the Junk Mail folder. Some of those words are the following:
Porn. adult, FREE, MLM, compare rates, money, cash, credit, investment, income, buy, casino, offer, earn, financial, freedom, access, grant, preview, quote, paid, pay, guaranteed, save, unlimited, urgent, viagra, cialis, drug, medicine, etc.
Don’t use very long subject lines, keep them under 56 characters or less inlcuding spaces. The reason behind that is that email clients support that much characters displayed, so if you want to make your main message readable remember that number. It is also important to mention that the subject line has to be catchy, this isthe first thing that the reader will see and it needs to caught their attention so they click it and read the rest of the message. ohhhh and by the way, the SPAM filters will evaluate this first before start reading the body, if this doesn’t pass there will be no need to evaluate the rest and the filter will consider your message as “NOT REQUESTED” and we know what happens after that.
Use the ALT and TITLE attributes for images, that way when images are disabled people will still know what the content is about, besides that it is good for accessibility for the visually impared.
If you want to add links to images DO NOT use image maps, use the regular <a href”"> technique. Most email clients have added support for image maps but this doesn’t mean that you can use it with no problem. Let’s say that I’ the recipient of your message and the offer is good enough that I want to share it with my friends, when I hit the “FORWARD” button most clients will drop the image maps, therefore the links will dissapear and the person who I’m sending the email to will not be able to visit your linked content. Another issue is that the links will show up if the images are enabled but if they are disabled most of the clients will disable the link as well. As an important note, have into account that Gmail doesn’t support image maps with or without images enabled; I don’t know you but most of the people I know have a Gmail account.
Try not to leave unnecessary spaces between tags, some browser will treat this as a real space and will break up your layout. This applies also to web pages.
DO NOT overload your email/newsletter with tons of images, even if the resulting email is below the 100K mentioned above. Your email has to have content also so SPAM Filters can “read” and azalize if the messages coming is “NOT SOLICITED” or not, in security we can describe this as “the most restricted rule applies” meaning that if the filter can’t read your content most likely is because it’s SPAM.
Use the style=”display:block” property for images, Hotmail will not display your images if you don’t do so.
Example:

<img src="images/arrow.gif" style="display:block" />
Publish your images online (on a web server) so that your email can have those images as reference.
Send your emails in “multipart-alternative” format. This means that the HTML content and the TEXT content are embedded into one and if the person who receives the message doesnt use a client that supports HTML the TEXT version will be shown instead.
DO NOT use Microsoft Word to create the plain text version. Word will add HTML characters that you don’t want in plain text, instead use a regular text editor like notepad which is already installed for free on WIndows.
Keep the layout less that 600px width. Most people will not even bother double clicking the email to see it full screen, therefore it needs to fit most preview panels.
DO NOT start a line with a period. I’ve read about a folk who after testing his email found out that there was some missing lines form his message, the reason is because clients take “.” as the end of the line and will delete anything after that. QUICK EXAMPLE:
... eveything started here!
DO NOT use JavaScript as this will be slashed from the email by the client. Same thing with Flash.
Open email accounts with different clients and run tests before launching the email/newsletter. By that I mean, Hotmail, Gmail, Yahoo, Eudora, AOL, Comcast, Apple Mail, MobileME, Outlook, Outlook 2003, etc. Also have in mind that an email client will not perform the same in all browsers so you actually need to open the same email account (say Gmail) to view the same message in IE6, IE7, IE8, Firefox, Safari, etc., and remember to test it after forwarding it too. To help you out a bit you can use the following tool to have multiple Internet Explorers on your computer:
http://tredosoft.com/Multiple_IE
This is not really the same thing as having the actual installation of the veresion but it will at least simulate the environment for you to test it.
Validate your design using an HTML validator and debug it in case it reports problems. Use the best one at the W3C website.
Publish your email/newsletter on a web server and link to it from your email, then at the top of the email put something like “If you can’t see graphics click here” and they will be able to see the contents if their client restricts it.

I will keep adding more to the above list in the future as day to day things change but I believe I covered the most important ones. If you think I’m missing something in this post please leave a reply and add it. Please keep visiting to read the other parts of the series!