HTML Emails - Complete Series

Posted on Jan 18, 2016

A picture showing a person with HTML code

We have just completed the final video in our HTML emails series which takes you through everything from designing your email, to writing the code for responsive emails and finally to testing and sending the email. Here are all six parts of the series:

Part 1: Overview

Part 2: Design

Part3: Doctype, Structure & Metadata

Part 4: Adding & Styling Text

Part 5: Adding Images

Part 6: Sending & Testing

HTML Emails: Adding Images

Posted on Dec 18, 2015

In Part 5 in our video series on creating HTML emails we show you how to add images to the email.

We’ve included a copy of the full code here so that you can use it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Demo Email</title>
</head>
<body>
	<table width="100%" style="max-width: 600px;">
		<tr>
			<td style="font-family: 'Trebuchet MS’, sans-serif; font-size: 17px; color: #333333; padding-top: 10px; padding-bottom: 10px;">Hi Anne,</td>
		</tr>
		<tr>
			<td style="font-family: 'Trebuchet MS’, sans-serif; font-size: 17px; color: #333333; padding-top: 10px; padding-bottom: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae feugiat ex. Donec eleifend viverra justo. Nam velit arcu, imperdiet sed ante sed, bibendum finibus erat. Maecenas ut elementum odio.</td>
		</tr>
		<tr>
			<td style="font-family: 'Trebuchet MS’, sans-serif; font-size: 17px; color: #333333; padding-top: 10px; padding-bottom: 10px;">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris est lectus, fermentum nec turpis at, dictum eleifend dolor.</td>
		</tr>
		<tr>
			<td style="font-family: 'Trebuchet MS’, sans-serif; font-size: 20px; color: #f26012; padding-top: 10px; float: left; width: 45%;">Heading 1</td>
			<td style="font-family: 'Trebuchet MS’, sans-serif; font-size: 20px; color: #f26012; padding-top: 10px; float: right; width: 45%;">Heading 2</td>
		</tr>
		<tr>
			<td style="font-family: 'Trebuchet MS’, sans-serif; font-size: 17px; color: #333333; padding-top: 6px; padding-bottom: 10px; float: left; width: 45%;">Pellentesque dui magna, maximus ut diam eu, aliquam vehicula sapien. Suspendisse sed auctor libero. Integer id velit consectetur.</td>
			<td style="font-family: 'Trebuchet MS’, sans-serif; font-size: 17px; color: #333333; padding-top: 6px; padding-bottom: 10px; float: right; width: 45%;">Sed in euismod odio. Mauris pulvinar sem erat, vitae suscipit nisl tincidunt a. Vivamus sed tempus metus, at dignissim ligula.</td>
		</tr>
		<tr>
			<td><img src="http://demowebsite1.co.uk/email-images/call_to_action.png"></td>
		</tr>
		<tr>
			<td width="100%" style="font-family: 'Trebuchet MS’, sans-serif; font-size: 17px; color: #333333; padding-top: 10px;">Best regards,</td>
		</tr>
		<tr>
			<td width="100%" style="font-family: 'Trebuchet MS’, sans-serif; font-size: 17px; color: #333333; padding-top: 6px; padding-bottom: 10px;">John Doe</td>
		</tr>
		<tr>
			<td style="float: left; padding-right: 10px;"><img src="http://demowebsite1.co.uk/email-images/company_logo.png"></td>
			<td style="float: left; padding-right: 10px;"><img src="http://demowebsite1.co.uk/email-images/facebook.png"></td>
			<td style="float: left; padding-right: 10px;"><img src="http://demowebsite1.co.uk/email-images/google_plus.png"></td>
			<td style="float: left; padding-right: 10px;"><img src="http://demowebsite1.co.uk/email-images/twitter.png"></td>
		</tr>
	</table>
</body>
</html>

Images Must Be Placed On A Server

If you want your email to contain images the first step is to place the images on your server. When you do this also record the path of the image so that you can point the image source to it in the email.

Put the image in a table data cell

In the email put the image in it’s own table cell and make sure that the path is correct and points to the images on the server.

For full details on how to add images to your HTML email watch this short video:

HTML Emails: Adding & Styling Text

Posted on Nov 18, 2015

In Part 4 of our video series on creating HTML emails we show you how to add text to the email using tables and also style the text using inline CSS.

We’ve included the code here so that you can copy it and use it to make your own HTML emails:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Demo Email</title>
</head>
<body>
	<table width="100%" style="max-width: 600px;">
		<tr>
			<td style="font-family: 'Trebuchet MS’, sans-serif; font-size: 17px; color: #333333; padding-top: 10px; padding-bottom: 10px;">Hi Anne,</td>
		</tr>
		<tr>
			<td style="font-family: 'Trebuchet MS’, sans-serif; font-size: 17px; color: #333333; padding-top: 10px; padding-bottom: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae feugiat ex. Donec eleifend viverra justo. Nam velit arcu, imperdiet sed ante sed, bibendum finibus erat. Maecenas ut elementum odio.</td>
		</tr>
		<tr>
			<td style="font-family: 'Trebuchet MS’, sans-serif; font-size: 17px; color: #333333; padding-top: 10px; padding-bottom: 10px;">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris est lectus, fermentum nec turpis at, dictum eleifend dolor.</td>
		</tr>
		<tr>
			<td style="font-family: 'Trebuchet MS’, sans-serif; font-size: 20px; color: #f26012; padding-top: 10px; float: left; width: 45%;">Heading 1</td>
			<td style="font-family: 'Trebuchet MS’, sans-serif; font-size: 20px; color: #f26012; padding-top: 10px; float: right; width: 45%;">Heading 2</td>
		</tr>
		<tr>
			<td style="font-family: 'Trebuchet MS’, sans-serif; font-size: 17px; color: #333333; padding-top: 6px; padding-bottom: 10px; float: left; width: 45%;">Pellentesque dui magna, maximus ut diam eu, aliquam vehicula sapien. Suspendisse sed auctor libero. Integer id velit consectetur.</td>
			<td style="font-family: 'Trebuchet MS’, sans-serif; font-size: 17px; color: #333333; padding-top: 6px; padding-bottom: 10px; float: right; width: 45%;">Sed in euismod odio. Mauris pulvinar sem erat, vitae suscipit nisl tincidunt a. Vivamus sed tempus metus, at dignissim ligula.</td>
		</tr>
		<tr>
			<td width="100%" style="font-family: 'Trebuchet MS’, sans-serif; font-size: 17px; color: #333333; padding-top: 10px;">Best regards,</td>
		</tr>
		<tr>
			<td width="100%" style="font-family: 'Trebuchet MS’, sans-serif; font-size: 17px; color: #333333; padding-top: 6px; padding-bottom: 10px;">John Doe</td>
		</tr>
	</table>
</body>
</html>

Tables

All the content of the email is contained within a table with each paragraph of text being placed in its own table row:

<tr></tr>

Where text is in two columns the table row contains two table data cells:

<td></td>

Each cell contains the column’s text. The columns are given a width of 45% and floated left and right - note that a width of 50% wouldn’t give any spacing between the columns and therefore a smaller width is used.

Styling

Inline CSS is used throughout - CSS stylesheets are never used for HTML emails.

The table width is set to 100% and the max-width is also set to 600 pixels. This allows the email to be responsive - on large screens the email will be 600 pixels wide while on small screens such as smart phones the email will adjust to fill the width of the screen.

The text is styled to make it look good - the font-family, font-size, text colour and padding are all set using inline styles. These styles are applied to all table data cells.

For a full explanation please see this short video:

HTML Emails: Doctype, Metadata & Structure

Posted on Oct 8, 2015

We are in the process of making a short video series: 'How To Create HTML Emails’. Part 3 of the series takes you through the HTML which can be used as a starting point when writing the code. We’ve included the code here so that you can copy and paste it if you want to get started making an HTML email quickly:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Demo Email</title>
</head>
<body>
<!-- EMAIL CONTENT GOES HERE -->
</body>
</html>

Coding an HTML email is actually quite straightforward, despite the reputation that it has being difficult. There are a few things that are different from creating an HTML webpage though...

Doctype

If you are writing HTML for a webpage in 2015 it’s likely that you’ll use HTML5. For HTML emails this is not the case - you’re coding for a large variety of email clients, many of which are outdated. It has been found that HTML 1.0 Transitional is the most reliable doctype to use.

Note that different email clients treat the doctype in different ways. Some strip out the doctype completely (including the Gmail Android App and Outlook 2010). Others respect the doctype that you set (iPad and iPhone Gmail Apps, Outlook Express and Thunderbird 6). Others strip out the doctype and replace it with XHTML 1.0 Strict (Gmail and Hotmail). This has a implications for testing which will be discussed at the end of the series - for now it is enough to know that XHTML 1.0 Transitional is the most reliable doctype.

Note that when we are working with XHTML we need to include an xmlns attribute in the opening html tag. We have also specified the language type here as it can be useful for screen readers and the sight-impaired.

Meta Data

We have included meta 'Content Type’ so that we can set the character set as UTF8 - specifying as much as possible can be a good thing when writing code for the whole range of email clients.

Meta 'Viewport’ as seen above sets the viewable area to the width of the device screen - this is essential if you want your email to be responsive. If your email is intended solely for desktop users then don’t include this line of code.

The final bit of meta data to set is the title tag - this is worth including because it is used by Outlook when people use the 'View in Browser’ function and it can also appear in email preview snippets in some versions of Hotmail.

So that is all you need to know to get started making an HTML email - we’ll bet that it’s not as tricky as you thought. For full details see the 3 minute video:

Subscribe Forms - Everything You Need To Know

Posted on Apr 17, 2015

We’ve just completed a series of short videos on subscribe forms. These videos take you through everything that you need to know to place a subscribe or unsubscribe form on your website: adding a the form to your site, customising the form to suit your needs and styling the form to match your website perfectly...

Adding A Form To Your Website

This is very simple - just login to your simplelists account, navigate to 'general settings’, select 'subscriptions’ and you’ll see the code which you can copy and paste to your website.

The first short video takes you through this process step by step:

If you have a multiple list account you have a choice of different forms to use - the next video takes you through the options so that you can choose the most appropriate form for your specific needs:

Customising A Web Form

The simplelists web forms are written completely in standard HTML. This means that they are totally flexible and gives you the ability to customise the forms to suit your needs exactly. You can delete fields that aren’t needed, add new inputs and change the form from subscribe to unsubscribe - you can even write your own form entirely from scratch!

The third video shows you how to customise your form by editing the form itself:

Styling Your Form

Having a form that matches your website’s design is important when creating the image that you want. Because simplelists forms are standard HTML they can be styled using CSS which means that you have the ability to style your form any way you want. You have complete freedom to create beautiful as well as useful web forms. The final video of the series shows you how: