Email is a big deal, and one of the most important ways to connect with your audience. With the majority of people now reading email on mobile devices, creating robust responsive templates is no longer an option. Unfortunately email design is still considered a dark art, and its steep learning curve can be daunting. In this talk, I present email design techniques that make the task of developing for email more simple, along with strategies for optimizing user experience in email clients that will get those emails read.
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Ā
Hard-Won Lessons in Responsive Email Design - ConvergeSE 2014
1. 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
2. - 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...
3. - 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...
4. - 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...
5. 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
6. 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
7. 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...
source: http://goo.gl/0m6dEM
8. 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...
source: http://goo.gl/0m6dEM
9. 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
10. Internet activities via mobile device (% mobile internet users)
- How do they most use their mobile connections? For sending and receiving email...
source: http://goo.gl/VMjkJH
11. 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...
source: http://goo.gl/VMjkJH
12. 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
13. 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
14. DESIGN
WITHIN
CONSTRAINTS
- It may not be simple, but itās deļ¬nitely 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 ļ¬rst 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 aļ¬orded a great deal of freedom,
- That means you end up with free rein to experiment, devise creative solutions, and otherwise do things that
would Jeļ¬rey Zeldman sick to his stomach...
15. - 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...
16. - 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 diļ¬erences from client to client pretty much necessary, but thatās a good
thing,
- Having to account for so many diļ¬erences frees you having to strive for pixel perfection between clients,
- In responsive web design, we write diļ¬erent stylesheets for diļ¬erent platforms; itās no worse to write an Outlook-
speciļ¬c 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...
17. 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...
18. - 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...
19. 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...
20. - 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...
21. - ā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...
22. 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...
23. - 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...
24. - 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...
25. - 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...
26. - 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...
27. - 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...
28. - 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...
29. 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...
30. 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...
31. - 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...
32. - 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 scaļ¬old, and itās the only part of the code with deļ¬ned 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 scaļ¬old in any order to create
speciļ¬c layouts,
- For this email, there were several diļ¬erent patterns, but the major ones were...
33. - The emailās header, complete with a webfont-driven type stack...
34. - 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...
37. - 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...
38. - 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...
39. MOBILE FIRST
IN EMAIL
- In traditional web design, everyone likes to say, āstart with mobile ļ¬rstā, 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-ļ¬rst possible,
- My most recent experience with the mobile-ļ¬rst issue was in designing Khoi Vinhās new Subtraction.com
newsletter...
40. - The email was originally desktop-ļ¬rst, but Khoi wanted a solution to the email not being responsive in webmail clients,
- Going ļ¬uid wasnāt an option, because this is an email whose content is varied and injected via RSS; it all had to be
ļ¬uidish, or āspongyā,
- How diļ¬erent 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...
41. - 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 deļ¬ning a speciļ¬c 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 ļ¬xed-width container was made and placed within conditional comments...
42. - That solves the max-width issue there, but thereās still a major max-width problem in Apple Mail...
43. - And that is dealt with by a min-width media query and a client-speciļ¬c style adjustment for iOS,
- Thatās how much it takes to do mobile-ļ¬rst in email, but it works,
- Itās messy, but eļ¬ective, and the email looks right on each of the most important email clients that Khoiās subscribers
use,
- The email is even adaptive in diļ¬cult clients like Gmail web and app...
44. - 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...
45. 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...
46. - 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...
47. - 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...
48. - 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...
49. - 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...
50. - 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...
51. - 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...
52. - 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...
53. - 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...
54. 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...
55. 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...
58. 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...
59. 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!