modular email templates
TRANSCRIPT
![Page 1: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/1.jpg)
Modular email templates
![Page 2: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/2.jpg)
Anna Yeaman@stylecampaign
![Page 3: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/3.jpg)
http://stylecampaign.com/blog/2013/09/mapmyfitness-case-study
![Page 4: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/4.jpg)
2 case studies
![Page 5: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/5.jpg)
Our process
Project challenges
Scalable, adaptive or responsive
User testing
Internal management
![Page 6: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/6.jpg)
Custom template system made up of
reusable modules that you can rearrange,
duplicate or remove for different designs.
Modular templates
![Page 7: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/7.jpg)
Email designers have been building
‘Master’ templates for years
Not new
![Page 8: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/8.jpg)
Why the renewed
interest?
![Page 9: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/9.jpg)
50% mobile
emailclientmarketshare.com
Prompting widespread redesigns
~
![Page 10: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/10.jpg)
No one wants to build 20 or
40 one-off mobile templates…
![Page 11: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/11.jpg)
Build for scale, speed
and consistency.
![Page 12: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/12.jpg)
Module List Components Modules
Master Sample / Guides
Our basic process
1.
2.
3.
4.
Button
#2C6E26 #BCD0CF #D9D9D9
![Page 13: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/13.jpg)
Adorama
![Page 14: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/14.jpg)
Mobile optimization
+
Brand refresh
![Page 15: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/15.jpg)
Review existing creative
![Page 16: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/16.jpg)
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
![Page 17: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/17.jpg)
Responsive
or
Scalable?
![Page 18: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/18.jpg)
Responsive layoutFluid grids, fluid media & @media
header
footer
copy copy
copy copy
header
copy
copy
![Page 19: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/19.jpg)
Scalable layoutnarrow fixed-width
header
footer
copy copy
copy copy
header
footer
copy copy
copy copy
![Page 20: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/20.jpg)
scalable500px
![Page 21: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/21.jpg)
Opted for responsive, for a superior
mobile user experience. A scalable
layout would have required an
aggressive over simplification of
their desktop creative.
![Page 22: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/22.jpg)
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
![Page 23: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/23.jpg)
Scalable is most effective with
minimal, image driven layouts
480px scalable responsive
![Page 24: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/24.jpg)
2 biggest challengesDense image-based content & navigation
![Page 25: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/25.jpg)
Dense images
![Page 26: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/26.jpg)
Content too dense to work as a fluid
image within a responsive template
Desktop
Mobile
![Page 27: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/27.jpg)
Simplify the design, and lose
important product information
Desktop
Mobile
![Page 28: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/28.jpg)
Switch from image to HTML text. Great
for image blocking and control, but limits
creative options and adds complexity.
Desktop
Mobile
![Page 29: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/29.jpg)
Different desktop and mobile images
solves the problem, though adds
weight and production time
Desktop Mobile
![Page 30: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/30.jpg)
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
![Page 31: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/31.jpg)
Image swap from a deployed campaign
Desktop Mobile
![Page 32: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/32.jpg)
Desktop
Mobile
Image swap from a deployed campaign
![Page 33: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/33.jpg)
Desktop
Mobile
Image swap from a deployed campaign
![Page 34: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/34.jpg)
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.”
![Page 35: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/35.jpg)
Desktop Mobile
Use templates to speed up asset production
![Page 36: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/36.jpg)
http://stylecampaign.com/blog/2013/01/image-optimization
![Page 37: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/37.jpg)
Old navi
![Page 38: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/38.jpg)
New branding
![Page 39: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/39.jpg)
Navi
![Page 40: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/40.jpg)
Final navigation
![Page 41: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/41.jpg)
Outlook 2010 – navi images off
![Page 42: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/42.jpg)
“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
![Page 43: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/43.jpg)
Touch friendly
![Page 44: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/44.jpg)
Testing different navi treatments
![Page 45: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/45.jpg)
Testing different navi patterns
![Page 46: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/46.jpg)
http://stylecampaign.com/blog/2014/02/respons
ive-email-navigation/
![Page 47: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/47.jpg)
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
![Page 48: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/48.jpg)
Final Adorama Master template
![Page 49: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/49.jpg)
Some deployed campaigns
![Page 50: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/50.jpg)
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.”
![Page 51: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/51.jpg)
Keep testing
![Page 52: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/52.jpg)
Monster
![Page 53: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/53.jpg)
Improved responsive templates
+
Brand refresh
+
Horizontal build
![Page 54: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/54.jpg)
Horizontal
![Page 55: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/55.jpg)
Stay below
2100px for
Outlook
![Page 56: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/56.jpg)
Visual styleDesign meetings
Mood boards
Few concepts of one module
Surveys
Explore other emails and sites
Website style guide
Website
Mobile apps
![Page 57: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/57.jpg)
http://typecast.com http://fontsinuse.com
![Page 59: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/59.jpg)
http://styletil.es http://sparkbox.github.io/style-prototype
![Page 60: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/60.jpg)
http://danielmall.com/articles/visual-inventory
![Page 61: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/61.jpg)
Looked to apps for branding
![Page 62: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/62.jpg)
Horizontal responsive template
![Page 63: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/63.jpg)
Horizontal scalable template
![Page 64: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/64.jpg)
Horizontal
![Page 65: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/65.jpg)
Vertical
![Page 66: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/66.jpg)
Used control templates to draw up module list
![Page 67: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/67.jpg)
sketch
![Page 68: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/68.jpg)
Marvelapp – take photos of sketches & link up
![Page 69: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/69.jpg)
Final vertical modular template
![Page 70: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/70.jpg)
Dynamic content
![Page 71: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/71.jpg)
Old network
center
![Page 72: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/72.jpg)
Old network
centerNew network
center
![Page 73: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/73.jpg)
https://twitter.com/philnelson/status/509869150022279171 http://uifaces.com
Stress test
![Page 74: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/74.jpg)
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.”
![Page 75: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/75.jpg)
Increased avatar 50px to 70px
![Page 76: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/76.jpg)
Redesign almost 2x height
![Page 77: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/77.jpg)
a/b test 05/31 – 08/06, 2013 (control left)
![Page 78: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/78.jpg)
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.”
![Page 79: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/79.jpg)
a/b test 05/31 – 08/06, 2013 (control left)
![Page 80: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/80.jpg)
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”
![Page 81: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/81.jpg)
mobile desktopNo In-between
Adaptive layout control
![Page 82: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/82.jpg)
mobile desktop
Responsive re-design
Fluid In-between
![Page 83: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/83.jpg)
18,796 distinct Android devices
http://opensignal.com/reports/2014/android-fragmentation
![Page 84: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/84.jpg)
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
![Page 85: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/85.jpg)
414px320x568
viewport
iPhone viewports https://twitter.com/ppk/status/509814582479966208
1136x640
1334x750
1920x1080
375x667
viewport
414x736
viewport
![Page 86: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/86.jpg)
iPhone 6+
Adaptive layout Responsive layout
![Page 87: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/87.jpg)
New modular email
system in 2014
![Page 88: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/88.jpg)
Large amount of diversity
![Page 89: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/89.jpg)
View in context via sample templates
![Page 90: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/90.jpg)
User testing
![Page 91: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/91.jpg)
Our lab
![Page 92: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/92.jpg)
https://medium.com/bridge-collection/a-guerilla-
usability-test-on-dropbox-photos-e6a1e37028b4
![Page 93: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/93.jpg)
Remote
![Page 94: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/94.jpg)
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
![Page 95: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/95.jpg)
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
![Page 96: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/96.jpg)
Participants tapping
on subject lines
![Page 97: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/97.jpg)
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.
![Page 98: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/98.jpg)
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
![Page 99: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/99.jpg)
“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.”
![Page 100: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/100.jpg)
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
![Page 101: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/101.jpg)
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
![Page 102: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/102.jpg)
Instructions(screenshots to access test account)
![Page 103: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/103.jpg)
https://medium.com/@mulligan/how-to-run-live-
user-testing-part-1-setup-9b7e9edd2de8
http://blog.mailchimp.com/recording-
mobile-usability-tests
![Page 104: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/104.jpg)
Hit reply
![Page 105: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/105.jpg)
![Page 106: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/106.jpg)
Being able to screenshot workout summary increased social shares
![Page 107: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/107.jpg)
Internal management
![Page 108: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/108.jpg)
“Email client support is a very
deep level of gross” - @sparkbox
http://seesparkbox.com/foundry/coding_
emails_doesnt_have_to_be_painful
![Page 109: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/109.jpg)
*Start of module three*
*End of module three*
Comment the code
![Page 110: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/110.jpg)
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.”
![Page 111: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/111.jpg)
ScreencastWalks through the design & code
header
footer
copy copy
copy copy
![Page 112: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/112.jpg)
Component & module breakdown(static or live)
copy copy
300x200px image
18px text
http://styleguides.io http://maban.co.uk/projects/front-end-style-guides
![Page 113: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/113.jpg)
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
![Page 114: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/114.jpg)
https://litmus.com https://www.emailonacid.com
QA & maintain the codeHuman error and developing for a fluid environment
![Page 115: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/115.jpg)
http://stylecampaign.com/blog/2014/04/managing-a-device-lab
Start a mini device lab
![Page 116: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/116.jpg)
Workflow & tools
![Page 117: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/117.jpg)
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.”
![Page 118: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/118.jpg)
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.”
![Page 119: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/119.jpg)
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.”
![Page 120: Modular email templates](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2025f1a28ab33268b473a/html5/thumbnails/120.jpg)
Go forth and iterate