make html emails | HTMEmail

In my previous post, I touched on a couple of reasons why you should use a third-party email newsletter service like Aweber.com or MailChimp.com.

So you don’t have deal with Internet Service Providers (ISPs) when you are blacklisted for spam.

You could craft the perfect, non-spammy HTML email newsletter ever, comply perfectly with the CAN-SPAM act, and you will still have subscribers who report you for spam rather than just unsubscribing. Too many reports get you blacklisted on one list or another. So then you have to track down which list you were reported on, somehow convince the keepers of the list to unblacklist you, and convince the particular ISP that they need to unblacklist you, too.

Or, you go with a newsletter service and let them handle it. Speaking from experience, it’s worth it.

CAN-SPAM Act Compliance

If you are a business, you must comply with the CAN-SPAM Act or face fines of up to $16,000. A third-party service can help you stay compliant by automatically adding the necessary text to your email. This includes stating if the email is an advertisement, listing your business address, and providing an easy way to unsubscribe.

Subscribe and Unsubscribe Handling

Funny how one reason leads to the next, isn’t it? 🙂

A third-party service will provide a simple form for you to use on your site, keep track of your subscriptions and automatically send welcome messages (that you customize) to your new subscribers.

They also will handle the unsubscribes just as well.

Analytics

You like statistics and metrics? I don’t.

But if you need those numbers to show how well your campaign is doing, a third-party service is going to show you how many folks clicked a link in your HTML email, but also how many emails were opened!

You might also get demographics and location stats, too, so you can target your subscribers.

Automatically send your blog posts as an HTML email

Aweber, MailChimp, Feedburner* and Feedblitz are services that all allow you to automate your email newsletter by setting up your blog’s RSS feed into their system. Then when you have updated your blog, an HTML email containing your new blog post is sent to your subscribers.

From experience, I know Aweber can be set to trigger an email as soon as it sees the RSS feed has been updated, or at a certain time(s) of day an HTML email will be sent out with all the posts you have added since the last email. I think setting it for a certain time of day is smarter so you have time to catch the typos after you publish the post.

*A note about Feedburner: Feedburner.com is a free service of Google which enhances RSS feeds. There are rumors that Feedburner may be going away, so be wary if you choose to use it for your emailing. Also note you can’t send emails directly through Feedburner. You have wait until it picks up a new post in your feed.

Included Templates and Editor

If you are not the graphic design type, a third-party service will have professionally made templates so your HTML email will look amazing.

Also, these services will have an editor to help you style and format your email without any HTML knowledge. You can even upload images to their server so you don’t have worry about uploading and linking to own web server.

Conclusion/TL;DR

An HTML email newsletter service is a wiser choice than trying to use your own email servers. You will save time you could be using to write more HTML emails.

The following rules assume you are familiar with HTML code and how to create a web page.

If the email is for your business, you must comply with Federal Trade Commission’s CAN-SPAM guidelines.
Aim for the lowest common denominator. There are more programs and apps for a person to read their email than there are web browsers. If you try to make an email using all the techniques that would make it look great in a browser, it won’t work in the email client.
Use tables for your layout. If you are building a web page, then div tags are the way to go, but div tags are not rendered correctly in many email clients. Stick to tables.
No CSS (Cascading Style Sheets). Styling must be defined as an attribute for the tag you are styling.
For example: <a href=”http://yourwebserver.tld” style=”color: #009900; weight: bold;”>
Trying to use classes and linking to a CSS file on a webserver or defining styles with the <style> tags will be filtered out by Gmail.
No background images. Background images will be filtered out by Gmail. Background colors will still work. Use both the bgcolor and style attributes to define the background color of your <table> and <td> cells.
Ex: This will give you a table with a white background, but the first row will be light blue. The background of the second <td> cell is not defined and will inherit the color setting of the table.
```
<table width=”600” bgcolor=”#FFFFFF” style=”background-color:#FFFFFF”>
     <tr>
          <td bgcolor=”#BFCFFF” style=”background-color:#BFCFFF”>
               [content here]…
          </td>
     </tr>
     <tr>
          <td>
               [content here]…
          </td>
     </tr>
</table>
```
Do not attach images since that may add to your readers’ storage space and slow down the time for them to fully open your email. Upload images to a webserver. Then make sure in your code that you are referencing them using the full path like so:
```
<img src=”http://yourwebserver.tld/images/your-image.jpg” />
```
and not like this:
```
<img src=”/images/your-image.jpg” />
```
Make sure your web server allows “hotlinking”.
No image maps. Does anyone use image maps anymore? They are handy if you just want part(s) of your image to link to your site. They won’t work in emails. Instead, you will need to slice up your image and load each slice into a <td> cell in a table.
Use style=”line-height:0;” in <tr> tags to close gaps between images. You need to this if your are using sliced images!
```
 <tr style=”line-height:0;” >
```
No weird fonts. Stick to what you know is common to all users and remember you will need to define which font to use using a style attribute. Use any of the following for best results.
style=”font-family: Arial, Helvetica, san-serif;”
style=”font-family: Times New Roman, times, serif;”
style=”font-family: Courier New, Courier, monospace;”If you must use a different font, make it as a graphic, but I would reserve it for titles or header text and nothing too long like a paragraph.
Your entire HTML code should begin with <table> and end with </table>. No body or head tags needed. They will be stripped out anyway by Gmail.
No scripting. Javascript or otherwise.
Avoid the words “Click here”. Spam filters pick up on that phrase very quickly and increases the chance your email will wind up in a spam folder.
Test your email before sending it out. Send it to yourself first. You can also set up a free account at Litmus.com to test how your email will look in Gmail and Outlook 2003 which are good lowest common denominator tests. To test more will require a subscription to their services.

Other suggestions:

Be sure use to use the alt attribute in your <image> tags. The majority of email clients have image loading turned off by default, so they will see whatever is in the alt attribute instead.
Example:
```
<img src=”http://yourwebsite.tld/images/thisweekonly.jpg” alt=”This Week Only!” width=”100” height=”50” />
```
Just like on regular web pages, define width and height where possible. This will create an empty space if the images are not loaded and can create a feeling of “I’m missing out on something if I don’t load the images” in the reader.
Use a third party service like Aweber.com or MailChimp.com to send out your email. Ultimately it is not a free solution, but you don’t want to deal with email bounces and trying to get your email address off of blacklists. They also automatically add everything you need to be CAN-SPAM Act compliant to the bottom of your email.

HTMEmail

HTML Newsletter Publication Instruction

Tag Archives: make html emails

Why use a third party HTML email service like Aweber or Mailchimp?