Adaptive, Responsive, Mobile. A liquid web.

A presentation for VisuaDNA about the theory, the tools and the techniques around the Mobile web.

Transcript

1. Cristiano Rastelli - Consumer Team Adaptive, Responsive, Mobile. A liquid web.
2. Index • Premises • Responsive. Adaptive. Mobile. • Liquid web. Numbers. • Tools & Techs. • VisualDNA.
3. WEB We are talking about + + * but not only *
4. Responsive Adaptive Mobile* * first
5. www.alistapart.com/articles/responsive-web-design/
6. www.abookapart.com/products/responsive-web-design
7. www.lukew.com/ff/entry.asp?933
8. www.abookapart.com/products/mobile-first
9. twitter.com/lukew/status/262920585938612224/photo/1/large
10. RESPONSIVE Vs. ADAPTIVE
11. RESPONSIVE Vs. ADAPTIVE RWD MDWD MFWD RESS PRD
12. ADAPTIVE RESPONSIVE
13. ADAPTIVE RESPONSIVE FRAMEWORK boilerplate PATTERN libraries MOBILE FIRST
14. The RWD effect
15. bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
16. futurefriend.ly
17. techcrunch.com/2012/10/27/tablet-first-mobile-second/
18. www.welcomebrand.co.uk/thoughts/the-responsive-web-will-be-99-9-typography/
19. The RWD limits
20. markboulton.co.uk/journal/gridset-and-the-red-pill Responsive design is time-consuming. Not just writing the code, but all the way back to content requirements, typography, layout, managing client needs and expectations, Q.A and bug testing. Making websites this way adds time. In some cases, too much. Or rather, we’re spending time on the wrong things. Mark Boulton
21. If you’re making websites, chances are you’ve given some thought to what constitutes a responsive-friendly design process — and you’ve probably found that adding a mockup for every breakpoint isn’t a sustainable approach. www.alistapart.com/articles/responsive-comping-obtaining-signoff-with-mockups/
22. Using a predefined grid seems to make as much sense as using a predefined colour scheme. www.alistapart.com/articles/the-infinite-grid/
23. Luke Wroblewski twitter.com/lukew/status/268406393944559616
24. one design fits all sizes
25. www.zeldman.com/2011/12/29/state-of-the-web-of-apps-devices-and-breakpoints/ Zeldman Responsive design is not dead; it has only begun. It is not a panacea but was never intended to be. It is simply the beginnings of an approach.
26. Why Liquid?
27. web
33. user
34. Ryan Singer twitter.com/rjs/status/323880906559459331
35. PC vs. Smartphone Shipments Source: Canalys 2011
36. Global Mobile vs. Desktop Internet Users Source: Morgan Stanley 2011 overtaking this year?
37. Source: http://www.lukew.com/ff/entry.asp?1597
38. Where are people using mobile devices? Source: Compete's Quarterly Smartphone Report 84% 80% 76% 69% 64% 62% 47% at home during miscellaneous downtime throughout the day waiting in lines of waiting for appointments while shopping at work while watching TV during commute in to work
39. twitter.com/gluca/status/312849923466985472 Gianluca Diegoli I realized that it's the mobile experience that determines what then I use in my desktop. For example, Pinterest for iOS is lousy, and then…
40. hbr.org/2013/01/how-people-really-use-mobile
41. googlemobileads.blogspot.co.uk/2011/04/smartphone-user-study-shows-mobile.html
42. google.com/think/research-studies/creating-moments-that-matter.html
43. www.google.com/think/research-studies/the-new-multi-screen-world-study.html
44. www.google.com/think/research-studies/the-new-multi-screen-world-study.html
45. www.google.com/think/research-studies/the-new-multi-screen-world-study.html
46. www.google.com/think/research-studies/the-new-multi-screen-world-study.html
47. Money. Not only user-experience!
48. CONTEXT A shift in the of web usage
49. we
50. www.slideshare.net/yiibu/pragmatic-responsive-design/
51. Test with real devices!
54. others
55. trentwalton.com/2013/04/10/reorganization/ Organization
56. trentwalton.com/2013/04/10/reorganization/ Organization
57. viljamis.com/blog/2012/responsive-workflow/ Workflow
58. viljamis.com/blog/2012/responsive-workflow/ Workflow
59. daverupert.com/2013/04/responsive-deliverables/ Deliverables
60. styletil.es Deliverables
61. styletil.es Deliverables
62. Tools & Techs
63. Patterns mobiledesignpatterngallery.com
64. Patterns mediaqueri.es
65. Patterns mobilepatterns.com
66. Patterns bradfrost.github.com/this-is-responsive/patterns.html
67. Designing Tools html.adobe.com/edge/reflow/
68. Designing Tools easel.io
69. Designing Tools uxpin.com
70. Designing Tools gridsetapp.com
71. Prototyping Tools solidifyapp.com
72. Prototyping Tools proto.io
73. Prototyping Tools popapp.in
74. Prototyping Tools plunkapp.com
75. Testing Tools studiopress.com/responsive/
76. Testing Tools LiveView For Mac, iPhone & iPad zambetti.com/projects/liveview/
77. NO!
78. VisualDNA
79. • Context is changing. We must embrace it. • Measure/track users in specific devices. • Different approach to quiz & data analysis.
80. mobile.visualdna.com
81. Cristiano Rastelli - Consumer Team THANK YOU
82. http://www.zeldman.com/2011/12/29/state-of-the-web-of-apps-devices-and-breakpoints/ http://www.slideshare.net/yiibu/pragmatic-responsive-design/ http://www.netmagazine.com/opinions/responsive-web-design-boring http://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-difference.php http://markboulton.co.uk/journal/gridset-and-the-red-pill http://www.netmagazine.com/opinions/responsive-web-design-boring http://www.slideshare.net/pkattera/design-process-for-responsive-web-design http://37signals.com/svn/posts/3285-the-typography-and-layout-behind-the-new-signal-vs-noise-redesign http://www.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/ http://trentwalton.com/2013/04/10/reorganization/ http://viljamis.com/blog/2012/responsive-workflow/ http://www.google.com/think/research-studies/the-new-multi-screen-world-study.html Must-Read Nice-to-Read Some references: http://www.lukew.com/ff/entry.asp?1394 http://www.lukew.com/ff/entry.asp?1562 http://www.lukew.com/ff/entry.asp?1436 http://www.alistapart.com/articles/responsive-web-design/
83. http://www.alistapart.com/articles/responsive-comping-obtaining-signoff-with-mockups/ http://www.alistapart.com/articles/the-infinite-grid/ http://www.alistapart.com/articles/uncle-sam-wants-you-to-optimize-your-content-for-mobile/ http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/ http://mobile.smashingmagazine.com/2012/10/24/beyond-common-media-query-breakpoints/ http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ http://www.slideshare.net/livefront/responsive-design-7877412 http://www.slideshare.net/KMcGrane/adapting-ourselves-to-adaptive-content-12133365 http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web http://www.slideshare.net/pkattera/design-process-for-responsive-web-design http://www.slideshare.net/pekkos/mobile-experiences http://www.slideshare.net/bradfrostweb/beyond-media-queries-anatomy-of-an-adaptive-web-design https://speakerdeck.com/scottjehl/responsive-responsible https://speakerdeck.com/erunyon/rebuilding-a-university-homepage-to-be-responsive-twice-in-less-than- a-year https://speakerdeck.com/m83/responsive-webdesing-and-the-little-dirty-secret-behind-fluid-grids http://markboulton.co.uk/journal/adaptive_content_management http://uxdesign.smashingmagazine.com/2012/11/08/ux-design-qa-with-christian-holst/ http://bradfrostweb.com/blog/mobile/planting-the-seed-for-a-responsive-future/ http://www.quora.com/Responsive-Design-vs-Adaptive-Design http://www.html5rocks.com/en/mobile/responsivedesign/ http://www.sazzy.co.uk/2012/02/why-i-cant-design-in-the-browser/ Nice-to-Read (cont.)
84. http://bradfrostweb.com/blog/mobile/planting-the-seed-for-a-responsive-future/ http://techcrunch.com/2012/10/27/tablet-first-mobile-second/ http://www.jordanm.co.uk/post/32866575759/the-airfix-responsive-workflow http://blog.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ http://www.guardian.co.uk/help/developer-blog/2012/oct/18/responsive-design-guardian-introduction http://digital.cabinetoffice.gov.uk/govuk-launch-colophon/ Nice-to-Read (cont.) http://responsive.is/ http://bradfrost.github.com/this-is-responsive/ http://mediaqueri.es/ http://futurefriend.ly/ http://www.mobiledesignpatterngallery.com http://www.mobilepatterns.com Resources http://html.adobe.com/edge/reflow/ http://html.adobe.com/edge/inspect/ http://zambetti.com/projects/liveview/ http://popapp.in http://www.solidifyapp.com http://proto.io https://gridsetapp.com Tools