www.lookforemails.com


Writing HTML Email Newsletters

Sign In Logon Name:
Password:

New User
Forgot Password

Unsolicited Bulk Email, or UBE or Spam mail, is Internet mail that is sent to a group of recipients who have not requested it.


Article contains tips and tools on how to create compatible HTML email which will display correctly on most webmail and email clients.

The points provided below have been tested on Windows:
Webmail - Hotmail, Gmail, Yahoo! Mail, Lycos Mail
Email clients - Outlook 2003, Thunderbird 1.5
Browsers - Internet Explorer 6.0, Mozilla Firefox 1.5

Software for creating HTML email

There are a lot of editors available you can use. Here are a few tools you can use to create HTML email and websites:

For uploading your files you can use FileZilla.

Don’t use Microsoft Word to create HTML pages or HTML email

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. Show/Hide the HTML that Word 2003 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++, PSPad and Dreamweaver. These programs all work in text mode without formatting.

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:

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

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. 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.

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.

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="cd.gif" width="20" height="30" galleryimg="no" alt="CD of group X" title="Order this CD">

Use absolute urls

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

<img src="http://www.lookforemails.com/images/head.gif" width="20" height="60"> <a href="http://www.lookforemails.com/defautl.aspx">Home</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.lookforemails.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.lookforemails.com/2004/11/images/1.jpg" width="10" height="60"> <a href="http://www.lookforemails.com/2004/11/index.html">Search Meta Keywords</a>

This code can be rewritten to:

<img src="http://www.lookforemails.com/2004/11/1.jpg" width="10" height="60"> <a href="http://www.lookforemails.com/2004/11/">Search Emails from Web Url</a>

Keep the following in mind when you want to use a short url:

  • Don’t use an images directory. Place the images in the same directory as the index.html (newsletter); /images/1.jpg becomes /1.jpg
  • Use numbers as names for pictures; header_cd.jpg becomes 1.jpg.
  • Rename spacer.gif to s.gif
  • If you use a link in your newsletter to refer to an online version of your newsletter, then you will mostlikely use a tracking variable in the url. For example: http://www.lookforemails.com/2004/11/index.html?trck=nov1104. You can rewrite this to http://www.lookforemails.com/2004/11/?trck=nov1104

Snipurl can also help by shortening your url. Just enter a url and Snipurl will shorten it by given you a new url that will never expire. There are several services like this (tinyurl and Make A Shorter Link), but Snipurl can do a lot more. Take a look at what you can do with Snipurl.

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>

Create your design with a white background color

Most webmail and email 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 email client such as Outlook or Thunderbird, a background color can be used without problems. For example if your sending HTML email to employers within a company who all use the same email client.

Avoid background images defined on the body

As already mentioned 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 email client such as Outlook or Thunderbird, a background image can be used without problems. For example if your sending HTML email to employers within a company who all use the same email client.

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.

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.website.com/030205/” 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.lookforemails.com/030205/" style="font-family: Verdana, font-size: 11px; color: blue; text-decoration: underline">Lorem</a>

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. Image 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="cd.jpg" width="170" height="230" alt="Kool Keith CD - black elvis" title="The new Kool Keith CD>
<a href=”http://www.website.com/order.php?id=23? title=”Order the new Kool Keith CD”>Order CD</a>

Move your mouse over this link to view a tooltip.

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 or if you have enough space for the content than you can just use the <P> tag.

Use spacers

Use 1×1 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 most likely 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.lookforemails.com/images/spacer.gif” width=”50? height=”1?></td>
<td><img src=”http://www.lookforemails.com/images/spacer.gif” width=”150? height=”1?></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Lorem ipsum dolor sit amet adipiscing.</td>
</tr>
</table>

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 1024×768 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 1024×768 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 800×600 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 800×600 a horizontal scrollbar will appear no matter wich width you use. I guess this is because of the ad banner (sky scraper, 160×600px) on the right and the large banner (super banner, 728×90) at the top.

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.

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/cd.html','','width=500,height=400')"> View tracklisting</a>

would be rewritten to:

<a href="#">View tracklisting</a>

The solution is to refer to the tracklisting without JavaScript. 

<a href="http://www.yourwebsite.com/discount/cd.html">
								View tracklisting</a>

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, for example:

if this email doesn't display correctly, view the online version

The example link used here is http://www.lookforemails.com/mailings/2005/01/.

Provide extra functionality for the online version

The HTML email is put online so that the online version can be viewed when it doesn’t display correctly in webmail or an email clients. But you can also change your design and put the content online. You then have for example a design with a graphical and text link. The text link is in case the images won’t load. When the link is clicked the viewer will end up in the online version.

Test your design in multiple browsers

Check the statistics for your website so you can see which browsers are the most popular among your visitors. If you want to test your design in multiple browsers on a Windows machine then you have several options.

Standalone browsers

The easiest options are to use standalone browsers like Mozilla Firefox and Opera. With Firefox you can easily test simultaneously in Internet Explorer 6 with the Firefox extensions IE Tab and IEView. Here is a huge list of browsers you can download at the Browser archive.

Standalone versions of Internet Explorer

With Windows XP as the most popular operating system, so is Internet Explorer 6. The problem is if you want to use older versions of Internet Explorer (3.0, 4.0, 5.0) then you also have to install the older Windows versions. Luckily there is a workaround for this, standalone versions of Internet Explorer.

Mac browsers

Most people don’t have a Mac to test their design on. You can use the Safari Compatibility Test. Just enter a url and the Safaritest will return a screenshot of your page as viewed with Safari. If you don’t have a Mac, you’ll be happy to know that you can use PearPC. PearPC is an open source PowerPC emulator that makes it possible to run Mac OS X on your Windows machine.

Linux browsers

Testing your design in a Linux browser can be done with a Linux LiveCD. A Linux LiveCD is Linux installed on a bootable CD-ROM or DVD-ROM. When booting from a Linux LiveCD you can start applications, create documents, etc. without anything being written or saved to the hard disk.

The most popular and comprehensive LiveCD is Knoppix. Download the LiveCD, burn it on a CD-ROM, put it in your CD/DVD player and reboot. Here is a list of available Linux LiveCDs. If you want to try out Knoppix,check out this guide for the complete beginner, Knowing Knoppix.

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 email clients.

Don’t use Flash

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

The best thing to do is to put your Flash movie online. Then in your HTML email 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.

Use HTML Email Validator

Use the HTML Email Validator to see if your HTML is compatible for HTML email. Just copy and paste your HTML into the validator and it will report if there are any errors. Each error will refer to a section in this article that will explain the error.

Use HTML Tidy Online

Use HTML Tidy Online to clean up your HTML code. This decreases the incorrect display of your HTML email. Click on the advanced link on the right to use advanced HTML Tidy options. View a quick reference of the configuration options.

Now you can choose your settings to optimize your HTML email code. Unfortunately there isn’t an option to save your settings. You have to manually set them each time you visit HTML Tidy Online.

HTML Tidy Settings

You can download a extension that automatically loads settings to optimize HTML email at HTML Tidy Online. This extension was created with Greasemonkey compiler. Install HTML Tidy Settings

Count the number of clicks in your HTML email with tracking

Usually an url will be opened when recipients click on a link in your HTML email. 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"

  301248“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 email. This can be done with variables.

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=blue

Another useful function is to track how many recipients clicked on the link to display the HTML email in the browser. Which means it didn’t display correctly in their webmail client or email 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.

Hotcast Mass Mailer

HotCast can handle a very large amount of email addresses, but has limited functionality.

Send your email as multipart/alternative

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

The email program of the recipient decides which version it will show. If it doesn’t support HTML email, it will show the plain text version. If it does support HTML email, it will show the HTML version.

Forwarding HTML email

When people receive a email they like they’ll usually forward it to a friend. So when your HTML formatted email is forwarded it is important that it still looks the same.

Forwarding HTML email works with Gmail, Yahoo, Hotmail, Lycos and SquirrelMail.

Source http://www.anandgraves.com
Home | Terms Of Use | Privacy Policy | Sitemap  | Contact Us
Free search engine submission!
www.LookForEmails.com