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:


1.Responsive design

2.Animation

3.Styled ALT text

4.Dynamic content

5.A/B testing


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.


Chad S. White

Research Director at Litmus

Author of Email Marketing Rules


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.


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


Responsive

Design


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.


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.



Most brands are using responsive design to

create minor changes between the desktop

and mobile versions of their emails.


How can marketers best

act on the trends around

responsive design?


Fluid-to-fixed layout structure

<div style="width: 100%; max-width: 600px;">



</div>

Fluid div by default with max-width constraint

<div style="width: 100%; max-width: 600px;">...</div>



Wrap in Outlook conditional table


Fluid-to-fixed layout structure


@media screen and (max-width: 600px) {

.foo {

/* Properties */

}

}

Media query


FREE Templates: litmus.com/community/templates

https://litmus.com/community/templates


[Tutorial] Creating A Responsive Email Without Media Queries

https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919


Visual editors for responsive email

StampReady BEE

https://stampready.net

https://beefree.io


Frameworks for responsive email

ZURB’s Foundation for EmailsMJML

https://foundation.zurb.com/emails.html

https://mjml.io

Animation


How popular is animation

and what are the current

trends around it?


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.


Successful email programs are 52% more

likely than less successful programs to use

animation at least sometimes in their email

designs (53% vs. 35%).


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.




animation?


<img src="image.gif" width="500" height="200"/>

GIF implementation


Sprout Social


Netflixhttps://litmus.com/scope/706dzzyz5tve

https://litmus.com/scope/706dzzyz5tve


Uberhttps://litmus.com/builder/47c769f

https://litmus.com/builder/47c769f


Animated GIFs

are not supported

in Outlook 2007-

2016 for

WindowsFirst frame should include play button and CTA


A Guide to Animated GIFs in Email

https://litmus.com/blog/a-guide-to-animated-gifs-in-email


Photoshop's Timeline Rocks

https://dandenney.com/posts/front-end-dev/photoshops-timeline-rocks


@keyframes animation-name {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

}

CSS animation implementation

@keyframes animation-name {

from {

opacity: 0;

}

to {

opacity: 1;

}

}


.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 */

}



.class {

animation: animation-name 4s 1s infinite linear alternate; /*Shorthand*/

}



Burberryhttps://litmus.com/builder/2d1329e

https://litmus.com/builder/2d1329e


Narcoshttps://litmus.com/builder/5f40c05

https://litmus.com/builder/5f40c05

Styled

ALT Text


How popular is styled ALT

text and what are the



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


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



likely than less successful programs to

always or often use styled ALT text (26.6%

vs. 17.7%).




styled ALT text?


<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


#EmailWeekly

https://emailweekly.co


The Ultimate Guide to Styled ALT Text in Email

https://litmus.com/blog/the-ultimate-guide-to-styled-alt-text-in-email


The Ultimate Guide to Image Blocking in Email

https://litmus.com/blog/the-ultimate-guide-to-email-image-blocking


Pushing the Boundaries of Creative ALT Text in Email

https://litmus.com/blog/pushing-the-boundaries-of-creative-alt-text-in-email

Dynamic

Content


How popular is dynamic

content and what are the



Dynamic content allows marketers to

personalize their emails, which makes them

more relevance for subscribers and

increases performance for brands.



likely than less successful programs to use

dynamic content always or often in their

emails (50% vs. 30%).


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.




dynamic content?


What can be dynamic in email?


Spotify 2016 Wrapped

https://movableink.com/blog/email-spotlight-spotifys-data-driven-year-in-review-campaign/


JibJab

Halloween

http://files.jibjab.com/emails/jibjab/2015/10_08/halloween_haunted_house.html


Advent Calendar

http://bauknecht-cdn.mayoris.com/go/befkj203/phshtgde/537/0


Litmus Twitter Feed

https://litmus.com/blog/how-to-code-a-live-dynamic-twitter-feed-in-html-email


Dynamic content services

Movable Ink LiveClicker

https://movableink.com

https://liveclicker.com

A/B Testing


How popular is A/B testing

and what are the current

trends around it?


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.


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.


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.


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.




A/B testing?


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.


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.


3. Have a clear hypothesis.

4. Choose a testing victory metric that is

aligned with your campaign goal.


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/

https://abtestguide.com/calc/


8. Use holdout groups when appropriate.

9. Create test plan and record test results.

10. Confirm results of tests.


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.

Top 5 Opportunities for Improving Your

Email Creative

1.Responsive design

2.Animation

3.Styled ALT text

4.Dynamic content

5.A/B testing


Download the 2017 State of

Email Creative report at:

pages.litmus.com/lp/state-of-

email-creative-2017

http://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