Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Cristiano Rastelli

April 17, 2013
Tweet

More Decks by Cristiano Rastelli

Other Decks in Technology

Transcript

  1. 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
  2. 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/
  3. Using a predefined grid seems to make as much sense

    as using a predefined colour scheme. www.alistapart.com/articles/the-infinite-grid/
  4. 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.
  5. web

  6. 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
  7. 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…
  8. we

  9. NO!

  10. • Context is changing. We must embrace it. • Measure/track

    users in specific devices. • Different approach to quiz & data analysis.
  11. 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.)