Create your semi-pro HTML newsletter
1752 words, 9 minutes
We’ve already seen how to create a PDF newsletter and how to create a HTML newsletter from within Thunderbird . Both methods work but neither are, nowadays, used in the professional world.
First of all, the PDF method is destination independent but requires some PDF generator and provides the user with a mail saying “here’s the information”. The second method is closest to the “Web 2.0” user experience. But the native editor we used is quite complicated to use and generated moderate sexy outputs.
In the article, I’ll detail how to achieve semi-pro newsletter such as the one you get from on-line vendors.
From a user’s perspective, what we want is to send sexy HTML e-mail with content and pictures. Furthermore, for those users who may use poor HTML rendering e-mail client, we want them to be able to see the newsletter from the Internet.
From the creator’s perspective, what we want is any easy way to create and manage the newsletters. We don’t want to send to much data over e-mail and we want users to be able to consult previous newsletters.
As usual, don’t forget that generating the most sexy appealing HTML is useless if there’s no content! Users want food, not golden spoons. But if you can cook great meals and propose them in porcelain plates, you’ll be a chef.
Process overview
As the newsletter’s manager, we’ll have a local copy of every newsletters and dependencies we use. We’ll manage the template and create the newsletters using a local HTML editor then publish them onto a remote Web server. We’ll send the emails from our local e-mail agent. The users will receive an HTML e-mail, the newsletter, with the images hosted on the remote Web server and with a link offering them to consult the newsletter on-line in case the mail agent doesn’t display the e-mail correctly. Sounds clear? Let’s begin.
Requirements
To generate and maintain the newsletters, here’s what we’ll use:
- a local folder with all our files ;
- a remote Web space that will host every files remotely accessible. You can use a free web space or part of your website. I’ll use a part of my website, namely http://www.tumfatig.net/nl/ ;
- a HTML template. You can dig for HTML free templates on the Internet or
create one yourself. Here are a few templates I found and use during the
tutorial.
- Internet Music
- Syndicate me
- RedTie
- 100+ free HTML email templates
- Newsletter Design: 50+ Great Examples
- a HTML editor. I’ll use KompoZer. Because it’s user firendly, because it runs on my Mac and because it can synchronize with the remote Web space.
- a Mail client. I’ll use Thunderbird. Because it’s free, runs on my Mac and can include HTML code in e-mails.
Note: after using KompoZer to run this tutorial, I’m a bit disappointed. It has HTML issues, at least with my template and the publishing method is quite complex when you want to synchronize all the directory and sub-directories. You may look for another free alternative or some more complex, and non-free software, like Dreamweaver. Personally, for the last 66% of the tutorial, I used Vim to write the HTML&CSS code and FireFTP to synchronize the data.
The local folder
Let’s begin with creating the local folder tree that will host the newsletters. Choose a right place to put your local files. Windows users might create a directory in their “My Documents” directory. Mac users, such as me, might create a directory in “Documents”. Download or create your template and put it in that dedicated directory.
In this example, I’ll use the “Internet Music” HTML template and put all files
in /Users/jdoe/Documents/newsletter/. In the newsletter directory, I have
the index.html file and the images directory. Each new newsletter will be a
copy of this index.html file.
The newsletter generation
Start KompoZer. From the “Edit” menu, select “Publishing Site Settings”. Browse to your local folder and click “Choose”.
In the “General Settings”, fill-in the “Site Name” (mine is “TuM’Fatig news”) and the “Web Site Information” (mine is “http://www.tumfatig.net/nl/") . In the “FTP Settings”, fill-in the “Publishing Server”, “User name” and “Password”. Then, click “OK”.
You should be able to “Edit site list” and show your new site name on the left pane.
The template
From the local folder, I copied the index.html file are renamed it
template.html. This will be a modified version of index.html that will be
used as the basis of any new newsletter.
Double-click on the template.html file and apply your modifications. I did
change the title, remove some parts I didn’t want and modify parts that should
point to my website and on-line newsletter. Check the “Format” menu for options
to modify the page.
You may want to generate foo text to fill-in the template contents and see what it would like. You can generate some random text with this Lorem Ipsum generator.
I had to edit the CSS and HTML with some other editor because KompoZer seemed to have issues with the “lt” and “rt” divs from this theme. To be more precise, KompoZer kept creating
<div class="lt" />
when the correct syntax is
<div class="lt"></div>
When your template and common files are ready, you can check the on-line synchronization and availability. From the “File” menu, select “Publish”. Select the correct “Site Name” from our previous configuration. Then, click “Publish”. You can then check your on-line version. My template is available here .
As this should be OK, you can now proceed to the newsletter creation.
The newsletters
There are two things that will change from one newsletter to the other : the
content and the embedded images. Therefor, the storage will be divided in two :
the newsletter HTML file, which will be named according to the newsletter issue
number, and the images included in each newsletter. The newsletter will be
named using the following scheme nl-NUMBER-DATE.html. The image directory
will have the same name as the newsletter, without the final .html.
Start KompoZer. In the site section, double-click the template.html file ;
this will open the file in the editor. From the “File” menu, select “Save As”
and fill-in the newsletter issue name ; for example, nl-001-201103.html.
Close the template file, refresh the site section and open the newly created
newsletter. From the site section, you can create the directory used to store
the image for this newsletter ; for example, nl-001-201103.
Now, using the editor, fill-in the new newsletter issue. Write your new text, events and add images. Remember to store your images in the site’s folder before importing them in the HTML file. When you’re done, synchronize your local folder with the remote Web site.
Note: If you use images in your newsletter, you must provide the on-line reference in the HTML code if you want them to appear in the e-mail. It is quite dirty, from a management point of view, but it is the only way that Thunderbird will see them correctly when you write the e-mail. By the way, the same modification must be applied to the CSS file.
Note: Another problem I found was not specifying both width and height for images. Firefox and Thunderbird proportionally scale the images but, for example, Mac Mail don’t. You may then end with stretched images in your e-mail.
The example of the rendered on-line newsletter is available here .
Send the mail
Now that we have the newsletter on-line, it’s time to send the e-mail.
There is no easy and pretty way, or at least I didn’t found any, to send our new HTML newsletter from the e-mail client. So what we’ll do is use some advanced features of Firefox and Thunderbird.
Start Firefox and browse to your on-line newsletter. This is the URL from which it is available. Then, from “View” menu, select “Page Source”. From the “Edition” menu, select the “Select All” option. Then, from the “Edition” menu, select the “Copy” option.
Start Thunderbird and click the “Write” button. Fill-in the “To” field and the
email subject. Now, click in the message body. From the “Insert” menu, select
the “HTML” option. Paste the text you’ve just copied from Firefox ; either use
ctrl+v under Windows or cmd+v under Mac. Then click “Insert”. You should
now see the web page as displayed on the navigator. You can now click “Send” so
that your users get your newsletter!
Receive the e-mail
Remember that users may read the e-mail with thousands of tools. Most of them will use either Outlook, Thunderbird, Mac Mail, Hotmail, Gmail or Yahoo Mail. If you want to use this mailing technique, you must check that your newsletter works with those. For more exotic mail clients, you’ll rely on the on-line version to entertain your users.
That said, here’s a small overview of how this particular newsletter is rendered. Even though the HTML/CSS code is 100% valid from a W3C point of view, you’ll see that it is not rendered as expected all the time.
Conclusion
I won’t comment on which e-mail clients works and which don’t… But I expected some of those errors… HTML is a standard but various editors seem to not understand this word the same way as others…
Anyway, you can see why I made an on-line version available. Must of your users should click the top link when they realize the mail is not rendered properly. So if you can afford this, you find the (nearly) right way to do it. If not, there are probably tons of non-free software that can do the job.
Before leaving free software, you may test array-based template. There is a
great number of discussions on the Internet whether you should use div rather
than table. But, in our particular case, arrays might solve some of the
rendering issues.
Update: I just received a Dell and Amazon ad message. Looking at the code,
there are using table-based HTML and embedded styles. Yuck!
There is a last thing that should be pointed out: how to deal with you destination address. It probably deserves a whole article ; maybe I’ll write one some day. Until I do it, just note the following advice:
- Most (SMTP) mail servers don’t allow people to send a single mail to thousands of people at one time ;
- If you need mass-mailing, use mailing-lists ;
- If you don’t want your mailing-list to get stolen, keep it secret (with BCC) ;
- If you want to be sure your mailing-list isn’t used without your will, moderate it.
That’s All Folks! Hope it helped.