How To Create and Style a HTML Email Newsletter With CSS
Do you have a weekly or monthly Newsletter that goes out to Customers on an email list? Well if you do then you will be interested in this article. With most modern email clients (Outlook Express, Outlook etc etc) are able to display Email as HTML and Text then why not take advantage of that. I thought I would share with you how I use Dreamweaver CS3 to create my HTML Newsletters and then use an email auto responder service to distribute them.
The Email Responders Service I use for all my sites Email Newsletter is AWeber. You may use a different type of service but nevertheless they should allow you to create a HTML Email. If you haven’t got yourself and email opt in on your site for your readers and or customers then I would highly recommend that you do.
With this article I will be using the Aweber interface but if you use another service then I am sure that they would have a similar facility.
A Word on CSS and Email Clients
All the email clients render CSS differently and if you have ever tried to do this you will know what I am talking about. If you haven’t then making it look correct in every reader is more painful than making a site design cross-browser compatible. So here is what I suggest you do.
I know this goes against all the web standards groups but it will make your life a lot easier. Use TABLES, I know, I know everyone tells you not to and I don’t ever use them in Website Design and Development, but in this situation I do.
So here we go, we are going to create a fairly standard 2 column with Header and Footer HTML Newsletter like the one above which I use at another site that I run on AFL Football (Australian Rules Football)
Step 1. Create a New HTML Page in Dreamweaver and Insert the Table / Tables
File > New > Blank Page > HTML. Now insert a Table, from the Insert Menu at the Top click the Table Icon.
From the Table Dialog Box Create a Table that has 3 Rows and 2 Columns, with a width of 700px and then Center the Table. Next thing to do is create the Header, so select both the top 2 cells and then Right Click > Table > Merge Cells. You now have a Header. Do the same with the bottom 2 cells to create the Footer. You should now have something like this:
Step 2. Nest Another Table
Next let’s create a Sidebar type Column on the Right Hand Side. Click inside the Right Hand Cell in the Middle Row. Insert another table that has 1 column and 6 rows and set the width to 100%. Now we have a sidebar to play with. Next let’s click inside the middle row left cell and from the Property Inspector give it a width of 65%.
Step 3. Let’s Start Using Some CSS
Now to style the table elements we are going to use inline CSS Styling. Meaning that you use the style=”color:red” and apply it to the Table elements eg: <tr> or <td> etc.
First thing we will do is add a background color to the Header and give the font some style and add some padding. Click in side the Header Cell and then at the bottom of the page window you will see <body> <table> <tr> <td>, click the <td> and it will highlight the element we want to style. Add the following to that tag:
style=”background-color:#003399; font: 1.5em arial; color:#FFFFFF; padding:5px;”
I want to vertically align that cell to the top, so on the Property Inspector find where it says Vert and select Top from the drop down list. Do the same for all the cells. Next I want to give the Main Content text a size on type face, so click inside the cell that is in the middle and to the left and then click the <td>at the bottom of the screen / page and inside the selected <td> tag add the folowing:
style=”font:.8em Arial, Helvetica, sans-serif; padding 5px;”
Now we have a Header and Content Area, now lets move onto the Sidebar.
Step 4. Style the Sidebar
To the following on every second table cell in the sidebar. Click in the Top cell of the sidebar and click the <td> at the bottom of the screen. Then add the following CSS to that cell tag.
style=”background-color:#FF9900; border:1px solid #FF8000; color:#FFFFFF; font: .75em arial;”
Do the same for every second cell in that table. Then I want to give that nested table a top margin to move it down from the Header a bit. So click in the top cell and then from the bottom of the page select the first <table> tag from the right that you see and that will select the table that you want to apply the margin to. Then add style=”margin-top:10px;” to the table tag.
OK now for the Content Cells underneath the Sidebar Headings. Click inside the cell directly below the sidebar heading cell that you just did, find the corresponding <td> tag and add this ti that tag style=”font: .75em arial;”. Do the same for each cell below a Sidebar Heading. Sidebar Complete.
Now all that is left to take care of is the Footer. Do the same thing that you did with the Header (see above) and you now have a footer.
So there we have it, a pretty simple way of still using CSS to style your email Newsletter. Now all you need to do is copy the entire code, login to your Aweber account and create a new broadcast message, then paste the code into the Aweber HTML Editor and save it. Then you can queue it up and send to all your Subscribers.
If you need any more information on using Aweber and creating an email list then Contact Me, and I will gladly give you a hand.
If you would like to receive more tips and tricks on improving your Website then make sure you SIGN UP for the Web Design Tips and Tricks Newsletter
You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.
April 15th, 2008 at 5:31 pm
Excellent! I don’t have my newsletter ready to go yet but when I do I’ll be coming back here to implement your tips. Thank you!
April 15th, 2008 at 5:36 pm
Ok, one question I thought of as soon as I clicked submit….if the subscriber only accepts text emails instead of html, how will this newsletter look to them? Or, must you also create a text based version?
Thanks
April 15th, 2008 at 6:11 pm
@JoLynn
Correct if the Subscribers’ email client only accepts text emails then you will need to provide a text based version as well.
It is good practice to do this.
Cheers
Daniel
May 2nd, 2008 at 5:42 am
Hi Daniel
I am brand new to Dreamweaver and I am not getting the desired results for Step 3 of the “A Word on CSS and Email Clients” tutorial.
I must not understand how to add the style tag because the actual tag content displays after I add it.
Below is my actual code. Can you please tell me how to correctly add the tag. Thank You.
Untitled Document
AFL Football Weekly style=”background-color:#003399; font: 1.5em arial; color:#FFFFFF; padding:5px;”
June 9th, 2008 at 5:50 pm
if i copy these ” style=”background-color:#003399; font: 1.5em arial; color:#FFFFFF; padding:5px;” ” inside the selected tag, it doesn’t show anything on browser. why? or what is your meaning of selected tag?
June 23rd, 2008 at 8:03 pm
thanx for the information
October 13th, 2008 at 11:10 am
can u insert images into cells? with tags etc?
November 18th, 2008 at 7:44 am
I am designing an email for a company and they handle the distribution. So I am not using Aweber. How do I get it from Dreamweaver into a usable form?
June 17th, 2009 at 12:52 pm
It looks as though if you stick to HTML3.0 methodologies and use inline styles then your pretty much home and hosed.
What about place holders etc for personalization of news letters, How does that work?
(By the way I tried your contact link but the Captcha code was not displaying at all so effectively I couldn’t send the message - Firefox)
April 13th, 2010 at 9:25 pm
thank you for sharing this information………