Follow these best practices and you are sure to create awesome emails that your clients will love:

• Your email layout should be no wider than 600 pixels for best viewing in various email clients
• Avoid using the following CSS in your templates:
  • Floats
  • Positioning
  • Background images (doesn’t work in Outlook and Gmail)
• Use this wonderful reference created by our friends at Campaign Monitor to see what CSS is supported in major email clients http://www.campaignmonitor.com/css/
• It’s a good idea to limit the number of editable spaces in the template to keep things simple
• Name all editable spaces consistently. The name you assign via mc:edit="somename" is used to create a field in the database to store the user’s content. If they switch templates after writing content, they could lose their copy if the editable space names aren’t consistent. Use the following conventions common content areas:
  • mc:edit="header – used to name the header
  • mc:edit="header_image" – used to name an editable header image
  • mc:edit="sidecolumn" – used to name an editable left or right side column
  • mc:edit="main" – used to name the main content space
  • mc:edit="footer" – used to name the footer
• Editable images should not be placed within an editable content container
• Set the @theme declaration in your CSS for the page background, header, footer and content space so templates can be quickly customized with the MailChimp color themes. See the template language docs for the correct names to be used.
• Be creative with the use of merge tags. Use the social merge tags to provide readers of your email new ways to connect with you and share your content. Use The table of contents merge tag (*|MC:TOC|*) to create an automatic list of links to the <h1> and <h2> headings in an email.
• Be sure to include the required CAN-SPAM info in the footer (*|UNSUB|* *|LIST:DESCRIPTION|* *|LIST:ADDRESS|*)
• Include target="_blank" in links to ensure they open a new browser window or tab when emails are viewed in browser based email clients
• Include a link for users to update their subscription preferences <a href="*|UPDATE_PROFILE|*" target="_blank">change subscription preferences</a>
• Include a link to let users view the email in a browser: <a href=”*|ARCHIVE|*” target=”_blank”>view this email in a browser.</a>
• Include a link to your website: <a href=”*|LIST:URL|*” target=”_blank”>visit our website</a>
• Feature the forward to a friend link somewhere prominent <a href=”*|FORWARD|*” target=”_blank”>forward to a friend</a>. Make a cool button treatment for it where possible to encourage sharing
• Once you’ve created a template, put test it in a campaign and try customizing it by changing color, adding content, etc to make sure it will work well for others who might be using it in different situations.

Brownlow consulted with Tom Buchok, co-founder of Bannerflow and Chad White, Research Director at Smith-Harmon, for information about best practices and some relevant examples.

Q: What benefits can animated GIFs bring to your marketing emails?

Tom notes that because animated GIFs are used much less frequently in marketing emails, a certain amount of novelty remains– and novelty can be an asset when trying to get your audience’s attention. “More importantly, animated GIFs allow for a more creative message. Retailers can use a single space to highlight multiple products, advertisers can use animation to highlight their call-to-action, or click-throughs-to-video can be easily visualized with an animated GIF.”

Q: What kind of things are retailers doing with animated GIFs?

Chad mentions that animated GIFs seem to appear more often during the November and December holiday season as retailers are trying to “stand out in the inbox.” Chad gives a number of examples, a couple of which I will mention here.

“For instance, starting with a Nov. 7 email, Williams-Sonoma has been using animation in their header to draw attention to shipping deadlines and other information, but also just to get subscribers to give the email a second look.”

“…There are definitely opportunities to go-big with animation. One of my favorite examples remains the GIF used by Lands’ End in a March 6 email last year. They not only used animation to show off some of the colors that their Beach Trekker Sandal comes in, but they also demonstrated how the Croc-inspired shoe becomes a slider.”

Q: When are animated GIFs a bad idea?

Tom notes that one of the main concerns to consider is the GIF’s file size (in kilobytes). “Animated GIFs can get significantly larger than their static counterparts, especially as the GIF file includes more and more color.” Also, if the animation is gratuitous that is going to be detrimental over all– be sure to keep your objectives in mind and make sure the animation serves those.

Q: Any compatibility problems with email clients or webmail interfaces?

Tom: “With Outlook 2007’s shift to HTML rendering in Word, rather than IE, animated GIFs do not display. This is the biggest compatibility issue. In Outlook 2007, the first frame is all that appears; designers may want to produce their file so that the first frame contains all the information needed.” And as with HTML emails in general, try to design any animated content in such a way that it will fail gracefully.

For more info and additional resources, see the original article here.

If you design web pages, you probably start with the assumption that most users have a screen resolution of 1024×768 pixels. Then you work your way down from there. But what about when you design HTML emails?

Here’s a very nice HTML email design (click to zoom in):

It was designed no wider than 600 pixels. That’s extremely narrow, by most web designers’ standards.

Even so, here’s what that email looks like in the preview pane of Outlook 2003:

That’s on a 1024×768 screen, with the preview pane set to “horizontal” mode.

Here’s what it looks like in Outlook2003 with preview pane set to vertical:

Here’s the same email in Mozilla Thunderbird, with the preview pane set to horizontal (same 1024×768 resolution screen):

Here’s Yahoo Mail, horizontal preview pane (sorry, I forget if this was Yahoo Mail Beta, or Yahoo Mail Classic):

Here it is in Windows Live Hotmail, vertical preview pane:

For the Hotmail version, notice a couple more design challenges:

• The yellow warning at the top adds (telling you that images and links were turned off for your protection) pushes the email down 40 pixels.
• Which reminds me, Hotmail turns off all your images and links in your design, unless the sender is either a) in the recipient’s address book, or b) SenderScore Certified.
• Speaking of getting into the recipient’s address book, there’s a second warning: “you may not know this sender. Mark as safe?” That pushes your design down another 30 pixels.

1024×768 screen resolution is not an option in email design.

It’s not even close. Here’s that email in yet another email program (again, sorry—I forgot which one) set to vertical preview pane:

Design Emails For Teeny, Tiny Preview Panes

Clearly, you’ve got to design your emails so that compelling content appears in that preview pane.

That’s your first chance to make a good impression.

Newbie designers will complain and whine about this.

Experienced designers, who enjoy a good challenge (that’s why you became a designer, right?), will think this is nothing new.

Everything you design, whether it’s a poster, a website, a TV ad, a banner ad—you’ve basically got half a second to grab someone’s attention.

The trick in email design, IMHO, is to grab their attention with usefulness (not salesy-ness). It’s a test to see how many people you can get to open, click, and buy, based on your design. Talk about influence. It’s quite fun.

Anyway, here’s my advice on designing for preview panes.

Design Emails For The 250px Box

You’ve got a 250 pixel box to entice & woo your subscribers to read more of your email:

That’s an example I found on the Smith-Harmon blog. Most of my inspiration for this “250px Box” came from their tips and observations. If you’re getting started in email design, go and bookmark the Smith-Harmon website, and sign up for their email newsletter.

If you click on the screenshot above, you’ll see a 250×250 pixel red box in the top left of the email design. That’s what will peek out in a user’s preview pane.

Here is what the designer of that email squeezed into that 250 pixels:

1. An enticing pre-header snippet text that tells readers what kind of content is below. The first line of an email is often what mobile users see, and it’s what appears in Gmail’s inbox view as well. If you’re selling stuff to subscribers, it’s usually a good idea for your first line of content in an email to NOT be too functional (unsubscribe here, view archive, forward to friend, etc). Waste of space. Use it to tell readers why they should open. This is another observation first brought to light, I think, by the geniuses at Smith-Harmon, over at the EEC Blog then elaborated on by the folks at Bronto.
2. Under the pre-header text, they squeezed in an email archive link. That’s where recipients can click if they experience a “catastrophic failure” in the email’s design. Click it to see an archive in the browser. By the way, all your email designs should have an archive link.
3. The Sephora logo.
4. 3 links (just below the logo) pointing to sections on the website that I presume are Sephora’s most important categories (based on all the trips to Sephora that my wife makes me endure).
5. I snippet of the hot pink banner, which talks about the the cool new thing they’re introducing: “Ratings & Reviews”

That’s 5 huge, impactful things that this designer got into a 250 pixel box.

Let’s take a look at another example, this time from the experts themselves, Smith-Harmon.

Sign up for their email newsletter, and you’ll get a nice “Welcome Email.” Most people don’t spend much time customizing their welcome emails, but they should. It’s your only chance to make a first impression (BTW, we’ve got two tutorials about that here and here).

Anyway, this is what their welcome email looks like:

Did they design for the 250 pixel box?

You betcha:

Click on that thumbnail, and you’ll see that they got the following squeezed into their 250 pixels:

• Enticing pre-header text (”10 ways to improve your email creative”)
• Their logo
• A few lines of welcome text, reminding you that “you signed up for this, remember?” This is kind of a passive-aggressive permission reminder, to deter forgetful people from mistakenly reporting the sender for spam. But it’s also just a nice welcome. And kudos for their main banner image being creative, plus reminding the user that “you asked for it. we sent.”

Double kudos for making the welcome email so chock full of useful stuff. You get links to “Great Reads” plus you get 10 useful tips.

Usefulness is always the best “design tactic” for email.

The trick is putting that usefulness where readers can see it.

Notes:
This email is composed of slides from a presentation I gave at WebJam 2008, and also at The University of Georgia’s “Lunch & Learn” series for the Terry College of Business. I’ll be posting more tips and tricks from my presentation here on the blog soon. Stay tuned!

The screenshots of preview panes above were taken using MailChimp’s Inbox Inspector tool. You click a button, and we generate screenshots of your email design in all the major email programs (we’ll also tell you your spam score). Just in case you’re curious, it looks something like this:

But there are always going to be exceptions. You will inevitably come up with an email campaign that’s very image heavy. Perhaps it’s for a big splashy product promotion. Or a big e-coupon. Or some postcard. Whatever.

Mark Brownlow recently posted an interesting theory on how you can increase your chances of that email getting opened, and we wondered if it was possible for our customers to (easily) do this sort of thing in MailChimp…

A quote from Brownlow’s article:

So here’s the theory…

Do you need to design your email for image blocking when sending to someone who has opened your emails in the past? No, because they’ve already demonstrated that they have images enabled.

Anybody wanting to try image-rich emails safely could simply pull out a list of “people who previously opened at least one email from us” and send this group the image-rich mail.

Hmm. Is it possible in MailChimp to send “only to people on your list that opened a previous campaign”?

You betcha. Just create a segment of your list like this (click to zoom in):

This is a segment of people who have opened any campaign that I’ve sent in the past. The assumption is that they at least use an email program that handles images. And maybe they’re interested enough in my content that they’re actually more likely to open and enable images. Yeah, there are all kinds of catches here, but it’s worth a shot. Plus, we know you’re going to send an image-heavy campaign anyway. Might as well not do it blindly. Segment that list!