Adaptive, Responsive, Mobile. A liquid web.

Adaptive, Responsive, Mobile. A liquid web.

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

A34bc430e87a74eba5d92719ea92cfdc?s=128

Cristiano Rastelli

April 17, 2013
Tweet

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

  28. None
  29. None
  30. None
  31. None
  32. None
  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!

  52. None
  53. None
  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