Jan 30, 2007

Design Like The Pros

As a followup to our previous Valentine’s Day post, I thought I’d put together an example of how MailChimp customers can use our handy built-in templates to design an email that looks just as good as those professionally designed email campaigns over at Newsletter Archive.

I know a lot of you are web designers. And for web designers, "built-in templates" sound  cool—for you to poop on. But we’re a little different. We don’t supply you with 200 pre-built designs (all of them fugly). We give you basic layouts that you can modify inside a design tool (think Photoshop, but for HTML email).

So I picked a campaign, and in the sincerest form of flattery, I imitated it with our HTML email design tool…

I found an email campaign I kinda liked: Peet’s Coffee. It’s a nice design, but I picked it mainly because I really enjoyed a coffee I had there about 6 years ago on a very cold, icy day just outside Boston. Some things just stick in my brain. Don’t know why.

Anyway, here’s what their email looks like (click the thumbnail to zoom in):


So first, I hopped over to iStockPhoto to look for some graphics I could use for my version: "Peekaboo Coffee & Tea." iStockphoto has lots of cheap stock photography. You can also try LuckyOliver.com. Lots of great resources are sprouting up where you can buy royalty-free photos for $1. I mean, just think of any image you want, and you can probably get it for a buck now.

iStockPhoto actually has a Valentine’s Day themed section, which was nice and convenient. Got myself a picture of a rose, and made a splashy promo graphic like the one in Peet’s campaign.

Then I logged into MailChimp, and clicked on "My Templates" to start building my "Peekaboo" Valentine’s email template.

If you’re not a MailChimp customer, you might check out this quick Movie Demo to see how MailChimp works. That’ll help you understand the stuff I’m about to get into below…

I selected the "Postcard Layout" from the library. Here’s what that looks like by default (I’ve highlighted all the things you can customize):


On the surface, the postcard template looks pretty simple. You setup your basic background colors, fonts, and upload a logo. Then the template is finished, and you save it. Then, whenever you assemble your content, you upload a big splashy promo graphic (where the gray box is above), and enter a little descriptive text below it.

But if you know how to code a little HTML, you can actually tweak that template to do some really cool stuff.

Here’s what I tweaked:

  1. First, my background colors. I changed the Body, Header, and footer to white (#FFFFFF in nerd speak)
  2. I went into the top bar area, where you’d normally see our "Email not displaying properly?" link, and removed it altogether. Then I uploaded my logo graphic instead. Sounds weird, because normally you’d upload that in the "Logo graphic" section in the template designer. But I did it here because the top bar slot lets me go into "Source" mode, and input my own HTML. That allowed me to code my image map for the top navigation in my email.
  3. In the slot where the logo would normally go, I just uploaded a transparent 1×1 shim.gif. It’s a hack, but it works.
  4. After setting my font styles, the template’s done. I save my work as "Peekaboo  Promo Template", and exit the designer.
  5. When it’s time to create a campaign, I click the "Create New Campaign" button on the MailChimp Dashboard.
  6. I select my Peekaboo Template, and walk through the steps in the Campaign Builder.
  7. I upload my splashy promo graphic, then click "Next" to enter content below it.
  8. In the next step, most people would just enter text into our WYSIWYG editor. But since I know some HTML, I switch to "Source" mode, so I can play with HTML. The "Source" view is where you can go nuts with our templates and do some creative stuff you might not have thought about while using the standard WYSIWYG buttons.
  9. In "Source" view, I code a simple table with 4 cells, and some light padding and spacing.
  10. Then I switch back to "Normal" view, and use the WYSIWYG editor toolbar to upload each product graphic.

That’s it. The final campaign looks like this (click to zoom in):


If you’d like to see a side-by-side comparison, click this:


I’ll be posting more examples soon.