subscribe: Posts | Comments

Why Social Media Marketing Isn’t Working for You Facts about Social Media

Emailing Guide

0 comments

Posted by dr.pixel on 12/12/2009 in Dr.Pixel, Tools

emailingguide

This Emailing (HTML Email) Guide contains tips and tools on how to create compatible HTML email which will display correctly on most webmail and email clients. HTML email or HTML newsletters have advantages and disadvantages. But your clients (recipients) decide if you will send them a HTML email or a plain text email. For example if they specifically sign up for a HTML newsletter.

The following have been tested on both Mac (OS X) and PC (Windows XP)

  • Webmail
    • Hotmail
    • Gmail
  • Email clients
    • Outlook 2007
    • Mail
    • Entourage
  • Browsers
    • Internet Explorer 6
    • Mozilla Firefox 3.5.5

I invite you to have a look at the Email Standards Project for extensive and thorough tests for popular email clients.

Get several webmail accounts for testing

Testing, testing and testing. Before sending out your HTML email, you have to make sure it looks good on several webmail clients. Get yourself several webmail accounts:

  • Gmail
  • Hotmail
  • Yahoo! Mail

Besides webmail accounts you also need to have email clients to test your HTML email:

  • Mozilla Thunderbird (PC, Mac)
  • Microsoft Outlook 2003, 2007 (PC)
  • Entourage (Mac)
  • Apple Mail (Mac)

Create an effective layout

The layout of the HTML email and the writing style are very important. You want people to read your newsletter, not to scan it. You want to draw their attention to headlines, etc.

Remove unnecessary HTML tags

The following HTML tags should be removed from your HTML email, because several webmail applications and email clients are removing or ignoring these tags.

  • DOCTYPE
  • HTML tag <HTML></HTML>
  • BODY tag <BODY></BODY>
  • All Meta tags <META>
  • Head tag <HEAD></HEAD>
  • Base tag <BASE>
  • Link tag <LINK>
  • Script tag <SCRIPT></SCRIPT>
  • Title tag <TITLE></TITLE>
  • Applet tag <APPLET></APPLET>
  • Frameset tag <FRAMESET></FRAMESET>
  • Frame tag <FRAME>
  • IFrame tag <IFRAME></IFRAME>
  • Comments <!– comments –>

Use tables for layout

Because of the very limited support of style sheets in webmail clients, the best and safe way to layout your HTML email is to use tables.

Put all images online

In your HTML email you can use embedded images or remote images. Embedded images are attached with the email itself and are shown immediately.

Remote images are images which are located on a remote website, but are not displayed at first. In today’s webmail and email clients you have to click on a link to display the remote images. If the email address of the sender is in the address book of the recipient, then the images in the HTML email will be shown.

Images from an unknown sender aren’t displayed at first because they are considered unsafe because of several security issues (e.g. spammers can validate your email address, hijack your email account, etc.). The HTML email should be as small as possible in size (KB’s). Using remote images results in very few KB’s and therefore less bandwidth when sending it.

Use absolute urls

Use absolute urls for all your images and links, for example:

<img src=”http://www.example.com/images/head.gif” width=”200″ height=”60″>
<a href=”http://www.example.com/products/shoes/tiger.html”>Tiger</a>

Use short urls

When using long urls you risk getting broken links or broken images. Your email program or the email program of your recipient could wrap the long URL along several lines. This can cause part of the url to be clickable instead of the whole url:

http://www.example.com/very_long_name/5r6t/2003fd544/3553ag
dkgj3d/a453b96/g5?a=36hd27hdh48f27dh

Webmail clients can also add a space (%20) when a url is too long:

<img src=”http://www.example.com/mailings/2009/december/24/header_top_disc%20ount.jpg” width=”230″ height=”45″ title=”Discount at …”>

Use simple inline style sheets

Use simple style sheets, that means not to use absolute or relative positioning. This is bad supported by most webmail. Don’t use external or embedded style sheets, because email programs are removing or ignoring everything between the <HEAD></HEAD>. That means the <LINK> tag won’t work if you want to define external style sheets.

Use inline stylesheets for fonts, font colors, links, background colors, etc. For example:

<table width=”400″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td style=”font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 150%; color: red”>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Vivamus ut sem. Fusce aliquam nunc vitae purus.</p>
</td>
<td style=”font-family: Verdana, Helvetica, sans-serif; font-size: 10px; text-transform: uppercase; color: black”>
Vivamus ut sem. Fusce aliquam nunc vitae purus.</td>
</tr>
</table>

If you have a HTML Email design with embedded stylesheets, you can use Premailer to make them inline.

All text and links must have a style

You have to specify the font, font color and the font size for all the text and links in every table cell. If you don’t specify a style, then most webmail clients will use their own style sheets. This could result in displaying different fonts, font colors and sizes and could also mess up your design.

Hotmail and Yahoo display Arial as the default font if you don’t specify a font. Gmail uses Verdana. Hotmail uses a 11px as the default font size, Yahoo uses 12px and Gmail uses 16px.

Below is an example. This is the minimum of style sheets required to style text and links.

<table width=”400″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td style=”font-family: Verdana, sans-serif; font-size: 11px; color: black”>
<p><a href=”http://www.mywebsite.com/100101/” style=”font-family: Verdana, font-size: 11px; color: blue”>Lorem</a>
ipsum dolor sit amet, consectetuer adipiscing elit.</p></td>
<td style=”font-family: Verdana, sans-serif; font-size: 10px; color: black”>Vivamus ut sem. Fusce aliquam nunc vitae purus.</td>
</tr>
</table>

I always use text-decoration: underline to make it clear to the reader that it’s a link:

<a href=”http://www.website.com/100101/” style=”font-family: Verdana, font-size: 11px; color: blue; text-decoration: underline”>Lorem</a>

Email addresses and URLs as text

In most cases when using an email address or an URL as text it will be given a default style. For example:

  • Send all your questions to contact@example.com
  • Go to http://www.example.com for more information
  • Go to www.example.com for more information
  • Go to sub.example.com for more information

Gmail and Yahoo give all the above text a default style even though they aren’t links. Hotmail and Windows Live Hotmail don’t give default styles to URLs without http://.

Use the title and alt attribute

Use the alt attribute to describe your images except spacers. The alt text is displayed when images aren’t being displayed. Images aren’t displayed by default by most webmail and email clients.

The title attribute can be just for almost any element (links, images, tables, etc.). Use the title attribute if you want to display a tooltip to describe the element. It is recommended to use it for links and images. For example:

<img src=”nde.jpg” width=”170″ height=”230″ alt=”Skoda Octavia – black” title=”The new Skoda Octavia>
<a href=”http://www.website.com/order.aspx?id=230″ title=”Order the new Skoda Octavia”>Order Now</a>

Don’t use forms

Hotmail ignores forms in HTML email to ensure that messages do not contain malicious scripts. Other webmail services (Gmail and Yahoo) and email clients support the use of forms.

If you intend on sending HTML emails with a form and amongst your recipients are also people with a Hotmail email address, than I would recommend not using a form. Instead use a link to refer to a form on a HTML page.

Don’t use JavaScript

JavaScript in HTML email is never a good idea because of all the dangerous scripting (for example XSS attacks) that can be executed. For this reason most webmail and email clients disable JavaScript by removing or ignoring it.

For example, this code:

<a href=”javascript://” onclick=”window.open(’http://www.website.com/nde.html’,”,’width=500,height=400′)”>View our Promotion</a>

would be rewritten to:

<a href=”#”>View our Promotion</a>

The solution is to refer to the promotion without JavaScript.

<a href=”http://www.website.com/promotion/nde.html”>View our Promotion</a>

Provide an unsubscribe link

At the bottom of every HTML email you should provide an unsubscribe link.

Provide a link for an online version

Although you test your HTML email with different webmail and email clients, you never can be sure how it will display in your recipients email program. In case it doens’t display correctly provide a link at the top of every HTML email to view your HTML email in the browser for an online version.


Leave a Reply