Responsive Web Design, Part 2 (2015)

Responsive Email Design

In Summary

That’s modern email design, a discipline that — for better or worse — lives in both the past and the present of the web.

While I can’t imagine that after reading all of this you’ll suddenly jump to your feet and say, “Holy crap! I love email design!”, if you happen to, you’ll be in good company; the email design world is inhabited by some of the most passionate, bright and skilled professionals I’ve ever known, all working with the same limited set of tools to produce some incredible work.

Even if it doesn’t make you jump for joy, my hope is that the next time you’re faced with the prospect of designing or developing an email, the whole process is a little… if not easier, then at least clearer. Email development is a pretty dense subject, however. There are so many techniques and so much information to keep track of that a single chapter really only allows me to cover the proverbial tip of the iceberg. Don’t worry, though; I won’t let you leave empty-handed.

THE EMAIL

The latter part of this chapter is pretty dang code-heavy, and explaining code on paper just doesn’t work as well as letting someone loose in an actual code sample, to tinker and play and understand. To that end, I’ve put together an email template that encompass all of the lessons in this chapter and is more fully fleshed out. You’ll find that email at: https://github.com/mailchimp/email-blueprints²³.

Like other templates I’ve released in the past, it’s licensed under Creative Commons, and you’re welcome to use it for whatever you’d like. I’ve commented the code where I felt necessary and have included styled and unstyled versions.

RESOURCES

When I began my career as an email developer six years ago, one of the more frustrating problems I experienced was an almost complete lack of places to turn when I ran into trouble. Any information that shed light on why things worked the way they did was really hard to come by and I, like pretty much everyone else, was left to figure things out on my own.

Fortunately, the obscurity of the problems people commonly run across when developing email is something that’s being remedied by a lot of great resources. Here’s a list of my personal favorites, abridged to only five links per section because, c’mon, I have to stop somewhere.

BLOGS

•MailChimp Blog²⁴

•STYLECampaign²⁵

•Litmus Blog²⁶

•Email Design Review²⁷

•Display Block²⁸

NEWSLETTERS

•The UX Newsletter²⁹

•Email Weekly³⁰

•Email Design Monthly³¹

REFERENCE AND DISCUSSION

•The Email Design Reference³²

•The Litmus Community³³

•Action Rocket Labs³⁴

TEMPLATES AND FRAMEWORKS

•MailChimp Blueprints³⁵

•Cerberus³⁶

•Emayll³⁷

•Middlemail³⁸

•Zenith³⁹

All of these resources have been contributed to or created by a huge number of amazingly talented folks. This list goes to 11.

•Justine Jordan (Litmus): @meladorri

•Elliot Ross (Action Rocket)

•Jason Rodriguez (Litmus)

•Mike Ragan (Action Rocket)

•Anna Yeaman (STYLECampaign)

•Dan Denney (Code School)

•Mark Robbins (RebelMail)

•Matt Byrd (Uber)

•Brian Graves (DEG Digital)

•Kevin Mandeville (Litmus)

•Paul Airy (Beyond The Envelope)