Modular email templates

Anna Yeaman@stylecampaign

http://stylecampaign.com/blog/2013/09/mapmyfitness-case-study

2 case studies

Our process

Project challenges

Scalable, adaptive or responsive

User testing

Internal management

Custom template system made up of

reusable modules that you can rearrange,

duplicate or remove for different designs.

Modular templates

Email designers have been building

‘Master’ templates for years

Not new

Why the renewed

interest?

50% mobile

emailclientmarketshare.com

Prompting widespread redesigns

~

No one wants to build 20 or

40 one-off mobile templates…

Build for scale, speed

and consistency.

Module List Components Modules

Master Sample / Guides

Our basic process

1.

2.

3.

4.

Button

#2C6E26 #BCD0CF #D9D9D9

Adorama

Mobile optimization

+

Brand refresh

Review existing creative

Module list1. Header

2. 3 col grid

3. 2 col grid

4. Short image 80px

5. Medium image 150px

6. Tall image 250px

7. X-Tall image 800px

8. Navigation

9. Preference center

10. Footer

Responsive

or

Scalable?

Responsive layoutFluid grids, fluid media & @media

header

footer

copy copy

copy copy

header

copy

copy

Scalable layoutnarrow fixed-width

header

footer

copy copy

copy copy

header

footer

copy copy

copy copy

scalable500px

Opted for responsive, for a superior

mobile user experience. A scalable

layout would have required an

aggressive over simplification of

their desktop creative.

http://www.exacttarget.com/blog/at-the-tipping-point-for-

mobile-friendly-email-design/

Desktop52%

Responsive36%

Scalable16%

36% of major B2C

brands are currently

using responsive

email design vs.

16% scalable

Chad White, August 2014

Scalable is most effective with

minimal, image driven layouts

480px scalable responsive

2 biggest challengesDense image-based content & navigation

Dense images

Content too dense to work as a fluid

image within a responsive template

Desktop

Mobile

Simplify the design, and lose

important product information

Desktop

Mobile

Switch from image to HTML text. Great

for image blocking and control, but limits

creative options and adds complexity.

Desktop

Mobile

Different desktop and mobile images

solves the problem, though adds

weight and production time

Desktop Mobile

Choose to swap desktop and

mobile image modules

http://www.cxpartners.co.uk/cxblog/user-

experience-problems-with-responsive-photos

http://blog.cloudfour.com/dont-use-

picture-most-of-the-time

Image swap from a deployed campaign

Desktop Mobile

Desktop

Mobile

Image swap from a deployed campaign

Desktop

Mobile

Image swap from a deployed campaign

Adorama

Damien Alexeev – Email Campaign Strategist

“Producing two image sets hasn’t been an

issue at all. I created a mobile template

framework to utilize for our standard product

banners and essentially once the desktop

version is created it’s as simple as copying

over the elements needed for mobile.

It only takes a few moments in most cases to

create the mobile version.

Non-standard banners take slightly more

time, but provided the important elements

are identified it’s just about stripping down

the desktop version to the essentials.”

Desktop Mobile

Use templates to speed up asset production

http://stylecampaign.com/blog/2013/01/image-optimization

Old navi

New branding

Navi

Final navigation

Outlook 2010 – navi images off

“A user’s understanding of an

icon is based on previous

experience. Due to the absence

of a standard usage for most

icons, text labels are necessary

to communicate the meaning

and reduce ambiguity”

http://www.nngroup.com/articles/icon-usability

Touch friendly

Testing different navi treatments

Testing different navi patterns

http://stylecampaign.com/blog/2014/02/respons

ive-email-navigation/

Tapped 20% more

than hamburger

with outline

3x more taps with

outline (looks more

like a button)

MENU

http://exisweb.net/mobile-menu-abtest

http://exisweb.net/menu-eats-hamburger

Final Adorama Master template

Some deployed campaigns

Adorama

Damien Alexeev – Email Campaign Strategist

“We definitely see larger revenue from a

larger product listing in the email.

Though I will be conducting testing to revisit

the length. Our previous test was before

implementing the new template. So now our

emails on mobile are significantly longer.

We’re working on a solution to highlight

some products that direct to landing pages

for product categories, rather than listing all

the products in the email.”

Keep testing

Monster

Improved responsive templates

+

Brand refresh

+

Horizontal build

Horizontal

Stay below

2100px for

Outlook

Visual styleDesign meetings

Mood boards

Few concepts of one module

Surveys

Explore other emails and sites

Website style guide

Website

Mobile apps

http://typecast.com http://fontsinuse.com

http://colourco.de

http://styletil.es http://sparkbox.github.io/style-prototype

http://danielmall.com/articles/visual-inventory

Looked to apps for branding

Horizontal responsive template

Horizontal scalable template

Horizontal

Vertical

Used control templates to draw up module list

sketch

Marvelapp – take photos of sketches & link up

Final vertical modular template

Dynamic content

Old network

center

Old network

centerNew network

center

https://twitter.com/philnelson/status/509869150022279171 http://uifaces.com

Stress test

http://www.edisonda.com/files/download/EDISONDA_report_2013_eyetracking_in_e-mail_marketing.pdf

“The first object to attract

viewers attention? In most

cases it would be a face

[…] one can receive much

more information than

while reading text.”

Increased avatar 50px to 70px

Redesign almost 2x height

a/b test 05/31 – 08/06, 2013 (control left)

Monster.com

Leah Joyce– Sr. Director of CRM Marketing

“For the test we didn’t factor in “Open

Rate” as a part of gauging the success

of this test. With that said, the template

provided to us by Style Campaign won

across the board. It was definitely a

distinct and noticeable improvement.”

a/b test 05/31 – 08/06, 2013 (control left)

Monster.com

Leah Joyce– Sr. Director of CRM Marketing

“While we saw better opens with our

Control we were measuring the impact

of the design changes. The Style

Campaign templates drove significantly

higher email KPI’s”

mobile desktopNo In-between

Adaptive layout control

mobile desktop

Responsive re-design

Fluid In-between

18,796 distinct Android devices

http://opensignal.com/reports/2014/android-fragmentation

Top 6 email clients Sep. 2014

http://emailclientmarketshare.com

1. iPhone – 26%

2. Gmail – 15%

3. iPad – 13%

4. Outlook – 11%

5. Apple Mail – 7%

6. Android – 6%

Mobile

Desktop

414px320x568

viewport

iPhone viewports https://twitter.com/ppk/status/509814582479966208

1136x640

1334x750

1920x1080

375x667

viewport

414x736

viewport

iPhone 6+

Adaptive layout Responsive layout

New modular email

system in 2014

Large amount of diversity

View in context via sample templates

User testing

Our lab

https://medium.com/bridge-collection/a-guerilla-

usability-test-on-dropbox-photos-e6a1e37028b4

Remote

User testingSubtle usability issues

Validate a design approach

Ideas for new content and a/b tests

Missing information

Thought processes and behaviors

Flow from email to landing page

Finesse pre-launch e.g. holiday creative

Competitive analysis

Brand feedback: first impressions, language used

Motivates a team & gets you resources

User testingSubtle usability issues

Validate a design approach

Ideas for new content and a/b tests

Missing information

Thought processes and behaviorsFlow from email to landing page

Finesse pre-launch e.g. holiday creative

Competitive analysis

Brand feedback: first impressions, language used

Motivates a team & gets you resources

Participants tapping

on subject lines

414px

Subject line as table of contents

header

footer

Item 1

Item 4

Item 5

Item 2

Item 3

Item 1 | Item 2 | Item 3Subject line

Item 2 | Item 5 | Item 1

vs.

User testingSubtle usability issues

Validate a design approachIdeas for new content and a/b tests

Missing information

Thought processes and behaviors

Flow from email to landing page

Finesse pre-launch e.g. holiday creative

Competitive analysis

Brand feedback: first impressions, language used

Motivates a team & gets you resources

“I like how it’s mobile friendly; I don’t have

to go left and right.”

“I love, love the design, I love the cleanness

of it. It’s very easy to operate and read.”

– comments from user testing responsive email

“I think the text sizes are perfect.”

User testingSubtle usability issues

Validate a design approach

Ideas for new content and a/b tests

Missing information

Thought processes and behaviors

Flow from email to landing page

Finesse pre-launch e.g. holiday creative

Competitive analysis

Brand feedback: first impressions, language used

Motivates a team & gets you resources

Remote user testing email

1 - Set up a test email account e.g. testing@gmail.com

2 - Send email to test account, try to make it the only email available

3 - Create instructions e.g. how to set up a Gmail account via Mail app

4 - Send URL of instructions in place of website URL & set as first task

5 - Include how to delete test account in instructions

Instructions(screenshots to access test account)

https://medium.com/@mulligan/how-to-run-live-

user-testing-part-1-setup-9b7e9edd2de8

http://blog.mailchimp.com/recording-

mobile-usability-tests

Hit reply

Being able to screenshot workout summary increased social shares

Internal management

“Email client support is a very

deep level of gross” - @sparkbox

http://seesparkbox.com/foundry/coding_

emails_doesnt_have_to_be_painful

*Start of module three*

*End of module three*

Comment the code

MapMyFitness

Jay DeFoore – Email Manager

“Having never worked with responsive

templates before, I was worried there

would be a sharp learning curve. But

much to my surprise the modular

templates were easy to work with.

After a day or two of experimenting I

was quickly able to plug in various

combinations of modules to iterate and

test different layouts.”

ScreencastWalks through the design & code

header

footer

copy copy

copy copy

Component & module breakdown(static or live)

copy copy

300x200px image

18px text

http://styleguides.io http://maban.co.uk/projects/front-end-style-guides

Sample HTML templates from the Master

Im

ag

e

header

footer

copy copy

copy copy

header

footer

copy

copy

copy

header

footer

copy

copy

header

copy copy

copy copy

copy copy

footer

https://litmus.com https://www.emailonacid.com

QA & maintain the codeHuman error and developing for a fluid environment

http://stylecampaign.com/blog/2014/04/managing-a-device-lab

Start a mini device lab

Workflow & tools

Monster.com

Leah Joyce – Director of CRM Marketing

“So far we have had no issues with the

templates Style Campaign developed.

We are manually creating new emails

out of the masters you provided.”

MapMyFitness

Jay DeFoore – Email Manager

“90% of the emails I create are built off

the master template. If I significantly

changed anything and need to use that

as a new module or template, I just find

it in our ESP, which acts as a content

management system (CMS) of sorts, and

pull out the relevant html.

It's fairly easy to manage, and all I use is

Brackets (an open-source HTML editor),

our ESP, and Litmus for QA.”

Rackspace

Cameron Nouri – Marketing Manager

“For our team here we actually edit all of

our templates using a text editor and

adding in code directly to the HTML. We

use TextMate primarily to accomplish

this.

It’s not the most ideal way to do this, but

we’ve found that WYSIWYG editors can

add additional code into the HTML that

can break things.

In addition to using TextMate we use

Litmus to test any edits to ensure we

haven’t broken anything.”

Go forth and iterate

Thanks!

anna@stylecampaign.com