Websites, SEO and web management, London UK.

Home
SEO
Coding
Contact

How To Code HTML Email Newsletters

HTML email template, a code sample

<!DOCTYPE html><!--"Multipart/Alternative MIME" format-->
<head>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
	<title>HTML email template</title>
</head>
<body>
	<table border="0" cellpadding="0" cellspacing="0" width="100%">
		<tr>
			<td align="left" style="color:#333;font-family:arial,sans-serif;font-size:12px;line-height:16px;" valign="top">
				<h3>
					HTML email code sample, essentials
				</h3>
				background="bg.gif" and bgcolor="#ffffff" and border-collapse:collapse;
				<br />
				To define UTF-8 we need <HEAD> section, after that we could add <TITLE> tag as well.
				<br />
				<a style="color:#363;text-decoration:none" href="#" target="_blank" title="Link">Link</a>
				<img alt="an image of a foo" src="foo.png" height="60" style="border:none;display:block;" width="468" />
			</td>
		</tr>
	</table>
</body>
</html>

Safe width of html email

Voices from the web about HTML email width.

The average email preview pane is around 300-500 pixels high, so make sure you include any important bits of your email in this area. First impressions count.

HTML email quick tips.

More odd bits about HTML email design.

To test HTML email

There are many services to test html emails, mostly for money. Some of them for free.

Puts Mail from Pablo Cantero. Cool name for the service! You copy/paste your code and the email validator will send a test email to your addresses.

Email on Acid. Free and paid bundles. For free - AIM.Mail, Gmail and Outlook previews, code analysis for each email client, email code validation, email client tips & tricks. Requires sign up.

Campaign Monitor http://www.campaignmonitor.com/testing/ - for only $5 you’ll get all this with a single click...

Finally, have various email accounts and test HTML emails by sending HTML emails with Outlook.

Code sample for HTML email newsletter

Click to see how the sample html email looks like - HTML email newsletter sample

<!DOCTYPE html><!--"Multipart/Alternative MIME" format-->
<body>
<table border="0" cellpadding="5" cellspacing="0" width="610"><tr><td align="left" valign="top">

<!-- begin SECTION A -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<tr>
		<td align="left" height="95" valign="top">
			<a href="http://www.tuljo.com/" target="_blank"><img alt="Logo of tuljo.com" src="http://www.tuljo.com/content/web-development/how-to-code-html-email-newsletters/html-email-template.gif" style="border:none;display:block;" /></a>
		</td>
	</tr>
</table>
<!-- end SECTION A -->

<!-- begin SECTION B -->
<table bgcolor="#000000" border="0" cellpadding="0" cellspacing="0" width="100%"><tr>
	<td align="center" bgcolor="#fd7100" height="27">
		<a href="http://www.tuljo.com/articles" style="color:#ffffff;font-family:arial;font-size:12px;font-weight:bold;text-decoration:none;text-underline:none;" target="_blank">Code</a>
	</td>
	<td align="center">
		<a href="http://www.tuljo.com/articles" style="color:#ffffff;font-family:arial;font-size:12px;font-weight:bold;text-decoration:none;text-underline:none;" target="_blank">Html</a>
	</td>
	<td bgcolor="#999999" width="1"></td>
	<td align="center">
		<a href="http://www.tuljo.com/articles" style="color:#ffffff;font-family:arial;font-size:12px;font-weight:bold;text-decoration:none;text-underline:none;" target="_blank">Email</a>
	</td>
	<td bgcolor="#999999" width="1"></td>
	<td align="center">
		<a href="http://www.tuljo.com/articles" style="color:#ffffff;font-family:arial;font-size:12px;font-weight:bold;text-decoration:none;text-underline:none;" target="_blank">Newsletter</a>
	</td>
	<td bgcolor="#999999" width="1"></td>
	<td align="center">
		<a href="http://www.tuljo.com/articles" style="color:#ffffff;font-family:arial;font-size:12px;font-weight:bold;text-decoration:none;text-underline:none;" target="_blank">Template</a>
	</td>
</tr></table>
<!-- end SECTION B -->

<!-- begin SECTION C -->
<table border="0" cellpadding="0" cellspacing="0" width="100%"><tr>
	<td align="left" height="70" style="font-family:arial;font-size:24px;" valign="middle">
		Ut enim ad minim veniam
	</td>
	<td align="right" valign="middle">
		22 July 2011
	</td>
</tr></table>

<table border="0" cellpadding="0" cellspacing="0" width="100%"><tr>
	<td align="left" style="font-family:arial;font-size:14px;" width="70%">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</td>
</tr></table>
<!-- end SECTION C -->

<!-- begin GAP -->
<table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td height="30"></td></tr></table>
<!-- end GAP -->

<!-- begin SECTION D -->
		<table border="0" cellpadding="5" cellspacing="0" width="100%">
			<tr>
				<td align="left" bgcolor="#fd7100" style="color:#ffffff;font-family:arial;font-size:12px;font-weight:bold;">
					Lorem ipsum dolor sit amet
				</td>
			</tr>
		</table>
		<table border="0" cellpadding="0" cellspacing="5" width="100%">
			<tr>
				<td align="left" valign="top">
					<img alt="decorative element" height="48" src="http://www.tuljo.com/content/web-development/how-to-code-html-email-newsletters/html-email-template.gif" style="border:none;display:block;" width="64" />
				</td>
				<td width="20"></td>
				<td align="left" style="color:#000000;font-family:arial;font-size:12px;">
					<a href="http://www.tuljo.com/articles" style="color:#000000;text-decoration:none;text-underline:none;" target="_blank"><span style="color:#fd7100;font-weight:bold;">Consectetur adipisicing elit...</span><br />
					<b>(minim veniam)</b><br />
					Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</a>
				</td>
			</tr>
			<tr>
				<td align="right" valign="top" style="padding-top:5px;">
					<table border="0" cellpadding="0" cellspacing="0" width="10">
						<tr>
							<td align="left" bgcolor="#000000" height="10" width="10"></td>
						</tr>
					</table>
				</td>
				<td width="20"></td>
				<td align="left" style="color:#000000;font-family:arial;font-size:12px;">
					<a href="http://www.tuljo.com/articles" style="color:#000000;text-decoration:none;text-underline:none;" target="_blank"><span style="color:#fd7100;font-weight:bold;">Consectetur adipisicing elit...</span><br />
					<b>(minim veniam)</b><br />
					Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</a>
				</td>
			</tr>
		</table>
<!-- end SECTION D -->

<!-- begin GAP -->
<table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td height="30"></td></tr></table>
<!-- end GAP -->

<!-- begin SECTION E -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<tr>
		<td height="30" width="100%"></td>
	</tr>
	<tr>
		<td bgcolor="#000000" height="2" width="100%"></td>
	</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<tr>
		<td align="left" style="color:#000000;font-family:arial;font-size:14px;" width="80%">Copyright www.tuljo.com</td>
		<td align="right"><a href="http://www.tuljo.com/" style="color:#000000;font-family:arial;font-size:14px;text-decoration:none;text-underline:none;" target="_blank">Unsubscribe</a></td>
	</tr>
</table>
<!-- end SECTION E -->

</td></tr></table>
</body>
</html>

List of issues with this email code above accordingly to Email on Acid test http://www.emailonacid.com/app/acidtest/free

Web Clients
AOL Web - 0 reported discrepancies
Gmail (New) - 0 reported discrepancies
Hotmail - 0 reported discrepancies
Yahoo (Beta) - 0 reported discrepancies
Yahoo (Classic) - 0 reported discrepancies
Yahoo (New) - 0 reported discrepancies
Mobile Devices
Android 2.2 - 0 reported discrepancies
Android Gmail 2.2 - 0 reported discrepancies
BlackBerry - 0 reported discrepancies
iPad 3.0 - 0 reported discrepancies
iPad Gmail - 0 reported discrepancies
iPhone 3.0 - 0 reported discrepancies
Desktop Clients
Entourage 2004 - 0 reported discrepancies
Entourage 2008 - 0 reported discrepancies
Live Mail - 0 reported discrepancies
Lotus Notes 6.5 - 27 reported discrepancies
Lotus Notes 7 - 27 reported discrepancies
Lotus Notes 8 - 0 reported discrepancies
Lotus Notes 8.5 - 0 reported discrepancies
Mac Mail - 0 reported discrepancies
Outlook 2003 - 0 reported discrepancies
Outlook 2007 - 0 reported discrepancies
Outlook 2010 - 0 reported discrepancies
Outlook Express - 0 reported discrepancies
Thunderbird 2 - 0 reported discrepancies
Thunderbird 3 - 0 reported discrepancies
Windows Mail - 0 reported discrepancies

How To Code HTML Email Newsletters, article by Tim Slavin

Written by TimSlavin, http://www.reachcustomersonline.com/2009/01/23/09.27.00/

Please note a version of this article is published at SitePoint which includes links to related articles on their site. This article has been online since 2004.

HTML email newsletters have come a long way in the past five years since this article was first written. They’re still a useful way to get a web page delivered to interested readers to encourage them to visit your website or have your readers perform an action. The email marketing process also has become routine.

This article brings you up to date on how best to code HTML email so that it will display well in most email software. It provides an exhaustive overview of how to code html email newsletters (even in Outlook) with links to free html email templates, CSS compatability tables, services that test your html email, and much more. As a result, this article strives to provide a comprehensive overview of all possible resources online compared to other articles on this topic which may be vendor-specific or incomplete.

Here are some quick links if you only need specific information:

The Building Blocks

Whether you use a template or hand code (my preference), there are two key building blocks for html email:

The quickest and easiest way to see how HTML tables and inline CSS interact within an HTML email is to download templates from Campaign Monitor and MailChimp, two email delivery services that provide free templates (links are below in the Where to Learn More section).

When you open up their templates, you will notice several things we’ll discuss in more detail later:

Step 1: Use HTML Tables for Layout

Determining the layout design is the first step in coding an html email. Single column and two-column layouts work best for emails because they control the natural chaos that results when a lot of content is pushed into such a small space as email.

No matter how your email is designed, the most important content (or reference to that content) should appear at or near the top of the email design, so it is visible immediately when a reader opens your email. The top left of an email often is the first place people look when they open an email.

All of these email layout possibilities can be coded easily with html tables to divide up the space into rows and columns. Using html tables also helps with problems caused by different email software and how they can read the same email code differently.

The basic approach follows these steps in coding the email layout with html tables:

While this approach might offend purists who prefer to code to the latest standards, you do not have to be a complete primitive. No matter how badly LotusNotes displays html email, resorting to HTML FONT tags is not required (although use of FONT tags cannot hurt, honestly). And while Outlook 2007’s HTML rendering engine is less than perfect, it does display basic HTML tables just fine.

Step 2: Add in CSS Styles

Once the email layout is coded as a set of nested HTML tables, the next step is to add in CSS styles. Here are the steps to follow:

If you download and study the email templates from Campaign Monitor and Mail Chimp, you’ll see they treat the frame table, the one that wraps the tables that hold content, as if it were the HTML BODY tag. Campaign Monitor calls it “BodyImposter” which is a great way to think about the frame or wrapper table. From a CSS perspective, the frame table does what the HTML BODY would do if services like Google Mail didn’t disable or ignore the BODY tag.

Step 3: Best Practices

There are several best practices to follow to ensure your email code works well.

With the html email coded as described above, the next step is to test the email in a variety of email software. Often this will identify problems that require workarounds.

The first test tools to use are the Firefox and Internet Explorer web browsers. If the email displays well or perfectly in both browsers, chances are good that testing the email in Outlook, Yahoo!, Google Mail, and other services will reveal only minor problems. You also might want to use the Internet Explorer 6 web browser to test for Outlook 2003 which uses its rendering engine (see Resources below if you need to download IE6).

Once the email appears fine in the two web browsers, use an email delivery service to send the email to a range of test email accounts. Ideally this should include accounts with Yahoo!, Hotmail, and Google Mail.

Which test accounts are used, however, should be determined by the domain names in the email address list of people who will receive the email. For example, if there are few or no AOL subscribers on this list, then it may be a waste of time and money to set up an AOL email account.

Here are the most common code tweaks that are found in this test phase:

In addition, the following best practices are recommended:

My final test is to view the HTML email with images turned off. Outlook and some other email software set images off by default, to prevent spammers from knowing your email address is active. I set images off in my code by using my editor’s search and replace to delete some part of the src= URLs in my file.

Make sure your email content displays fine without images. For example, if you use a background image to provide a background color with white font color over it, make sure the default background color for that part of the HTML table is dark, not white. Also be sure your alt=, height=, and width= parameters are set for images so they can help readers understand your content without images. Turning off your images will help you catch these issues and ensure the HTML email will display effectively if people see your email with images off.

Once the html email is tweaked so that it displays well or perfectly in the test email accounts, the next step is to go through a checklist. Verify that

If it is important to know absolutely everything wrong with the html email code, try a service like Browsercam.com or LitmusApp.com. These services show how your HTML and CSS code will display as email or, in the case of Browsercam, as a web page.

Step 4: Coding for GoogleMail, LotusNotes, and Outlook 2007

Google Mail, LotusNotes, and Outlook 2007 present special coding problems. The good news? If you code to account for their oddities, your html email code is more likely to display well in most if not all email software.

Because Google cannot control how senders will code CSS and HTML, they have to take steps to ensure their application displays properly regardless of the code quality of the html email that is displayed.

As a result, Google Mail acts like an artifact of the mid 1990s when web standards were primitive. It takes some work, but it is possible to crack open a Google Mail page and see just how convoluted their approach is to rendering html email.

For one thing, Google Mail deletes any CSS style reference to a set of styles, no matter where it appears in the email. And fonts displayed in html tables have the odd habit of appearing larger than intended no matter how the html email is coded.

Here are coding techniques that appear to work well in Google Mail and older email software:

Besides Google Mail, another hazard programmers face when coding email is less obvious: LotusNotes. Many large corporations continue to support and upgrade their Notes installations. As of 2004, IBM reported that 95 million people used Notes. Unfortunately, it is impossible to tell which companies use Notes. So code html emails as described in this article. The more primitive the code, the more likely it will work well, if not perfectly, with Notes.

That said, it is quite possible that Notes will introduce quirks that beggar belief, for example, converting images to their proprietary format. Or Notes will simply ignore flawless basic html in one email but display other html fine in another email.

Here is what apparently helps Lotus Notes display html email:

Using these techniques for Google Mail and Lotus Notes also will ensure your emails display fine in Outlook 2007 with its older HTML rendering engine. Microsoft has published details about what their email software will and won’t display properly (see Resources below for the link). And the Email Standards Project has additional details. They also lobby companies like Microsoft to improve their products.

The bottomline with Outlook 2007, LotusNotes, and Google Mail is that it requires coders to make sure their HTML email code works across most email software. That means simple, standards-compliant code works best in most if not all situations.

Many people who receive email prefer HTML over text for any number of reasons. For programmers, however, the task of coding an HTML email appears both simple and horribly complex. Hopefully this article has described many of the issues and coding strategies that work across email software so that you can code HTML emails effectively.

What is the best idea to take from this article? If there is a choice to be made between a simple coding solution and a more complex solution, simplicity always works better.

Frequently Asked Questions

How to Create HTML Email in Outlook

This below works for Outlook 2003 probably, MS Outlook 2007 does not have the "browse to your HTML email" option any more. However there is much simpler way to send HTML email with Outlook.

The basic approach is to create your html email as a separate html file and then create a signature file and use your html email as the signature file. Then you open a new email message and add the new signature file. This prevents Outlook from helpfully converting all your precious html code into text.

To create a signature file in Outlook:

  1. Select Tools from the top menus, then Options, then the Mail Format tab in the Options pop-up that will appear.
  2. Down on the lower right of the Mail Format tab is a Signatures button. Click that button and a Create Signature pop-up will appear.
  3. Click the New button on the Create Signature pop-up and a Create New Signature pop-up appears. Give your new signature a name and select Use this File as a Template and browse to your HTML email.

Then create a new email message, click in the body of your email message, select Insert from the mail dropdown menu and Signature then your new signature file.

People usually ask this question because they want to send html email from their internet account. Don’t. Unless you know every person on your email list, too many bad things can happen if someone tags your email as spam. If you send email through your business domain name, for example, all your email will be tagged as spam. And you will be left to figure out how to get off any blacklists. Even if you know everyone on your list, your internet provider may have a limit to how many messages can be sent and may boot you off their service. It’s far less hassle to pay an email service provider to deliver your email and worry about spam blacklists.

How to Use Background Images in GMail, Lotus Notes, and Other Services

Using images as a background in an html email is problematic. The old way is to carve up your image and divide it among HTML table cells and rows. You also can put the image in a new html table that encases all the table rows and columns that would display parts of your background image; sometimes this achieves the same effect as cutting an image up but with less code and better results. However, Outlook 2007, Google Mail, Lotus Notes 6, and Live Mail do not display background images. Be sure to test your email code with your target email software. Whatever you do, be sure your email design degrades nicely if and when the background image does not display. If you use white text, for example, against a dark image, make the default background color a dark color.

How to Create Anchor Links in an Email

Like image backgrounds, links within an email do not always work. You should test first. Over the years, I have cracked open a few emails with intra-email links and find they use the basic HTML anchor tag to link to a defined name= bookmark. The only oddity I’ve seen is the addition of shape=rect in the anchor name code, as in, <a name=sometag shape=rect> But this was in an email full of images.

How to Add Video to HTML Email

It is difficult but possible to add video to your html emails. Campaign Monitor has a great article, “HTML5 and video in email“, that covers all the steps to make video available within email software clients that can display video while degrading well for email software that cannot display video in an html email. Their article includes test results across many email clients, as well as comments with more insights and results.

Where to Learn More

Besides this article, these online resources should be very helpful:

Email Standards Project

http://www.email-standards.org/
Probably the best start point for understanding exactly how different email software complies with HTML and CSS. They also maintain an acid test they use to compare compliance across email software. And you can participate to help improve standards.

Free HTML Email Templates

http://www.campaignmonitor.com/templates/
http://www.mailchimp.com/resources/html_email_templates/
Both email delivery services actively test their templates over time with different email software. However, there are subtle differences to note. Campaign Monitor has its STYLE declaration within the HEAD tag while Mail Chimp does not. Be sure to test your final HTML code with whatever services are used by recipients in your email list.

Plain Text Email Design Guidelines

http://www.campaignmonitor.com/resources/category-archive/cat/designing-and-building-emails/
This article has a number of simple ways to make text emails easier to scan.

Blocked Email Images

[http://www.clickz.com/]
http://www.campaignmonitor.com/blog/archives/2005/11/email_design_guidelines_for_20.html
From 2004, the ClickZ article shows how major email software compares for blocked images and preview panes. The Campaign Monitor article goes into greater detail with actual examples and ideas how to combat default image off rendering of your emails, as well as designing your email to look okay in preview panes.

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007

http://msdn.microsoft.com/en-us/library/aa338201.aspx
The official Microsoft description of what Outlook 2007 will and will not render for HTML and CSS. Includes a link to a validator that works in Dreamweaver, as well as Microsoft editing tools.

A Guide to CSS Support in Email

http://www.campaignmonitor.com/blog/post/2533/a-guide-to-css-support-in-emai-2/
Campaign Monitor, an email service provider, has taken Xavier Frenette’s excellent work documenting CSS performance in a few email clients and expanded it to include Gmail, Hotmail, Yahoo! and Windows Live Mail, as well as for the PC they cover Outlook 2003 and Outlook Express, Lotus Notes, and Thunderbird and for the Mac they cover Mac Mail, Entourage, and Eudora.

MailChimp Email HTML Coding/Delivery Guide

http://www.mailchimp.com/articles/email_marketing_guide/
Lots of great information about all aspects of html email, including how spam filters work.

Secrets of HTML Email Series

http://www.graphics.com/modules.php?name=Sections&op=listarticles&secid=16
Some of this information is old but they have a good piece on Lotus Notes.

Lotus Notes Trial Software

[http://www-128.ibm.com/developerworks/lotus/downloads/]
Free downloads of their latest software if thoroughly testing an email with the Notes client software is needed.

Standalone Internet Explorer 6 Web Browser

http://tredosoft.com/Multiple_IE
This free software lets you run install and run IE6 and IE7 without causing conflicts. With Vista and now Windows 7, this only works at installing IE6 because Windows only lets you have one IE running at a time. Better to use BrowserLab to test against email clients that use the IE6 or IE7 html rendering engine.

End of the article
2010 2011 2012

Web Development - XHTML CSS JavaScript jQuery.

About   |   Cookies   |   Privacy Policy
© Tuljo.com 2012

Search engine optimisation, web development and management in London, UK.