The Art of Email Template Design and Coding (Part 1)

January 11th, 2012

“This is the first of a two-part guest post by Joe Myers, one of the most trusted names in the ski industry when it comes to email design and coding.”

Part 1: Design Strategy
To be honest, email design is a fairly inexact science which relies on archaic techniques to deliver mind-numbingly inconsistent rendering across email clients. However, if administered properly it can offer absurdly cost-effective conversion opportunities.

Design Goals
We all want “pretty” email templates. In many cases, I enter a situation where the bar is set so low that a professional aesthetic is the primary goal. But that’s short-sighted. Here are some other goals for which you may strive.

Keep It Light
You don’t need every bit of detail in your email. Remember, the conversion doesn’t happen here. This is a teaser tool. So give your guests a CLEAR call to action and write enough to entice them to click it. Also, be sure that your call to action sets the proper expectation for the functionality it implies. Copy-writing (even just a button) has everything to do with usability on the web. So if the button says “Buy Now”, the destination should be a page with that item pre-selected.

Make Sure It’s Doable
Any designer can design a beautiful one-off email blast. But can your staff execute it consistently time and time again? Who’s designing the support graphics? What are their strengths? Does the template require more graphic or coding skills than they can execute in a timely manner? Very often, especially with email blasts, my first question is “Who’s building this out every week?” Because invariably that person’s knowledge of photoshop and HTML will have a great deal of baring on how I create the template. If the person is comfortable replacing the creative from week to week, I’m more than happy to provide photoshop templates with repeatable effects in place. If not, I try to steer the client in a direction that requires less graphic knowledge. Because if your guests notice a decline in quality, you’re asking for unsubscribes.

Design With 4 Assumptions
1) Assume the images won’t load. Don’t rely on images for your main message. Make sure you have clear, readable headlines doing primary communication. Also, be sure to include representative alt tags in your images. Remember you’re using them to explain what the user’s not seeing. It’s not an SEO cheat.
2) Assume you have 3 seconds to persuade the user not to delete your message. Make your point clearly and concisely. Also, read up on how to write a subject line that pulls users in.
3) Assume users will only click on ONE link in your email. So if you have a link that’s really important, consider writing a promotional email which pushes ONLY that link as the call to action.
4) Assume your users will unsubscribe the moment your emails “jump the shark” or cease to provide value. So get your priorities straight, and don’t just send filler copy.

Common Mistakes
You’ll learn more in Part 2 about how to avoid some of the following pitfalls. But conceptually, I see these problems all the time.

Over-designing
Three problems: (1) If your staff can’t execute the complicated graphic concept, it’s worthless. (2) If the concept is too complicated, it could fall apart. (3) If the concept relies solely on graphics to convey the message, it could get lost if the images are initially blocked.

Under-writing
Your guests may see these emails more often than they see your site. So make sure the tone is consistent with your brand voice. When hiring marketing personnel, don’t forget to make sure they can convey the proper tone. And consider hiring a copy-writer or proof-reader if possible. Seriously!

Poor Planning
Be sure to understand the effort each email requires. There’s no point in sending an email with one hour’s notice. It will inevitably be flawed, broken, or full of typos. Even worse, it could give your guests mis-information, creating a PR nightmare.

Bloated graphics
A common goal for bandwidth acceptability within emails is less than 100K per image. That sounds like a lot but it goes quick. So if you have a graphic-intensive design, make sure that it’s optimized well and large images are divided into smaller pieces if necessary.

Using best practices
As designers, we’ve all been conditioned (if not brow-beaten) to adhere to strict standards for best development practices. We wear our W3C compliance righteously, like merit badges and scoff at sites that employ anachronistic techniques. However, email clients take those good intentions and chew them up just to spit them on your chest. As sugarloaf developer Derek Wheelden told me, “It just feels like going against everything I’ve ever learned about HTML. I don’t get why it’s so far behind.”

Ready to write HTML email code that works? Stay tuned for part 2…

Who is Ryan and what are his solutions?

Ah, yes. That is an entirely magnificient question.

FIND OUT