‘e’ is foreverywhere   email in the mobile age                  Mat Patterson – @mrpatto
WARNING!Physical movement required
•handsome
•handsome•charming
•handsome•charming•irish
•handsome•charming•irish•wrong
“I hate html email”
70 millionUS mobile email users
80+ milliongroupon subscribers
256%ROI (or more)
4X $average customer
3xC
3xC   Context
3xC   Context      Content
3xC   Context      Content      Coding
ContextContentCoding
Gmail (7%)                 Outlook (27%)                 iOS devices (16%) Hotmail (12%)
Opens by client52%                                         Desktop                                         Webmail        ...
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
Usercontext
ContextContentCoding
right contentright context
right contentright context
35characters
Welcome to your July Newsletter from
Spinal Tap tickets on sale - Tapfans N
preheader
preheader  (it’s not sexual)
Lorem
5 tipsfor mobile email design
1 columnunless you are hardcore
480 pxor less, to be safe
44 pxtouch targets                2
m o r e  space
contrast  more please
ContextContentCoding
structural tables
structural tables       inline css
structural tables       inline cssexplicit margins
structural tables       inline cssexplicit margins   nested tables
structural tables       inline cssexplicit margins   nested tablescheat’s padding
structural tables       inline cssexplicit margins   nested tablescheat’s padding blocked images
structural tables        inline css explicit margins    nested tables cheat’s padding blocked imagesplain text version
@media only screen and (max-device-width: 480px) {  .hide { display: none !important; }  .table, .cell { width: 300px !imp...
@media only screen and (max-device-width: 480px) {  .hide { display: none !important; }  .table, .cell { width: 300px !imp...
•hide content•adjust layout•resize images•control font resizing
<body style="-webkit-text-size-adjust:none;">
fix stupid Yahoo! Mail                   table[class=mytable]
Jeremy Keith is wrong
Jeremy Keith is wrongMobile email is massive
Jeremy Keith is wrongMobile email is massive        Context matters
Jeremy Keith is wrong  Mobile email is massive           Context mattersContent in context matters
Jeremy Keith is wrong  Mobile email is massive           Context mattersContent in context matters    Coding tricks can help
@mrpattomrpatto.com/mobileemail
THE END  thanks!
"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
"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
"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
"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
"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
"e" is for "everywhere": Designing email in the mobile age
"e" is for "everywhere": Designing email in the mobile age
Upcoming SlideShare
Loading in...5
×

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

13,032

Published on

Slides from my Edge of the Web talk in Perth, Australia.

Learn how you can design and build your emails to take advantage of the explosion in mobile computing on smartphones and tablets.

Find out what works, what doesn't, and why you should care.

Published in: Design, Technology, Business
1 Comment
5 Likes
Statistics
Notes
  • This was the standout for me at Edge of the Web. An awesome, awesome preso!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
13,032
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide
  • Thanks for having me\nNo need to write too much down, link at end\n#mobileemail @mrpatto\n
  • 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
  • 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
  • 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
  • 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
  • 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
  • Gary Barber on twitter\nhate is a strong word for a markup language \none last face\n
  • Gary Barber on twitter\nhate is a strong word for a markup language \none last face\n
  • 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
  • about one third of all email users in the US\ndeveloping countries, even more proportionally\nworth lots of money, very broad\n\n
  • like everyone in this country and the kiwis all signed up\nthey still apparently are not making money\n\n
  • 2010 study, still at the top of the list for roi\nexplain roi\ncheap, measurable, effective\n&gt; Alaska airlines\n
  • Alaska airlines email subscribers spend 4x the average customer\nbet don&apos;t spend 4x money emailing them\nbig companies love it\n
  • small companies love email too\nVaynerchuk, Kevin Rose, Hugh McCleod\nwant to talk mobile email specifically\n
  • 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
  • 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
  • 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
  • market context\nphysical\nuser \n
  • Mobile making up a bigger chunk\nCM graph, need to compare to your own\ndesktop is still huge\n
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Both copy and the design elements and structure\n
  • airport\nrushed, stressed, crowded\none hand, dragging\nflight details critical\nso hard to read in a hurry\n
  • airport\nrushed, stressed, crowded\none hand, dragging\nflight details critical\nso hard to read in a hurry\n
  • airport\nrushed, stressed, crowded\none hand, dragging\nflight details critical\nso hard to read in a hurry\n
  • real estate, coupons, receipts, commuter alerts, tickets\nnon mobile-specific might adjust order of content\nlength of headings\n\n
  • subject line + sender name keys to getting opens\neven less space on mobile\ntoo easily wasted\n\n
  • all those characters, and no information, except it is possibly July (though couldn&apos;t rely on it)\n
  • 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
  • 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
  • screens worth of scrolling, useful but not essential in mobile context\nvs getting content right up top, quick decision on value\n
  • screens worth of scrolling, useful but not essential in mobile context\nvs getting content right up top, quick decision on value\n
  • 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
  • just a few key points, will be listed in notes\n
  • such limited space\nhard to make useful multi columns\n
  • for phone screens, or try flexible widths, though that&apos;s tough design work\ntest in mobile devices on Litmus\n
  • finger sized action buttons\n37px for Android recommendation\nNot an exact figure to aim for, something to remind you that fingers !=cursors\n
  • leave space around important links\nespecially when wrong link is undesirable - loading browser, unsubscribing\n
  • colour combos that work at larger sizes quickly muddy\nat smaller sizes, indistinguishable. amp up contrast\n
  • how to build HTML emails that render well in mobile devices\n
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • @media specialist stylesheet\nleave in head, don&apos;t apply inline\nmobile clients do well\n
  • 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
  • android, palm, iOS all can use them\nfacebook link to web, not app, web version, date\nlayout widths, spacing between\ncouple examples\n
  • Panic content resize, images scaled down, spacing, fonts\n
  • hiding top bar completely\nhide date\nlogo is twice size for higher resolution devices\n
  • could do 100%\nSafari is basically pushing fonts to 100% by default\nonly use if you are making sure your sizes are right\n
  • Yahoo! will incorrecly apply @media to normal desktop readers\nuse attribute selectors instead\n
  • He-Man comes in to tell what we&apos;ve learned today\n\n
  • He-Man comes in to tell what we&apos;ve learned today\n\n
  • He-Man comes in to tell what we&apos;ve learned today\n\n
  • He-Man comes in to tell what we&apos;ve learned today\n\n
  • He-Man comes in to tell what we&apos;ve learned today\n\n
  • Slides and linkage up there\ntweet me if you have follow up questions , or grab me afterwards\n
  • Questions\nBribes are available\nbook\n\n
  • "e" is for "everywhere": Designing email in the mobile age

    1. 1. ‘e’ is foreverywhere email in the mobile age Mat Patterson – @mrpatto
    2. 2. WARNING!Physical movement required
    3. 3. •handsome
    4. 4. •handsome•charming
    5. 5. •handsome•charming•irish
    6. 6. •handsome•charming•irish•wrong
    7. 7. “I hate html email”
    8. 8. 70 millionUS mobile email users
    9. 9. 80+ milliongroupon subscribers
    10. 10. 256%ROI (or more)
    11. 11. 4X $average customer
    12. 12. 3xC
    13. 13. 3xC Context
    14. 14. 3xC Context Content
    15. 15. 3xC Context Content Coding
    16. 16. ContextContentCoding
    17. 17. Gmail (7%) Outlook (27%) iOS devices (16%) Hotmail (12%)
    18. 18. Opens by client52% Desktop Webmail Mobile0% May 2009 May 2011
    19. 19. Physical context
    20. 20. Physical context screen size
    21. 21. Physical context screen size bandwidth & access
    22. 22. Physical context screen size bandwidth & access touch based
    23. 23. Physical context screen size bandwidth & access touch based
    24. 24. Physical context screen size bandwidth & access touch based environmental factors
    25. 25. Usercontext
    26. 26. ContextContentCoding
    27. 27. right contentright context
    28. 28. right contentright context
    29. 29. 35characters
    30. 30. Welcome to your July Newsletter from
    31. 31. Spinal Tap tickets on sale - Tapfans N
    32. 32. preheader
    33. 33. preheader (it’s not sexual)
    34. 34. Lorem
    35. 35. 5 tipsfor mobile email design
    36. 36. 1 columnunless you are hardcore
    37. 37. 480 pxor less, to be safe
    38. 38. 44 pxtouch targets 2
    39. 39. m o r e space
    40. 40. contrast more please
    41. 41. ContextContentCoding
    42. 42. structural tables
    43. 43. structural tables inline css
    44. 44. structural tables inline cssexplicit margins
    45. 45. structural tables inline cssexplicit margins nested tables
    46. 46. structural tables inline cssexplicit margins nested tablescheat’s padding
    47. 47. structural tables inline cssexplicit margins nested tablescheat’s padding blocked images
    48. 48. structural tables inline css explicit margins nested tables cheat’s padding blocked imagesplain text version
    49. 49. @media only screen and (max-device-width: 480px) { .hide { display: none !important; } .table, .cell { width: 300px !important; } .divider { height: 1px !important; }}
    50. 50. @media only screen and (max-device-width: 480px) { .hide { display: none !important; } .table, .cell { width: 300px !important; } .divider { height: 1px !important; }}
    51. 51. •hide content•adjust layout•resize images•control font resizing
    52. 52. <body style="-webkit-text-size-adjust:none;">
    53. 53. fix stupid Yahoo! Mail table[class=mytable]
    54. 54. Jeremy Keith is wrong
    55. 55. Jeremy Keith is wrongMobile email is massive
    56. 56. Jeremy Keith is wrongMobile email is massive Context matters
    57. 57. Jeremy Keith is wrong Mobile email is massive Context mattersContent in context matters
    58. 58. Jeremy Keith is wrong Mobile email is massive Context mattersContent in context matters Coding tricks can help
    59. 59. @mrpattomrpatto.com/mobileemail
    60. 60. THE END thanks!

    ×