Welcome to Part 2 of a 4 part series on Mailing Lists for Web Developers.
In Part 1 we went over Mailing List Providers, and in Part 2 we’ll be discussing mailing list templates. In Part 3 we’ll integrate a custom mailing list into Wordpress. Finally we’ll do some tracking and statistics with our mailing list in Part 4.
Download the example template used in this tutorial here. (You may need to right-click Save Target As)
Keys to Building HTML Template
- HTML/Minimal CSS Only
- CSS must be within HTML (No linking elsewhere)
- Tables Must be Used for Layout (No layout with CSS)
- Not every reader allows images
- Tracking can be done with embedded images ONLY
- Variables Must be Set According to Mailer
As you can tell, our email templates are very limited. But even just with CSS, HTML, and Images, we can create a clean, pleasant template.
How an Email Template is Built
Email readers are funny things. While browsers have Javascript and Flash and interactivity, email is stuck in 2001. We have no Javascript functionality, very little CSS support, and no Flash interactivity whatsoever. We must be very careful about our design too, if we are to have it look consistent.
This is not the time to get insane with design. Simplicity is key with newsletter emails.
That being said, let’s look at the CSS code for our standard email newsletter template:
CSS Code
<body>
<STYLE>
.headerTop { background-color:#FFCC66; border-top:0px solid #000000; border-bottom:1px solid #FFFFFF; text-align:center; }
.adminText { font-size:10px; color:#996600; line-height:200%; font-family:verdana; text-decoration:none; }
.headerBar { background-color:#FFFFFF; border-top:0px solid #333333; border-bottom:10px solid #FFFFFF; }
.title { font-size:20px; font-weight:bold; color:#CC6600; font-family:arial; line-height:110%; }
.subTitle { font-size:11px; font-weight:normal; color:#666666; font-style:italic; font-family:arial; }
td { font-size:12px; color:#000000; font-size: 80%; line-height:120%; font-family:arial; }
.sideColumn { background-color:#005F79; border-left:1px dashed #CCCCCC; text-align:left; }
.sideColumnText { font-size:11px; font-weight:normal; color:#000000; font-family:arial; line-height:150%; }
.sideColumnTitle { font-size:15px; font-weight:bold; color:#333333; font-family:arial; line-height:150%; }
.footerRow { background-color:#8C0042; border-top:10px solid #FFFFFF; }
.footerText { font-size:10px; color:#996600; line-height:100%; font-family:verdana; }
a { color:#960; }
</STYLE>
<!-- First Table would go here --!>
You’ll notice the CSS is put within the BODY tag, with an old fashioned STYLE tag. That’s as fancy as we can get with our CSS. So deal with it, and change the things you need to individually. As in within the TABLE.
Sylin’ Tables
Yes, you heard that right. Everything needs to be individually styled within the TABLES you create. So it’s a lot of rewriting code, and most things end up looking like this:
<table width="100%" cellpadding="10" cellspacing="0" bgcolor="#FFFFFF" > <tr> <td valign="top" align="center"> <table width="600" cellpadding="0" cellspacing="0"> <tr> <td style="background-color:#FFCC66;border-top:0px solid #000000;border-bottom:1px solid #FFFFFF;text-align:center;" align="center"> <span style="font-size:10px;color:#996600;line-height:200%;font-family:verdana;text-decoration:none;">Email not displaying correctly? <a href="*|ARCHIVE|*" style="font-size:10px;color:#996600;line-height:200%;font-family:verdana;text-decoration:none;">View it in your browser.</a> </span></td> </tr> <tr> <td height="108" align="left" valign="middle" style="background-color:#FFFFFF;border-top:0px solid #333333;border-bottom:0px solid #fff"> <center> <a href=""> <img src="http://travelingforever.com/blogs/wp-content/uploads/2009/09/example.jpg"></a> </center></td> </tr> </table>
This process can be greatly sped up by using something like Dreamweaver. Yes, this is one time where as a web developer you’ll appreciate all the work that’s gone into FRAMES in Dreamweaver. So take it while you can.
Images
As you might have noticed above, you need to upload your images to your webserver before you can use them within your template. I find it easiest to do this from within Wordpress. Just click the upload/insert image, and then select the files you would like to insert into your newsletter. Once it finishes uploading, copy the url to your IMG tag.
Of course, you’ll need to resize your files way down, to under whatever your design calls for. My design calls for main images at 306px x 170px, and side images at 188 x 300. Just make sure it fits.
<img src="http://travelingforever.com/blogs/wp-content/uploads/2009/09/example.jpg" />
Variables
If you look through the template, you’ll see there are place holders for template variables. Such as the mailing list name, the subscriber’s name, etc. Depending on the mailing list provider you use, you may need to change these codes. In Part 3 we’ll run through these, and pick out just how to set variables.
In case you missed it, you can download the example template here.
