Email design: best practices, trends & ideas

Email design: best practices, trends & ideas
Travis Rice
Creative Director, Yes Lifecycle Marketing

Yes Confidential| Email Design | March 14, 20182
• Email design best practices
1. Fundamentals of mobile design
2. Mobile-responsive template systems
• Inbox trends & techniques
3. Top picks from industry leaders
• Creative playbook
4. Design, code & content ideas
Agenda

| Email Design | March 14, 20183
Email design 
best practices

Fundamentals  
of mobile design

Email client market share
Images/statistics via Litmus | Market share analytics from February 2018 emailclientmarketshare.com

• The ringleader of mobile reformatting in email is  
the @media declaration.
• Media queries allow us to target a screen size (or  
multiple breakpoints)—then determine how elements  
behave when a mobile open is detected.
• Support for CSS in email is growing, but we’re still well  
behind that found on the Web.
• For now, our core tactics are: reformat, resize, or remove.
The basics of responsive code

• Think about how you consume mobile email. Are you  
a 1-handed reader or do you use both?
• Your thumb has an ergonomic range of motion.  
CTAs should land within that thumb zone.
• To avoid mistaps, clear space around CTAs is equally
important. Apple’s touch target is 44 x 44 points with  
around 10 points of clear space.
Designing for touch

• Remember, over half your opens are on-the-go.
• As mobile opens grow, attention spans diminish.
• Consumers spend up to 11 seconds scanning an email.
• When planning a campaign, ask yourself:
1. What’s important to the reader?
2. What can be cut to distill the message?
3. How strong is the call to action?
• Based on eye-tracking studies, readers stay narrowly
focused. They see: images, headlines, & buttons— 
body copy gets very little attention.
Mobile first approach to content

• “It looks great on iPhone but blows up in Outlook!”
• Check with your ESP to find out where your emails  
are opened. Metrics should dictate the environments  
you design for.
• Most importantly, don’t dilute creative to ensure  
rendering for a small percentage of your audience.
• Innovation can set your emails apart in a crowded inbox.
• When you innovate, just ensure that you’ve tested  
& considered how elements within the layout will 
degrade in less supportive environments.
Cutting-edge or all-inclusive

• Yes, you can make handsome emails in Photoshop.  
But is it worth alienating over half your audience?
• Most image-based emails can be recreated in an  
HTML/image hybrid layout using lightweight code,
background colors/images & Web fonts.
• Control over type & layout options is similar &  
the overall gains are undeniable:
✓ Images-off readability
✓ Reduced message weight
✓ Simplified workflow
✓ Mobile reformatting
Letting go of Photoshop

Migrating to a mobile-
responsive system

• Essential tip: don’t code responsive email from scratch.
• In a multi-screen world, template systems are the cornerstone
to ensuring accurate mobile rendering across environments.
• Production is a snap—design daily emails right in the  
HTML editor. No Photoshop slicing. No responsive coding  
(it’s already done). Just hit send.
• These modular design systems can even be uploaded &
integrated into wysiwyg editors such as our 360i Builder.
• Templates streamline your workflow & give you  
time to focus on what’s important…content.
Building on a solid foundation

• Once your design system is in place, use a phased
approach to transition your email program.
• Start with regular messaging then move on to lifecycle
emails & transactional triggers.
• Environment test your deployments. The space is always
changing—your system will need maintenance.
• Appoint an administrator who owns the code & oversees
scheduled updates. In between updates, collect revisions
& fixes into a batch (rather than one-off fixes).
• When a batched update is made, version the codebase &
note changes: “master_v2.4 (fixed Outlook margin break)”.
Migration & maintenance

Cool trends &  
tactics in email
design
Matthew Caldwell, SVP Creative

Which emails  
do you always  
open?
Since 2012 we’ve asked clients & employees

Here’s what they said  
& what makes them  
so special

| Email Design | March 14, 2018 Yes Confidential17
• High-end photography
• Editorial content
• Daily updates
Aquabumps
Miguel
eBay

• Curated content
• Ultra clean design
• Instagram sign off
Huckberry
Matt
YES

• Lifestyle content
• Amazing photos
• Spotify playlists
• Video & animation
Yeti
Deb
West Marine

| Email Design | March 14, 2018 Yes Confidential
Matt
YES
21
• Curated content
• Good use of video
• Consistent formula
Patagonia

• Editorial content
• Minimal design
• Simple animation
Everlane
Clark
Marriott

• Mobile 1st design
• Good typography
• Cool animation
• Minimal status bar
Starbucks
Cathy
PayPal

• Engaging content
• Striking design
• Strong delineation
InVision
Travis
YES

• Curated content
• Cutting-edge code
• Emailgeek humor
ActionRocket
Matt
YES

| Email Design | March 14, 2018 Yes Confidential
Natalie
Land’s End
26
• No header!
• Sleek layout
• Useful content
• Nice illustrations
Uber

• Clean, mobile- 
first design
• Rich visuals  
& content
• Highly targeted  
offers
Dollar Shave Club
Travis
YES

• Curated content:
athlete profiles,  
video, UGC
• Bold photography:
lifestyle & product
• Lots of white space
+ minimal header
Nike
Travis
YES

The category 
of emails they 
always open?

Newsletters
What emails do you consistently open?

Email has become more than just a  
personal communication hub—when it  
comes to newsletters, email has essentially  
become the new homepage.
- Jordan Teicher, Contently

What do these emails
have in common?
Clean
Design
Good  
Type
Quality
Images+ =+ + Engagement
Content

Creative playbook

Design ideas

• Impactful format stands
out in the inbox
• Good tactic for
announcement emails
• Follows best practice…
headline & CTA are  
code-based
Sans header

Color blocks
• Bold format for sales
& campaign themes
• Blocks create strong
delineation & improve
readability
• For accessibility, be
mindful of contrast  
on color pairs

• After all these years, the
old school GIF is still a
great way to stand out  
in the inbox
• Good tactic for lifecycle
messaging (birthday,
anniversary, etc.)
• Works well for
standalone sale
postcards & product
rollouts too
Simple GIF animation

Simple GIF animation

• Unusual format is an
inbox stand out
• Perfect tactic for special
announcements
• Be diligent with image
optimization to keep  
load time on par
Vertical scroll

Cutting edge code

• Desktop uses arrows to
navigate the slides
• When scaled to mobile,
the arrows disappear,
leaving thumbnail images
as navigation
• Viewed in Webmail, the
carousel falls back to a
rotating animated gif
Responsive carousel

• Uses image hotspots  
that display product
detail and Buy button
when clicked
• Cool tactic but you will
need to ensure a fallback
state for unsupported
environments
Product hotspots

• Uses an interactive word
puzzle to "unlock" offer
• Unique in the inbox
• Nice tactic for special
events or promos
• Works on Webkit
environments
Interactive puzzle

• Hover states can be
added to buttons or
elements
• The same technique
can also be used to
create rollover images
that resize for mobile!
• Good technique for a
product education
module
CSS effects

• Uses form support in
email to add products to a
shopping cart
• Requires the ability to
leverage the merchant’s
“add to cart” API
Interactive shopping

• Unique in the inbox
• Good tactic for lifecycle
messaging (birthday,
anniversary, etc.)
• Extra points with the
tech-savvy audience
• Works on Webkit
environments
Parallax scrolling

• Employs CSS
animation to create a
3D card opening
triggered by tap or
mouse-over
• Works in Webkit
environments
Interactive card

Engagement content

• Engagement, or sticky, content helps subscribers  
feel they are getting more than just a sales pitch.
• Sticky is interesting, editorial, bite-sized content.
• When done well, it increases open & click-through
rates while providing value to your audience.
What is engagement content?

• If you’re pushing offers week after week, subscriber
engagement will drop off.
• 61% of consumers say they feel better about, and  
are more likely to buy from, a company that delivers  
custom content.1
• Don’t focus on short-term gains… adding sticky
content to your program is an investment in healthy
subscribers.
• You’re building a base of loyal openers.
The engagement marathon:  
long-term audience health
1Custom Content Council

• Remember, you’re adding value for the reader.
• While it seems counterintuitive to link away from your
site, the reader will remember that you pointed them
to that great article.
• Consistently provide supplemental content & the
audience will be looking for your next email… “wonder
what’s in this month’s newsletter”.
• Curating existing content that syncs well with your
marketing message is an efficient way to add sticky.
• 27,000,000 pieces of content are shared everyday.2
Don’t be afraid to link out
2AOL and Nielsen

Best-in-class: who’s doing it right

• Solid contender for best retail email
✓ Sticky elements: editorial profiles, tips, trivia
✓ Even their straight marketing is well crafted & engaging
✓ Case study in training subscribers to open
Bonobos

• Doesn’t get much stickier than this
✓ Includes: expert profiles, tool tips, photo essays, trivia,  
interactive quizzes, workflow tips…
✓ Monthly newsletter that leaves you counting the days  
until the next drop
Hightail

• Good example of a consistent formula
✓ Sticky: photo contests, photo galleries, editorial articles,  
video biographies of athletes, & customer stories
✓ Each email closes with an engagement piece
Patagonia

• Retail email + perfectly bite-sized content
✓ Sticky elements: tips, galleries, editorial articles, & music
✓ Well-curated, outside content that resonates with the audience
✓ Always links out to blogs, SoundCloud, etc.
FY

• For best-in-class content, look no further
✓ Sticky: Interviews with design leaders, tips, tutorials, blog  
articles, weekly list of favorite links, webinar series…
✓ Striking design + engaging content = inbox favorite
InVision

• Robust email program + multi-faceted content strategy
✓ Sticky elements: travel tips, quizzes, interactive polls, articles
✓ Well-designed template allows for seamless workflow & a  
wide range of module types to showcase content
Marriott Rewards

Batch creation

• Choose your tactic: curating outside articles, or  
creating custom content.
• Who’s the editor? If you don’t have a copywriter,  
freelance journalists are a good resource.
• Your audience persona & Brand voice should  
direct all content decisions.
• Essential tip: don’t create on-the-fly.
• Create a batch of content as a single project.  
Work through 3, 6, or 12 months worth of emails.
So, where do you start?

• Fire up the email factory. Start with your container,  
the master template, then add the 2 ingredients:  
offer content + engagement content.
• Since you planned ahead & created a library of
content, now simply choose the piece that fits the
email theme.
• Develop a consistent approach for inserting sticky.  
Use the same module types & layout placement to
establish a recognizable pattern.
Putting it all together

• In a multi-screen world, templates are not a luxury.
• They are the cornerstone to ensuring accurate mobile
rendering across environments.
• Template systems afford us workflow efficiencies  
+ time to focus on what’s important…content.
• When you have image specs & character counts for  
sticky modules, it’s easy to create plug & play content.
• Building emails is a snap—simply place the content
directly in the HTML template. No Photoshop. No
responsive coding (it’s already done). Just hit send.
Building on a solid foundation

Cadence & your  
mailing calendar

• Back to the engagement marathon...it’s time to invest  
in the long-term health of your audience.
• Be strategic when planning the cadence of your emails. 
A proven formula is the sell, sell, fun approach.
Training your audience to open

• Work with your strategist to develop a program  
roadmap in conjunction with your mailing calendar.
• This will help identify key opportunities to insert
engagement content.
• Package your sticky emails so they’re identifiable.
• Create a monthly or bi-weekly NL with a unique
moniker: Brandname Digest, Weekly eNews, etc.
• Once you have a quarter’s worth of emails under 
the belt, analyze your metrics, test, & refine.
Know where you’re going

Determine the value you can bring
to your audience. Then deliver that
consistently through your content.

Email design: best practices, trends & ideas

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Email design: best practices, trends & ideas

Similaire à Email design: best practices, trends & ideas (20)

Dernier

Dernier (20)

Email design: best practices, trends & ideas