How To Format An HTML Email Part 2


Welcome to How To Format An HTML Part 2!

Incase you missed it here is Part 1 We are going to start with editing the background and header of the email. After you have downloaded the .zip file from Part 1, or you can get it here.

Open up the Folder ‘Example’ then the File ‘index.html’ . This is a template page we will be editing. There is also a .css style sheet attached but for now we will not use the style sheet. Most email readers have difficulty rendering .css sheets. 

To do most of this editing you will need a text editor. I personally use Adobe’s Dreamweaver it’s very simple to use. So lets open the index.html file and you’ll see these first few lines of code:

<html> <head>    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>    <title>Template 9 – Left Sidebar</title>    <link rel=”stylesheet” type=”text/css” href=”screen.css”> </head> <body>

Lets edit the background color by adding a couple simple lines of code:

<html> <head>    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>    <title>Template 9 – Left Sidebar</title>    <link rel=”stylesheet” type=”text/css” href=”screen.css”> <style type=”text/css”> <!– body { background-color: #000000; } –> </style></head> <body>

This has given us a black background  the color code # for black is : #000000. You can find any color you want using a color wheel.

Next we are going to edit the header image. Now here you can create a new header image/graphic in your favorite photo editor or graphic creator. I use photoshop because I’m very familiar with it. 

Look for this bit of code:

  <tr>                <td class=”header” align=”left” valign=”bottom”>                   <img src=”header.jpg” alt=”ABC Widgets” width=”580″ height=”130″ />                </td>  

            </tr>

As you can see the header.jpg image is 580 px wide with 130 px height. This can be easily changed to accomodate your new header image. If your header is 600 x 100 thats fine just change it to the appropriate settings in the above code.

However if you make your header image wider you are going to have to increase the width of the rest of the tables in your email so they don’t look all jumbled up!  I adjusted the header image to 780px width so therefore I need to change the width of the table above the header image.

Here is the code:

  <table width=”580″ border=”0″ cellspacing=”0″ cellpadding=”0″>             <tr>                <td class=”permission” align=”center”>                   <p>You’re receiving this newsletter because you <em><strong>SIGNED UP AT <a href=”http://www.yoursite.com” name=”top” name=”#top”>YOURSITE.COM</a> / BOUGHT WIDGETS FROM US</strong></em>.<br />                      Having trouble reading this email? <a href=”#”>View it in your browser</a>. Not interested anymore? <a href=”#”>Unsubscribe Instantly</a>.</p>                </td>             </tr>  

Change to :

  <table width=”780″ border=”0″ cellspacing=”0″ cellpadding=”0″>             <tr>                <td class=”permission” align=”center”>                   <p>You’re receiving this newsletter because you <em><strong>SIGNED UP AT <a href=”http://www.yoursite.com” name=”top” name=”#top”>YOURSITE.COM</a> / BOUGHT WIDGETS FROM US</strong></em>.<br />                      Having trouble reading this email? <a href=”#”>View it in your browser</a>. Not interested anymore? <a href=”#”>Unsubscribe Instantly</a>.</p>                </td>             </tr>  

See not that difficult is it?

Now there is one thing that I want to mention.

I made this mistake multiple times when I first started with HTML emails. Anytime you insert an image you need to place the image on your web server, and you need to insert the whole URL of that image into your HTML email. Example:

<tr>                <td class=”header” align=”left” valign=”bottom”>                   <img src=”header.jpg” alt=”ABC Widgets” width=”580″ height=”130″ />                </td>  

            </tr>

 

The header image above would not show up correctly in any email reader. It would simply show up as an empty box with the dimensions listed above!  You want to avoid this at all costs! So to fix it simply do this:

<tr>                <td class=”header” align=”left” valign=”bottom”>                   <img src=”http://www.yourdomainname.com/header.jpg” alt=”ABC Widgets” width=”580″ height=”130″ />                </td>  

            </tr>

Thats all you have to do to change the background color and header image in this email template.

Be on the lookout for How to Format an HTML Email Part 3 !

Technorati Tags:,