I’ve created hundred of emails and I’ve reviewed/analyzed probably ten times as many. In that process, I’ve come up with a few Do’s and Don’ts…or really just basic tips to improve your emails. Some of this stuff I wish I had known when getting into email development.

Can’t See The Images In This Email? Neither Can I!

Always, always put a link in your emails to view them within a browser. There are quite a few people out there that check their email from work that can’t view your images within their email clients. Unless it’s a really basic transactional email (e.g. mostly text), don’t leave this link out. Often times, the entire message of an email is stored within the images. If users can’t view them, then what’s the point?

Web2.0 is No Go

HTML email is invariably far behind the curve of the latest web technology. In creating your emails, leave out Javascript and Flash. Although there are some email clients with limited support for these technologies, it is more likely to cause your campaigns to be flagged as spam.

Place Primary Call to Action in Prime Location

The portion of your email that is immediately visible to a user varies from email client to email client. However, you’re almost guaranteed that the top left corner will be visible. So, take that into consideration when developing the creative for your emails. Place the main item that you believe will generate the highest CTR(clickthrough rate) in this position and save the rest for other offers.

Embedded Images vs. Linked Images

Never ever embed images within your email. Doing so sends up all kinds of red flags, impairing the deliverability of your email. Plus, it raises the filesize of your emails substantially. Nothing angers a consumer more than having all their other emails held up while they download yours.

Focus on the Subject…line

The subject line is one of the most important factors in getting your message across in email. It determines whether or not your email will even get the opportunity of a passing glance. So, spend some time testing different approaches and measuring results. The difference between a good subject line and a bad subject line are huge.

Attaching Files is Bad, Very Bad

Nobody likes to open up attached files unless they are from a friend or co-worker or if they are expecting to receive them. For good reason too, a lot of sensitive information goes through email and nobody wants to risk that by opening up some unknown file. Plus, nobody wants to download them.

Forms Don’t Work

There are very few email clients that support forms within email. So, just leave them out. If you have to have your recipients fill out a form, place a link in the email to a webpage with the form on it. Then they can decide whether or not they want to participate.

 Got some tips of your own that you’d like to share? Please add them to the comments.

I got a question recently of what to do after you create the HTML portion of an email.  If you aren’t going to be sending a text version, then the next step is to send it (otherwise, create the text version…and then send it ).  Which is probably where many people get lost. However, all you need is the right software to format it correctly and send it out. Here are four different approaches to sending HTML email.

1. Open-Source Email Library - This is the option that I took. I downloaded a copy of PHPmailer and wrote my own small PHP application for sending test emails. The PHPmailer library has built in functions for sending email. So, all I had to do was provide it the necessary information(html file, addresses, etc.). Since then, a nice alternative to PHPmailer has come out, Swift Mailer. Those who want to go this route would be better served to use Swift Mailer instead (as it has a large and growing userbase and still has an active developer community working to improve it). However unless you’re only going to use it for testing purposes, many features that you would want with a Mass-mailing app will *have* to be built in (e.g. unsubscribe, trimming of bounced emails, blacklist monitoring etc.).
2. Open-Source Mass Mailing Software -The only decent open-source software that I’ve been able to find with an active development community is Pommo.  I’ve tested it out and it’s fairly user-friendly. Although it still needs to be refined a bit more, it has a lot of the features that users are looking for and a growing community that you can ask questions of.
3. Email Service Providers - With this option, you’ll get pretty much every feature you’d like. However, you’ll also be paying a set amount per email. Usually, this ranges from $0.01-$0.05 per email. Some also have a set fee that is also included with each campaign you send out. Of all the providers out there, the one that is probably the most user-friendly for designers is Campaign Monitor. With them, you can setup email campaigns for clients, charge your own rate (above what CM sets), and more.
4. Email Server Appliances - In addition to the above options, some companys also offer email appliances that can be added to your server racks. You can expect this option to be significantly more expensive (probably prohibitively so for freelance designers), but it does have a vast array of features and support. One company known for this is Strongmail.

As with any of these solutions, it’s ultimately up to you to make sure you don’t violate the law (read the CAN-SPAM Act).

Lotus Notes continues to be the bane of all existence for email designers worldwide, but here are a few tips you can follow to ease the pain:

• Borders - If you don’t want them on your tables, don’t mention them….at all. Even if you specify a border of zero width, Notes will place a big ugly border around the table. Think of Notes as a disturbed mental patient that gets upset when you mention the word “borders”. Borders? Borders! Borders! BOOOOOOOOOOORDERS!!
• Cascading Style Sheets - In Notes, not all of your stylesheet properties are going to cascade. So, design your emails such that every style necessary for an element is specified within it’s own tag (it’s a safe bet to code all of your styles inline).
• No Unordered List Navs - Using an unordered list as your navigation element works for a lot of email clients, but not Notes. If you try this, you’ll quickly find your horizontal navigation has suddenly gone vertical. (Although, the actual bullets will still be removed. )
• Divs - You’re probably not going to be using divs in emails designed specifically for Notes. Why? Well, it doesn’t support the float property, among other things.
• Don’t rely on padding - If you want your links to have a space in between them, use a   tag or an actual space. Notes will completely ignore padding.

Got any of your own tips? Please add them as a comment to this post. Starting out in email design, I had very few guides to go by, so the tips above are from my own trials & errors.

In 2007 we bore witness to one of the biggest *perceived* setbacks in html email history, Microsoft switched Outlook’s rendering engine from Internet Explorer to Word. Even now in 2008, cries of foul are still ringing out, but I think something much bigger is at play here.

No, the switch-over wasn’t a bumbling move of a giant corporation, I believe it was a bold and precisely calculated move for some pretty spectacular software to come.

You see, Microsoft is waging war to retain it’s market share and Outlook just happens to be one of those battlegrounds.

If you recall back in the 3rd quarter of 2006, Microsoft released a Blog editor called Windows Live Writer. It was one of the first programs to allow you to create blog posts in a WYSIWYG environment that actually looked like a post on your blog. This program was, and still is, a program available freely to anybody who wants to download it.

Now, fast forward a bit to 2007 and we get the news that Outlook is switching to the Microsoft Word rendering engine for displaying emails (it already used it for creating them). Microsoft’s stance has always been that they switch the rendering engine for displaying emails so that it would be the same as what users used to create emails.

So, here we are in 2008 with a seemingly gimped email client and a constantly improving piece of software for publishing blogs. How does it any of it tie together?

I think that in the next year or so we’re going to see a new breed of Microsoft Word. It’ll be a blend of all three programs. Since Outlook already uses Word’s rendering engine, why not just combine the two anyways? They essentially do the same function, create messages (albeit of different sorts), but I think that’s only the tip of the iceberg.

I think we will eventually see a new hybrid version of Microsoft Word capable of not only writing letters and novels, but also creating emails and posting to blogs throughout the web. It will be the penultimate word processor, capable of combining the functionality of three seemingly separate programs into one.

Further, to increase market share, I think it will include enticing features that you normally wouldn’t see within email. For example, now-a-days if you emailed a spreadsheet to somebody or prepared a really nice document within Word, you’d have to just attach it to the email, you can’t send something to a recipient that they can view inline, within their own email client.

But, with the new version that I believe is in the works, you’ll be able to prepare, send, save, and post documents from the same program. Those with the new Word application will be able to view the documents exactly how you created them, without having to open a separate program or save the file elsewhere. It’ll add additional functionality to emails that we currently just don’t have. And for those without the new version, they will receive the email exactly as we do now-a-days, with plane old attachments.

Plus, this helps tie in to Microsoft’s move into developing an open document format. What better way to get others moving in your direction than to create an open format that anybody can readily adopt.

I’m sure that as viewed by themselves, any of the moves made by Microsoft may seem to have a sinister motive at play, but I truly believe that it’s a move towards something greater. Sure, there’s a profit motive involved, but there comes a point for all corporations to decide if they are going to continue force feeding consumers, or if they’re going to create something consumers demand.

Microsoft has been in the game for a long time and I don’t think they are going anywhere anytime soon. If the seemingly bumbling moves are just that, then I suppose there’s no reason I can’t keep using Thunderbird.

But, if they’re not, we’re in for some exciting times to come.

In the past year I’ve went from an HTML email novice to an expert. I’ve created a TON of HTML emails and have even went so far as to create my own program for mass mailings (a very simple implementation of phpmailer). Here’s what I’ve learned from diving into them:

• Forget Standards - Standards based design is great, and I practice it on most all of the websites I create. However, email is not really the place to do so. There are so many different mail clients, with so many different exceptions, that to achieve the best aesthetic results, you’ll need to bite your tongue and go against the W3C(Oh the humanity! ).
• Body only - Although you can leave all the other tags in, it’s likely that your recipients mail client will strip out everything that’s not inside the body tag (gmail anybody?).
• CSS - Inline is the best way to ensure that your emails come out looking the way you intended. Try to put all of your styles inline, otherwise you risk having them stripped out by your recipients mail client. Webmail clients are especially known for removing linked & embedded stylesheets. They do this to prevent your styles from screwing up their webmail layout and to prevent any mischief from emails sent with ill-intent.
• Embedded CSS -If you use embedded styles, make sure you place them within the body tag. Some webmail clients, gmail specifically, will remove everything outside of the body tag, so it’s best to include your styles within the body tag. I usually save embedded styles for things such as hover states. That way, if the embedded styles are removed, there’s not much lost.
• Linked CSS - You can try this, but it’s probably not going to work and is more likely to get your email flagged as spam.
• Use Tables - Yeah, there is support for DIVs in many email clients. However, to get the best looking email through all clients (even the monster known as Lotus Notes), you’ll be best served to use a table-based layout. Plus, some clients remove your padding & margin styles (regardless of if it’s embedded or inline), so a table will help keep items spaced appropriately.
• Don’t Overuse Tables - Remember, you’re developing for a format that is very easy to break. If you had to choose between using a complex table layout or adding a few Kb and using just a solid image, go with the image! Saving 1-2Kb is worth not having to deal with nested tables.
• <BR> - Don’t use <br/>, use <br>. Some email clients ignore <br/> completely.
• Alt Tags - images are usually disabled by default, so make generous use of the Alt text. Doing so can mean the difference between getting a conversion and losing a subscriber. Also, remember that in Thunderbird (and other clients I’m sure), your CSS can format alt text. So, test out your email with and without images.
• Lotus Notes - Your HTML emails will never look as great in Notes, don’t sweat it.

If you have any questions, comments, or would like a quote for your email, just leave a comment or contact me directly.