Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (8)
Similaire à Beyond Being Responsive: A Mobile First Strategy
Similaire à Beyond Being Responsive: A Mobile First Strategy (20)
Dernier
Dernier (20)
Beyond Being Responsive: A Mobile First Strategy
- 1. BEYOND BEING RESPONSIVE A MOBILE FIRST STRATEGY
- 2. Mobile first strategies build to the constraints of mobile devices, and the needs of mobile users first.
- 4. LUKE WROBLEWSKI "Losing 80% of your screen space forces you to focus. You need to make sure that what stays on the screen is the most important set of features for your customers and your business." http://www.lukew.com/ff/entry.asp?1117
- 5. JEREMY KEITH "Mobile web design has already established a number of excellent best practices whereas traditional “desktop” web design has become the domain of laziness and complacency. " http://adactio.com/journal/4523
- 10. JEREMY KEITH "How can we design for our content in such a way that the reader won’t need or want to reach for Readability or Instapaper?" http://adactio.com/journal/4523
- 11. DESIGN WEB SOLUTIONS GIVE USERS WHAT THEY WANT
- 12. MOBILE FIRST
- 13. MOBILE FIRST Don't fix the container, use %.
- 14. MOBILE FIRST Don't fix the container, use %. HTML and CSS have universal support.
- 15. MOBILE FIRST Don't fix the container, use %. HTML and CSS have universal support. JavaScript is optional or unavailable!
- 16. kB loaded ~ Alexa top 1m HTML other 45 27 flash 80 css 36 scripts 189 images 641 April 2012 - average page size = 1018kB www.httparchive.org/interesting.php
- 17. MOBILE FIRST Don't fix the container, use %. HTML and CSS have universal support. JavaScript is optional or unavailable! Progressive enhancement?
- 19. THE BAD NEWS
- 20. THE BAD NEWS RWD was the easy part!
- 21. THE BAD NEWS RWD was the easy part! Content/mobile first requires process change.
- 22. THE BAD NEWS RWD was the easy part! Content/mobile first requires process change. Many things appear counter-intuitive.
- 23. THE BAD NEWS RWD was the easy part! Content/mobile first requires process change. Many things appear counter-intuitive. Fundamental issues remain.
- 24. BARRIERS TO ADOPTION "IT'S A FLAWED APPROACH BECAUSE…"
- 25. NO. 1 "Mobile users want different things to desktop users."
- 27. MYTH: CONTEXT = INTENT
- 28. MYTH: CONTEXT = INTENT All we know is that the screen is small.
- 29. MYTH: CONTEXT = INTENT All we know is that the screen is small. Small screen != <time, bandwidth, sales.
- 30. MYTH: CONTEXT = INTENT All we know is that the screen is small. Small screen != <time, bandwidth, sales. Assumption = …
- 31. MYTH: CONTEXT = INTENT All we know is that the screen is small. Small screen != <time, bandwidth, sales. Assumption = … 'Mobile' users have time, money and choice.
- 33. NO. 2 "Mobile users are not my core audience, I want to focus on revenue generators."
- 34. MYTH: MOBILE IS NICHE http://www.lukew.com/ff/entry.asp?1506
- 35. MYTH: MOBILE IS NICHE • 378k iPhones sold per day (562k iOS) http://www.lukew.com/ff/entry.asp?1506
- 36. MYTH: MOBILE IS NICHE • 378k iPhones sold per day (562k iOS) • 700k Android devices activated http://www.lukew.com/ff/entry.asp?1506
- 37. MYTH: MOBILE IS NICHE • 378k iPhones sold per day (562k iOS) • 700k Android devices activated • 200k Nokia smartphones http://www.lukew.com/ff/entry.asp?1506
- 38. MYTH: MOBILE IS NICHE • 378k iPhones sold per day (562k iOS) • 700k Android devices activated • 200k Nokia smartphones • 143k Blackberry http://www.lukew.com/ff/entry.asp?1506
- 39. MYTH: MOBILE IS NICHE • 378k iPhones sold per day (562k iOS) • 700k Android devices activated • 200k Nokia smartphones • 143k Blackberry • 371k babies born http://www.lukew.com/ff/entry.asp?1506
- 40. MYTH: MOBILE IS NICHE 2009 2010 2011 PayPal $141m eBay $600m http://www.lukew.com/ff/entry.asp?1506
- 41. MYTH: MOBILE IS NICHE 2009 2010 2011 PayPal $141m $750m eBay $600m $2b http://www.lukew.com/ff/entry.asp?1506
- 42. MYTH: MOBILE IS NICHE 2009 2010 2011 PayPal $141m $750m $4b eBay $600m $2b $5b http://www.lukew.com/ff/entry.asp?1506
- 44. NO. 3 "Developing mobile-friendly sites costs more."
- 45. MYTH: RWD IS EXPENSIVE
- 46. MYTH: RWD IS EXPENSIVE • Ignoring potential customers is more so.
- 47. MYTH: RWD IS EXPENSIVE • Ignoring potential customers is more so. • Needn't cost more than existing techniques.
- 48. MYTH: RWD IS EXPENSIVE • Ignoring potential customers is more so. • Needn't cost more than existing techniques. • It is future-friendly, offering better ROI.
- 49. MYTH: RWD IS EXPENSIVE • Ignoring potential customers is more so. • Needn't cost more than existing techniques. • It is future-friendly, offering better ROI. • Try costing the alternatives.
- 50. NO. 4 "Mobile-friendly sites don't have enough room for my logo / happy- salad.png / break-dancing paper clip / wonder-widget dashboard!"
- 51. MYTH: [LOGOS] SELL STUFF
- 52. MYTH: [LOGOS] SELL STUFF • Users came for you content, not your logo.
- 54. MYTH: [LOGOS] SELL STUFF • Users came for you content, not your logo. • Junk drives users away.
- 55. MYTH: [LOGOS] SELL STUFF • Users came for you content, not your logo. • Junk drives users away. • Delays drive users away.
- 57. MOBILE FIRST DOING IT RIGHT!
- 62. MOBILE FIRST NEAR MISSES…
- 65. SUMMARY
- 67. SUMMARY Work backwards. Focus on user needs.
- 68. SUMMARY Work backwards. Focus on user needs. Stay focused on user needs!
- 69. SUMMARY Work backwards. Focus on user needs. Stay focused on user needs! Do not exclude users.
- 70. SUMMARY Work backwards. Focus on user needs. Stay focused on user needs! Do not exclude users. Do not exclude devices.
- 71. SUMMARY Work backwards. Focus on user needs. Stay focused on user needs! Do not exclude users. Do not exclude devices. Make it fast!
- 72. SUMMARY Work backwards. Focus on user needs. Stay focused on user needs! Do not exclude users. Do not exclude devices. Make it fast! really fast!
- 73. THINK MOBILE FIRST EVERYONE WINS!
- 75. QUESTIONS?
Notes de l'éditeur
- Seth Warburton - Internet inspired\n\nI hope to change the way you think about building your next web site / template / extension.\n\nWhat is Mobile first? \n
- Reach the biggest audience\n\nDifference with mobile vs desktop users?\n
- Examples are not hard to find.\n\nWhy do people design websites like this?\n
- Why would this change on larger screens?\n\nI like to call him Luke W! Authored 'mobile first'\n\nLuke has done all the stats, so I don't have to.\n
- Excellent blog. Tackling many of the big issues of rwd.\n\nExamples of bloat? Where did we go wrong?\n\nTwitter link from a friend.\n
- \n\n
- \n\n
- Read now - Read later - Send to kindle\n\nMaximum enjoyment. Changed the way I read online.\n\nQuick poll. Who uses these tools?\n
- Driving your users away by creating design 'barriers' is bad for business.I\n
- \n\n
- \n\n
- \n\n
- Web default is 'mobile'. No widths, no media queries = mobile friendly\n
- If you can do it with HTML and CSS, do so.\n
- If you can only do it with JavaScript ask:\n\nDoes this truly benefit the user?\n
- State of the web - may 1998 = 61kb\n\nThe world still has 1998 web\nDeveloping countries - Old technology - 'feature phones'\n\nPeople pay for mobile data! We build sites as if everyone has fast, cheap broadband. They don't. \n
- Progressive enhancement doesn't just apply to css3.\n\nAdd features for supported devices, don't strip them on unsupported \n
- \n\n
- \n\n
- Web content is fluid by default.\n
- Reverses the traditional build process. Mobile can't be an add-on.\n
- Mobile layout to all devices? @media query for desktop?\n
- Images remain an issue. Essential images the safe default = user first! \n
- Some of the many myths you may hear...\n
- Who can guess the next slide?\n
- \n\n
- Mobile users are rushed, distracted and have terrible connectivity\n\nMobile users only want your phone number and a map (they use their phones to find restaurants)\n
- \n\n
- Who here has their smartphone connected via wifi when at home?\n\nWho has used their smartphone sat in their livingroom? Laid in bed? Waiting for a train/plane?\n
- Desktop assumption: indoors, seated, lots of bandwidth, big screen.\n\nProbably true: indoors, seated...\n\nMobile assumption: outdoors, walking, low bandwidth, small screen.\n\nProbably true: small screen. (iPad?).\n
- Dont dumb it down for 'mobile' users, they won't thank you.\n
- Meet the users needs, whatever their screen size.\n
- \n\n
- There isn't many of them.\n\nThey don't buy things\n
- \n\n
- \n\n
- \n\n
- \n\n
- 1.45m devices each day vs 371k babies\n\n42% tablet owners have purchased something (Luke W)\n\n29% of smartphone owners\n
- \n\n
- \n\n
- Healthy gains in a stagnating world economy\n\nWhat will happen when the economy picks up?\n\n\n\n
- \n\n
- \n\n
- \n\n
- Not meeting user needs and expectations means costs.\n\nRemember mobile spending growth?\n
- It requires some new skills and a change of mindset.\n
- iPhone apps? Android?\n\nThey weren't here 5 yrs ago, they may not be in 5 yrs time. I think HTML and CSS will still be here. \n
- Apps cost huge amounts to develop (no cross platform solutions)\n\nmiddleman costs\n\n'mobile' sites require constant maintenance (device detection) and provide only limited coverage. (smart tv, console)\n
- \n\n
- \n\n
- Coca-cola logo 272x69\n
- \n\n
- Readability / Instapaper?\n\nHappy people stay longer / buy more / return / tell friends\n
- E-commerce : avg impact of 1 second delay = 7% reduction in conversions\n
- Desktop, mobile? Faster sites are always better sites.\n\nBetter rankings, more conversions.\n
- \n\n
- Content rich\n\nMobile friendly (buttons for key tasks)\n\nContent first (navigation second)\n
- You don't need images or tons of content to make a statement with style.\n
- Ampersand 129kb (36.5 k logo)\n\nIf you provide great UX for mobile, why would you change that for bigger screens?\n
- A beautiful design, providing everything the user came for: content\n
- Well intended.\n\nEasy to get caught on little details.\n
- A well thought out design\n\nProminent mobile search\n\nNo mobile menu without js. Don't use .js to ensure things work!\n\nThe big players stumble here too. Guess what's next?\n
- No menu!\n\nClue in the css3 logo. Progressive enhancement is not only for CSS!\n
- \n\n
- \n\n
- \n\n
- \n\n
- \n\n
- \n\n
- \n\n
- \n\n
- \n\n
- \n\n
- \n\n