The following rules assume you are familiar with HTML code and how to create a web page.
- If the email is for your business, you must comply with Federal Trade Commission’s CAN-SPAM guidelines.
- Aim for the lowest common denominator. There are more programs and apps for a person to read their email than there are web browsers. If you try to make an email using all the techniques that would make it look great in a browser, it won’t work in the email client.
- Use tables for your layout. If you are building a web page, then div tags are the way to go, but div tags are not rendered correctly in many email clients. Stick to tables.
- No CSS (Cascading Style Sheets). Styling must be defined as an attribute for the tag you are styling.
For example: <a href=”http://yourwebserver.tld” style=”color: #009900; weight: bold;”>
Trying to use classes and linking to a CSS file on a webserver or defining styles with the <style> tags will be filtered out by Gmail. - No background images. Background images will be filtered out by Gmail. Background colors will still work. Use both the bgcolor and style attributes to define the background color of your <table> and <td> cells.
Ex: This will give you a table with a white background, but the first row will be light blue. The background of the second <td> cell is not defined and will inherit the color setting of the table.<table width=”600” bgcolor=”#FFFFFF” style=”background-color:#FFFFFF”> <tr> <td bgcolor=”#BFCFFF” style=”background-color:#BFCFFF”> [content here]… </td> </tr> <tr> <td> [content here]… </td> </tr> </table>
- Do not attach images since that may add to your readers’ storage space and slow down the time for them to fully open your email. Upload images to a webserver. Then make sure in your code that you are referencing them using the full path like so:
<img src=”http://yourwebserver.tld/images/your-image.jpg” />
and not like this:
<img src=”/images/your-image.jpg” />
Make sure your web server allows “hotlinking”.
- No image maps. Does anyone use image maps anymore? They are handy if you just want part(s) of your image to link to your site. They won’t work in emails. Instead, you will need to slice up your image and load each slice into a <td> cell in a table.
- Use style=”line-height:0;” in <tr> tags to close gaps between images. You need to this if your are using sliced images!
<tr style=”line-height:0;” >
- No weird fonts. Stick to what you know is common to all users and remember you will need to define which font to use using a style attribute. Use any of the following for best results.
style=”font-family: Arial, Helvetica, san-serif;”
style=”font-family: Times New Roman, times, serif;”
style=”font-family: Courier New, Courier, monospace;”If you must use a different font, make it as a graphic, but I would reserve it for titles or header text and nothing too long like a paragraph. - Your entire HTML code should begin with <table> and end with </table>. No body or head tags needed. They will be stripped out anyway by Gmail.
- No scripting. Javascript or otherwise.
- Avoid the words “Click here”. Spam filters pick up on that phrase very quickly and increases the chance your email will wind up in a spam folder.
- Test your email before sending it out. Send it to yourself first. You can also set up a free account at Litmus.com to test how your email will look in Gmail and Outlook 2003 which are good lowest common denominator tests. To test more will require a subscription to their services.
Other suggestions:
- Be sure use to use the alt attribute in your <image> tags. The majority of email clients have image loading turned off by default, so they will see whatever is in the alt attribute instead.
Example:<img src=”http://yourwebsite.tld/images/thisweekonly.jpg” alt=”This Week Only!” width=”100” height=”50” />
- Just like on regular web pages, define width and height where possible. This will create an empty space if the images are not loaded and can create a feeling of “I’m missing out on something if I don’t load the images” in the reader.
- Use a third party service like Aweber.com or MailChimp.com to send out your email. Ultimately it is not a free solution, but you don’t want to deal with email bounces and trying to get your email address off of blacklists. They also automatically add everything you need to be CAN-SPAM Act compliant to the bottom of your email.