DesignBash

web magazine and more…

How to Mail HTML Email

If you’re anything like me, you may have wondered how to mail HTML emails without using a fancy service like Campaign Monitor or Mail Chimp. The truth is, it’s actually much easier than you probably think. There are just a few steps you need to follow.

Step 1 – Get Thunderbird

get-thunderbird-email

For this example I’ll be using Thunderbird, a great open-source mail client put together by the same people who bring you Firefox. I’m sure you can use other mail clients to mail HTML email, but I really enjoy Thunderbird so that’s what I’ve decided to use. You’ll need to get everything setup before you can actually send any HTML email, but that’s really outside the scope of this quick walkthrough.

Step 2 – Craft Your HTML Email

The next step is to craft your HTML email. This is definitely the hardest part and I would highly recommend looking through tutorial before trying anything too fancy. Sitepoint has a nice little article on the subject, or if you’re feeling lazy you can grab a pre-fab HTML email template from Campaign Monitor.

Step 3 – Upload Images to a Public Area

If you’re using any images in your HTML email, you’ll need to find a place to host them online. If you fail to do this, all your images will show up broken. Ideally you’ll want to use your own hosting, but if you need a quick fix you can probably use a service like imgur to temporarily host them for you. Once your images are all online, make sure to change all the image paths in your HTML email. The image path needs to be absolute, which means you need to put in the full URL (ie. http://www.yoursite.com/email-images/your-image.jpg).

Step 4 – Use Thunderbird to Mail the HTML Email

Create a new message just like you normally would, but leave everything blank to start. From the top menu click Insert / HTML then paste in your HTML email. (click the images to see screenshots)


create-new-email

Create a Blank Message



mail-html-email

Click Insert / HTML



insert-html-into-email-thunderbird

Paste in Your HTML Email


And thats it! Start sending your HTML emails!

posted by admin in HTML Email,Tutorials and have No Comments

Place your comment

Please fill your data and comment below.
Name
Email
Website
Your comment