Bulk emailer: the definitive guide

1. Software for creating HTML e-mail

There are a lot of editors available you can use. Here are a few tools you can use to create HTML e-mail and also websites afcourse:

  • Notepad++ (open source text editor with syntax highlighting / free)
  • UltraEdit (text editor with syntax highlighting / not free)
  • NVU (open source WYSIWYG editor / free)
  • Macromedia Dreamweaver (WYSIWYG editor with syntax highlighting / not free)

Don't use Microsoft Word to create HTML pages or HTML e-mail
The reason is Word will write a whole lot of garbage when you create HTML pages with it. For example, I created a HTML page in Word and only put this line of text in it: "Don't use Word to create HTML files"

Then I saved it as a HTML file. View the HTML that Word XP created. Other versions of Word also create garbage. But all you need is:

<p>Don't use Word to create HTML files</p>

Don't copy/paste from Microsoft Word
Word uses a different kind of formatting of the text than for example Notepad, Notepad++, UltraEdit and Dreamweaver. These programs all work in text mode without formatting.

2. Get several webmail accounts for testing

Testing, testing and testing it again. Before sending out your HTML e-mail, you have to make sure it looks good on several webmail clients. Get yourself several webmail accounts. I recommend:

Gmail is the only exception. You can't sign in for a Gmail account. You must be invited to get an account.

Besides webmail accounts you also need to have a standalone e-mail program to test your HTML e-mail. I recommend:

3. Create an effective layout

The layout of the HTML e-mail 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.

EyeTrackIII deals with online news consumer behavior in the age of multimedia. On their website you can find an incredible load of information about Article page design, Writing style, Eyetracking, how to create hot spots and many many more.

4. Remove unnecessary HTML tags

The following HTML tags should be removed from your HTML e-mail, because several webmail applications and e-mail 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 href tag <BASE>
  • Link tag <LINK>
  • Title tag <TITLE></TITLE>
  • Comments <!-- comments -->

5. 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 e-mail is to use tables.

6. Put all images online and refer to them with absolute links

In your HTML e-mail you can use attached images or remote images.

Attached images are attached with the e-mail 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 e-mail clients you have to click on a link to display the remote images. If the e-mail address of the sender is in the address book of the recipient, then the images in the HTML e-mail 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 e-mail address, hijack your e-mail account, etc.). The HTML e-mail 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.

7. Hide the image toolbar

If you put your mouse over an image in Internet Explorer, the image toolbar appears. This only occurs if your image is larger than 200 x 200 pixels and when it's not a background image.

Most people find the image toolbar annoying, but it also distracts the reader from your content. To hide the image toolbar for an image, use the galleryimg attribute in the <IMG> tag:

<img src="name.gif" width="20" height="30" galleryimg="no" title="10% discount on this CD">

8. Use absolute urls

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

<img src="http://www.mywebsite.com/images/head.gif" width="20" height="60">

<a href="http://www.mywebsite.com/products/shoes/tiger.html">Tiger</a>

Another possibility is to use relative urls with the <BASE> tag:
<head>
<base href="http://www.mywebite.com/">
</head>

<img src="images/head.gif"
<a href="products/shoes/tiger.html">Tiger</a>

Unfortunately a number of webmail applications ignore everything between <HEAD></HEAD>. To avoid problems with links and images that aren't displayed use absolute urls instead of relative urls.

9. Use short urls

When using long urls you risk getting broken links or broken images. Your e-mail program or the e-mail 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 when an url is too long:

<img src="http://www.mywebsite.com/mailings/2005/april/17/header_top_disc%20ount.jpg" width="230" height="45" title="Discount at ...">

To avoid this use short urls:

<img src="http://www.mywebsite.com/2004/11/images/1.jpg" width="10" height="60">
<a href="http://www.mywebsite.com/2004/11/index.html">Go to discounts</a> Another options is to use a redirect:
<a href="http://www.mywebsite.com/sale04/">Buy the CD</a>

The short url http://www.mywebsite.com/sale04/index.html will for example redirect to a longer url:
http://www.mywebsite.com/sale04/11/shoes/index.html?brand=Asics&color=yellow&discount=yes

10. Don't use anchors

Usually you use anchors to link to specific places in a HTML page so the visitor doesn't have to scroll down or up. If you want to do this in a HTML newsletter, then your newsletter is too long. You should consider making it less longer so you don't need anchors.

11. 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 e-mail 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;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus.<br>
<a href="http://www.mywebsite.com/" style="color: blue; text-decoration: underline;font-weight: bold;">website</a></td>
<td style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;">Vivamus ut sem. Fusce aliquam nunc vitae purus.</td>
</tr>
</table>

12. Create your design with a white background color

Most webmail and e-mail clients use a white background color to display messages. Often webmail clients ignore or remove the <BODY> tag, which is why background colors often don't work.

When you do use a diferent background color than white you could mess up your design. This could for example happen if you create your design for a red background. Images may have a red background. When viewed in a webmail client, you mostlikely will see a white background and images with a red background that doesn't seamlessly integrate with the background color.

The best thing to do is to create your design with a white background color. If you must use a different background color than white, you can use a table with a 100% width and perhaps 100% height to simulate the background color:

<table width="100%" height="100%">
<tr>
<td bgcolor="#FF0000">
<table width="400" align="center">
<tr>
<td>Lorem ipsum dolor sit amet consectetuer</td>
</tr>
</table>
</td>
</tr>
</table>

Unless you know for sure your target audience is using an e-mail client such as Outlook or Thunderbird, a background color can be used without problems. For example if your sending HTML e-mail to employers within a company who all use the same e-mail client.

13. Avoid background images defined on the body

As already mentioned in nr. 12 webmail clients often ignore or remove the <BODY> tag, which is why background images often don't work.

Unless you know for sure your target audience is using an e-mail client such as Outlook or Thunderbird, a background color can be used without problems. For example if your sending HTML e-mail to employers within a company who all use the same e-mail client.

14. 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 (create your design with tables). 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.

15. Use the title attribute instead of alt

The alt attribute for images doesn't work in Gecko-based browsers such as Firefox and Mozilla. The alt attribute isn't an abbreviation for 'tooltip' but for 'alternative'. The value of the alt attribute is a textual replacement for the image and is displayed when the image isn’t.

Mozilla doesn’t display the alt attribute as a tooltip, because it has been observed that doing so encourages authors to misuse the attribute. There is another attribute that Mozilla shows as a tooltip: title. In fact, the HTML 4.01 specification suggests that the title attribute may be displayed as a tooltip.

The title attribute works in IE (4.0+) and in Gecko-based browsers.

16. Use <BR> instead of <P>

The <P> tag in Internet Explorer uses more space (margin-top and margin-bottom) than in Gecko-based browsers. This could lead to layout problems.

For example, if you're using a table width a fixed width and height and your design is based upon these dimensions. If you have content in the table within <P> tags, than the height of the table could increase in Internet Explorer.

To prevent layout problems use the <BR> tag instead of the <P> tag as it renders the same in all browsers. If you still have troubles with the layout you can also use spacers instead of the <P> and the <BR> tag. If your content doesn't depend on the layout than you can just use the <P> tag.

17. Use spacers

Use 1x1 transparent images (spacers) to force tables to display the right width and height. For example:

<table width="200">
<tr>
<td width="50">&nbsp;</td>
<td width="150">Lorem ipsum dolor sit amet adipiscing.</td>
</tr>
</table>

The table cell with a width of 50 pixels only has a space as content. This doesn't mean the specified width will be displayed correctly. If the width of the first table cell isn't displayed correctly, than this is mostlikey also the case width the second table cell.

You have to force the width to be displayed correctly:
<table width="200">
<tr>
<td><img src="http://www.yourwebsite.com/images/spacer.gif" width="50" height="1"></td>
<td<img src="http://www.yourwebsite.com/images/spacer.gif" width="150" height="1"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Lorem ipsum dolor sit amet adipiscing.</td>
</tr>
</table>

18. Choosing a maximum width

Choosing a width mostly applies to webmail clients. When you double click on an email in Outlook or Thunderbird, you can almost view it full screen.

With a resolution at 1024x768 you can use a maximum width of 750px. But you can also use a higher width. If you use a higher width (for example 800px) at 1024x768 a horizontal scrollbar could appear in your webmail client. But this doesn't have to be a problem, because all of your content is still visible. Perhaps you have to scroll a little in horizontal direction.

With a resolution at 800x600 you can use a maximum width of 580px. But again, you can also use a higher width which could show a horizontal scrollbar. If you open your Hotmail account at 800x600 a horizontal scrollbar will appear no matter wich width you use. I guess this is because of the ad banner (sky scraper, 160x600px) on the right and the large banner (super banner, 728x90) at the top.

19. Don't use forms

Hotmail ignores forms in HTML e-mail to ensure that messages do not contain malicious scripts. Other webmail services and e-mail clients support the use of forms.

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

20. Don't use JavaScript

JavaScript in HTML e-mail 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 e-mail clients disable JavaScript by removing or ignoring it.

For example, this code:
<a href="#" onclick="javascript:window.open('http://www.yourwebsite.com/cd.html','','width=500,height=400')"> View tracklisting</a>

would be rewritten to:
<a href="#">View tracklisting</a>Solution
Refer to the tracklisting without JavaScript.
<a href="http://www.yourwebsite.com/discount/cd.html">View tracklisting</a>If you don't want to display a full screen window, you can use JavaScript in the <HEAD> in cd.html to change the dimensions to 500x400 pixels:

<script language="javascript">
if (window.top) {
resizeTo(400, 300);
moveTo(100, 100);
}
</script>

21. Provide an unsubscribe link

At the bottom of every HTML e-mail you should provide an unsubscribe link. After clicking on this link (mailto:) the recipient only has to press on the send button to remove their e-mail address from a list, for example:

mailto:unsubscribe@domain.com?subject=unsubscribe&body=Send%20this%20e-mail%20to%20unsubscribe

You can also let people unsubscribe from your website. But doing so gives people the possibility to unsubscribe other people. If you only provide this functionality from your HTML e-mail, then you have less chance that unsubscribing will be misused.

22. Provide a link for display in the browser

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

if this mailing doesn't display correctly, click here

The example link used here is http://www.mywebsite.com/mailings/2005/01/. Use structured directories, so you can archive all your HTML e-mails easily.

Use the <TITLE> tag in the online version. If you omit the tag in the online version, Internet Explorer will show the url as the title.

23. Subject

Keep your subject short and informative. Avoid known phrases which are widely used by spammers. That way you avoid your newsletter ending up in the junk folder. Here is a list of phrases that Microsoft Outlook looks for.

24. Don't use DHTML

Dynamic HTML uses a combination of Javascript, HTML and CSS. It is not recommended to use DHTML because JavaScript is disabled by most webmail clients and e-mail clients.

25. Don't use Flash

When you try to use Flash in your HTML email the HTML code gets removed or ignored by webmail and e-mail clients.

The best thing to do is to put your Flash movie online. Then in your HTML e-mail create an attractive clickable image that refers to the Flash movie online. Also put above or under the clickable image a text link with text from the image. Because images are not displayed by default, the recipient will see the text first. Unless your address is in the address book of the recipient.

26. Use online HTML Tidy

At SourceForge you can find the HTML Tidy Project Page. Here you can download several Tidy tools for different platforms.

HTML Tidy can also be used via a web interface. Click on the advanced link on the right to use advanced HTML Tidy options.

27. Count the number of clicks in your HTML e-mail with tracking

Usually an url will be opened when recipients click on a link in your HTML e-mail. When a HTML page (or an image, js file, css file, etc.) on your website is requested, information about this request will be logged in a logfile called Access_log.

Statistic programs use your Acces_log to show information about visitors of your website. An typical line in the Access_log looks like the following:

63.203.109.38 - - [02/Sep/2003:09:51:09 -0700] "GET /custer HTTP/1.1"
301 248 "http://search.msn.com/results.asp?RS=CHECKED&FORM=MSNH&
v=1&q=%22little+big+Horn%22" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)"

You can use the Acces_log to determine how many times there has been clicked on a specific link in a specific HTML e-mail. This can be done with variables. If you have the following link in your HTML e-mail that refers to a page with products:
http://www.mywebsite.com/products/shoes/page.html

You can add variables to this url. The first variable is separated with a ?-character. If you want to add variables then you need a variable name and a value. I'm going to add a variable name track with the value shoes20050411 (you can use whatever name and value you prefer):

http://www.mywebsite.com/products/shoes/page.html?track=shoes20050411

If you have shell access (command line) and access to the Access_log, then you can count for example how many times there has been clicked on the above link. You can do this with Linux commands like grep, sort, uniq, etc. If you wanted to track more variables, then you use the &-character:

http://www.mywebsite.com/products/shoes/page.html?track=shoes20050411&color=yellow&model=air

Another useful function is to track how many recipients clicked on the link to display the HTML e-mail in the browser. Which means it didn't display correctly in their webmail client or e-mail program. Then you can measure how many people didn't see it correctly:

http://www.mywebsite.com/mailings/2005/01/index.html?track=online200501

It doesn't matter what variable name or value you use. Just as long as you know what it stands for.

28. Use unduplicate to get a list with correct e-mail addresses

The windows executable file, unduplicate.exe, was created with TinyPerl.

Unduplicate works on a text file with e-mail addresses. Put the text file in the same directory as unduplicate:

name1@test.com
name2@test.com
name3@test.com
...

It removes empty lines and duplicate e-mail addresses. After that it checks every e-mailaddress if they are syntactically valid. It then sorts all addresses alphabetically and writes the valid e-mail addresses to a new text file. All the invalid e-mail addresses are also written to a new text file.

For example addresses.txt:

lux28@fictivedomain.com
art_b1d@test.com

joshhotmail.com
chris@test.com
jurgen12@whattupcom

ronny.dr@mywebsite.com,paul@website.com
wilco_l0rd@domain.com


r obbu@robbu.com After unduplicate has finished, 2 files will have been written:

  • addresses_new.txt
  • addresses_error.txt

addresses_new.txt contains the valid e-mailaddresses:

lux28@fictivedomain.com
art_b1d@test.com
joshhotmail.com
chris@test.com
wilco_l0rd@domain.com

addresses_error.txt contains the invalid e-mailaddresses:

jurgen12@whattupcom
ronny.dr@mywebsite.com,paul@website.com
r obbu@robbu.com

29. Send your e-mail as multipart/alternative

If you send a HTML e-mail to people with a webmail or e-mail client who can't read HTML e-mail, they will only see the HTML code. If you don't know what your recipients use, send your e-mail as multipart/alternative. This is the HTML version and the plain text version.

The e-mail program of the recipient decides which version it will show. If it doesn't support HTML e-mail, it will show the plain text version. If it does support HTML e-mail, it will show the HTML version.

30. Use HotCast Mass Mailer to send your HTML e-mail

Read this article about HotCast Mass Mailer. It explains why and how to use HotCast to send your HTML e-mail.

31. Standalone e-mail programs are more flexibel

If you know for sure your target audience uses an standalone e-mail program such as Outlook or Thunderbird (or another) than it's easier to create a HTML e-mail.

You have far less limitations than a webmail client:
 

  • you can use embedded style sheets (css in the head)
  • you can use forms (not recommended)
  • you can use a background color
  • you can use a background image
  • you can use absolute positioning
  • you can use meta tags

Site Links:

Anonymous e mailer - anonymous email - anonymous email account - anonymous mail - anonymous mailer - anonymous proxies - anonymous proxy - anonymous proxy list - anonymous surfing - anonympus web surfing - bulk campaign email software - bulk emailer - bulk mailer - complete anonymous web surfing - email address extractor - email coder - free anonymous email - free anonymous surfing - mynet email - sending anonymous mail

Site Map

Home