).

2. Image Backgrounds
You are not able to use image backgrounds using css, the best way of achieving these are by using normal images using the tag.

3. Floats and Positioning
Emails do not support floats or positioning. This means we can't use div tags to create multi-column emails, and you cannot use fancy positioning such as fixed or absolute.

4. CSS3
Although you may love to use CSS3 inside emails, you must remember that these are not browsers with the latest standards, therefore CSS3 will not be supported.

5. Modern Standards
Say bye to modern standards. There is no way of creating emails using div tags since floats and positioning are not supported, so you will be creating your emails using tables.

Now you know most of the important fundamentals of creating a html email, let's get started on building the basic structure of it.

Basic Structure

Looking at Amazons email, they have their company and website links at the top and all the content inside a table. Below is a mock-up of how our structure will look like.



Looking at the above mock-up, we can see that we will need two tables. The first one has two rows, the top row with two columns holding our logo/site name and the menu. The second row spans across both columns, and contains another table with the content and a list on the right hand side.

To get this done effectively, we will first create the email and view it as a web page, this will allow us to create it easily and quickly and check for any errors. So first off, let's create our first table.

<table cellspacing="0" cellpadding="0" border="0" width="100%" style="min-width: 600px">
	<tr>
		<td>
		</td>
		<td>
		</td>
	</tr>
	<tr>
		<td colspan="2">
		</td>
	</tr>
</table>

Above we have created the first tables, we do not use any cell spacing or cell padding, and we do not want any borders, so we make sure our border is 0. We then have the first row with two columns which will hold our logo and menu. Our next row has a column span of 2, this means that it will be one cell which stretches over for two columns, which in our case, is the entire table. We also set the table to have a 100% width, with a minimum width of 600px which is set through css using inline style.

Our next table has two columns over one row, so this is simple table to create.

<table cellspacing="0" cellpadding="0" border="0">
	<tr>
		<td>

		</td>
		<td>
					
		</td>
	</tr>
</table>

The Top

Now we have our two tables set up and ready to go. Now we need to add our logo; this needs to be done by using the img tag. when using images in html emails, you need to provide the full URL to the image, and for safe measures, you should also provide a width, height and an alt attribute.

<tr>
	<td>
		<img src="http://www.domain.com/emails/logo.jpg" width="224" height="52" alt="Aplos Systems">
	</td>
	<td>
		
	</td>
</tr>

The second column will contain our menu, this is optional on how your wish to do this, either with plain text or you can use images. I have decided to use images, with this I've also added a new inline style for this column to align the images on the right hand side.

<td style="text-align: right;">
	<a href="http://domain.com/basket/">
		<img src="http://www.domain.com/emails/menu1.jpg" width="95" height="19" border="0" alt="View Basket">
	</a>
	<img src="http://www.domain.com/emails/split.jpg" width="13" height="19">
	<a href="http://domain.com/wishlist/">
		<img src="http://www.domain.com/emails /menu2.jpg" width="61" height="19" border="0" alt="Wish List">
	</a>
	<img src="http://www.domain.com/emails/split.jpg" width="13" height="19">
	<a href="http://domain.com/youraccount/">
		<img src="http://www.domain.com/emails /menu3.jpg" width="89" height="19" border="0" alt="Your Account">
	</a>
	<img src="http://www.domain.com/emails/split.jpg" width="13" height="19">
	<a href="http://domain.com/help/">
		<img src="http://www.domain.com/emails/menu4.jpg" width="30" height="19" border="0" alt="Help">
	</a>
</td>

So using text-align: right, all of these images will be on the right hand side of the cell. We use images instead of plain text and there are also images used for splitters (horizontal lines.) That is it for the top area, the next part we'll be doing our content and lists.

The Content

Before we go onto the content, we need to do a little styling to the second table and the first column. We're going to add a border to our table as well as add some padding onto our first column. The reason we're not adding padding to the whole table is because we will be using a background colour on our list column, using a padding will create a white space to the right side of the list.

<table cellspacing="0" cellpadding="0" width="100%" style="border: 1px solid #4c7489; font: normal 12px tahoma, verdana, arial;">
	<tr>
		<td style="padding: 5px">

So we set the width to be 100% and a 1px solid border, this is a very dark greyish blue colour and then we set our font up to the one that we wish to use. We also get a 5px padding onto our cell. Now we can start with the content. If this is for a confirmation email, then one of the first things we would want to do is to thank the customer, we can use the strong tag to make this bold.

<strong>Thank you for your order, John Doe.</strong><br /><br />

Looking at the code above, you can see that we also use line breaks at the end (br), because we're using html, all code is needed. Whereas if we were using plain text, we would not need these line breaks, we could just use normal returns. Now you can experiment with some html here, using other tags such as em, div, span and more. Here is another piece of code with added tags and styles.

<div style="background: #4c7489; color: #ffffff; font-weight: bold; padding: 6px 5px; margin-bottom: 5px;">
	Order Confirmation
</div>
<strong>Email Address:</strong> john.doe@mysite.com<br /><br />
						
<table cellspacing="0" cellpadding="0" width="100%" style="font: normal 12px tahoma, verdana, arial;">
	<tr>
		<td>
			<strong>Invoice Address:</strong><br />
			John Doe<br />
			8 Fake Road<br />
			Fake Town, FakeCounty, FA09 8KE<br />
			United Kingdom
		</td>
		<td>
			<strong>Billing Address:</strong><br />
			John Doe<br />
			8 Fake Road<br />
			Fake Town, FakeCounty, FA09 8KE<br />
			United Kingdom
		</td>
	</tr>
</table>
<br />
<strong>Order Grand Total:</strong> £324.45

Viewing the above code, we've added a div tag that has a background colour the same as the border, using white and bold text. We also add another table to show the invoice and billing address. Note that there is more in the content section, and if you wish to view the full source code of this content section, you can click on the link below to do so (it will open in a new window.)

View Source

The List

We are able to put anything in this right side list, but since it's for a confirmation email from an e-commerce website, we will put up recommended products. Products that are similar to what the user has just brought. So the first thing to do is to style the right side as we need it. It will also use valign to set all content inside this cell at the top of the cell.

<td width="170" style="background: #f3f3f3; padding: 5px;" valign="top">
						
</td>

Now we can add a heading or something similar to let the reader know what we are showing. I will be using the same one I used in the content (Order Confirmation).

<div style="background: #4c7489; color: #ffffff; font-weight: bold; padding: 6px 5px; margin-bottom: 5px;">
	Your Recommendations
</div>

We can then add the products that are being recommended. You can also style these if you wish. I've got mine styled as a white background with a 1px solid border.

<div style="background: #ffffff; border: 1px solid #4c7489; padding: 5px; text-align: center;">
	<a href="#nogo" style="color: #22b9df;">
		<img src="http://local.aplossystems.co.uk/articles/creating_sending_html_emails/product.jpg" width="120" height="109" alt="40' Sony Bravia LCD" border="0">
		<br />
		40' Sony Bravia LCD
	</a>
</div>

Looking at the code above, you will notice that we can also style links, I have styled mine to be a light blue. Although you can style links, there is not a way to be able to style them on hover, active or visited. I have this block of code with different products 3 times, and underneath another link to view all recommendations.

<div style="background: #ffffff; border: 1px solid #4c7489; padding: 5px; text-align: center;">
	<strong>See all of your</strong> <a href="#nogo" style="color: #22b9df;">Recommendations</a>.
</div>

This concludes the creation of a html email. As you can see, the code is much messier than it would be if you were designing a website. But since emails standards are still outdated, you have to use methods from the 90s and early 2000s.

Sending HTML Email With PHP

Since we got our HTML email done, it's time to show you how to send one using PHP, if you know how to send an email using PHP, then you already know most of it, and you just need to add some new headers. So the first thing to do, is to set up who the email is going to and the email subject.

$to = 'my-customer@theirdomain.com';
$subject = 'Order Confirmation';

So we have two variables, first one is where the email is going, the second what the subject is going to be. Now we need to set up our headers, this is also the part that allows the email to be HTML.

$headers = "From: your-email@your-domain.com\r\n";
$headers.= "Reply-To: your-email@your-domain.com\r\n";
$headers.= "MIME-Version: 1.0\r\n";
$headers.= "Content-Type: text/html; charset=ISO-8859-1\r\n";

The first line is your email address (or who the address is from), the second line is who the email should be replied to if needed. You can either set this the same as the from address, or you can have a fake from address and use your real address as reply-to (by fake address, I mean something similar to auto@domain.com or confirmation@domain.com).

The third defines the MIME version. This is what allows an email to contain more than just plain text (such as HTML) and stands for Multipurpose Internet Mail Extensions. The fourth line is the content type of the email and charset, in this case our content type is html. The character set is the default character setting on the web and emails, it allows alphanumeric characters as well as symbols and foreign characters.

The next bit to do is to put our html email into a variable. This can be done like the following:

$message = 'MESSAGE HERE';

Make sure that when doing this, you use single quotes on the variable, and any single quotes you have in the message you will need to escape. For example:

$message = 'There\'s a room available for rent.';

Using the above example, I have escaped the ' in "There's" using the backward slash ( \ ). To send the email, you will need to use the following code.

mail( $to, $subject, $message, $headers );

That is it. If you visited this page on a server, it would send the email to the email address contained in the $to variable.

The End

That concludes this tutorial. You should now know how to design html emails, and know what you are allowed to use and can't use, and how to implement certain methods. You should also know how to send this final email using PHP. If you wish for a demo, you can find one by clicking the link below. You will need to enter your email address, and the email will be sent this address.

HTML Email Demo