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.

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:

Step 1. After you’ve created your list and are ready to design your first template, the first step is to create a new campaign.  This will work for any of our campaign types, but for beginners, just select “regular ol’ campaign.”

Step 2. Select the list you’d like to send your campaign to.

Remember when you set up your list and entered information like your name, phone number and the website address where people can opt-int?  Eaze Whiz pulls the information for your template from your website, finding things like your logo, color palette and even some sample content.

Step 3. Simply select “new email” and choose the layout you want to use.

AND THEN, SHAZAAAM!

Note: MailChimp will pull in things like your logo as well as colors from your CSS or HTML file.  While not perfect, this should give you an excellent starting point for customizing your emails.  And at this point your template is still fully customizable– you can even change the basic layout (one column, two column, etc).  If you want to start over from scratch, you can do that too.  Just click the “no likey” link at the top of the page and we’ll replace your Eaze Whiz template with the plain ol’ starter design.

• Your Monthly (or Quarterly) Newsletter Template: This one goes out to the general public who opted-in for your company news. You’ll probably want it to be a 2-column layout, so you can put self-gratuitous promotions in the side column. Be sure to keep the “main” column full of useful content.
• Company Letterhead Template: Use this for rare announcements, such as pricing changes, shipping problems, billing errors, or “system is temporarily down” alerts. But read this before you send any public apologies with it.
• Special Promotions Template: Use this when you have big, splashy product photographs to promote a big sale. We recommend MailChimp’s “postcard” email template.
• Holiday E-card Template: This can be a variation of the postcard template. You’d insert a nice, beautiful graphic into the postcard image slot. Here are some free templates for your holiday e-cards.
• Event (e-vite) Template: Use this when you want to invite people to a company event.
• Event followup/Survey Template: Use this after your event has taken place, and you want to thank your attendees for coming. You might include a link to an online feedback survey (we recommend SurveyMonkey) and you might include digital photos from the event.
• Internal Newsletter Template: Use this for sending internal newsletters to your staff.

If you’re a MailChimp customer, just use our built-in HTML email template designer to go ahead and create these templates now. Save them in your templates gallery, so that when the time comes (trust me, it will), you can just pick the template, add content, and click send. Our free email templates have been tested to work in all the major email programs, and they can be customized to look like a big expensive agency designed them for you (see some examples).

If you’re not a MailChimp customer, you can customize the free HTML email template code we provide here.

If you prefer to design your own HTML email templates, here are some coding tips and tricks from MailChimp’s Email Marketing Resource Library. Just be sure to test your email designs in all the major email programs before sending.