Hard-Won Lessons in Responsive Email Design - ConvergeSE 2014

ConvergeSE 2014, Columbia, SC • Fabio Carneiro • @flcarneiro
HARD-WON
LESSONS IN
RESPONSIVE
EMAIL DESIGN
- I’ve been involved in web design since 1998, and I’ve worked at MailChimp for 5 years, coming on as a UX Designer and
then transitioning to become the company’s Email Designer,
- My day job involves building the emails that are used by MailChimp, its customers, and reﬁning the experience our
email editor provides,
- I’m going to talk about mobile email from my perspective at MailChimp, and how I approach mobile email
design for us and our users...
image credit: http://goo.gl/E8o33u

- A little background ﬁrst,
- Right now, MailChimp currently has more than 5 million users from all over the world - even, strangely, North Korea
(on their one computer),
- The majority of those users know nothing about design, web or email, let alone responsive design principles of both
disciplines,
- We wanted to help them get the most out of their emails, while at the same time helping them adjust to a
more mobile web...

- So, In November 2012, we introduced a new email designer, dubbed ‘Neapolitan’, that only outputs responsive email,
- It’s proven successful: In 2013, we sent 70 billion emails in total, from 24 million campaigns,
- Over 65% of all emails sent in 2013 were responsive...

- In 2014, we expect that number will radically increase to near 100%, because of two factors:
- MailChimp currently adds roughly 10,000 new users a day,
- We’ve killed our ﬁxed-width editor, and we’re getting rid of all ﬁxed-width templates over the next few months,
- There’s a reason we’re pushing so hard towards responsive-only email...

A PHONE IN
EVERY HAND
- It’s because the mobile web is evolving faster and faster. As web designers, we all know that mobile internet usage is
skyrocketing,
- You may not know that it’s especially true of email, because it is the thing that’s ubiquitous to pretty much every
device,
- In the U.S., for example...
image credit: http://goo.gl/qNA90

IN THE US OWN
A MOBILE PHONE
90%
- According to the Pew Internet & American Life Project,
- Of a total population of 317 million, 90% of people own a mobile phone,
- That’s a total of roughly ~290 million people,
- 63% use their phones to go online...
source: http://goo.gl/0m6dEM

Internet activities via mobile device (% mobile internet users)
- More than half of all cell phone-owning Americans use their devices to send and receive email...

SEND & RECEIVE EMAIL
VIA MOBILE DEVICE
52%
- 52% of mobile internet users in the US use their devices to send and receive emails,
- That number was just 27% in 2009, indicating a 25% increase over four years,
- The numbers are similar on the other side of the Atlantic...

IN THE EU OWN
A MOBILE PHONE
91%
- According to Eurostat,
- Of a total population of 507 million, 91% of people in the EU own a mobile phone,
- That’s a total of roughly ~460 million people,
- 43% of them actively use the internet every day...
source: http://goo.gl/VMjkJH
http://goo.gl/f7WH6w

Internet activities via mobile device (% mobile internet users)
- How do they most use their mobile connections? For sending and receiving email...

SEND & RECEIVE EMAIL
VIA MOBILE DEVICE
67%
- 67% of mobile internet users in the EU28 use their devices to send and receive emails,
- I’ve only touched on the two most developed economies on Earth. The rest of the world is catching up fast...

OF THE WORLD HAVE
MOBILE INTERNET
30%
- 29.5% of the world’s population have mobile internet access,
- That’s ~2.1 billion people, and it’s growing quickly as developing economies come online,
- Mobile-broadband subscriptions climbed from 268 million in 2007 to 2.1 billion in 2013,
- As the web becomes more and more mobile to meet those new users, email has to follow...
source: http://goo.gl/4egHur

USER
EXPERIENCE
IN EMAIL
- And that brings us to email as an experience, both for those who receive and read email and for those of us who
create it,
- In traditional web design, there are tons of responsive tools and techniques; in email design however, there’s very
little,
- The email designer’s tools are dated by at least ten years, which leads a lot of people to think that good email
design can’t be done, or that it’s near impossible...
image credit: http://goo.gl/E8o33u

DESIGN
WITHIN
CONSTRAINTS
- It may not be simple, but it’s definitely not impossible. Email design has a steep learning curve, but I follow four
cardinal rules that make it easier,
- They’re what I’ve come up with after years of being an email designer at MailChimp. The first rule is Design Within
Constraints,
- The email ecosystem has been largely ignored throughout the lifetime of the web. The W3C is only now beginning to
talk about it,
- That’s the root of one of the major constraints in email design; there are also no standards, so it’s the wild west. But
because there aren’t any standards to follow, you’re afforded a great deal of freedom,
- That means you end up with free rein to experiment, devise creative solutions, and otherwise do things that
would Jeffrey Zeldman sick to his stomach...

- The basis for the second major constraint in email design is the existence of a few very, very terrible email clients,
- These clients force email designers to build to the lowest common denominator,
- Some of the worst come from Google, which might surprise some, because this is a company that’s building driverless
cars,
- Amongst other issues, the Gmail web and mobile app clients lack media query support, and they require all CSS to be
inlined within email markup,
- For those reasons, they rank among the worst email clients, but they’re not alone...

- Microsoft Outlook (desktop) is the most notorious. Ask any email designer which email client they wish never existed,
and it’s this one,
- That’s because Outlook doesn’t run a traditional HTML rendering engine; In 2007, it moved from an engine powered by
IE6 to one powered by Word,
- Email client limitations like these make design differences from client to client pretty much necessary, but that’s a good
thing,
- Having to account for so many differences frees you having to strive for pixel perfection between clients,
- In responsive web design, we write different stylesheets for different platforms; it’s no worse to write an Outlook-
specific stylesheet that you then serve with conditional comments,
- There’s no reason not to use all of the tools available to you within these constraints to just make an email work,
- And you should strive to make it work better for people on the receiving end...

DESIGN
FOR
DISTRACTION
- And designing for those on the receiving end leads to the second rule: Design For Distraction,
- The mobile web is, well, mobile. And people are busy. Email is something we’re checking on the drive into the oﬃce, or
right when we wake up, or even in the middle of dinner,
- That mobility means that we have a responsibility to make it so email isn’t an interruption; it has to work into people’s
lives almost seamlessly. To that end, when building emails, there’s one foundational standard to meet:
- An email should be usable with just one eyeball, one thumb, and at arm’s length...

- One eyeball means the email is usable when a person is distracted, whether it’s a newsletter, a product sales email, or
a transactional message,
- One thumb means that major calls to action are at least 46px squared, and link groups have adequate separation,
- Arm’s length means primary copy has a 16px minimum font size, images are nicely-sized, and contrast is adequate,
- These three principles are great, but they’re ultimately meaningless until you apply them to speciﬁc ends...

DESIGN
WITH
PURPOSE
- Which brings us to the third rule: Design With Purpose,
- So, a website is generally made to cater to everyone; there’s a whole planet of people out there that can come to you,
so you stay as broad as you can,
- When you design for everyone, you can end up designing for no one; email allows you to do the reverse by making
designs narrow and focused,
- That can be immensely powerful provided you can focus enough to give that one person - or a group of people that
think in similar ways - what they want,
- One way to achieve that focus is to design an email to be one thing, to achieve a particular goal...

- You can do that by giving email a purpose. Generally speaking, there are four main categories for email,
- “Buy Me” are ecommerce-based; they use concise copy, simple calls to action, and rely on compelling imagery to build
an enticement to spend money,
- “Join Me” are event notices or invitations; copy is usually limited to important details and there are clear, bold calls to
action to urge participation,
- “Read Me” are newsletter emails; they rely upon well-written copy and great typography to make large amounts of
content easy to digest,
- The last category is a bit of an outlier, but is no less prevalent in the world of email...

- “Transactional” emails are messages that convey receipts, order updates, and similar one-time info. It’s important to
make them:
- “Focused”; a credit card declined message should be nothing more than that; no sales links, no unnecessary
information,
- ”Comprehensive”; they should contain as much relevant information as possible, made as concise as possible,
- “Appropriate”; this credit card declined message contains none of the typical MC humor that can be found in other
emails,
- “Practical”; the message is obvious, the content is actionable, the email is readable on any device and is easily
printable,
- “Spartan”; there’s no excessive design, no bells and whistles - transactional means short and to the point,
- By sticking to these categories as close as you can, your emails can end up less full of cruft...

DESIGN
FOR
EMAIL
- Which is great, because what you’ve ultimately got to do is Design For Email, and that involves four major
considerations
- 1. Don’t design emails like websites, 2. Be personal and personable, 3. Know and design to your audience, 4.
Remember email is part of the web ecosystem,
- The ﬁrst, that emails are not websites, is something where many people almost immediately fail,
- A lot of people design an email just as they would a website; you couldn’t ﬁnd a more incorrect way to go about it if
you tried,
- Designing an email like a website means you end up with something like the emails from Zappos...

- They contain page navigation that only serves to distract from the message and interferes with the course of action
you’d like the recipient to take,
- Why give them an option to do so much else other than buy the product you’re highlighting?
- It’s the same at the bottom: there are 19 links in the blue footer area!
- An email like this happens when designers don’t care, and marketers are allowed to run wild in their quest for
maximum click-throughs,
- There are always exceptions, but more often than not emails like this can be incredibly ineﬀective, especially
compared to an email like...

- This one, from Steam,
- It is, I think, properly designed; it’s singular in purpose and free of superﬂuous content,
- I wasn’t distracted by other games on sale that I may not be interested in, or links to other genres of games I’d be
forced to search through,
- This is the game I wanted, that I showed interested in and saved to MY wishlist,
- When this email hit my inbox, I immediately acted and bought the game (I was sitting in traﬃc at the time),
- Steam took advantage of that knowledge and made the email for ME; that personal touch is simple with
email...

- And that’s the second consideration: making email personal and personable; email is the perfect medium for this,
better than social media,
- It’s something a lot of email designers ignore, even though it doesn’t have to be as involved as Steam’s,
- Including a person’s name or location is very powerful. Paul Boag uses subscriber names in Headscape’s campaigns,
- When this email showed up in my inbox, I actually did a double take. “Holy shit, does he really want to feature my
project?”
- It wasn’t targeted to just me, of course, but for a moment? I thought it was. “Paul is all about web design. I’ve web
designed!”
- Not only did he take advantage of personal data available to him, he also geared the message toward a
speciﬁc audience...

- That’s the third consideration, and one of the best ways of designing for email,
- While a site’s ‘audience’ may be a vague group, in email it can be much clearer,
- With email, you can better tailor your content to build interest, foster engagement, and grow trust with the audience,
- One example is MailChimp’s UX newsletter, which we send out roughly twice a month; it’s a long-form email
that focuses on what we do at MCUX...

- It currently has over 13,000 subscribers,
- Because we know our audience, and know that they can and want to read these long articles, and prefer them in email
form, it works,
- The email also works as a conversational tool by encouraging questions, and that brings us closer to other people in
the web design world,
- After an issue goes out, we spend days responding to questions, which builds a relationship with the readers and
grows interest in the newsletter,
- The emails are long, but they’re only sent twice a month to lessen fatigue, and allow breathing room between
issues...

- And that’s where the fourth consideration comes in; knowledge that email is a part of the web ecosystem, and an
environment unto itself,
- Knowing when and how often to send an email is important to its success; people suﬀer email fatigue, which has led to
things like the ‘inbox zero’ movement,
- Be considerate of the time investment you’re asking of people, and strive to make your email painless to read through,
- It’s also good to remember that email is not a closed-oﬀ thing; it’s part of the web, so transitioning from email to web
should be seamless,
- If you’re pushing someone from an email to a site, and the email is responsive, then the site should be as well,
- The more painless you can make email, the more successful it’ll be...

BUILDING
RESPONSIVE
EMAIL
- These four rules act as a focusing mechanism; as you make your way through this cascading process, crafting emails
becomes easier for you on the design and development side, and the experience that you’re creating for your users
becomes more well-deﬁned,
- So once you’re got the experience nailed down, what do you do to put it together? Where do you start?
- You can start with some development techniques that help in the creation of good email,
- First, by breaking email down to smaller bits...

MODULAR
PATTERN-BASED
EMAIL
- A modular, pattern-based approach is what drives MC’s drag-and-drop email designer, and even underpins the
MailChimp application itself,
- This method allows great layout ﬂexibility because layout is abstracted into content blocks, which means the email can
be built quickly,
- It’s helpful because not only are you reducing dependency on having lots of standard CSS, you also reduce the size of
the media query you need to write,
- This is also a very stable method with which to build emails, because you end up with abstracted blocks of
code...

- These abstracted blocks are common design patterns you can ﬁnd all over the web, and particularly in email,
- I start with mapping out common design patterns like buttons and calendar pages, creating them outside the context
of the email,
- They’re not just any random patterns; they’re particular to the email’s purpose; an event invitation email would need a
calendar page to show oﬀ its date, for example,
- The emails I designed for Zendesk, a customer support service, work on this principle...

- This email is one of those “Read Me” emails, which means it’s a jack-of-all-trades message and contains a lot of
patterns,
- This is the email scaffold, and it’s the only part of the code with defined pixel sizes,
- It also has some basic patterns included, like the preheader and social block at the top,
- The rest of the content blocks are built as separate entities that can be placed into the scaffold in any order to create
specific layouts,
- For this email, there were several different patterns, but the major ones were...

- The email’s header, complete with a webfont-driven type stack...

- Then there’s the title block, also driven by a webfont stack,
- It’s also fully HTML - those lines are borders on empty table cells, which means it’s more eﬃcient data-wise,
- And it scales more easily across diﬀerent display sizes...

- It’s followed by the feature block...

- And ﬁnally by a utility link block...

- Everything is combined to form the full email,
- All of the code blocks are discrete, contained in isolated ﬁles that can be easily copied and pasted by anyone...

- I also used this build style in the emails that are sent from the Circa news app; One of the beneﬁts of using this
approach is ease of construction;
- Zendesk’s emails are put together by someone with no experience, Circa’s are put together programmatically,
- It’s all well and good to use this pattern-based approach to make email that easy, but making that easy and responsive
is more diﬃcult,
- More so when you have many email clients to consider, all of which have varying degrees of mobile-
friendliness...

MOBILE FIRST
IN EMAIL
- In traditional web design, everyone likes to say, “start with mobile first”, but it’s not such a simple proposition in email,
- Why? Because most clients don’t support media queries. And some don’t support max-width. And some support
media queries, but not max-width,
- It goes on and on like this, all of these roadblocks; but there are solutions that make mobile-first possible,
- My most recent experience with the mobile-first issue was in designing Khoi Vinh’s new Subtraction.com
newsletter...

- The email was originally desktop-first, but Khoi wanted a solution to the email not being responsive in webmail clients,
- Going fluid wasn’t an option, because this is an email whose content is varied and injected via RSS; it all had to be
fluidish, or ‘spongy’,
- How different email clients handle CSS required for mobile-friendly and responsive style shifts was also a
consideration,
- For example; Outlook has issues with max-width, and so does Apple Mail/iOS Mail, all web-based clients have issues
rendering media queries,
- Because there are a few problems to account for, a few techniques for a workable solution were employed...

- The email is built around the concept that just one container does all of the work in determining width; that’s
‘emailContainer’ here,
- Instead of defining a specific width to be overridden, it gets a 100% width via attribute, which is limited via ‘max-width’
CSS,
- The main media query takes care of adapting the width on supporting displays,
- This method fails in Outlook, so a fixed-width container was made and placed within conditional comments...

- That solves the max-width issue there, but there’s still a major max-width problem in Apple Mail...

- And that is dealt with by a min-width media query and a client-specific style adjustment for iOS,
- That’s how much it takes to do mobile-first in email, but it works,
- It’s messy, but effective, and the email looks right on each of the most important email clients that Khoi’s subscribers
use,
- The email is even adaptive in difficult clients like Gmail web and app...

- This solution is based on the idea that all of the parts in an email are always ﬂuid or near ﬂuid, and can be
placed anywhere and manipulated easily...

TABLE LAYOUT
SHIFTING
- And in traditional web design, this kind of thing is easily done with ﬂoats and positioning,
- Floats and positioning don’t work well in email clients, regardless of whether they’re desktop, web, or mobile-based, so
email designers, as usual, must resort to diﬀerent methods,
- One of the best ways to make an email responsive lies in a single mighty table attribute...

- That’s the (deprecated, but so what?) align attribute,
- One of the best ways to make an email responsive lies in a single mighty table attribute...

- Here’s a standard two-column layout email; we see this all the time,
- Ideally, on small screens, the email switches to a single-column layout...

- You can see that the right column wraps under the left when the media query is triggered,
- And if the email client doesn’t support media queries, the tables wrap on their own, because they’re aligned,
- This aligned table method becomes even more useful when you have content blocks whose semantic orders
change dependent on platform...

- Layouts like this, with a sidebar on the left and main content on the right, where the expectation is that the secondary
content snaps under the main content,
- On-screen, the sidebar comes before the main content, but we don’t want that to happen then the email
snaps to a single-column layout...

- The align attribute mimics CSS ﬂoat, and it’s supported in older email clients; this is the perfect situation in which to
use this method,
- Because generally a sidebar is reserved for secondary information, when the email shifts to 1-column view in mobile, it
should come after the main content,
- In the email HTML that order needs to be preserved so it makes semantic sense, while still allowing the column orders
to be reversed in desktop view,
- By preserving the semantic column order and adding align attributes that reverse it on desktop, the layout issue is
solved
- The heavy lifting is done without a media query, but we can use one for supporting clients so that column
widths can be expanded...

- When the media query is triggered, each table gets a width of 100%,
- They’re also set as block-level elements for email clients that have trouble with the ‘align’ attribute and ‘width:100%’,
- Because they’re aligned, the left aligned table will stack ﬁrst, the right-aligned table will stack second,
- Because the order of the columns is dictated by their alignment direction, we can actually swap the order of
elements by changing their position in the markup or manipulating their alignment direction...

- The sidebar snaps under the main body area, and your content hierarchy is preserved,
- The beauty of this method is that it can be used to do more complex layout shifts as well...

- Which is done in the AllThingsD newsletter; here, the mobile version is on the left and the desktop version is on the
right,
- Each story element is contained within an aligned table; title, byline, image, and summary; each of these items get
shuﬄed on mobile view,
- These three basic development principles allow a really strong foundation for responsive email...

EMAIL DESIGN
RESOURCES
- Unfortunately, they’re just the tip of the iceberg; all I’ve talked about here barely touches upon the whole of email
design,
- I’m not going to leave you in the lurch, of course; there’s a lot to learn, and I’m constantly working to
demystify email design...

templates.mailchimp.com
- This is my current eﬀort, MailChimp’s Email Design Reference; it’s my brain in website form,
- It’s a lengthy, comprehensive reference that covers email design from the ground up, beginning with basic principles
like typography usage to more complicated subjects like responsive email,
- It’s also got a library of pre-built email templates ready to be used for your own campaigns or as a learning
tool...

theuxnewsletter.com
- I also write occasionally about email design for MailChimpUX’s newsletter...

teamtreehouse.com/library/html-email-design
- And if you need a basic, quick primer in email design, I’ve done a course for Treehouse...

litmus.com/email-community
- Finally, the email analytics service Litmus recently opened an email design community,
- It’s frequented by the some of the best email designers out there, and is full of great discussion...

Fabio Carneiro • @flcarneiro
THANK YOU
- Hopefully, this talk has made email design a little less daunting and frustrating,
- I’m always open to chatting about email design; drop me a line via Twitter @ﬂcarneiro, or shoot me an email via
ﬂcarneiro.com,
- Thanks!

Hard-Won Lessons in Responsive Email Design - ConvergeSE 2014

More Related Content

What's hot (20)

Viewers also liked (15)

Similar to Hard-Won Lessons in Responsive Email Design - ConvergeSE 2014 (20)

Recently uploaded (20)

Hard-Won Lessons in Responsive Email Design - ConvergeSE 2014