Oct 23, 2009

Email Design Ideas from Block Club Magazine

halloween-block-club-thmI just stumbled upon this nice Halloween email campaign from Block Club, a graphic design firm in Buffalo NY.

MailChimp comes with all kinds of powerful, easy-to-use, and free email template tools that make email design easy.

But Block Club is a graphic and web design firm, and this is a "design tips & tricks" publication.

So their emails have got to look really nice and custom-made.

I noticed a few "power tricks" in their email template, and asked them if I could showcase them here…

Thinking Out Of The Blocks

By now, we all know that when coding HTML emails, simple tables are the safest way to go.

Unfortunately, this can lead to some boring layouts. So one really simple visual trick you can use is to make a piece of your header poke out from the "visual bounding box:"

around-the-block

Visual trick: make your header less boxy by protruding from the edge

If you look really close, you’ll see that it’s well within the boundary of the table. It’s just an optical illusion.

And it’s easiest to do with your header graphic, so you don’t have to code any extra table cells for those "sticky-outies."

I showcased a similar header trick over here, and this old(ish)campaign from Songbird is one of my favorite examples of beating email boxiness:

This email campaign from Songbird is a great example of designing out of the boxiness of HTML email

This email campaign from Songbird is a great example of designing out of the boxiness of HTML email

And we do the same thing with MailChimp’s email header designs:

header-peep

A recent email from Apple showcasing their larger displays uses the same trick, but instead of the header, does it on the sides:

apple-out-of-the-box

Staying Inside The Lines

Okay, with a name like "Block Club" it’s pretty obvious that blocks are going to be an underlying theme to their email design:

building-blocks

but if you’ve ever used MailChimp’s WYSIWYG editor (or any WYSIWYG for that matter), it’s also obvious that coding nice, tight little boxes would be a complete p.i.t.a.

Now, don’t get me wrong. We’ve got an awesome editor with lots of crazy cool features (free image hosting, iStockphoto integration, etc). Personally, I use the editor all the time because it saves me time.

Upload HTML Email By ZIP

But if you want extremely precise, pixel-perfect grids, you’re going to have to go old school, break out the text editor and code everything yourself. Which is exactly what Block Club did.

And it’s something that any web designer can do with our upload ZIP file option:

MailChimp lets power coders upload their own HTML email designs via ZIP file

MailChimp lets power coders upload their own HTML email designs via ZIP file

In case you didn’t know, you can also import your HTML email designs into MailChimp by just pointing us to a URL.

Check out the Modx CMS-to-email example here:

See how Modx creates emails with their CMS, then imports to MailChimp

See how Modx creates emails with their CMS, then imports to MailChimp

There are actually a plethora (I love saying PLEH-thora) of options for getting email designs into MailChimp. Learn more by reading: Guide to all the email template options in MailChimp.

Going Against The Grain

You’ll also notice that Block Club’s email uses a tiling background image with diagonal text (actually, they use diagonals a lot to contrast the underlying blocky grid):

diagonals

Background images in HTML email are possible, but require special design considerations

In fact, they use diagonal elements quite a lot. You can see them in the images they use in their content blocks.

Diagonal elements contrast the "blocky" grid nicely, by going against the grain. Tiling your logo in the background like this can also give your email a slightly premium/authentic look (think Louis Vuitton handbags, or look really, really closely at paper money or American Express cards).

But let’s focus on the tiling background image.

Gracefully Degrading Background Images

Background images, in general, aren’t all that reliable in HTML email. There are dozens of email apps out there, and they render HTML emails differently. So the secret to getting background images to work in HTML email is to just accept the fact that they won’t.

Then, design your emails to "fail gracefully." In other words, never design an email so that the background image is "mission critical." Test your design and make sure that when your background images are not working, the rest of your email looks fine.

Click Once, Measure 50 times

If you’re going to use your own HTML email code, it pays to test your work before you hit send. MailChimp’s inbox inspector lets you push a button, then we’ll screenshot your email in all the major email apps and test it in all the spam filters.

Block Club ran some inbox inspection tests to check their design, and the design held up nicely across the different email apps. Here’s what it looked like in Hotmail, for instance:

inspector-hotmail

Use MailChimp's Inbox Inspector to make sure your email design holds up in all the major email apps

Full Circle Back To Templates

Okay, so if you’re a control freak, now you know you can do a lot of custom design work in MailChimp without using any of our built-in template tools at all.

But after sending a few campaigns (and refining it with minor tweaks here and there), you may actually want to look into turning that totally custom HTML email design of yours into a built-in MailChimp template.

Yeah, I know this entire article was about avoiding our built-in templates, and coding your own designs. But trust me, this is a real timesaver (and very handy if you setup MailChimp accounts for clients).

Our Email Template Language makes it easy to upload your design into the MailChimp app, then define editable (even repeatable) regions. There are even Dreamweaver and Textmate bundles to make coding easy.

If this sounds interesting to you, check out Aarron’s video tutorial with some really advanced tricks.