SlideShare une entreprise Scribd logo
1  sur  61
Télécharger pour lire hors ligne
Responsive
Email Design
Responsive Email Design
Why Responsive?
Mobile on the Rise
Mobile on the Rise
43%Mobile Opens
+330%
Last 2 Years
11/2012
Mobile surpassed Desktop
Email Client Market Share
Email Client Market Share
some of our major retail brands are
seeing 60% of their subscribers
viewing on a mobile device
Designing for Every Screen
Designing for Every Screen
• Desktop & Webmail still make up 32% and 20% of the market
• Email is not Siloed – Customers access from multiple devices
• Aim for Content Parity between desktop & mobile
Designing for email is about embracing flexibility
& unknown screen sizes.
Mobile Aware
Skinny Templates
Fluid Templates
Responsive
Several Approaches
Mobile Aware
Skinny Templates
Fluid Templates
Responsive
Responsive
Responsive
Responsive Email Design
Responsive Email Design
Responsive Email Design
Responsive Email Design
Responsive Email Design
But How is it Actually Done?
Responsive Email Design
Responsive Email Design
Templates
Responsive Email Design
Responsive Email Design
Responsive Email Design
Responsive Templates
Responsive Email Design
Separate Content from Presentation
A Responsive Workflow
Plan for the Long Term
“Design a sustainable responsive framework
to streamline planning, content creation,
testing and user experience.”
- Kristina Huffman
Design Practice Lead, ExactTarget
Content Audit
Determine if any content types need reduced,
rewritten, redesigned, added
or removed completely
Responsive Email Design
Stop thinking in terms of
“pages” and start thinking
instead of “packages”
Content Content Packages
Header
Hero Content
Secondary Story
Products
Footer
Responsive Email Design
Prioritize Content
Create a Content Hierarchy
Responsive Wireframes
Visual Design
Code
@media only screen and (max-width: 599px) {
td[class="main_cta"] { font-size: 16px !important; }
}
<td class="main_cta" style=“font-size: 14px;">
Main CTA!
</td>
Implement & Execute
Implement & Execute
Implement & Execute
Implement & Execute
Responsive Email Design
Structured Content = Targeted Content
Structured Content = Targeted Content
Responsive Email Design
Responsive Results
Rewards Network
CTR increased by more than 25%
Deckers
10% increase in CTR
9% increase in mobile opens
SavvyMom
3x life in CTOR
12% of mobile subscribers clicked vs 6% who opened on desktop
Crocs
15.63% lift in iPhone ‘read’ engagement
7.66% lift in CTOR
More than Metrics
“It’s more than just metrics. The experience
on mobile matters. Responsive design is a
long term investment in customer experience.”
- Justine Jordan
Marketing Director, Litmus
Questions?
Resources
Resources
Degdigital.com/blog
BrianLeeGraves.com/ResponsivePatterns
Zurb: Responsive Email Templates
Litmus.com/blog
Blog.exacttarget.com/blog/email-design-4/
Emailclientmarketshare.com
CampaignMonitor.com/guides/mobile
EmailDesignReview.com
Blog.mailchimp.com
@adamseitz
@briangraves
@emailgirl – Cara Olson
@krudz – Kristina Huffman
@meladorri – Justine Jordan
@iamelliot – Elliot Ross
@alexcwilliams – Alex Williams
@litmusapp - Litmus
@lukew – Luke Wroblewski
TwitterBlogs, Stats, & Patterns

Contenu connexe

Tendances

ESPC14 Presentation, David Bernal - "Make your Social Intranet a Success"
ESPC14 Presentation, David Bernal - "Make your Social Intranet a Success"ESPC14 Presentation, David Bernal - "Make your Social Intranet a Success"
ESPC14 Presentation, David Bernal - "Make your Social Intranet a Success"Raona
 
Responsive Design for enterprise websites by Rob Roy, Head of Digital for Tim...
Responsive Design for enterprise websites by Rob Roy, Head of Digital for Tim...Responsive Design for enterprise websites by Rob Roy, Head of Digital for Tim...
Responsive Design for enterprise websites by Rob Roy, Head of Digital for Tim...Rob Roy
 
Denver Startup Week 2019: Choosing a Direction Learning How to Test Ideas and...
Denver Startup Week 2019: Choosing a Direction Learning How to Test Ideas and...Denver Startup Week 2019: Choosing a Direction Learning How to Test Ideas and...
Denver Startup Week 2019: Choosing a Direction Learning How to Test Ideas and...BrittanyRubinstein
 
User-Centered Website Design
User-Centered Website DesignUser-Centered Website Design
User-Centered Website DesignBrent Bice
 
Danny Setiawan - How to Increase Conversion With Usability Testing
Danny Setiawan - How to Increase Conversion With Usability TestingDanny Setiawan - How to Increase Conversion With Usability Testing
Danny Setiawan - How to Increase Conversion With Usability TestingJulia Grosman
 
Webinar: Leverage Social+ to Grow & Engage Users in Your App by Sendbird PM
Webinar: Leverage Social+ to Grow & Engage Users in Your App by Sendbird PMWebinar: Leverage Social+ to Grow & Engage Users in Your App by Sendbird PM
Webinar: Leverage Social+ to Grow & Engage Users in Your App by Sendbird PMProduct School
 
Sensis on Mobile Search at CeBit 2009
Sensis on Mobile Search at CeBit 2009Sensis on Mobile Search at CeBit 2009
Sensis on Mobile Search at CeBit 2009Sensis
 
Digital for Customer Engagement - Biju Bhaskar
Digital for Customer Engagement - Biju BhaskarDigital for Customer Engagement - Biju Bhaskar
Digital for Customer Engagement - Biju BhaskarThoughtworks
 
Mark Brincat: The evolution of The Economist content platform
Mark Brincat: The evolution of The Economist content platformMark Brincat: The evolution of The Economist content platform
Mark Brincat: The evolution of The Economist content platformInviqa
 
Gregan McMahon from Sensis talks mobile search at CeBit WebForward 09
Gregan McMahon from Sensis talks mobile search at CeBit WebForward 09Gregan McMahon from Sensis talks mobile search at CeBit WebForward 09
Gregan McMahon from Sensis talks mobile search at CeBit WebForward 09Deahn Dewar
 
Global Product Management Talk On The Press Release: Value Innovation Process...
Global Product Management Talk On The Press Release: Value Innovation Process...Global Product Management Talk On The Press Release: Value Innovation Process...
Global Product Management Talk On The Press Release: Value Innovation Process...Startup Product Academy, LLC
 
Web 2 0 knowledge management and social networking- why should i care
Web 2 0 knowledge management and social networking-  why should i careWeb 2 0 knowledge management and social networking-  why should i care
Web 2 0 knowledge management and social networking- why should i careDani
 
Vendor onboarding Case Study
Vendor onboarding Case StudyVendor onboarding Case Study
Vendor onboarding Case StudyParag Rege
 
"Rebuilding UI at Large Scale" by Monika Halim (GO-JEK)
"Rebuilding UI at Large Scale" by Monika Halim (GO-JEK)"Rebuilding UI at Large Scale" by Monika Halim (GO-JEK)
"Rebuilding UI at Large Scale" by Monika Halim (GO-JEK)Tech in Asia ID
 

Tendances (15)

ESPC14 Presentation, David Bernal - "Make your Social Intranet a Success"
ESPC14 Presentation, David Bernal - "Make your Social Intranet a Success"ESPC14 Presentation, David Bernal - "Make your Social Intranet a Success"
ESPC14 Presentation, David Bernal - "Make your Social Intranet a Success"
 
Responsive Design for enterprise websites by Rob Roy, Head of Digital for Tim...
Responsive Design for enterprise websites by Rob Roy, Head of Digital for Tim...Responsive Design for enterprise websites by Rob Roy, Head of Digital for Tim...
Responsive Design for enterprise websites by Rob Roy, Head of Digital for Tim...
 
Denver Startup Week 2019: Choosing a Direction Learning How to Test Ideas and...
Denver Startup Week 2019: Choosing a Direction Learning How to Test Ideas and...Denver Startup Week 2019: Choosing a Direction Learning How to Test Ideas and...
Denver Startup Week 2019: Choosing a Direction Learning How to Test Ideas and...
 
User-Centered Website Design
User-Centered Website DesignUser-Centered Website Design
User-Centered Website Design
 
Danny Setiawan - How to Increase Conversion With Usability Testing
Danny Setiawan - How to Increase Conversion With Usability TestingDanny Setiawan - How to Increase Conversion With Usability Testing
Danny Setiawan - How to Increase Conversion With Usability Testing
 
Webinar: Leverage Social+ to Grow & Engage Users in Your App by Sendbird PM
Webinar: Leverage Social+ to Grow & Engage Users in Your App by Sendbird PMWebinar: Leverage Social+ to Grow & Engage Users in Your App by Sendbird PM
Webinar: Leverage Social+ to Grow & Engage Users in Your App by Sendbird PM
 
Sensis on Mobile Search at CeBit 2009
Sensis on Mobile Search at CeBit 2009Sensis on Mobile Search at CeBit 2009
Sensis on Mobile Search at CeBit 2009
 
Digital for Customer Engagement - Biju Bhaskar
Digital for Customer Engagement - Biju BhaskarDigital for Customer Engagement - Biju Bhaskar
Digital for Customer Engagement - Biju Bhaskar
 
Mark Brincat: The evolution of The Economist content platform
Mark Brincat: The evolution of The Economist content platformMark Brincat: The evolution of The Economist content platform
Mark Brincat: The evolution of The Economist content platform
 
Gregan McMahon from Sensis talks mobile search at CeBit WebForward 09
Gregan McMahon from Sensis talks mobile search at CeBit WebForward 09Gregan McMahon from Sensis talks mobile search at CeBit WebForward 09
Gregan McMahon from Sensis talks mobile search at CeBit WebForward 09
 
Global Product Management Talk On The Press Release: Value Innovation Process...
Global Product Management Talk On The Press Release: Value Innovation Process...Global Product Management Talk On The Press Release: Value Innovation Process...
Global Product Management Talk On The Press Release: Value Innovation Process...
 
BizDevbox Columbia Univ 2020
BizDevbox Columbia Univ 2020BizDevbox Columbia Univ 2020
BizDevbox Columbia Univ 2020
 
Web 2 0 knowledge management and social networking- why should i care
Web 2 0 knowledge management and social networking-  why should i careWeb 2 0 knowledge management and social networking-  why should i care
Web 2 0 knowledge management and social networking- why should i care
 
Vendor onboarding Case Study
Vendor onboarding Case StudyVendor onboarding Case Study
Vendor onboarding Case Study
 
"Rebuilding UI at Large Scale" by Monika Halim (GO-JEK)
"Rebuilding UI at Large Scale" by Monika Halim (GO-JEK)"Rebuilding UI at Large Scale" by Monika Halim (GO-JEK)
"Rebuilding UI at Large Scale" by Monika Halim (GO-JEK)
 

En vedette

El tungsteno es una novela social escrita por el escritor peruano César Vallejo.
El tungsteno es una novela social escrita por el escritor peruano César Vallejo.El tungsteno es una novela social escrita por el escritor peruano César Vallejo.
El tungsteno es una novela social escrita por el escritor peruano César Vallejo.Marly Rodriguez
 
Automation A Reischl
Automation A ReischlAutomation A Reischl
Automation A Reischlreischl
 
SENDERO RAMBLA DE CASTRO POWER POINT
SENDERO RAMBLA DE CASTRO POWER POINTSENDERO RAMBLA DE CASTRO POWER POINT
SENDERO RAMBLA DE CASTRO POWER POINTGUADALUPE221
 
Presentación TSMGO Blog
Presentación TSMGO BlogPresentación TSMGO Blog
Presentación TSMGO BlogRicardo Moreno
 
Integrated Customer Relationship Management (CRM) Benchmark 2013
Integrated Customer Relationship Management (CRM) Benchmark 2013Integrated Customer Relationship Management (CRM) Benchmark 2013
Integrated Customer Relationship Management (CRM) Benchmark 2013Gleanster Research
 
Miguel Angel López Ruiz Desarrollo histórico y perspectivas filosóficas de la...
Miguel Angel López Ruiz Desarrollo histórico y perspectivas filosóficas de la...Miguel Angel López Ruiz Desarrollo histórico y perspectivas filosóficas de la...
Miguel Angel López Ruiz Desarrollo histórico y perspectivas filosóficas de la...Miguel Angel Lopez Ruiz
 
2012 Canterbury Park Media Guide
2012 Canterbury Park Media Guide2012 Canterbury Park Media Guide
2012 Canterbury Park Media GuideLudwig Media
 
Trucos y tecnicas para facebook 2015
Trucos y tecnicas para facebook 2015Trucos y tecnicas para facebook 2015
Trucos y tecnicas para facebook 2015karenmieles
 
MATONEO ESCOLAR ... BY:SEBAS GARCIA
MATONEO ESCOLAR ... BY:SEBAS GARCIAMATONEO ESCOLAR ... BY:SEBAS GARCIA
MATONEO ESCOLAR ... BY:SEBAS GARCIAsebas_gracia9258
 
Visionary Marketer Award Presentation
Visionary Marketer Award PresentationVisionary Marketer Award Presentation
Visionary Marketer Award PresentationiMedia Connection
 
Marieta La Castanyera
Marieta La CastanyeraMarieta La Castanyera
Marieta La Castanyeraramonacapell
 
Induccion a la robotica
Induccion a la roboticaInduccion a la robotica
Induccion a la roboticavanesslopezcsj
 
Armengol domenec presentació- competic2
Armengol domenec presentació- competic2Armengol domenec presentació- competic2
Armengol domenec presentació- competic2Domenec Armengol
 
Organizaciones que defienden los derechos de los animales.
Organizaciones que defienden los derechos de los animales.Organizaciones que defienden los derechos de los animales.
Organizaciones que defienden los derechos de los animales.venturaxochitl
 
Trabajo investigativo - Valoración de Banco del Pichincha Portoviejo - Manabí
Trabajo investigativo - Valoración de  Banco del Pichincha Portoviejo - ManabíTrabajo investigativo - Valoración de  Banco del Pichincha Portoviejo - Manabí
Trabajo investigativo - Valoración de Banco del Pichincha Portoviejo - ManabíGelys B-c
 
Atlassian Agile Development Techniques
Atlassian Agile Development TechniquesAtlassian Agile Development Techniques
Atlassian Agile Development TechniquesDavid Bonilla
 
Algunas cosas que te ocultan sobre el polonio radiactivo
Algunas cosas que te ocultan sobre el polonio radiactivoAlgunas cosas que te ocultan sobre el polonio radiactivo
Algunas cosas que te ocultan sobre el polonio radiactivoFernando Bellido Pelegrina
 

En vedette (20)

El tungsteno es una novela social escrita por el escritor peruano César Vallejo.
El tungsteno es una novela social escrita por el escritor peruano César Vallejo.El tungsteno es una novela social escrita por el escritor peruano César Vallejo.
El tungsteno es una novela social escrita por el escritor peruano César Vallejo.
 
Automation A Reischl
Automation A ReischlAutomation A Reischl
Automation A Reischl
 
SENDERO RAMBLA DE CASTRO POWER POINT
SENDERO RAMBLA DE CASTRO POWER POINTSENDERO RAMBLA DE CASTRO POWER POINT
SENDERO RAMBLA DE CASTRO POWER POINT
 
Presentación TSMGO Blog
Presentación TSMGO BlogPresentación TSMGO Blog
Presentación TSMGO Blog
 
Integrated Customer Relationship Management (CRM) Benchmark 2013
Integrated Customer Relationship Management (CRM) Benchmark 2013Integrated Customer Relationship Management (CRM) Benchmark 2013
Integrated Customer Relationship Management (CRM) Benchmark 2013
 
Miguel Angel López Ruiz Desarrollo histórico y perspectivas filosóficas de la...
Miguel Angel López Ruiz Desarrollo histórico y perspectivas filosóficas de la...Miguel Angel López Ruiz Desarrollo histórico y perspectivas filosóficas de la...
Miguel Angel López Ruiz Desarrollo histórico y perspectivas filosóficas de la...
 
2012 Canterbury Park Media Guide
2012 Canterbury Park Media Guide2012 Canterbury Park Media Guide
2012 Canterbury Park Media Guide
 
Trucos y tecnicas para facebook 2015
Trucos y tecnicas para facebook 2015Trucos y tecnicas para facebook 2015
Trucos y tecnicas para facebook 2015
 
MATONEO ESCOLAR ... BY:SEBAS GARCIA
MATONEO ESCOLAR ... BY:SEBAS GARCIAMATONEO ESCOLAR ... BY:SEBAS GARCIA
MATONEO ESCOLAR ... BY:SEBAS GARCIA
 
Expo panama
Expo panamaExpo panama
Expo panama
 
8 economics
8 economics8 economics
8 economics
 
Visionary Marketer Award Presentation
Visionary Marketer Award PresentationVisionary Marketer Award Presentation
Visionary Marketer Award Presentation
 
Marieta La Castanyera
Marieta La CastanyeraMarieta La Castanyera
Marieta La Castanyera
 
Induccion a la robotica
Induccion a la roboticaInduccion a la robotica
Induccion a la robotica
 
Armengol domenec presentació- competic2
Armengol domenec presentació- competic2Armengol domenec presentació- competic2
Armengol domenec presentació- competic2
 
Organizaciones que defienden los derechos de los animales.
Organizaciones que defienden los derechos de los animales.Organizaciones que defienden los derechos de los animales.
Organizaciones que defienden los derechos de los animales.
 
Trabajo investigativo - Valoración de Banco del Pichincha Portoviejo - Manabí
Trabajo investigativo - Valoración de  Banco del Pichincha Portoviejo - ManabíTrabajo investigativo - Valoración de  Banco del Pichincha Portoviejo - Manabí
Trabajo investigativo - Valoración de Banco del Pichincha Portoviejo - Manabí
 
Atlassian Agile Development Techniques
Atlassian Agile Development TechniquesAtlassian Agile Development Techniques
Atlassian Agile Development Techniques
 
Salamandra
SalamandraSalamandra
Salamandra
 
Algunas cosas que te ocultan sobre el polonio radiactivo
Algunas cosas que te ocultan sobre el polonio radiactivoAlgunas cosas que te ocultan sobre el polonio radiactivo
Algunas cosas que te ocultan sobre el polonio radiactivo
 

Similaire à Responsive Email Design

Coding for Responsive Email
Coding for Responsive EmailCoding for Responsive Email
Coding for Responsive EmailBrian Graves
 
Responsive Email Design Increases Click-Through Rate By > 20%
Responsive Email Design Increases Click-Through Rate By > 20%Responsive Email Design Increases Click-Through Rate By > 20%
Responsive Email Design Increases Click-Through Rate By > 20%Salesforce Marketing Cloud
 
Responsive email design: 3 how-to steps
Responsive email design: 3 how-to stepsResponsive email design: 3 how-to steps
Responsive email design: 3 how-to stepsCatalyst
 
Future-Proofing the Web: Choosing the Optimal Mobile Design Strategy
Future-Proofing the Web: Choosing the Optimal Mobile Design StrategyFuture-Proofing the Web: Choosing the Optimal Mobile Design Strategy
Future-Proofing the Web: Choosing the Optimal Mobile Design StrategyHuge
 
Webinar: How to Create Meaningful Mobile Experience with Responsive Design
Webinar: How to Create Meaningful Mobile Experience with Responsive DesignWebinar: How to Create Meaningful Mobile Experience with Responsive Design
Webinar: How to Create Meaningful Mobile Experience with Responsive DesignBridgeline Digital
 
Email for mobile webinar
Email for mobile webinarEmail for mobile webinar
Email for mobile webinaraaa bbb
 
Email for mobile webinar slideshare
Email for mobile webinar slideshareEmail for mobile webinar slideshare
Email for mobile webinar slideshareaaa bbb
 
Modernize Your Content Publishing Process with Smart Content
Modernize Your Content Publishing Process with Smart ContentModernize Your Content Publishing Process with Smart Content
Modernize Your Content Publishing Process with Smart ContentGavin Drake
 
Content Strategy for DevPortals
Content Strategy for DevPortalsContent Strategy for DevPortals
Content Strategy for DevPortalsPronovix
 
Mobile Email Marketing: Small Screen, Big Opportunity
Mobile Email Marketing: Small Screen, Big OpportunityMobile Email Marketing: Small Screen, Big Opportunity
Mobile Email Marketing: Small Screen, Big OpportunityMass Transmit
 
Mobile Email Marketing: Small Screen, Big Opportunity
Mobile Email Marketing: Small Screen, Big OpportunityMobile Email Marketing: Small Screen, Big Opportunity
Mobile Email Marketing: Small Screen, Big OpportunityTheClubhou.se
 
Digital Transformation and the Marketing Professional
Digital Transformation and the Marketing ProfessionalDigital Transformation and the Marketing Professional
Digital Transformation and the Marketing ProfessionalMatthew W. Bowers
 
Mobile ECM Webinar - June 2012
Mobile ECM Webinar - June 2012Mobile ECM Webinar - June 2012
Mobile ECM Webinar - June 2012Fishbowl Solutions
 
How to Disrupt Digital Product Cultures by LearnVest VP of Product
How to Disrupt Digital Product Cultures by LearnVest VP of ProductHow to Disrupt Digital Product Cultures by LearnVest VP of Product
How to Disrupt Digital Product Cultures by LearnVest VP of ProductProduct School
 
Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 101
Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 101Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 101
Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 101Salesforce Marketing Cloud
 

Similaire à Responsive Email Design (20)

Responsive Email Design
Responsive Email DesignResponsive Email Design
Responsive Email Design
 
Coding for Responsive Email
Coding for Responsive EmailCoding for Responsive Email
Coding for Responsive Email
 
Responsive Email Design Increases Click-Through Rate By > 20%
Responsive Email Design Increases Click-Through Rate By > 20%Responsive Email Design Increases Click-Through Rate By > 20%
Responsive Email Design Increases Click-Through Rate By > 20%
 
Responsive email design: 3 how-to steps
Responsive email design: 3 how-to stepsResponsive email design: 3 how-to steps
Responsive email design: 3 how-to steps
 
Future-Proofing the Web: Choosing the Optimal Mobile Design Strategy
Future-Proofing the Web: Choosing the Optimal Mobile Design StrategyFuture-Proofing the Web: Choosing the Optimal Mobile Design Strategy
Future-Proofing the Web: Choosing the Optimal Mobile Design Strategy
 
Webinar: How to Create Meaningful Mobile Experience with Responsive Design
Webinar: How to Create Meaningful Mobile Experience with Responsive DesignWebinar: How to Create Meaningful Mobile Experience with Responsive Design
Webinar: How to Create Meaningful Mobile Experience with Responsive Design
 
Mobile Email Marketing
Mobile Email MarketingMobile Email Marketing
Mobile Email Marketing
 
Email for mobile webinar
Email for mobile webinarEmail for mobile webinar
Email for mobile webinar
 
Email for mobile webinar slideshare
Email for mobile webinar slideshareEmail for mobile webinar slideshare
Email for mobile webinar slideshare
 
Modernize Your Content Publishing Process with Smart Content
Modernize Your Content Publishing Process with Smart ContentModernize Your Content Publishing Process with Smart Content
Modernize Your Content Publishing Process with Smart Content
 
What's Next For UX?
What's Next For UX?What's Next For UX?
What's Next For UX?
 
Content Strategy for DevPortals
Content Strategy for DevPortalsContent Strategy for DevPortals
Content Strategy for DevPortals
 
Mobile Email Marketing: Small Screen, Big Opportunity
Mobile Email Marketing: Small Screen, Big OpportunityMobile Email Marketing: Small Screen, Big Opportunity
Mobile Email Marketing: Small Screen, Big Opportunity
 
The ultimate guide to creating the perfect website
The ultimate guide to creating the perfect websiteThe ultimate guide to creating the perfect website
The ultimate guide to creating the perfect website
 
Mobile Email Marketing: Small Screen, Big Opportunity
Mobile Email Marketing: Small Screen, Big OpportunityMobile Email Marketing: Small Screen, Big Opportunity
Mobile Email Marketing: Small Screen, Big Opportunity
 
Digital Transformation and the Marketing Professional
Digital Transformation and the Marketing ProfessionalDigital Transformation and the Marketing Professional
Digital Transformation and the Marketing Professional
 
Mobile ECM Webinar - June 2012
Mobile ECM Webinar - June 2012Mobile ECM Webinar - June 2012
Mobile ECM Webinar - June 2012
 
Iris and david cutler update
Iris and david cutler updateIris and david cutler update
Iris and david cutler update
 
How to Disrupt Digital Product Cultures by LearnVest VP of Product
How to Disrupt Digital Product Cultures by LearnVest VP of ProductHow to Disrupt Digital Product Cultures by LearnVest VP of Product
How to Disrupt Digital Product Cultures by LearnVest VP of Product
 
Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 101
Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 101Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 101
Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 101
 

Plus de Brian Graves

Using Tomorrow's CSS Today
Using Tomorrow's CSS TodayUsing Tomorrow's CSS Today
Using Tomorrow's CSS TodayBrian Graves
 
Using Tomorrow's CSS Today
Using Tomorrow's CSS TodayUsing Tomorrow's CSS Today
Using Tomorrow's CSS TodayBrian Graves
 
Using Tomorrow's CSS Today - TEDC15
Using Tomorrow's CSS Today - TEDC15Using Tomorrow's CSS Today - TEDC15
Using Tomorrow's CSS Today - TEDC15Brian Graves
 
Sweating the Small Stuff
Sweating the Small StuffSweating the Small Stuff
Sweating the Small StuffBrian Graves
 
Winning the Design Battle on Every Screen
Winning the Design Battle on Every ScreenWinning the Design Battle on Every Screen
Winning the Design Battle on Every ScreenBrian Graves
 
How To Optimize Your Email Workflow - TEDC13 Boston
How To Optimize Your Email Workflow - TEDC13 BostonHow To Optimize Your Email Workflow - TEDC13 Boston
How To Optimize Your Email Workflow - TEDC13 BostonBrian Graves
 
How to Optimize Your Email Workflow - TEDC13 London
How to Optimize Your Email Workflow - TEDC13 LondonHow to Optimize Your Email Workflow - TEDC13 London
How to Optimize Your Email Workflow - TEDC13 LondonBrian Graves
 
10 Essentials for Gamestorming
10 Essentials for Gamestorming10 Essentials for Gamestorming
10 Essentials for GamestormingBrian Graves
 

Plus de Brian Graves (8)

Using Tomorrow's CSS Today
Using Tomorrow's CSS TodayUsing Tomorrow's CSS Today
Using Tomorrow's CSS Today
 
Using Tomorrow's CSS Today
Using Tomorrow's CSS TodayUsing Tomorrow's CSS Today
Using Tomorrow's CSS Today
 
Using Tomorrow's CSS Today - TEDC15
Using Tomorrow's CSS Today - TEDC15Using Tomorrow's CSS Today - TEDC15
Using Tomorrow's CSS Today - TEDC15
 
Sweating the Small Stuff
Sweating the Small StuffSweating the Small Stuff
Sweating the Small Stuff
 
Winning the Design Battle on Every Screen
Winning the Design Battle on Every ScreenWinning the Design Battle on Every Screen
Winning the Design Battle on Every Screen
 
How To Optimize Your Email Workflow - TEDC13 Boston
How To Optimize Your Email Workflow - TEDC13 BostonHow To Optimize Your Email Workflow - TEDC13 Boston
How To Optimize Your Email Workflow - TEDC13 Boston
 
How to Optimize Your Email Workflow - TEDC13 London
How to Optimize Your Email Workflow - TEDC13 LondonHow to Optimize Your Email Workflow - TEDC13 London
How to Optimize Your Email Workflow - TEDC13 London
 
10 Essentials for Gamestorming
10 Essentials for Gamestorming10 Essentials for Gamestorming
10 Essentials for Gamestorming
 

Dernier

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
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
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
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
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
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
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
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
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
 
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
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
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
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
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
 

Dernier (18)

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...
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
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
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
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
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.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
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
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
 
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
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
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
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
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
 

Responsive Email Design

Notes de l'éditeur

  1. Averaging 43% of opens on mobile devices330% increase of the last 2 yearsMobile surpassed desktop and webmail as the top environment in November 2012
  2. Not Siloed - People move fluidly between devices, often choosing a mobile device even when they have access to a desktop computer. Don’t assume you can design for “the on-the-go user” because people use their mobile devices anywhere and everywhere.You should aim for content parity between your desktop and your mobile experiencesNever force users to go to the desktop website for content they’re seeking on a mobile device.
  3. Simple improvement without specialization.Design-only tacticsSingle column heroKey info &amp; CTA in left columnLarge text &amp; buttons
  4. Skinny single column and large, readable text create a style that translates seamlessly across environments.Still Fixed Width. 420 pixels wide.
  5. Use percentages for widthsAdapts to fill the screen it’s viewed on; text wraps automaticallyContent doesn’t change in design or placementEffective for simple layouts
  6. 600 px, multi-column email becomes 320px, single column
  7. • Fluid grids• Fluid images• Media queries
  8. Allows for lots of creative freedom but less ability to quickly and easily target content based on data, automation, and segmentationWhat do we know about our subscribers? &gt; What do we know about THIS subscriber?WYSIWYG is problematic because it encourages embedding formatting in content, the designs will display beautifully— on the desktop. Content &amp; Assets are tied to a single email &amp; a single screen
  9. Allows for lots of creative freedom but less ability to quickly and easily target content based on data, automation, and segmentationWhat do we know about our subscribers? &gt; What do we know about THIS subscriber?WYSIWYG is problematic because it encourages embedding formatting in content, the designs will display beautifully— on the desktop. Content &amp; Assets are tied to a single email &amp; a single screen
  10. Allows for lots of creative freedom but less ability to quickly and easily target content based on data, automation, and segmentationWhat do we know about our subscribers? &gt; What do we know about THIS subscriber?WYSIWYG is problematic because it encourages embedding formatting in content, the designs will display beautifully— on the desktop. Content &amp; Assets are tied to a single email &amp; a single screen
  11. Evaluate types of emails and content types within those emails. What’s working? What’s not?Your content is useless unless it supports a key business objective or supports a customer in completing a task.
  12. “Don’t penalize users for visiting your site on smaller devices.” – Brad Frost
  13. Packages of contentKaren McGrane: Structured content: discrete content chunks can be combined in different ways for different platforms.
  14. ChunkingStory Types, Upsells, Cross Sells, Banners, Defined Hero Content
  15. Allows for easy rearranging and “mix &amp; match”Chunking
  16. Think about your content devoid of any design. What’s the most important? What’s the least?
  17. high level content and low-fi graphics to communicate content strategy across devicesDecide how content will reflow across screen sizesQuick way to explore items such as navigation without worrying about things like visual design or brand guidelinesWe typically build out fully responsive html prototypes but this can be done using photoshop, illustrator, balsamiq, or just pen and paperShow Wireframe Demos
  18. Does it align with the content strategy/wireframe?Is this able to be coded in an adaptable way (avoiding too many areas to hide/show)Is this a sustainable format to follow for future emails?
  19. Media Queries – “Not a line of code, more like a conditional statement that enables alternate styles.” – Justine JordanIf screen size is x, then display yTop Down instead of Mobile First. Yahoo! Fix. !important.Middleman,etc
  20. Responsive Base Template
  21. Modular Sections
  22. Modular Sections
  23. Content AbstractedIntroduces new opportunities to automate and target content
  24. Responsive Base Template
  25. more personalizationmore responsivemore accurate analytics &amp; testingWhen you structure your content you are able to compare types of creative and types of content apples to apples. Unstructured content requires a lot of assumptions. Structure content allows for more accurate tests to determine best performing types and locations for content.Unstructured content requires arbitrary assumptions to say one CTA worked better or one product line performed better because there are too many variables.