Mobile last - (ITA)

Un recente libro di Luke Wroblewski, intitolato "Mobile First" ha coniato questa definizione di un approccio alla progettazione che poi è stato dato per scontato dalla maggior parte degli interaction/ux/web designer. In questo talk vorrei invece portare la mia esperienza nella realizzazione di diversi siti web "responsive" che è invece diametralmente opposto, spiegando le ragioni che mi hanno portato a questa scelta e il metodo che ho adottato e consolidato negli ultimi mesi.

Transcript

1. H-Farm – Tenuta Ca’ Tron Sabato 17 novembre 2012 CrsIao RatL Mobile Last
2. @areaweb #mob01
3. HeL
4. IsiO Stli LiiNa bAgdn DeiN & dvLomN ArhTetE & cnN
6. w DeEOpET IneFae & wb Dein IneAcin/U dsG
7. DeEOpET Tt & DeU DeIN
8. Mobile first reality check mobile last conclusioni
9. attenzione
11. MOBILE FIRST
12. www.lukew.com/ff/entry.asp?933
13. www.abookapart.com/products/mobile-first
14. twitter.com/lukew/status/262920585938612224/photo/1/large
17. Dopodiché, i di uvio…
18. www.alistapart.com/articles/responsive-web-design/
19. www.abookapart.com/products/responsive-web-design
20. viljamis.com
21. bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
22. www.alistapart.com/articles/responsive-comping-obtaining-signoff-with-mockups/
23. www.alistapart.com/articles/the-infinite-grid/
24. futurefriend.ly
25. techcrunch.com/2012/10/27/tablet-first-mobile-second/
27. Buzzword?
28. twitter.com/lukew/status/268406393944559616 LUKE wroblewski
29. RESPONSIVE Vs. ADAPTIVE RWD MDWD MFWD RESS PRD
30. ADAPTIVE RESPONSIVE
31. ADAPTIVE RESPONSIVE FRAMEWORK boilerplate PATTERN libraries MOBILE FIRST
32. REALITY CHECK
34. viljamis.com
35. bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
36. 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/
38. www.alistapart.com/articles/the-infinite-grid/
39. Using a predefined grid seems to make as much sense as using a predefined colour scheme.
42. one design fits all sizes
43. Welcome to Reality
44. BUDGET (tempo/soldi) requisiti obiettivi contenuti architettura delle informazioni DESIGN user experience
45. BUDGET (tempo/soldi) requisiti obiettivi contenuti architettura delle informazioni DESIGN user experience
46. 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
47. www.slideshare.net/yiibu/pragmatic-responsive-design/
48. BUDGET (tempo/soldi) requisiti obiettivi contenuti architettura delle informazioni DESIGN user experience
49. BUDGET (tempo/soldi) requisiti obiettivi contenuti architettura delle informazioni DESIGN user experience
50. Content First
51. BUDGET (tempo/soldi) requisiti obiettivi contenuti architettura delle informazioni DESIGN user experience
52. BUDGET (tempo/soldi) requisiti obiettivi contenuti architettura delle informazioni DESIGN user experience
53. www.netmagazine.com/opinions/responsive-web-design-boring LONGNECKER I'm just going to come out and say what some of us have been thinking about responsive design. It breeds boring. Every site we build should tell our client's story, and the visual language we use is a large part of that. Not the mathematical accuracy of our grid. We have to make sure we don't sacrifice their story for a responsive design. Boring is still boring, no matter what screen size. I worry that starting with mobile first keeps us from designing to our full potential. So far, my internet searching hasn't proven me wrong: most responsive sites aren't bad, but they just don't capture your attention visually.
55. BUDGET (tempo/soldi) requisiti obiettivi contenuti architettura delle informazioni DESIGN user experience
59. 37signals.com/svn/posts/3285-the-typography-and-layout-behind-the-new-signal-vs-noise-redesign
60. BUDGET (tempo/soldi) requisiti obiettivi contenuti architettura delle informazioni DESIGN user experience waterfall
61. MOBILE LAST
63. HTML(5) LESS/CSS @media responsive
64. HTML(5) LESS/CSS @media responsive
65. HTML(5) LESS/CSS @media responsive
66. HTML(5) LESS/CSS @media responsive
67. HTML(5) LESS/CSS @media responsive
68. For Real©
70. www.webdebs.org
71. www.relais-abbazia.it
72. www.ermesponti.it
76. www.avanscoperta.it
78. CONCLUSIONI
79. www.zeldman.com/2011/12/29/state-of-the-web-of-apps-devices-and-breakpoints/ 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. Zeldman
80. www.zeldman.com/2011/12/29/state-of-the-web-of-apps-devices-and-breakpoints/ Zeldman Designers who persist in responsive or even adaptive design based on iPhone, iPad, and leading Android breakpoints will help accelerate the settling out of the market and its resolution toward a semi- standard set of viewports. This I believe.
82. www.slideshare.net/yiibu/pragmatic-responsive-design/
83. FIRST / last / while mobile?
84. HEAD FIRST USE YOUR il punto è…
85. IsiO StlI grazie W.Dio.E
86. credits: Jacopo Romei + Sam Reghenzi
87. 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/ Must-Read Nice-to-Read referenze: 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/
88. 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.)
89. 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/patterns.html http://mediaqueri.es/ http://futurefriend.ly/ Resources
90. www.webdebs.org Per chi volesse approfondire...