Writing HTML powered E-mails

August 26th, 2009

Writing HTML powered E-mails

I haven’t been able to write anything since I last got back from the weekend because I helped a client launch their website for a new and exciting business I’m sure a lot of you will be interested in. Anyways, more on that tomorrow.

I’ve already talked about two things that make HTML powered E-mails essential to businesses and freelancers alike. Today, I’m going to discuss actually diving in and creating your very own HTML templates.

What you’ll need

  • A basic knowledge of HTML and CSS
  • Whatever you use to write HTML/CSS (IDE, text editor)
  • Thunderbird (or any equivalent mail client that can send HTML e-mails)

1. Learn the rules

MailChimp Free E-bookWith anything I try to do for the first time, I always try to read up about the subject beforehand so I don’t go into it blind. One thing to note about HTML powered e-mails is that they’re not like websites. You can’t do everything you’re used to doing in websites.

I recommend just skimming through the free e-book from the guys at MailChimp. These guys are the professionals when it comes to e-mail marketing so it’s definitely worth the read. I simply skimmed through most of the parts but took careful note of the Designing and Coding section (pages 9 – 25) which details some gotcha’s to avoid.

Really though, most of the other pages you can safely ignore unless you’re new to this web thing. :)

2. Get a head start with templates

2-column template

2-column template

Sure we could code up an e-mail template from scratch but where’s the fun in that. Lucky for us, MailChimp provides some free templates as a springboard to your own designs. You can get them here. (scroll a bit to the bottom)

They’ve generously provided us with 4 of the most common layouts for an HTML powered E-mail. Included in the package is a 1-column layout, two 2-column layouts, and a postcard layout. Although they’re geared towards newsletters, don’t let this stop you from creating templates for regular correspondence or even invoices and proposals.

3. Modify those templates to your heart’s content

Now that we have the templates, open the HTML files in your favorite IDE/text editor and change what you like. You can preview them in your browser to get a hint at what they’ll look like. Remember to take note of some of the gotcha’s mentioned in the book and don’t try to overdo things, it is just a template.

It’s all pretty elementary HTML and CSS so you shouldn’t have a problem editing these things.  Once you’re done modifying these babies, it’s time to test these things in the real world.

4. Testing away

Inserting HTML

Inserting HTML

Ok, now you want to get that HTML you coded up and copy it to the clipboard. You want to fire up Thunderbird and write a new message. In the body of the message, select Insert > HTML… and paste the HTML template you created and hit the Insert button.

You will see your template in the body of the text, nice and pretty as you designed it. If your template is like mine, I have something like “<insert message here>” written in the body of my template where the message should be so that I can type my message in Thunderbird.

Once you’re done inserting your HTML template and modifying the text, start sending it out to different e-mail accounts to see how they’ll appear. I tested my own templates on Yahoo! mail and Gmail so I could see how it looked on a web browser based e-mail client and also on different mail clients like Outlook. Usually everything will be fine except for some minor tweaks.

5. Plain is still in

One thing you must note with e-mail is that not everyone wants to receive HTML powered e-mails and you have no way of determining how the receiver will want to view your mail. In that case, you must always send a plain text version along with your HTML powered e-mail.

Luckily for Thunderbird users, when you send those HTML powered e-mails, a plain version is automatically created for you and sent along with the e-mail. Just to confirm this, you can send yourself an HTML powered e-mail and set Thunderbird to read e-mails as plain text. From there, you can see if your potential recipients will run into any trouble reading your mail in plain text.

5. Clipping convenience

Finally, once you have your HTML e-mail template, you can use any clipping application such as Evernote, to store that template so you can easily find it for copy-pasting later. Any other software that allows you to quickly put the template into your operating system’s clipboard so you can paste it in Thunderbird will work too.

An Example

I use my own HTML powered e-mail templates for sending initial messages to clients, proposals and quoting. They follow suit with the color schemes I use and design elements of my brand.

Quote Template

My HTML Quote Template

Take note that HTML powered e-mails have a variety of uses, even more than what I use them for, that include sending newsletters, promoting products and sending branded notifications.

If you’re serious about doing e-mail marketing campaigns for your business, I would recommend MailChimp to handle the nitty gritty as this tutorial won’t cut it, especially if you’re sending to a mass number of e-mails. By the way, I am no way affiliated with MailChimp, just so you know. :)

All right, have fun with those templates and show me some of your own templates if you get to making them yourselves. If you have a tip to writing HTML e-mail templates, kindly share it with us in the comments.

3 Comments
  • ankara web tasarim
    3:13 pm on June 19th, 2013

    Asking questions are in fact fastidious thing if you are not understanding anything totally, except
    this article offers nice understanding even.

  • Excellent blog below! Additionally your web page a great deal upwards quickly! What hosting company do you think you’re the effective use of? Am i able to make your online weblink for your coordinator? I wish my website crammed as quickly since yours hehe

  • Quite element of written content. I just now located your blog along with accession investment to express that I get actually loved account your current weblog discussions. However We will be checking with your augment and even I actually achievements you have admission to constantly rapidly.

I am available for NEW PROJECTS.
Click this to send me a message.

Name

E-mail Address

Message

E-mail
rj@robinjamesyu.com
Mobile
+639164676161
Yahoo!
robinjamesyu