HTML Emails – A quick rules and primer tutorial
Assault's most recent HTML Email blast
If you’re a designer and developer there’s no doubt that you have at some time had to design or code an HTML email. If you haven’t already, sign up for our newsletter at the top of our homepage to receive the Assault Newsletter once a month.
HTML emails have become a great way to solidify your brand with internal and external emails. Along with their popularity, there seems to be some common misconceptions about how they work, and how long they take to build. Along with the basic process for which I have outlined below, there are a few general rules that you should always follow with HTML emails as well as with any other web based project for which you are not experienced with or completely cognizant of:
1. If the client needs it the next day, they are not getting an HTML email.
Email clients are even pickier than web browsers, and there are 50 more email clients than browsers. HTML emails need to be tested after they are built. Testing can take anywhere from 1-4 hours. They also need to be cut up from an image and turned to plain text so that if users have certain features disabled in their email client (Such as HTML) they can still see the content of the message.
2. HTML Emails are commonly rejected and/or flagged as spam (Should you even use it?)
HTML email adds points to your emails’ overall spam score, and runs the risk of being marked as spam. For this reason, it is important to send a text only version of your email, and/or a link at the top of the email that allows users to click to view their newsletter in a browser window. Another thing to note, is that because you have an inherit spam score from the embedded HTML, that you should not forward HTML emails. They should be sent directly with no FWD in the subject because that too will add to your overall spam score.
We should also be sure to have permission to send emails to the people we are contacting whether it be via an opted-in online subscription form, or they should have exchanged business cards, and understood that they would be getting contacted.
3. Images are disabled for security reasons
It is important to have the text of the email be in system text because 99% of email clients have images disabled for security reasons. This causes them to show up blank until the user right click and allows them. With plain html and system text users can still see most of the email.
4. “Pixel Perfect” – Not possible with HTML Emails
There are too many email clients, and too many different rules for how html emails are displayed. They are never going to look exactly the same in all email clients. Your 16 hour build time can easily turn into 100 hours of time if you spend time trying to make it look correct in Eudora as well as in Outlook Express, Gmail, and Yahoo Mail.
5. Fast, Good, Cheap – Pick two
If you want a fast and cheap email, it’s not going to be complex and it has to be very simple. If you want a good, fast email, it’s not going to be cheap.
The Correct Process (16-24 hours After Design Approval)
- Design Approved for build
- Design built into inline styles, HTML/CSS and tables
- Images uploaded to remote host
- Design is sent around to different email clients to test for images disabled etc.
- Email is built into workable template for either Campaign Monitor or Thunderbird (see below)
The Incorrect Process
- Design Approved
- Design Sent to Client
- As an attachment
- As a PDF
- As a single image in an html document
Two Ways to send your HTML Email
1. One email at a time, personalized for each individual
This process requires using either an Outlook template, or a Thunderbird template. We recommend doing this process in Thunderbird because it provides a way to send an html email, as well as a text only email in case users do not allow HTML in their emails.
It should be noted that there is no tracking with this approach. The only way you will know who clicked on what is by looking at your site statistics, or from actual responses from users.
2. More than one email at a time, mass email to large lists
For this solution we recommend using Campaign Monitor. Campaign Monitor‘s templates take longer to make because they have to integrate with the Campaign Monitor template scheme, but can be saved and reused.
Campaign Monitor makes it easy to import lists of emails, personalize names and subjects of emails, make groups of users based on certain rules, and makes it easier to track and maintain your campaigns to see how successful they are. It’s also a relatively cheap service at $5.00 per campaign and .01 cents per email. Some of my most favorite t-shirt related websites use Campaign Monitor: Linty Fresh, and Threadless.
Other email services:
Like this post? Bookmark it!
Email to a friend
Your message has been sent!
Please enter a valid email.
Your email failed. Try again later.
Related Posts
Most Popular3
About the Author
Tim is the co-owner of Assault, and tends to think he can party twice as hard as anyone. Follow him on twitter @assault Email this Author | All posts by tim
HTML Emails – A quick rules and primer tutorial…
Tips and how-to on using HTML emails….
Great tutorial.
nice tutorial thank you
Those are some really gr8 points… Thanks for such a wonderful tutorial…
You’ve made some excellent points here. For #3 don’t forget that most people will also view these messages in the preview pane and if you have a large image that isn’t showing up then the likelyhood of someone scrolling down is very low. I’d also like to add to the list of recommended solutions with Constant Contact and MagnetMail. Both of these are lower cost and great for smaller organizations.
Thanks for the kind words everyone.
We actually use something called Contact Now here, but I th ink we’ve looked into constant contact. I never used them, instead I just used Thunderbird or Address book in OS X.
I’ve been informally researching which email newsletters get through my own spam filters and which don’t. I use an email address at my own domain and have an email host that is pretty aggressively anti-spam, and I use Apple Mail to read my mail, which has a further layer of anti-spam protection.
Constant Contact seems to have a really good track record; almost any Constant Contact-generated email comes in to my inbox and is not flagged as spam.
For my clients that have fairly small email newsletter lists, I use the Apple desktop program MaxBulk Mail to draft and send email newsletters. The emails go through their own email hosts (and to be completely truthful, most of whom ban this practice, but we are pretty conservative in our sending habits — infrequent mailings, 5 emails per send, sends at least two minutes apart).
the trick is to use an email sending program and you forget the most important aspect which is to use absolute paths to your image
Nice primer post on HTML email and delivery. Also a key factor beyond the formatting issues that hold all of those great designers out there from fully flexing their creative muscles is the reputation of the mailer and how they are set up from a mailing and ESP perspective. Dedicated IP, sender ID, Domain Keys, SPF records, etc.. all of these things with a properly formatted HTML email and solid mailing practices are all core aspects of doing email marketing right.
Nice work. Keep on rocking.
Greg
[...] HTML emails – A quick rules and primer tutorial [...]