Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

14.929 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Design, Technologie, Business
  • This was the standout for me at Edge of the Web. An awesome, awesome preso!
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

"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!

×