Delivering Episode 5: What is email design really?

[ 0 By

In this episode of Delivering, host Jason Rodriguez tries to answer the question, “What is email design really?” Is it knowing your way around HTML and CSS? Or does it go beyond just code?

Be sure to subscribe to Delivering on iTunes or Spotify to listen to future episodes and join the conversation on Twitter using the hashtag #DeliveringPodcast.

Episode Transcript

On its surface, email design seems easy. It’s just writing some HTML and CSS and sending it to subscribers, right? But swim a little deeper and you open up a world of complexity that goes well beyond just code. In this episode of Delivering, I try to answer the question, “What is email design really?”

Welcome to Delivering, a podcast about email marketing, strategy, the email industry, and yes, email design and development. Delivering is brought to you by Litmus, the creative platform used by over 600,000 email professionals to design, test, analyze, and collaborate on better email campaigns for happier subscribers. Learn more and try Litmus free for seven days at litmus.com.

Email design is easy, right? When it comes down to it, email is just HTML and CSS, kind of like writing a web page. There’s the overall document structure—the head and body in an HTML file—and then all of the content inside of that document. You use pretty standard HTML to markup content, then CSS to style that content. Anyone with a little experience building web pages can, in theory, code up a quick email, upload it to an ESP, and send it to subscribers.

At least, that’s what a lot of people think.

In reality, HTML and CSS is just the beginning when it comes to email design. Sure, email designers, developers, and marketers need to know their HTML and CSS. Without it, you’re left to the whims of a WYSIWYG editor and whatever spaghetti code it produces. But, what is email design really?

Over the course of nearly a decade designing and coding emails, I’ve boiled email design down into three key things: Mitigating risk, pushing boundaries, and creating better experiences for all subscribers.

Like a lot of people, I first learned HTML and CSS to build my own websites. I came of age with the web standards movement and followed folks like Jeffrey Zeldman and Eric Meyer religiously. Whenever I have time, I spend it devouring writing and talks from people like Rachel Andrew and Jen Simmons.

However, when I was tasked with building my first email, I quickly learned that knowing standards-based HTML and CSS isn’t enough. Email is its own beast, thanks to the dozens of popular email clients that all treat HTML and CSS differently. All email clients use their own rendering engines to interpret and display the markup underlying our email campaigns. In some cases, different versions of the same email client use wildly different rendering engines.

Microsoft Outlook famously switched from using Internet Explorer, a relatively good rendering engine for email, to using Microsoft Word on the backend to display emails. There are a lot of reasons why Microsoft made the switch, but it’s been a thorn in email marketers’ sides ever since.

Email clients range from amazing rendering like in Apple Mail to the worst of the worst. Think older versions of Lotus Notes, which didn’t support a hell of a lot of markup.

That’s why so much of email design is about mitigating risk. It’s about understanding each of these email clients and related quirks, and coding emails defensively. As email designers, we want to limit the number of things that go wrong in our campaigns. In doing so, we’ve developed some amazingly creative techniques and hacks to help emails work well across email clients.

Microsoft conditional comments and ghost tables, the hybrid coding and Fab Four methods, even something as basic as using inline CSS and limiting the number of HTML elements and CSS properties used in an email is all about reducing risk.

A lot of email designers stop there, though. They default to defensive coding techniques without wondering what else can be accomplished in email. Fortunately, though, there are email designers that aren’t content with the status quo. They are the ones that work on pushing the boundaries of email design.

To be fair, a lot of those defensive coding techniques are creative and push boundaries in their own way. But they should only feel limiting in the best way possible. They should inspire email designers to push beyond what’s thought of as traditional email design.

That’s why the second part of effective email design is pushing those boundaries. Understanding the limitations of email, but taking inspiration from other fields like web design and development—or from a visual design perspective, things like creative print design—is where it’s at.

The most popular example of this type of design is building interactive emails. Mark Robbins and the crew at Rebelmail famously built fully-interactive checkout experiences in the inbox for brands like Burberry. At Litmus, we’ve gotten huge responses after sending Twitter feeds, background videos, and scavenger hunts in email campaigns.

But don’t think that emails have to be interactive to push boundaries and evolve the medium. Copywriting, strategy, and graphics and visual design can move the needle, too. Really Good Emails has grown a massive, dedicated audience not by making all of their emails interactive, but by embracing their unique voice, brand of humor, and some awesome personalization.

One of my favorite newsletters of all time, Mailchimp’s now-defunct UX Newsletter, didn’t do anything fancy with code. But their art directed emails—my favorite of which was an HTML email that looked like 90s’ era, plain text ASCII art—inspired other designers to bring art direction into their own email campaigns and expand the concept of what subscribers think an email newsletter can be.

Although some of these genre-defining emails are one-off campaigns just for the fun of it, a lot of that work comes around to the last aspect of good email design: Creating better experiences for subscribers.

Without pioneering work from folks like Fabio Carneiro and Nicole Merlin, Stig Morten Myre and Rémi Parmentier, we wouldn’t have the techniques we all take for granted for delivering better experiences for subscribers. Fabio, Nicole, and Rémi all contributed to the conversation around building responsive, mobile-friendly emails that millions of subscribers read every day, around the world. And Stig’s dedication to unlocking the secrets of VML, and the world of bulletproof buttons and backgrounds with it, has enabled subscribers everywhere to engage with email campaigns despite all the weird shit that email clients do to our code.

More recently, we’ve seen a huge push to create more accessible email campaigns. Folks like Mark Robbins and Paul Airy have done a bunch of research to help us all understand how to make email campaigns that can be used by anyone, regardless of their ability. And a stronger focus on using typography, contrast, alternative text for images, and clearer copywriting has opened up email marketing to more people than ever.

So, this brings us back to the question, “What is email design really?”

Email design is more than code. It’s so much more.

Email design is about understanding a unique medium. A medium that’s related to but stands apart from web design and development. One that’s built on familiar technologies but that requires a specialist’s knowledge to do well.

Of course email is about mitigating the risk posed by so many email clients and rendering engines, each with their own set of frustrating bugs. But it’s about rising above those risks and limitations and finding creative ways to build amazing, accessible experiences for all of our subscribers.

So, next time someone asks if you’re an email designer, don’t shy away from answering. Don’t say, “Yeah, but I do front end web work, too.” Tell them the truth: Tell them you solve interesting and challenging problems, and deliver better experiences using the world’s most valuable and popular communication channel, email.

Like this episode of Delivering? Give us a review on iTunes and share the podcast with your friends. And be sure to join the conversation using the hashtag #DeliveringPodcast on your favorite social network.