Saturday, February 16, 2013

Email Best Practices

It’s been a while since I’ve had to worry about coding emails. But recently a coworker asked me to put together a brief presentation on best practices for email development. This is actually two separate topics, email content and email code. Setting aside email content for the moment, here are my completely derivative, unoriginal, you-can-find-this-anywhere advice for avoiding trouble in the inbox when you’re coding email. This advice assumes you’re building an email campaign for deployment to a wide audience and you have no control over the email client application your recipients will use.

Generally, when coding email it’s best to pretend it’s fifteen years ago. Seriously. I know Dreamweaver can do lots of cool things and I know CSS is awesome and HTML5 is just, like, unbelievable. Nonetheless, ignore it all. Back away from the shiny modern tech.

1. Learn to write HTML
Apps like Dreamweaver make it easy to build web pages without ever having to dig into the underlying code. Unfortunately, these apps make assumptions about the best way to code stuff that runs counter to what you’d want to do for HTML email development. The best way around this is to code your own HTML. There are plenty of great places to learn how to do this. My favorite is W3Schools.com. If you can use Dreamweaver or Photoshop, then you have more than enough technical ability to learn HTML. Just take an hour, one hour, and play around with it. You’ll be surprised how quickly you pick it up.

2. Use tables
Tables are the old way to build compositional structures in HTML. They’re pretty basic, they have rows and columns and that’s about it. The great thing about tables is that most email clients understand them.

Here’s a simple example. Assume you want to build an email with this composition.

Emailbody

The HTML for this table would look like this.

<TABLE BORDER=1 WIDTH=500px>
<TR>
<TD COLSPAN=2 WIDTH=100% HEIGHT=100px>
This is the header.
</TD>
</TR>
<TR>
<TD WIDTH=66% HEIGHT=400px>
This is the body.
</TD>
<TD WIDTH=34% HEIGHT=400px>
This is the sidebar.
</TD>
</TR>
<TR>
<TD COLSPAN=2 WIDTH=100% HEIGHT=100px>
This is the footer.
</TD>
</TR>
</TABLE>

If you cut & paste that into a Simpletext or Notepad document and save it with a .htm extension, you can use it as a template and go from there. Double click on it and it will open in your browser. Fool around with it. Change some of the numbers or some of the text and see what happens. Go out to W3Schools.com and learn more about what’s going on here. You’ll be amazed how well your emails render in all those different clients.

3. Avoid CSS
Don’t use CSS when you’re building an HTML email. Just don’t. Yes, I know that inline CSS is less problematic than file calls or style definitions in the header, but it’s still problematic. Just don’t use it. If you never use CSS you will eliminate the majority of your problems with inconsistent rendering in your recipients’ inboxes.

4. Don’t Embed Images
Don’t try to embed images into your email. Always link to image files out on a web server or an email content server. An image tag should always look something like this.

<IMG SRC="http://www.mycontentserver.com/campaign1001/images/logo.jpg" alt="LOGO" />

Note that the SRC value points to an actual URL out on the web somewhere, not to a file on your local computer. An image tag should never look something like this.

<img src="C:\MyPictures\EmailImages\logo.jpg" alt="LOGO" />

Image tags that point to a file on your local computer will result in missing images in your recipients’ inboxes.

5. Don’t forget about an alternate text version
Nearly every Email Service Provider allows you to build a text version of your email. Many users set their email clients to filter out HTML emails and only read text emails. Others read their email on a phone or some other device that only displays text. These users will miss your email if you fail to build a text-only version.

6. Use Google Analytics tags
As the man said, “If you can't measure it, you can't manage it.” Designing and coding an email are just the beginning of the process. In order for testing and analytics to help you improve your email effectiveness, you’ll need to be able to track what happens to them once they arrive in the inbox. One of the best ways to do this is with Google Analytics tags. Neglecting to add simple campaign information to the end of a hyperlink can ruin downstream testing and analysis. Learn more about this at http://www.google.com/analytics/education.html.

7. Stay Informed
Finally, there is no shortage of great information on building and optimizing email. My personal favorite source of information on this is the blog at Bronto, an email service providor. You can find their blog at http://bronto.com/blog. Add it to your RSS reader and stay current.

These are only the most basic best practices. There are many more things you can do to ensure your email gets where you want it to go and looks like you want it to look when it gets there. But if you follow these seven practices, you’ll be building from a great foundation.

1 comment: