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.
   

   View Slide

2. Index
   • Premises
   • Responsive. Adaptive. Mobile.
   • Liquid web. Numbers.
   • Tools & Techs.
   • VisualDNA.
   

   View Slide

3. WEB
   We are talking about
   + +
   * but not only
   *
   

   View Slide

4. Responsive
   Adaptive
   Mobile*
   * first
   

   View Slide

5. www.alistapart.com/articles/responsive-web-design/
   

   View Slide

6. www.abookapart.com/products/responsive-web-design
   

   View Slide

7. www.lukew.com/ff/entry.asp?933
   

   View Slide

8. www.abookapart.com/products/mobile-first
   

   View Slide

9. twitter.com/lukew/status/262920585938612224/photo/1/large
   

   View Slide

10. RESPONSIVE
    Vs.
    ADAPTIVE
    

    View Slide

11. RESPONSIVE
    Vs.
    ADAPTIVE
    RWD
    MDWD
    MFWD
    RESS
    PRD
    

    View Slide

12. ADAPTIVE
    RESPONSIVE
    

    View Slide

13. ADAPTIVE
    RESPONSIVE
    FRAMEWORK
    boilerplate
    PATTERN
    libraries
    MOBILE
    FIRST
    

    View Slide

14. The RWD effect
    

    View Slide

15. bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
    

    View Slide

16. futurefriend.ly
    

    View Slide

17. techcrunch.com/2012/10/27/tablet-first-mobile-second/
    

    View Slide

18. www.welcomebrand.co.uk/thoughts/the-responsive-web-will-be-99-9-typography/
    

    View Slide

19. The RWD limits
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

22. Using a predefined grid seems
    to make as much sense as using a
    predefined colour scheme.
    www.alistapart.com/articles/the-infinite-grid/
    

    View Slide

23. Luke Wroblewski
    twitter.com/lukew/status/268406393944559616
    

    View Slide

24. one design fits all sizes
    

    View Slide

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.
    

    View Slide

26. Why Liquid?
    

    View Slide

27. web
    

    View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. user
    

    View Slide

34. Ryan Singer
    twitter.com/rjs/status/323880906559459331
    

    View Slide

35. PC vs. Smartphone Shipments
    Source: Canalys 2011
    

    View Slide

36. Global Mobile vs. Desktop Internet Users
    Source: Morgan Stanley 2011
    overtaking this year?
    

    View Slide

37. Source: http://www.lukew.com/ff/entry.asp?1597
    

    View Slide

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
    

    View Slide

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…
    

    View Slide

40. hbr.org/2013/01/how-people-really-use-mobile
    

    View Slide

41. googlemobileads.blogspot.co.uk/2011/04/smartphone-user-study-shows-mobile.html
    

    View Slide

42. google.com/think/research-studies/creating-moments-that-matter.html
    

    View Slide

43. www.google.com/think/research-studies/the-new-multi-screen-world-study.html
    

    View Slide

44. www.google.com/think/research-studies/the-new-multi-screen-world-study.html
    

    View Slide

45. www.google.com/think/research-studies/the-new-multi-screen-world-study.html
    

    View Slide

46. www.google.com/think/research-studies/the-new-multi-screen-world-study.html
    

    View Slide

47. Money. Not only user-experience!
    

    View Slide

48. CONTEXT
    A shift in the
    of web usage
    

    View Slide

49. we
    

    View Slide

50. www.slideshare.net/yiibu/pragmatic-responsive-design/
    

    View Slide

51. Test with real devices!
    

    View Slide

52. View Slide

53. View Slide

54. others
    

    View Slide

55. trentwalton.com/2013/04/10/reorganization/
    Organization
    

    View Slide

56. trentwalton.com/2013/04/10/reorganization/
    Organization
    

    View Slide

57. viljamis.com/blog/2012/responsive-workflow/
    Workflow
    

    View Slide

58. viljamis.com/blog/2012/responsive-workflow/
    Workflow
    

    View Slide

59. daverupert.com/2013/04/responsive-deliverables/
    Deliverables
    

    View Slide

60. styletil.es
    Deliverables
    

    View Slide

61. styletil.es
    Deliverables
    

    View Slide

62. Tools & Techs
    

    View Slide

63. Patterns
    mobiledesignpatterngallery.com
    

    View Slide

64. Patterns
    mediaqueri.es
    

    View Slide

65. Patterns
    mobilepatterns.com
    

    View Slide

66. Patterns
    bradfrost.github.com/this-is-responsive/patterns.html
    

    View Slide

67. Designing Tools
    html.adobe.com/edge/reflow/
    

    View Slide

68. Designing Tools
    easel.io
    

    View Slide

69. Designing Tools
    uxpin.com
    

    View Slide

70. Designing Tools
    gridsetapp.com
    

    View Slide

71. Prototyping Tools
    solidifyapp.com
    

    View Slide

72. Prototyping Tools
    proto.io
    

    View Slide

73. Prototyping Tools
    popapp.in
    

    View Slide

74. Prototyping Tools
    plunkapp.com
    

    View Slide

75. Testing Tools
    studiopress.com/responsive/
    

    View Slide

76. Testing Tools
    LiveView
    For Mac, iPhone & iPad
    zambetti.com/projects/liveview/
    

    View Slide

77. NO!
    

    View Slide

78. VisualDNA
    

    View Slide

79. • Context is changing.
    We must embrace it.
    • Measure/track users
    in specific devices.
    • Different approach to
    quiz & data analysis.
    

    View Slide

80. mobile.visualdna.com
    

    View Slide

81. Cristiano Rastelli - Consumer Team
    THANK YOU
    

    View Slide

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/
    

    View Slide

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.)
    

    View Slide

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
    

    View Slide