SlideShare a Scribd company logo
1 of 32
Template Systems
Matthew Caldwell
VP Creative & Agency Services
Yesmail Confidential 2
Topics
1. Why do we need a Template System?
2. What is a Template System?
3. Benefits of a Template Systems
– efficiency & email best practices
4. Sticky Content
Yesmail Confidential 3
What you’ll learn about template systems
1. Efficient – design once, code one
2. Flexible – use one master for all emails. Every. Single. One.
3. Catch-all for best practices - mobile, social, images off, testing
4. Collaborative – Template Guide gets the teams speaking the same
language. Design expectations are set before email is even created
5. Sticky – small, bite-sized content marketing that works
Why do we need a
Template System?
Yesmail Confidential 5
Why do we need to use one?
1. Multiple templates are inefficient
1. Designing each email in Photoshop and slicing/coding every time
time is inefficient and error-prone.
What is a Template System?
Yesmail Confidential 7
Template System
• Unified headers and footers with a large
variety of internal stacked sections
• The sections can be reordered, deleted
or duplicated to make many message
combinations – from long newsletters to
short postcards
• One template for all messages
Yesmail Confidential 8
All Sections Newsletters Hybrids Postcards
Yesmail Confidential 9
All Sections Newsletters Hybrids Postcards
Yesmail Confidential 10
Yesmail Confidential 11
Commonly used sections
• Feature – 2 to 5 different styles
• All Image – flexible, fixed width, variable height
• Article – 2 to 5 different styles: small, medium, large
• Product 2, 3 and 4 across
• Video, large & small
• Social Dispatch & product reviews
• All text – best for transactional
Yesmail Confidential 12
A Template System Consists of:
1. All Sections Master Layout 2. Template Guide 3. Style Guide (optional)
Yesmail Confidential 13
Template Guide
• Shows all sections and their names
• Image sizes
• Word counts
Medium
Article
Image
Right
Benefits of a Template System
Efficiency & Best Practices
Yesmail Confidential 15
Why use a Template System? Speed & Efficiency
• Design once, code once
• “Design into the code” instead of “Photoshop > Slice > Code”
• Designers simply change copy, images & URLs
• When you first see initial email layout, it’s the actual coded
message and could be sent within hours
• Avoid designing each email in Photoshop then slicing every time
– It’s inefficient, much time spent coding
– It increases likelihood of errors
Yesmail Confidential 16
Why use a Template System? Consistent & Standardized
• Highly consistent branding
• Email Teams (Manager, Designer, Copy,
Coder) all with a clear understanding of the
layout
• Teams refer to same sectional names…
“For this message I want one feature, one video large
and one small article”
• Everyone involved will have clear
expectations of what will be created
• Surprise, delays or redesigns are avoided
Email
Management
Production
Design
& Copy
Strategy
Yesmail Confidential 17
Why use a Template System? email best practices
• Mobile Ready
• Images-off Ready
• Social Ready
• Dynamic
• Quick Versions for testing
Yesmail Confidential 18
Why use a Template System? Mobile Ready
• Desktop is scalable
• Responsive code for phones
• CSS3 @media queries create
a 2nd, true mobile layout
Yesmail Confidential 19
Why use a Template System? Images Off Ready
• Bulletproof buttons
• Under image color
blocking
• Alt tags with style
• Clear separation of copy
and image (no copy in
images)
Yesmail Confidential 20
Why use Template System? Social Ready
• First design your button / Call to Action
hierarchy
• Then attach optional sharing icons
– Shares a part of your email,
not the entire email
Yesmail Confidential 21
Why use a Template System? Dynamic
• Fully hybrid layouts mean all copy is html, not images
• Merging and database automation
• Clean separation of copy and images means that anything can be
merged in dynamically (images, copy, urls)
Yesmail Confidential 22
Why use a Template System? Flexible & Testable
• Use one template for all (yes, ALL) emails
• Everything from transactional to newsletters to postcards
• The modular sections opens up major possibilities for testing
Yesmail Confidential 23
Why use a Template System? Easily Rebrandable
• Simple color changes (background, button, type, etc) allow you
to use it for multiple business lines or different brands
Yesmail Confidential 24
Q: Doesn’t it look similar each time?
It does not have to.
• The template is simply a container
• The content in it is what keeps it fresh
• Also we recommend regularly mixing and matching sections to
create new combinations
Q: Is it part of the mailing system?
No, but it can be.
• Basically, it’s nothing more than a single HTML document
• But it can easily be plugged into CMS tools, WYSIWIG editors
and drag & drop tools
Sticky Content
Yesmail Confidential 26
Sticky Content
• Small, repeatable, value-added, non-product content
• Trains users to open
“What are they going to do this time”
• Keeps users opening and engaged
TIP: Create sticky content as a project; for example, create 1
year worth of sticky content at one time
Yesmail Confidential 27
Sticky Content
Yesmail Confidential 28
Sticky Content
Callaway
Funny Golf Quote
Warner Bros Trivia
Question
Yesmail Confidential 29
Sticky Content
HP Tech at Work
Jargon Watch
My Coke Rewards Comic
Conclusion
Yesmail Confidential 31
Summary:
Template Systems
1. Efficient - code once and “design into code” each time
2. Flexible – use one master for all emails. Every. Single. One.
3. Catch-all for best practices - mobile, social, images off, testing
4. Collaborative – Template Guide gets the teams speaking the same
language. Design expectations are set before email is even created
5. Sticky – small, bite-sized content marketing that works
Thank you
Matthew Caldwell
VP Creative & Agency Services
matt.caldwell@yesmail.com
@matty_caldwell
Questions?

More Related Content

Viewers also liked

Vocabulary 2. health and lifestyles.
Vocabulary 2. health and lifestyles.Vocabulary 2. health and lifestyles.
Vocabulary 2. health and lifestyles.Maggie
 
Reply All: Responsive Emails
Reply All: Responsive EmailsReply All: Responsive Emails
Reply All: Responsive EmailsAndrew Parroccini
 
Reply via-email service: hidden traps
Reply via-email service: hidden trapsReply via-email service: hidden traps
Reply via-email service: hidden trapsmegakott
 
Email reply lycee tahiti
Email reply lycee tahitiEmail reply lycee tahiti
Email reply lycee tahitiMmeRenard
 
How to Respond to Buyer Inquiries Alibaba
How to Respond to Buyer Inquiries Alibaba How to Respond to Buyer Inquiries Alibaba
How to Respond to Buyer Inquiries Alibaba Cristiano Ribeiro
 
English vocabulary: Education and career.
English vocabulary: Education and career.English vocabulary: Education and career.
English vocabulary: Education and career.Maggie
 
Email communication 1 aug
Email communication 1 augEmail communication 1 aug
Email communication 1 augAmit Agarwal
 
Effective Email communication
Effective Email communicationEffective Email communication
Effective Email communicationChetana Mehta
 
Successful email phrases, by Helena Tomé
Successful email phrases, by Helena ToméSuccessful email phrases, by Helena Tomé
Successful email phrases, by Helena ToméHelena M. Tomé
 
Managing Emails using MS Office Outlook
Managing Emails using MS Office Outlook Managing Emails using MS Office Outlook
Managing Emails using MS Office Outlook Jaiveer Singh
 
Berlitz Tip - Negotiations in English
Berlitz Tip - Negotiations in EnglishBerlitz Tip - Negotiations in English
Berlitz Tip - Negotiations in EnglishBerlitz Corporation
 
Berlitz Tip - Meetings in English
Berlitz Tip - Meetings in EnglishBerlitz Tip - Meetings in English
Berlitz Tip - Meetings in EnglishBerlitz Corporation
 

Viewers also liked (17)

Vocabulary 2. health and lifestyles.
Vocabulary 2. health and lifestyles.Vocabulary 2. health and lifestyles.
Vocabulary 2. health and lifestyles.
 
Reply All: Responsive Emails
Reply All: Responsive EmailsReply All: Responsive Emails
Reply All: Responsive Emails
 
Reply via-email service: hidden traps
Reply via-email service: hidden trapsReply via-email service: hidden traps
Reply via-email service: hidden traps
 
Email reply lycee tahiti
Email reply lycee tahitiEmail reply lycee tahiti
Email reply lycee tahiti
 
How to Respond to Buyer Inquiries Alibaba
How to Respond to Buyer Inquiries Alibaba How to Respond to Buyer Inquiries Alibaba
How to Respond to Buyer Inquiries Alibaba
 
English vocabulary: Education and career.
English vocabulary: Education and career.English vocabulary: Education and career.
English vocabulary: Education and career.
 
Email communication 1 aug
Email communication 1 augEmail communication 1 aug
Email communication 1 aug
 
Effective Email communication
Effective Email communicationEffective Email communication
Effective Email communication
 
Art of language learning abroad
Art of language learning abroadArt of language learning abroad
Art of language learning abroad
 
Conference Calls in English
Conference Calls in EnglishConference Calls in English
Conference Calls in English
 
Successful email phrases, by Helena Tomé
Successful email phrases, by Helena ToméSuccessful email phrases, by Helena Tomé
Successful email phrases, by Helena Tomé
 
Managing Emails using MS Office Outlook
Managing Emails using MS Office Outlook Managing Emails using MS Office Outlook
Managing Emails using MS Office Outlook
 
Berlitz Tip - Negotiations in English
Berlitz Tip - Negotiations in EnglishBerlitz Tip - Negotiations in English
Berlitz Tip - Negotiations in English
 
Speaking Time
Speaking TimeSpeaking Time
Speaking Time
 
500 real-english-phrases
500 real-english-phrases500 real-english-phrases
500 real-english-phrases
 
Berlitz Tip - Meetings in English
Berlitz Tip - Meetings in EnglishBerlitz Tip - Meetings in English
Berlitz Tip - Meetings in English
 
Time for english 4 2015
Time for english 4   2015Time for english 4   2015
Time for english 4 2015
 

Similar to Email Template Systems

How to build the perfect pattern library
How to build the perfect pattern libraryHow to build the perfect pattern library
How to build the perfect pattern libraryWolf Brüning
 
'The Minimalist Publisher How to Do More with Less' at Mumbrella Publish 2022
'The Minimalist Publisher How to Do More with Less' at Mumbrella Publish 2022'The Minimalist Publisher How to Do More with Less' at Mumbrella Publish 2022
'The Minimalist Publisher How to Do More with Less' at Mumbrella Publish 2022AnneNguyen92
 
Welcome to ModelFoundry
Welcome to ModelFoundryWelcome to ModelFoundry
Welcome to ModelFoundryModelFoundry
 
Thriving in the Chaotic World of Email Design
Thriving in the Chaotic World of Email DesignThriving in the Chaotic World of Email Design
Thriving in the Chaotic World of Email DesignVivastream
 
Making personas work
Making personas workMaking personas work
Making personas workBruce Darby
 
Twelve practices of XP_Se lect5 btech
Twelve practices of XP_Se lect5 btechTwelve practices of XP_Se lect5 btech
Twelve practices of XP_Se lect5 btechIIITA
 
Extreme Programming (XP): Revisted
Extreme Programming (XP): RevistedExtreme Programming (XP): Revisted
Extreme Programming (XP): RevistedMike Harris
 
CS101- Introduction to Computing- Lecture 44
CS101- Introduction to Computing- Lecture 44CS101- Introduction to Computing- Lecture 44
CS101- Introduction to Computing- Lecture 44Bilal Ahmed
 
Putting personas to work - University of Edinburgh Website Programme
Putting personas to work - University of Edinburgh Website ProgrammePutting personas to work - University of Edinburgh Website Programme
Putting personas to work - University of Edinburgh Website ProgrammeNeil Allison
 
Meet Your New Best Friend: Templates
Meet Your New Best Friend: TemplatesMeet Your New Best Friend: Templates
Meet Your New Best Friend: TemplatesEtumos
 
Agile Software Development
Agile Software DevelopmentAgile Software Development
Agile Software DevelopmentAhmet Bulut
 
Maximising ROI from Your CMS Investment
Maximising ROI from Your CMS InvestmentMaximising ROI from Your CMS Investment
Maximising ROI from Your CMS InvestmentAngus McDonald
 
Webinar: Ten Ways to Enhance Your Salesforce.com Application in 2013
Webinar: Ten Ways to Enhance Your Salesforce.com Application in 2013Webinar: Ten Ways to Enhance Your Salesforce.com Application in 2013
Webinar: Ten Ways to Enhance Your Salesforce.com Application in 2013Emtec Inc.
 
Extreme Programming
Extreme ProgrammingExtreme Programming
Extreme ProgrammingDronca Livia
 
Ag04 gestire gruppi di lavoro, team multipli e progetti con visual studio alm
Ag04   gestire gruppi di lavoro, team multipli e progetti con visual studio almAg04   gestire gruppi di lavoro, team multipli e progetti con visual studio alm
Ag04 gestire gruppi di lavoro, team multipli e progetti con visual studio almDotNetCampus
 

Similar to Email Template Systems (20)

How to build the perfect pattern library
How to build the perfect pattern libraryHow to build the perfect pattern library
How to build the perfect pattern library
 
'The Minimalist Publisher How to Do More with Less' at Mumbrella Publish 2022
'The Minimalist Publisher How to Do More with Less' at Mumbrella Publish 2022'The Minimalist Publisher How to Do More with Less' at Mumbrella Publish 2022
'The Minimalist Publisher How to Do More with Less' at Mumbrella Publish 2022
 
Welcome to ModelFoundry
Welcome to ModelFoundryWelcome to ModelFoundry
Welcome to ModelFoundry
 
Thriving in the Chaotic World of Email Design
Thriving in the Chaotic World of Email DesignThriving in the Chaotic World of Email Design
Thriving in the Chaotic World of Email Design
 
Making personas work
Making personas workMaking personas work
Making personas work
 
Twelve practices of XP_Se lect5 btech
Twelve practices of XP_Se lect5 btechTwelve practices of XP_Se lect5 btech
Twelve practices of XP_Se lect5 btech
 
Design System
Design SystemDesign System
Design System
 
CMS Crash Course!
CMS Crash Course!CMS Crash Course!
CMS Crash Course!
 
Design System
Design SystemDesign System
Design System
 
Extreme Programming (XP): Revisted
Extreme Programming (XP): RevistedExtreme Programming (XP): Revisted
Extreme Programming (XP): Revisted
 
Jump to Joomla - Barcamp Nashville 2010
Jump to Joomla - Barcamp Nashville 2010Jump to Joomla - Barcamp Nashville 2010
Jump to Joomla - Barcamp Nashville 2010
 
Jump to Joomla - Barcamp Nashville 2010
Jump to Joomla - Barcamp Nashville 2010Jump to Joomla - Barcamp Nashville 2010
Jump to Joomla - Barcamp Nashville 2010
 
CS101- Introduction to Computing- Lecture 44
CS101- Introduction to Computing- Lecture 44CS101- Introduction to Computing- Lecture 44
CS101- Introduction to Computing- Lecture 44
 
Putting personas to work - University of Edinburgh Website Programme
Putting personas to work - University of Edinburgh Website ProgrammePutting personas to work - University of Edinburgh Website Programme
Putting personas to work - University of Edinburgh Website Programme
 
Meet Your New Best Friend: Templates
Meet Your New Best Friend: TemplatesMeet Your New Best Friend: Templates
Meet Your New Best Friend: Templates
 
Agile Software Development
Agile Software DevelopmentAgile Software Development
Agile Software Development
 
Maximising ROI from Your CMS Investment
Maximising ROI from Your CMS InvestmentMaximising ROI from Your CMS Investment
Maximising ROI from Your CMS Investment
 
Webinar: Ten Ways to Enhance Your Salesforce.com Application in 2013
Webinar: Ten Ways to Enhance Your Salesforce.com Application in 2013Webinar: Ten Ways to Enhance Your Salesforce.com Application in 2013
Webinar: Ten Ways to Enhance Your Salesforce.com Application in 2013
 
Extreme Programming
Extreme ProgrammingExtreme Programming
Extreme Programming
 
Ag04 gestire gruppi di lavoro, team multipli e progetti con visual studio alm
Ag04   gestire gruppi di lavoro, team multipli e progetti con visual studio almAg04   gestire gruppi di lavoro, team multipli e progetti con visual studio alm
Ag04 gestire gruppi di lavoro, team multipli e progetti con visual studio alm
 

Recently uploaded

Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 

Recently uploaded (19)

Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 

Email Template Systems

  • 1. Template Systems Matthew Caldwell VP Creative & Agency Services
  • 2. Yesmail Confidential 2 Topics 1. Why do we need a Template System? 2. What is a Template System? 3. Benefits of a Template Systems – efficiency & email best practices 4. Sticky Content
  • 3. Yesmail Confidential 3 What you’ll learn about template systems 1. Efficient – design once, code one 2. Flexible – use one master for all emails. Every. Single. One. 3. Catch-all for best practices - mobile, social, images off, testing 4. Collaborative – Template Guide gets the teams speaking the same language. Design expectations are set before email is even created 5. Sticky – small, bite-sized content marketing that works
  • 4. Why do we need a Template System?
  • 5. Yesmail Confidential 5 Why do we need to use one? 1. Multiple templates are inefficient 1. Designing each email in Photoshop and slicing/coding every time time is inefficient and error-prone.
  • 6. What is a Template System?
  • 7. Yesmail Confidential 7 Template System • Unified headers and footers with a large variety of internal stacked sections • The sections can be reordered, deleted or duplicated to make many message combinations – from long newsletters to short postcards • One template for all messages
  • 8. Yesmail Confidential 8 All Sections Newsletters Hybrids Postcards
  • 9. Yesmail Confidential 9 All Sections Newsletters Hybrids Postcards
  • 11. Yesmail Confidential 11 Commonly used sections • Feature – 2 to 5 different styles • All Image – flexible, fixed width, variable height • Article – 2 to 5 different styles: small, medium, large • Product 2, 3 and 4 across • Video, large & small • Social Dispatch & product reviews • All text – best for transactional
  • 12. Yesmail Confidential 12 A Template System Consists of: 1. All Sections Master Layout 2. Template Guide 3. Style Guide (optional)
  • 13. Yesmail Confidential 13 Template Guide • Shows all sections and their names • Image sizes • Word counts Medium Article Image Right
  • 14. Benefits of a Template System Efficiency & Best Practices
  • 15. Yesmail Confidential 15 Why use a Template System? Speed & Efficiency • Design once, code once • “Design into the code” instead of “Photoshop > Slice > Code” • Designers simply change copy, images & URLs • When you first see initial email layout, it’s the actual coded message and could be sent within hours • Avoid designing each email in Photoshop then slicing every time – It’s inefficient, much time spent coding – It increases likelihood of errors
  • 16. Yesmail Confidential 16 Why use a Template System? Consistent & Standardized • Highly consistent branding • Email Teams (Manager, Designer, Copy, Coder) all with a clear understanding of the layout • Teams refer to same sectional names… “For this message I want one feature, one video large and one small article” • Everyone involved will have clear expectations of what will be created • Surprise, delays or redesigns are avoided Email Management Production Design & Copy Strategy
  • 17. Yesmail Confidential 17 Why use a Template System? email best practices • Mobile Ready • Images-off Ready • Social Ready • Dynamic • Quick Versions for testing
  • 18. Yesmail Confidential 18 Why use a Template System? Mobile Ready • Desktop is scalable • Responsive code for phones • CSS3 @media queries create a 2nd, true mobile layout
  • 19. Yesmail Confidential 19 Why use a Template System? Images Off Ready • Bulletproof buttons • Under image color blocking • Alt tags with style • Clear separation of copy and image (no copy in images)
  • 20. Yesmail Confidential 20 Why use Template System? Social Ready • First design your button / Call to Action hierarchy • Then attach optional sharing icons – Shares a part of your email, not the entire email
  • 21. Yesmail Confidential 21 Why use a Template System? Dynamic • Fully hybrid layouts mean all copy is html, not images • Merging and database automation • Clean separation of copy and images means that anything can be merged in dynamically (images, copy, urls)
  • 22. Yesmail Confidential 22 Why use a Template System? Flexible & Testable • Use one template for all (yes, ALL) emails • Everything from transactional to newsletters to postcards • The modular sections opens up major possibilities for testing
  • 23. Yesmail Confidential 23 Why use a Template System? Easily Rebrandable • Simple color changes (background, button, type, etc) allow you to use it for multiple business lines or different brands
  • 24. Yesmail Confidential 24 Q: Doesn’t it look similar each time? It does not have to. • The template is simply a container • The content in it is what keeps it fresh • Also we recommend regularly mixing and matching sections to create new combinations Q: Is it part of the mailing system? No, but it can be. • Basically, it’s nothing more than a single HTML document • But it can easily be plugged into CMS tools, WYSIWIG editors and drag & drop tools
  • 26. Yesmail Confidential 26 Sticky Content • Small, repeatable, value-added, non-product content • Trains users to open “What are they going to do this time” • Keeps users opening and engaged TIP: Create sticky content as a project; for example, create 1 year worth of sticky content at one time
  • 28. Yesmail Confidential 28 Sticky Content Callaway Funny Golf Quote Warner Bros Trivia Question
  • 29. Yesmail Confidential 29 Sticky Content HP Tech at Work Jargon Watch My Coke Rewards Comic
  • 31. Yesmail Confidential 31 Summary: Template Systems 1. Efficient - code once and “design into code” each time 2. Flexible – use one master for all emails. Every. Single. One. 3. Catch-all for best practices - mobile, social, images off, testing 4. Collaborative – Template Guide gets the teams speaking the same language. Design expectations are set before email is even created 5. Sticky – small, bite-sized content marketing that works
  • 32. Thank you Matthew Caldwell VP Creative & Agency Services matt.caldwell@yesmail.com @matty_caldwell Questions?