"e" is for "everywhere": Designing email in the mobile age
•
6 j'aime•3,183 vues
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.
Recommandé
Recommandé
Contenu connexe
En vedette
En vedette (13)
Similaire à "e" is for "everywhere": Designing email in the mobile age
Similaire à "e" is for "everywhere": Designing email in the mobile age (20)
Dernier
Dernier (20)
"e" is for "everywhere": Designing email in the mobile age
- 1. ‘e’ is for everywhere email in the mobile age Mat Patterson – @mrpatto
- 4. •handsome
- 9. “I hate html email”
- 11. 70 million US mobile email users
- 16. 3xC
- 17. 3xC Context
- 18. 3xC Context Content
- 19. 3xC Context Content Coding
- 21. Gmail (7%) Outlook (27%) iOS devices (16%) Hotmail (12%)
- 22. Opens by client 52% Desktop Webmail Mobile 0% May 2009 May 2011
- 23. Physical context
- 24. Physical context screen size
- 25. Physical context screen size bandwidth & access
- 26. Physical context screen size bandwidth & access touch based
- 27. Physical context screen size bandwidth & access touch based
- 28. Physical context screen size bandwidth & access touch based environmental factors
- 29. User context
- 37. 35 characters
- 39. Welcome to your July Newsletter from
- 41. Spinal Tap tickets on sale - Tapfans N
- 42. preheader
- 43. preheader (it’s not sexual)
- 46. Lorem
- 47. 5 tips for mobile email design
- 48. 1 column unless you are hardcore
- 49. 480 px or less, to be safe
- 50. 44 px touch targets 2
- 51. m o r e space
- 52. contrast more please
- 57. structural tables inline css
- 58. structural tables inline css explicit margins
- 59. structural tables inline css explicit margins nested tables
- 60. structural tables inline css explicit margins nested tables cheat’s padding
- 61. structural tables inline css explicit margins nested tables cheat’s padding blocked images
- 62. structural tables inline css explicit margins nested tables cheat’s padding blocked images plain text version
- 63. @media only screen and (max-device-width: 480px) { .hide { display: none !important; } .table, .cell { width: 300px !important; } .divider { height: 1px !important; } }
- 64. @media only screen and (max-device-width: 480px) { .hide { display: none !important; } .table, .cell { width: 300px !important; } .divider { height: 1px !important; } }
- 65. •hide content •adjust layout •resize images •control font resizing
- 69. fix stupid Yahoo! Mail table[class=mytable]
- 71. Jeremy Keith is wrong
- 72. Jeremy Keith is wrong Mobile email is massive
- 73. Jeremy Keith is wrong Mobile email is massive Context matters
- 74. Jeremy Keith is wrong Mobile email is massive Context matters Content in context matters
- 75. Jeremy Keith is wrong Mobile email is massive Context matters Content in context matters Coding tricks can help
- 77. THE END thanks!
Notes de l'éditeur
- 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’ve never sent an HTML email, and I never will\nNever tried incest either, don’t have to\nmoral equivalent\nRoger Johansson hates html email, Zeldman did\nAnother one...\n
- I’ve never sent an HTML email, and I never will\nNever tried incest either, don’t have to\nmoral equivalent\nRoger Johansson hates html email, Zeldman did\nAnother one...\n
- I’ve never sent an HTML email, and I never will\nNever tried incest either, don’t have to\nmoral equivalent\nRoger Johansson hates html email, Zeldman did\nAnother one...\n
- I’ve never sent an HTML email, and I never will\nNever tried incest either, don’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’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> Alaska airlines\n
- Alaska airlines email subscribers spend 4x the average customer\nbet don'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 ‘c’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 ‘c’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 ‘c’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'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't rely on it)\n
- now there's an email I'd open. Key words up front, real information before opening\neven if to say 'don't need to open now' 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'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't apply inline\nmobile clients do well\n
- only keyword to hide @media styles from browsers that don'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've learned today\n\n
- He-Man comes in to tell what we've learned today\n\n
- He-Man comes in to tell what we've learned today\n\n
- He-Man comes in to tell what we've learned today\n\n
- He-Man comes in to tell what we'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