GPORT.NL

Creating An Email Newsletter

Lately I’ve been working on email newsletters a lot for clients, and although there are plenty of good resources on this subject, I thought I’d summarize things for you guys.

Email newsletters are a populair and effective way for company’s to reach their clients.
Of course, all this emails have to be designed, and coded. That’s where we come in.

But how to this the proper way? Most email clients respond differently to the code that’s is valid on the web today, and to make it even harder there are services like hotmail and gmail that display your emails in a browser. So, we have got to make sure that we test. Testing is the key here, next to a number of guidelines that I will point out later in this article.

For testing, make a virtual machine, and install all the mainstream email clients on it. This way, you’ll keep your host PC clean!
Use VirtualBox to make a VM, and use the list below to download the email clients.

Also, do not forget to create a wide variety of email adresses, with all the mayor players like gmail, hotmail, yahoo etc.

All right, now to the practical bit of this article: the guidelines.

Base rule

As designers, you probably are familiar with XHTML and CSS. For email coding I can say only one thing; remember the syntax, forget the aesthetics.
In email design you can’t work like you are used to.

Inline Styles

Email clients do not accept external stylesheets, in stead you have to use inline styles.

Bad:

&lt;link href=&quot;http://www.gport.nl/public/css/base.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;

Also bad:

&lt;style&gt;
a {

font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
font-size: 14px;
color: #5f1d54;

}
&lt;/style&gt;

Good:

&lt;a style=&quot;font-family: Verdana, Geneva, sans-serif; font-weight: bold; font-size: 14px; color: #5f1d54;&quot; href=&quot;http://www.google.com&quot;&gt;Text here&lt;/a&gt;

JavaScript

This is a very simple, but important not to break rule. DO NOT use JavaScript. It will make sure your emails will not arrive at their desitantion, and they will be marked as spam.
Also, most email clients do not know how to execute JavaScript code, and it will break up your beautifully crafted design.

Use tables

Use tables for your email design, and forget about div’s. Tables are widely supported throughout email clients, and div’s are not.

Also, forget about everything around your tables. Do not use the body tag with a background attribute applied to it, but instead add an overlapping table that contains the background.

Make sure that you declare width, cellpadding, and cellspacing for all tables and table cells. This makes sure that your tables look the same in every email client.

Bad:

&lt;table&gt;
Content Here
&lt;table&gt;

Good:

&lt;table width=&quot;550&quot; height=&quot;29&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
Content Here
&lt;/table&gt;

Do not use background images

A lot of email clients, including Gmail, block background images, because they can contain malicious code. So use this as little as possible.
If you are still determined to use a background image, make sure use the background attribute, as well as an inline style with the background-image property. This makes sure the image will display in most clients. If you use this technique, do not forget to add the background-color as well in your inline style, so that if images are not displayed, it still strokes with the rest of your layout.
In this case, also make sure that you seperate the visual and message part. Use the image for the visual, and plain text for your message. This way you can still present a fancy image to most of your users, and the people with no support for this will still read the message.

Bad:

&lt;table style=&quot;background-image: url('http://www.url.com/img.jpg')&quot;&gt;
No content here, content is in image
&lt;/table&gt;

Good:

&lt;table width=&quot;550&quot; height=&quot;29&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; bgcolor=&quot;#EAEA&quot; style=&quot;background-color: #EAEA;&quot;&gt;
Content Here
&lt;/table&gt;

Alternative:

&lt;table width=&quot;550&quot; height=&quot;29&quot; border&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; background=&quot;http://www.url.com/img.jpg&quot; style=&quot;background-image: url('http://www.url.com/img.jpg'); background-color: #EAEA;&quot;&gt;
Content Here
&lt;/table&gt;

Images are either way blocked untill the user allows to display them, so it is important not to use images for important messages you want to communicate with your users.

Make sure that for the images you use, you do apply alt tags to them, so that the user that sees no images still sees the message you want to communicate. This will also make sure that visually impaired people that have turned off images can still get the message. Sadly, Outlook 2007 dropped support for this tag. The peeps at Microsoft apparently don’t like the visually impaired..

Also make sure that you apply width and height attributes to each image, so that all email clients will display them properly.

Bad:

&lt;img src=&quot;http://www.url.com/img.jpg&quot;/&gt;

Good:

&lt;img src=&quot;http://www.url.com/img.jpg&quot; alt=&quot;Description&quot; width=&quot;200&quot; height=&quot;100&quot;/&gt;

Last Notes

The most important thing – I mentioned it before – is to test. So test, test, test and test a bit more before you send your newsletter to your clients.
You don’t want to give them the wrong impression, right?