SlideShare a Scribd company logo
1 of 77
‘e’ is for

everywhere   email in the mobile age

                  Mat Patterson – @mrpatto
WARNING!
Physical movement required
"e" is for "everywhere": Designing email in the mobile age
•handsome
•handsome
•charming
•handsome
•charming
•irish
•handsome
•charming
•irish
•wrong
"e" is for "everywhere": Designing email in the mobile age
“I hate html email”
"e" is for "everywhere": Designing email in the mobile age
70 million
US mobile email users
80+ million
groupon subscribers
256%
ROI (or more)
4X $
average customer
"e" is for "everywhere": Designing email in the mobile age
3xC
3xC   Context
3xC   Context
      Content
3xC   Context
      Content
      Coding
Context
Content
Coding
Gmail (7%)
                 Outlook (27%)



                 iOS devices (16%)
 Hotmail (12%)
Opens by client
52%
                                         Desktop
                                         Webmail

                                         Mobile


0%
      May 2009                May 2011
Physical context
Physical context
          screen size
Physical context
             screen size
     bandwidth & access
Physical context
             screen size
     bandwidth & access
            touch based
Physical context
             screen size
     bandwidth & access
            touch based
Physical context
              screen size
      bandwidth & access
             touch based
     environmental factors
User
context
"e" is for "everywhere": Designing email in the mobile age
Context
Content
Coding
"e" is for "everywhere": Designing email in the mobile age
"e" is for "everywhere": Designing email in the mobile age
"e" is for "everywhere": Designing email in the mobile age
right content
right context
right content
right context
35
characters
"e" is for "everywhere": Designing email in the mobile age
Welcome to your July Newsletter from
"e" is for "everywhere": Designing email in the mobile age
Spinal Tap tickets on sale - Tapfans N
preheader
preheader
  (it’s not sexual)
"e" is for "everywhere": Designing email in the mobile age
"e" is for "everywhere": Designing email in the mobile age
Lorem
5 tips
for mobile email design
1 column
unless you are hardcore
480 px
or less, to be safe
44 px
touch targets
                2
m o r e
  space
contrast
  more please
Context
Content
Coding
"e" is for "everywhere": Designing email in the mobile age
"e" is for "everywhere": Designing email in the mobile age
structural tables
structural tables
       inline css
structural tables
       inline css
explicit margins
structural tables
       inline css
explicit margins
   nested tables
structural tables
       inline css
explicit margins
   nested tables
cheat’s padding
structural tables
       inline css
explicit margins
   nested tables
cheat’s padding
 blocked images
structural tables
        inline css
 explicit margins
    nested tables
 cheat’s padding
 blocked images
plain text version
@media only screen and (max-device-width: 480px) {
  .hide { display: none !important; }
  .table, .cell { width: 300px !important; }
  .divider { height: 1px !important; }
}
@media only screen and (max-device-width: 480px) {
  .hide { display: none !important; }
  .table, .cell { width: 300px !important; }
  .divider { height: 1px !important; }
}
•hide content
•adjust layout
•resize images
•control font resizing
"e" is for "everywhere": Designing email in the mobile age
"e" is for "everywhere": Designing email in the mobile age
<body style="-webkit-text-size-adjust:none;">
fix stupid Yahoo! Mail




                   table[class=mytable]
"e" is for "everywhere": Designing email in the mobile age
Jeremy Keith is wrong
Jeremy Keith is wrong
Mobile email is massive
Jeremy Keith is wrong
Mobile email is massive
        Context matters
Jeremy Keith is wrong
  Mobile email is massive
           Context matters
Content in context matters
Jeremy Keith is wrong
  Mobile email is massive
           Context matters
Content in context matters
    Coding tricks can help
@mrpatto
mrpatto.com/mobileemail
THE END
  thanks!

More Related Content

Viewers also liked

Ericsson Mobility Report - June 2015 - North East Asia appendix
Ericsson Mobility Report - June 2015 - North East Asia appendixEricsson Mobility Report - June 2015 - North East Asia appendix
Ericsson Mobility Report - June 2015 - North East Asia appendixEricsson
 
CES 2014 Review: 12 Principles & What Matters for Marketers
CES 2014 Review: 12 Principles & What Matters for MarketersCES 2014 Review: 12 Principles & What Matters for Marketers
CES 2014 Review: 12 Principles & What Matters for MarketersDavid Berkowitz
 
2015 global CIO survey: Creating legacy
2015 global CIO survey: Creating legacy2015 global CIO survey: Creating legacy
2015 global CIO survey: Creating legacyDeloitte United States
 
CAGNY 2017 Roundup: Growth is dominant in 5 key themes
CAGNY 2017 Roundup: Growth is dominant in 5 key themesCAGNY 2017 Roundup: Growth is dominant in 5 key themes
CAGNY 2017 Roundup: Growth is dominant in 5 key themesDeloitte United States
 
15 Stats Every B2B Marketer Should Know About Mobile Retention
15 Stats Every B2B Marketer Should Know About Mobile Retention15 Stats Every B2B Marketer Should Know About Mobile Retention
15 Stats Every B2B Marketer Should Know About Mobile RetentionKyle Lacy
 
10 Ways to Better Engage App Users in 10 Seconds
10 Ways to Better Engage App Users in 10 Seconds10 Ways to Better Engage App Users in 10 Seconds
10 Ways to Better Engage App Users in 10 SecondsEvgeny Tsarkov
 
Enforcement actions in the banking industry: Trends and lessons learned
Enforcement actions in the banking industry: Trends and lessons learnedEnforcement actions in the banking industry: Trends and lessons learned
Enforcement actions in the banking industry: Trends and lessons learnedDeloitte United States
 
Driving User Engagement with watchOS 3
Driving User Engagement with watchOS 3Driving User Engagement with watchOS 3
Driving User Engagement with watchOS 3Kristina Fox
 
Deloitte M&A Trends Report 2015: Our annual comprehensive look at the M&A market
Deloitte M&A Trends Report 2015: Our annual comprehensive look at the M&A marketDeloitte M&A Trends Report 2015: Our annual comprehensive look at the M&A market
Deloitte M&A Trends Report 2015: Our annual comprehensive look at the M&A marketDeloitte United States
 
InMobi_Infographic on The role of mobile and it's influence on back to school...
InMobi_Infographic on The role of mobile and it's influence on back to school...InMobi_Infographic on The role of mobile and it's influence on back to school...
InMobi_Infographic on The role of mobile and it's influence on back to school...InMobi
 
A lens into the future of US health systems
A lens into the future of US health systemsA lens into the future of US health systems
A lens into the future of US health systemsDeloitte United States
 
Nexus 6P vs. iPhone 6s Plus (Infographic)
Nexus 6P vs. iPhone 6s Plus (Infographic)Nexus 6P vs. iPhone 6s Plus (Infographic)
Nexus 6P vs. iPhone 6s Plus (Infographic)InterQuest Group
 

Viewers also liked (13)

Ericsson Mobility Report - June 2015 - North East Asia appendix
Ericsson Mobility Report - June 2015 - North East Asia appendixEricsson Mobility Report - June 2015 - North East Asia appendix
Ericsson Mobility Report - June 2015 - North East Asia appendix
 
CES 2014 Review: 12 Principles & What Matters for Marketers
CES 2014 Review: 12 Principles & What Matters for MarketersCES 2014 Review: 12 Principles & What Matters for Marketers
CES 2014 Review: 12 Principles & What Matters for Marketers
 
2015 global CIO survey: Creating legacy
2015 global CIO survey: Creating legacy2015 global CIO survey: Creating legacy
2015 global CIO survey: Creating legacy
 
CAGNY 2017 Roundup: Growth is dominant in 5 key themes
CAGNY 2017 Roundup: Growth is dominant in 5 key themesCAGNY 2017 Roundup: Growth is dominant in 5 key themes
CAGNY 2017 Roundup: Growth is dominant in 5 key themes
 
15 Stats Every B2B Marketer Should Know About Mobile Retention
15 Stats Every B2B Marketer Should Know About Mobile Retention15 Stats Every B2B Marketer Should Know About Mobile Retention
15 Stats Every B2B Marketer Should Know About Mobile Retention
 
10 Ways to Better Engage App Users in 10 Seconds
10 Ways to Better Engage App Users in 10 Seconds10 Ways to Better Engage App Users in 10 Seconds
10 Ways to Better Engage App Users in 10 Seconds
 
Enforcement actions in the banking industry: Trends and lessons learned
Enforcement actions in the banking industry: Trends and lessons learnedEnforcement actions in the banking industry: Trends and lessons learned
Enforcement actions in the banking industry: Trends and lessons learned
 
Driving User Engagement with watchOS 3
Driving User Engagement with watchOS 3Driving User Engagement with watchOS 3
Driving User Engagement with watchOS 3
 
Deloitte M&A Trends Report 2015: Our annual comprehensive look at the M&A market
Deloitte M&A Trends Report 2015: Our annual comprehensive look at the M&A marketDeloitte M&A Trends Report 2015: Our annual comprehensive look at the M&A market
Deloitte M&A Trends Report 2015: Our annual comprehensive look at the M&A market
 
InMobi_Infographic on The role of mobile and it's influence on back to school...
InMobi_Infographic on The role of mobile and it's influence on back to school...InMobi_Infographic on The role of mobile and it's influence on back to school...
InMobi_Infographic on The role of mobile and it's influence on back to school...
 
A lens into the future of US health systems
A lens into the future of US health systemsA lens into the future of US health systems
A lens into the future of US health systems
 
Nexus 6P vs. iPhone 6s Plus (Infographic)
Nexus 6P vs. iPhone 6s Plus (Infographic)Nexus 6P vs. iPhone 6s Plus (Infographic)
Nexus 6P vs. iPhone 6s Plus (Infographic)
 
The Future of Mobility
The Future of MobilityThe Future of Mobility
The Future of Mobility
 

Similar to "e" is for "everywhere": Designing email in the mobile age

Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 201 - Design and Code
Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 201 - Design and CodeDreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 201 - Design and Code
Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 201 - Design and CodeSalesforce Marketing Cloud
 
How To Create Successful Mobile Email Marketing Campaigns
How To Create Successful Mobile Email Marketing CampaignsHow To Create Successful Mobile Email Marketing Campaigns
How To Create Successful Mobile Email Marketing CampaignsMass Transmit
 
Secrets to Email Creative Success in a ‘Mocialized’ World
Secrets to Email Creative Success in a ‘Mocialized’ WorldSecrets to Email Creative Success in a ‘Mocialized’ World
Secrets to Email Creative Success in a ‘Mocialized’ WorldEngauge
 
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
 
Content strategy for mobile
Content strategy for mobileContent strategy for mobile
Content strategy for mobileKarolina Szczur
 
Mobile email - chasing context
Mobile email -  chasing contextMobile email -  chasing context
Mobile email - chasing contextAnna Yeaman
 
Samsung voice intelligence.v5.5
Samsung voice intelligence.v5.5Samsung voice intelligence.v5.5
Samsung voice intelligence.v5.5vinutharani1995
 
The information supernova
The information supernovaThe information supernova
The information supernovaAlaa Al-Agamawi
 
La era de los smart devices mexico
La era de los smart devices mexicoLa era de los smart devices mexico
La era de los smart devices mexicoGeneXus
 
La era de los smart devices mexico
La era de los smart devices mexicoLa era de los smart devices mexico
La era de los smart devices mexicoGeneXus
 
Responsive web design
Responsive web designResponsive web design
Responsive web designZeeshan Khan
 
Alexis max-Creating a bot experience as good as your user experience - Alexis...
Alexis max-Creating a bot experience as good as your user experience - Alexis...Alexis max-Creating a bot experience as good as your user experience - Alexis...
Alexis max-Creating a bot experience as good as your user experience - Alexis...WeLoveSEO
 
Interactive Responsive Emails - Creative ways to innovate in email development
Interactive Responsive Emails - Creative ways to innovate in email developmentInteractive Responsive Emails - Creative ways to innovate in email development
Interactive Responsive Emails - Creative ways to innovate in email developmentMichael Posso
 
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)Kevin Bruce
 
Confluence State Of The Union 2009
Confluence State Of The Union 2009Confluence State Of The Union 2009
Confluence State Of The Union 2009Atlassian
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1James Pearce
 
The Mobile Experience Through Email
The Mobile Experience Through EmailThe Mobile Experience Through Email
The Mobile Experience Through EmailDemac Media
 

Similar to "e" is for "everywhere": Designing email in the mobile age (20)

Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 201 - Design and Code
Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 201 - Design and CodeDreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 201 - Design and Code
Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 201 - Design and Code
 
How To Create Successful Mobile Email Marketing Campaigns
How To Create Successful Mobile Email Marketing CampaignsHow To Create Successful Mobile Email Marketing Campaigns
How To Create Successful Mobile Email Marketing Campaigns
 
The Mobile Inbox 201: Design & Coding
The Mobile Inbox 201: Design & Coding The Mobile Inbox 201: Design & Coding
The Mobile Inbox 201: Design & Coding
 
Secrets to Email Creative Success in a ‘Mocialized’ World
Secrets to Email Creative Success in a ‘Mocialized’ WorldSecrets to Email Creative Success in a ‘Mocialized’ World
Secrets to Email Creative Success in a ‘Mocialized’ World
 
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
 
Content strategy for mobile
Content strategy for mobileContent strategy for mobile
Content strategy for mobile
 
Mobile email - chasing context
Mobile email -  chasing contextMobile email -  chasing context
Mobile email - chasing context
 
Samsung voice intelligence.v5.5
Samsung voice intelligence.v5.5Samsung voice intelligence.v5.5
Samsung voice intelligence.v5.5
 
The information supernova
The information supernovaThe information supernova
The information supernova
 
La era de los smart devices mexico
La era de los smart devices mexicoLa era de los smart devices mexico
La era de los smart devices mexico
 
La era de los smart devices mexico
La era de los smart devices mexicoLa era de los smart devices mexico
La era de los smart devices mexico
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Alexis max-Creating a bot experience as good as your user experience - Alexis...
Alexis max-Creating a bot experience as good as your user experience - Alexis...Alexis max-Creating a bot experience as good as your user experience - Alexis...
Alexis max-Creating a bot experience as good as your user experience - Alexis...
 
Interactive Responsive Emails - Creative ways to innovate in email development
Interactive Responsive Emails - Creative ways to innovate in email developmentInteractive Responsive Emails - Creative ways to innovate in email development
Interactive Responsive Emails - Creative ways to innovate in email development
 
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
 
Techtalk
TechtalkTechtalk
Techtalk
 
Confluence State Of The Union 2009
Confluence State Of The Union 2009Confluence State Of The Union 2009
Confluence State Of The Union 2009
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
 
The Mobile Experience Through Email
The Mobile Experience Through EmailThe Mobile Experience Through Email
The Mobile Experience Through Email
 

Recently uploaded

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
 
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
 
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
 
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
 
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
 
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
 
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
 
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
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
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
 
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
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
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
 
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
 
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
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 

Recently uploaded (19)

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
 
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
 
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
 
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
 
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...
 
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
 
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
 
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
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
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...
 
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
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
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
 
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
 
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
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 

"e" is for "everywhere": Designing email in the mobile age

Editor's Notes

  1. Thanks for having me\nNo need to write too much down, link at end\n#mobileemail @mrpatto\n
  2. unless note from mum\nsend read email / send read email mobile / check email in talk\nhate html email\nhtml email bad rap from designers\n
  3. I&amp;#x2019;ve never sent an HTML email, and I never will\nNever tried incest either, don&amp;#x2019;t have to\nmoral equivalent\nRoger Johansson hates html email, Zeldman did\nAnother one...\n
  4. I&amp;#x2019;ve never sent an HTML email, and I never will\nNever tried incest either, don&amp;#x2019;t have to\nmoral equivalent\nRoger Johansson hates html email, Zeldman did\nAnother one...\n
  5. I&amp;#x2019;ve never sent an HTML email, and I never will\nNever tried incest either, don&amp;#x2019;t have to\nmoral equivalent\nRoger Johansson hates html email, Zeldman did\nAnother one...\n
  6. I&amp;#x2019;ve never sent an HTML email, and I never will\nNever tried incest either, don&amp;#x2019;t have to\nmoral equivalent\nRoger Johansson hates html email, Zeldman did\nAnother one...\n
  7. Gary Barber on twitter\nhate is a strong word for a markup language \none last face\n
  8. Gary Barber on twitter\nhate is a strong word for a markup language \none last face\n
  9. Hiroo Onoda\n27 years fighting a war that was finished\ndesigners probably won&amp;#x2019;t stick it out that long\nwar on drugs, war on terror, war on html email\n
  10. about one third of all email users in the US\ndeveloping countries, even more proportionally\nworth lots of money, very broad\n\n
  11. like everyone in this country and the kiwis all signed up\nthey still apparently are not making money\n\n
  12. 2010 study, still at the top of the list for roi\nexplain roi\ncheap, measurable, effective\n&gt; Alaska airlines\n
  13. Alaska airlines email subscribers spend 4x the average customer\nbet don&apos;t spend 4x money emailing them\nbig companies love it\n
  14. small companies love email too\nVaynerchuk, Kevin Rose, Hugh McCleod\nwant to talk mobile email specifically\n
  15. cheesy marketing ploy to get 3 &amp;#x2018;c&amp;#x2019;s\ncontext - what makes mobile email different than desktop? Who, what, where, when, how\ncontent - how should the context affect what you send, and what it looks like\ncoding - how to build it for modern mobile devices, actual technical details\n
  16. cheesy marketing ploy to get 3 &amp;#x2018;c&amp;#x2019;s\ncontext - what makes mobile email different than desktop? Who, what, where, when, how\ncontent - how should the context affect what you send, and what it looks like\ncoding - how to build it for modern mobile devices, actual technical details\n
  17. cheesy marketing ploy to get 3 &amp;#x2018;c&amp;#x2019;s\ncontext - what makes mobile email different than desktop? Who, what, where, when, how\ncontent - how should the context affect what you send, and what it looks like\ncoding - how to build it for modern mobile devices, actual technical details\n
  18. market context\nphysical\nuser \n
  19. Mobile making up a bigger chunk\nCM graph, need to compare to your own\ndesktop is still huge\n
  20. Clear 2 year trend\nGet your own stats, Campaign Monitor / Litmus / Mailchimp\nConsider tracking on site too, percentmobile.com\nYou need to know where you stand\n
  21. desktop - growing (unless in govt job with dell), mobile tiny\nbandwidth / access - synchronised mobile usage in reception spots on train. Spot the network. open at any time, more peaks\ntouch based - designing for a reader using a finger which takes up a big chunk of screen, vs tiny pointer. May be using a sausage\nenviro - glare, rushed, cramped, one hand\nall could impact choice of content and design\n
  22. desktop - growing (unless in govt job with dell), mobile tiny\nbandwidth / access - synchronised mobile usage in reception spots on train. Spot the network. open at any time, more peaks\ntouch based - designing for a reader using a finger which takes up a big chunk of screen, vs tiny pointer. May be using a sausage\nenviro - glare, rushed, cramped, one hand\nall could impact choice of content and design\n
  23. desktop - growing (unless in govt job with dell), mobile tiny\nbandwidth / access - synchronised mobile usage in reception spots on train. Spot the network. open at any time, more peaks\ntouch based - designing for a reader using a finger which takes up a big chunk of screen, vs tiny pointer. May be using a sausage\nenviro - glare, rushed, cramped, one hand\nall could impact choice of content and design\n
  24. desktop - growing (unless in govt job with dell), mobile tiny\nbandwidth / access - synchronised mobile usage in reception spots on train. Spot the network. open at any time, more peaks\ntouch based - designing for a reader using a finger which takes up a big chunk of screen, vs tiny pointer. May be using a sausage\nenviro - glare, rushed, cramped, one hand\nall could impact choice of content and design\n
  25. desktop - growing (unless in govt job with dell), mobile tiny\nbandwidth / access - synchronised mobile usage in reception spots on train. Spot the network. open at any time, more peaks\ntouch based - designing for a reader using a finger which takes up a big chunk of screen, vs tiny pointer. May be using a sausage\nenviro - glare, rushed, cramped, one hand\nall could impact choice of content and design\n
  26. desktop - growing (unless in govt job with dell), mobile tiny\nbandwidth / access - synchronised mobile usage in reception spots on train. Spot the network. open at any time, more peaks\ntouch based - designing for a reader using a finger which takes up a big chunk of screen, vs tiny pointer. May be using a sausage\nenviro - glare, rushed, cramped, one hand\nall could impact choice of content and design\n
  27. desktop - growing (unless in govt job with dell), mobile tiny\nbandwidth / access - synchronised mobile usage in reception spots on train. Spot the network. open at any time, more peaks\ntouch based - designing for a reader using a finger which takes up a big chunk of screen, vs tiny pointer. May be using a sausage\nenviro - glare, rushed, cramped, one hand\nall could impact choice of content and design\n
  28. desktop - growing (unless in govt job with dell), mobile tiny\nbandwidth / access - synchronised mobile usage in reception spots on train. Spot the network. open at any time, more peaks\ntouch based - designing for a reader using a finger which takes up a big chunk of screen, vs tiny pointer. May be using a sausage\nenviro - glare, rushed, cramped, one hand\nall could impact choice of content and design\n
  29. traditional mobile usage is triage.\nhospital, nurse, decide if about to die vs can wait 7 hours uncomfortable chair, drunk head wounds\nflag, delete, respond\nmore capable phones = rise in time killing behaviour\ntrains, buses, sitting outside women&apos;s fashion boutiques\nmore willing to have longer . more complex interaction\n
  30. email in a mobile context has to be thought about differently\nthe environment affects what message, how message understood\nthat should impact content, design\n
  31. Both copy and the design elements and structure\n
  32. airport\nrushed, stressed, crowded\none hand, dragging\nflight details critical\nso hard to read in a hurry\n
  33. airport\nrushed, stressed, crowded\none hand, dragging\nflight details critical\nso hard to read in a hurry\n
  34. airport\nrushed, stressed, crowded\none hand, dragging\nflight details critical\nso hard to read in a hurry\n
  35. real estate, coupons, receipts, commuter alerts, tickets\nnon mobile-specific might adjust order of content\nlength of headings\n\n
  36. subject line + sender name keys to getting opens\neven less space on mobile\ntoo easily wasted\n\n
  37. all those characters, and no information, except it is possibly July (though couldn&apos;t rely on it)\n
  38. now there&apos;s an email I&apos;d open. Key words up front, real information before opening\neven if to say &apos;don&apos;t need to open now&apos; that is useful\nother elements of design...\n
  39. marketing types like creepy phrases\nalso e-blast, mail shot. All sex and violence in email marketing\npreheader is content that comes before main header block\nexample mobile version link - anyone use those?\n\n
  40. screens worth of scrolling, useful but not essential in mobile context\nvs getting content right up top, quick decision on value\n
  41. screens worth of scrolling, useful but not essential in mobile context\nvs getting content right up top, quick decision on value\n
  42. placeholder to talk about content in general\ndesigners often not involved, to their regret\nnobody else likely to be thinking context, or have technical knowledge\nstand up for the reader\n
  43. just a few key points, will be listed in notes\n
  44. such limited space\nhard to make useful multi columns\n
  45. for phone screens, or try flexible widths, though that&apos;s tough design work\ntest in mobile devices on Litmus\n
  46. finger sized action buttons\n37px for Android recommendation\nNot an exact figure to aim for, something to remind you that fingers !=cursors\n
  47. leave space around important links\nespecially when wrong link is undesirable - loading browser, unsubscribing\n
  48. colour combos that work at larger sizes quickly muddy\nat smaller sizes, indistinguishable. amp up contrast\n
  49. how to build HTML emails that render well in mobile devices\n
  50. list reminds me of HTML email no-nos\nscripts, flash, video, floats\nsome good, some bad, mobile clients actually more capable overall, webkit\ncheats = border in image, border of bg colour, nesting table\n
  51. list reminds me of HTML email no-nos\nscripts, flash, video, floats\nsome good, some bad, mobile clients actually more capable overall, webkit\ncheats = border in image, border of bg colour, nesting table\n
  52. list reminds me of HTML email no-nos\nscripts, flash, video, floats\nsome good, some bad, mobile clients actually more capable overall, webkit\ncheats = border in image, border of bg colour, nesting table\n
  53. list reminds me of HTML email no-nos\nscripts, flash, video, floats\nsome good, some bad, mobile clients actually more capable overall, webkit\ncheats = border in image, border of bg colour, nesting table\n
  54. list reminds me of HTML email no-nos\nscripts, flash, video, floats\nsome good, some bad, mobile clients actually more capable overall, webkit\ncheats = border in image, border of bg colour, nesting table\n
  55. list reminds me of HTML email no-nos\nscripts, flash, video, floats\nsome good, some bad, mobile clients actually more capable overall, webkit\ncheats = border in image, border of bg colour, nesting table\n
  56. list reminds me of HTML email no-nos\nscripts, flash, video, floats\nsome good, some bad, mobile clients actually more capable overall, webkit\ncheats = border in image, border of bg colour, nesting table\n
  57. list reminds me of HTML email no-nos\nscripts, flash, video, floats\nsome good, some bad, mobile clients actually more capable overall, webkit\ncheats = border in image, border of bg colour, nesting table\n
  58. list reminds me of HTML email no-nos\nscripts, flash, video, floats\nsome good, some bad, mobile clients actually more capable overall, webkit\ncheats = border in image, border of bg colour, nesting table\n
  59. @media specialist stylesheet\nleave in head, don&apos;t apply inline\nmobile clients do well\n
  60. only keyword to hide @media styles from browsers that don&apos;t apply correctly\ndevice handheld not well supported\n!important to overide inline styles\n
  61. android, palm, iOS all can use them\nfacebook link to web, not app, web version, date\nlayout widths, spacing between\ncouple examples\n
  62. Panic content resize, images scaled down, spacing, fonts\n
  63. hiding top bar completely\nhide date\nlogo is twice size for higher resolution devices\n
  64. could do 100%\nSafari is basically pushing fonts to 100% by default\nonly use if you are making sure your sizes are right\n
  65. Yahoo! will incorrecly apply @media to normal desktop readers\nuse attribute selectors instead\n
  66. He-Man comes in to tell what we&apos;ve learned today\n\n
  67. He-Man comes in to tell what we&apos;ve learned today\n\n
  68. He-Man comes in to tell what we&apos;ve learned today\n\n
  69. He-Man comes in to tell what we&apos;ve learned today\n\n
  70. He-Man comes in to tell what we&apos;ve learned today\n\n
  71. Slides and linkage up there\ntweet me if you have follow up questions , or grab me afterwards\n
  72. Questions\nBribes are available\nbook\n\n