The Top 5 Opportunities for Improving Your Email Creative
Transcript of The Top 5 Opportunities for Improving Your Email Creative
Top 5 Opportunities
for Improving Your
Email CreativeInsights from Litmus’ 2017 State of Email Creative Report
Email creative is unlike web or print design. It
has its own unique constraints and
opportunities that marketers must master to
make the most of the channel.
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Based on our survey of more than 3,500
marketers, our 2017 State of Email Creative
report identifies the top 5 opportunities to
improve your email creative strategy:
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
1.Responsive design
2.Animation
3.Styled ALT text
4.Dynamic content
5.A/B testing
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Over the next 45 minutes, we’ll share
research into the usage of each of these,
plus how-to advice so you can put these
tools and tactics to use for your brand.
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Chad S. White
Research Director at Litmus
Author of Email Marketing Rules
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Kevin Mandeville
Product Manager
Litmus
The Litmus Email Creative Platform works
alongside your existing ESP to help you
ensure a consistently great brand experience
for every subscriber, work more efficiently,
accelerate campaign performance, reduce
errors, and stay out of the spam folder.
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Litmus offers:
● Email Previews in a wide range of clients
● Builder, our email HTML editor
● Spam Testing in 20+ filters
● Checklist for quality assurance
● Email Analytics for new insights
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Responsive
Design
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
How popular is responsive
design and what are the
current trends around it?
Most emails are opened on mobile devices—
and have been for several years now. Your
brand’s mobile email readership levels can
differ, but our industry reached a critical
mass years ago.
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
A strong majority of brands use responsive
design for their emails, although adoption is
lower for automated and transactional emails
than for broadcast and segmented emails.
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Most brands are using responsive design to
create minor changes between the desktop
and mobile versions of their emails.
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
How can marketers best
act on the trends around
responsive design?
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Fluid-to-fixed layout structure
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
<div style="width: 100%; max-width: 600px;">
<!-- Insert content here -->
</div>
Fluid div by default with max-width constraint
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
<!--[if (gte mso 9)|(IE)]>
<table cellspacing=“0” cellpadding=“0” border=“0” width=“600” align=“center”>
<tr>
<td>
<![endif]-->
<div style="width: 100%; max-width: 600px;">...</div>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
Wrap in Outlook conditional table
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Fluid-to-fixed layout structure
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
@media screen and (max-width: 600px) {
.foo {
/* Properties */
}
}
Media query
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
FREE Templates: litmus.com/community/templates
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
[Tutorial] Creating A Responsive Email Without Media Queries
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Visual editors for responsive email
StampReady BEE
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Frameworks for responsive email
ZURB’s Foundation for EmailsMJML
Animation
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
How popular is animation
and what are the current
trends around it?
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Motion is powerful because it draws the eye.
It’s attention-grabbing. Support for video in
email is decent for most senders, but support
for CSS animation is stronger and support for
animated GIFs is nearly universal.
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Successful email programs are 52% more
likely than less successful programs to use
animation at least sometimes in their email
designs (53% vs. 35%).
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Animated GIF usage is much stronger
among B2C brands. Our 2017 State of Email
Creative research shows 38% of B2B brands
never use animated GIFs in their emails,
compared to only 22% of B2C brands.
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
How can marketers best
act on the trends around
animation?
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
<img src="image.gif" width="500" height="200"/>
GIF implementation
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Sprout Social
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Netflixhttps://litmus.com/scope/706dzzyz5tve
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Uberhttps://litmus.com/builder/47c769f
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Animated GIFs
are not supported
in Outlook 2007-
2016 for
WindowsFirst frame should include play button and CTA
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
A Guide to Animated GIFs in Email
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Photoshop's Timeline Rocks
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
@keyframes animation-name {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
CSS animation implementation
@keyframes animation-name {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
.class {
animation-name: animation-name; /* @keyframes name */
animation-duration: 4s; /* Total duration of animation */
animation-delay: 1s; /* Delay before animation begins */
animation-iteration-count: infinite; /* How many times animation runs */
animation-timing-function: linear; /* Set animation speed */
animation-direction: alternate; /* Set loop direction */
}
CSS animation implementation
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
.class {
animation: animation-name 4s 1s infinite linear alternate; /*Shorthand*/
}
CSS animation implementation
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Burberryhttps://litmus.com/builder/2d1329e
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Narcoshttps://litmus.com/builder/5f40c05
Styled
ALT Text
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
How popular is styled ALT
text and what are the
current trends around it?
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Defensive design techniques help your
emails convey their message when images
are blocked. Those techniques include using:
1.HTML or system text
2.Background colors on table cells
3.ALT text
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
While ALT text is very common, most brands
don’t style theirs often. This involves using
CSS styles to change your ALT text’s…
● Font
● Color
● Size
● Style
● Weight
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Successful email programs are 50% more
likely than less successful programs to
always or often use styled ALT text (26.6%
vs. 17.7%).
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
How can marketers best
act on the trends around
styled ALT text?
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
<img src="image.png" width="500" height="462" style="width: 100%; height:
auto; display: block; color: #ffffff; font-size: 36px; font-family: sans-serif;
background: #333333;" alt="This is alt text"/>
Styled ALT text implementation
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
The Ultimate Guide to Styled ALT Text in Email
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
The Ultimate Guide to Image Blocking in Email
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Pushing the Boundaries of Creative ALT Text in Email
Dynamic
Content
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
How popular is dynamic
content and what are the
current trends around it?
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Dynamic content allows marketers to
personalize their emails, which makes them
more relevance for subscribers and
increases performance for brands.
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Successful email programs are 68% more
likely than less successful programs to use
dynamic content always or often in their
emails (50% vs. 30%).
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Dynamic content has a bright future. It will
benefit tremendously from other major
marketing and business trends, such as Big
Data, AI, machine learning, omnichannel
integration, and customer-centricity.
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
How can marketers best
act on the trends around
dynamic content?
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
What can be dynamic in email?
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Spotify 2016 Wrapped
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
JibJab
Halloween
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Advent Calendar
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Litmus Twitter Feed
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Dynamic content services
Movable Ink LiveClicker
A/B Testing
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
How popular is A/B testing
and what are the current
trends around it?
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Analytics allow marketers to listen to their
subscribers and collect feedback. A/B testing
allows marketers to listen to their subscribers
in a much more targeted way and iterate on
feedback much more quickly.
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Brands are much more likely to A/B test their
broadcast and segmented promotional
emails than they are their automated and
transactional emails. However, successful
email programs are more likely to test their
automated and transactional emails.
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
39% of email programs generate 25% or
more of their email marketing revenue from
automated and transactional emails; 13%
generate 50% or more. That trend makes
A/B testing these emails even more critical.
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Most email A/B testing is focused on high-
yield elements like subject lines and calls-
to-action. However, there are many
opportunities further down the value chain.
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
How can marketers best
act on the trends around
A/B testing?
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
When doing email A/B testing:
1. Focus your email A/B testing efforts on
campaign elements that are most likely to
move the needle on performance, such as
subject lines, calls-to-action, hero images,
and heads.
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
2. Understand whether your testing will get
you closer to a local or global maximum.
Janie Clarke of Indeed recommends A/B
testing small, medium, and large changes to
find both your local and global maximums.
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
3. Have a clear hypothesis.
4. Choose a testing victory metric that is
aligned with your campaign goal.
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
5. Use test segments of active subscribers.
6. Test similar groups of subscribers.
7. Ensure your testing groups are big enough
to produce statistically significant results.
Consider abtestguide.com/calc/
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
8. Use holdout groups when appropriate.
9. Create test plan and record test results.
10. Confirm results of tests.
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
11. Share the results of your email A/B tests
with other channel owners at your company.
Jonathan Pay of Holistic Email Marketing
recommends sharing email A/B testing insights
with your web, social media, and ad teams.
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Top 5 Opportunities for Improving Your
Email Creative
1.Responsive design
2.Animation
3.Styled ALT text
4.Dynamic content
5.A/B testing
#LitmusLive @LitmusApp @ChadSWhite @KevinMandeville
Download the 2017 State of
Email Creative report at:
pages.litmus.com/lp/state-of-
email-creative-2017
Thank You!
Any Questions?You can find all of our
State of Email Survey Research at
litmus.com/stateofemail