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://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. [email protected]
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