HTML emails the easy way

One of the problems facing any new developers/designers is how to implement an HTML email without all the headaches and frustrations along the way.

We plan to cover all the bases in this tutorial along with all the solutions for problems you may encounter. As always, discussion is welcomed as our hope is to provide the most accurate and up to date tutorial for the benefit of all on the web.

The Basics First

Emails can not contain Adobe Flash. HTML, CSS and images only.
There can be no DIV tags in an HTML email. We have to revert to Tables for layout and content for this (a step back, we know)
Images should be hosted on the web

Designing

If you have Adobe Photoshop, your life gets made a bit easier with this step. So lets start with that.

Step 1 involving design of the email in photoshop

We have set up a simple Photoshop Document at 600px by 400 px, and place a very quick and crude design for our own emailer to be sent out with a link to a page on our website that we would like the client to see. Remember to keep the layout simple as we would like to slice this into a very simple table using the Slice tool.

In Step 2 we slice our design up using the slice tool

We have sliced our design up into 5 sections to accomodate the different elements in our page. Now we generate our HTML and images straight from Photoshop CS3.
Now an important thing to remember is that the Adobe CS3 suite has dropped Imageready, so to export this emailer follow the steps about just near the bottom of the page on this link.

Basically the steps are:

select File>Save for Web&Devices.
Select the Slice Select tool
Hold Shift and Click on all your slices.
Click Save.
In the Save Dialog box, select HTML and Images.

And you are done!

Tying up the ends

Now that we have our HTML and images folder. The rest is quite simple.

First thing you need to do is to ftp the images to the client's server in a discrete folder, and change the url's in the HTML emailer to correspond. This step is important as it keeps images showing in the email (well for most email programs, anyways)

Remember to keep as much text hard coded in the HTML as possible. If images do not show, you still want your readers to gain as much info as possible.

All CSS should be inline. The emailer will not recognise included CSS files or styles in the head of the HTML. Any styles should be written within the elements themselves as such :

<p style="font-size: 16px; color #0065ad">This is an inline style</p>

Sending The Email

Now to set up the email is a simple case of adding a signature to your preferred Email program. The most common one our clients seem to use is outlook express, so we will deal with that. So fire up outlook express.

Select Tools> Options

Select Signatures in the pop up and click new

In the Dialogue box that appears, select the signatures tab and then select the "new" tab to create your new signature.

Rename signature and then select file type

Rename the Signature to something distinctive. Make sure that your email signature is set as default, and the checkbox at the top is checked, to include this signature in all outgoing emails. Now select the "file" radio button and then Browse.

browse for your html file

Remember to select the "files of type" at the bottom of the pop up that appears as HTML and not as ".txt" which is the default selection. Navigate to the (safe) place you saved your file. Select it and then open.

Click apply and then ok, create a new email and you are done.

After you have selected the email file you have created, remember to apply and save everything. Once all of this has been done, when you create a new email, there is your lovely new signature to be sent to your clients.

In Conclusion

This tutorial followed the creation of an HTML emailer from start to finish, and we tried to make it as easy to follow for young web developers, and clients (who do not know how to set up signatures) alike. One thing to note is that if the image files on the FTP server or the original HTML file on the computer is moved, the email will not show correctly. So it is always best to save the files where the are out of the way.

This method is a simple way to send out HTML emailers, but the method is exactly the same as setting up a signature with your logo at the bottom of your emails.

Do you have something to add or a correction to throw our way. Please feel free to comment underneath.