Create another semi-pro HTML newsletter

In the previous “Create your semi-pro HTML newsletter” article, we’ve seen how to use an HTML template to create and send newsletters. We also seen that, sometimes, it doesn’t render nicely.

This article is going to give you directions that should correct this.

In fact, we’re gonna change many things.
First, what doesn’t change:

  • we still use a remote Web server to host images and on-line versions of the newsletters ;
  • we still use as much Open Source (or at least Free) software as possible ;
  • we still edit the newsletter locally from a HTML template ;
  • we still synchronise local and remote content.

Now, what changes a bit:

  • I don’t use KompoZer any more. It has too many issues for what it’s worth ;
  • I use FireFTP, the Firefox FTP extension, to synchronize local and remote content ;
  • I use the BlueGriffon HTML editor ;
  • I use table-based HTML template.

Prerequisites

Number 1… Content! You should know now 😉

Number 2: The Web storage where the newsletters will be available still is http://www.tumfatig.net/nl/.

Number 3: Get the software. FireFTP can be installed from Firefox’s extension window. BlueGriffon can be grabbed from here.

Number 4: New template. I accidentally got to the MailChimp website. Quoting them, “MailChimp helps you design email newsletters, share them on social networks, integrate with services you already use, and track your results. It’s like your own personal publishing platform”. This service looks nice. First of all, there is a free option for low senders. This may be a nice way to test their platform. Then, they provide an online newsletter composer ; rather simple. Last but not least, they offer free HTML templates. This is really sweet! In this tutorial, we are going to use the template named fancy-1-3-2.html.

The template

As I said, I’ll be using the fancy-1-3-2.html. So download the MailChimp set, unzip it and copy the template file to your remote Web server with FireFTP. Mine is available here.

Then, start BlueGriffon and, from the “File” menu, select “Open”. Enter the remote URL to your template and click “OK”. Note that you may use a local file if you prefer. But I thought using the remote file was better: because it won’t be modified by error and because it is backed up with the whole Web site.

While we’re in the template section, you may wish to fill-in the information that should not change (much) from issues to issues. You may change the title, head warnings, facebook/twitter links, the colors, the fonts…

When all modifications are done, save the file and upload it to the Web server.

The newsletter

As previously done, open your on-line template and create a new newsletter instance. I did name it nl-002-201103 and simulated a newsletter that would be done to advertise events from my martial arts school.

When the newsletter is finished, upload it to the Web server.

To see what it looks like, just click here.

Send the email

From you Web browser, show the HTML source of the on-line newsletter. Select all text and copy it to the clipboard. Start Thunderbird and create a new HTML mail. Click in the mail body section. From the “Insert” menu, choose “HTML” and paste the HTML source. Fill-in the destination and mail subject and send the mail!

Let’s have a look at the mail rendering into three common e-mail clients:
  
Tada!

You have now mastered all the basics for creating electronic newsletters. Now practice, and enjoy.

That’s All Folks

1 Comment

  • Chandelier Cleaning Thu, 28 Jul 2011 03:17:06 +0000 Reply

    I’m impressed, I must say. Really rarely do I encounter a blog that’s both educative and entertaining, and let me tell you, you have hit the nail on the head. Your idea is outstanding; the issue is something that not enough people are speaking intelligently about. I am very happy that I stumbled across this in my search for something relating to this.

Leave a Reply

%d bloggers like this: