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.

1. Mobile Last
CrsIao RatL
H-Farm – Tenuta Ca’ Tron
Sabato 17 novembre 2012

2. #mob01 @areaweb

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IN DeEOpET Tt & DeU

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é,
il diluvio…

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. LUKE wroblewski
twitter.com/lukew/status/268406393944559616

29. RESPONSIVE RWD
MDWD
Vs. MFWD
RESS
ADAPTIVE PRD

30. ADAPTIVE
RESPONSIVE

31. MOBILE PATTERN
FIRST libraries
ADAPTIVE FRAMEWORK
RESPONSIVE boilerplate

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 contenuti
obiettivi architettura delle informazioni
user
DESIGN experience

45. BUDGET (tempo/soldi)
requisiti contenuti
obiettivi architettura delle informazioni
user
DESIGN experience

46. mark boulton
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.
markboulton.co.uk/journal/gridset-and-the-red-pill

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

48. BUDGET (tempo/soldi)
requisiti contenuti
obiettivi architettura delle informazioni
user
DESIGN experience

49. BUDGET (tempo/soldi)
requisiti contenuti
obiettivi architettura delle informazioni
user
DESIGN experience

50. Content First

51. BUDGET (tempo/soldi)
requisiti contenuti
obiettivi architettura delle informazioni
user
DESIGN experience

52. BUDGET (tempo/soldi)
requisiti contenuti
obiettivi architettura delle informazioni
user
DESIGN experience

53. 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.
www.netmagazine.com/opinions/responsive-web-design-boring

55. BUDGET (tempo/soldi)
requisiti contenuti
obiettivi architettura delle informazioni
user
DESIGN experience

59. 37signals.com/svn/posts/3285-the-typography-and-layout-behind-the-new-signal-vs-noise-redesign

60. BUDGET (tempo/soldi)
requisiti contenuti
obiettivi architettura delle informazioni
user
DESIGN 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. 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.
www.zeldman.com/2011/12/29/state-of-the-web-of-apps-devices-and-breakpoints/

80. 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.
www.zeldman.com/2011/12/29/state-of-the-web-of-apps-devices-and-breakpoints/

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

83. mobile ?
FIRST / last / while

84. il punto è… USE YOUR
HEAD
FIRST

85. grazie
IsiO StlI
W.Dio.E

86. credits:
Jacopo Romei + Sam Reghenzi

87. referenze:
Must-Read
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/
Nice-to-Read
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. Nice-to-Read (cont.)
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/

89. Nice-to-Read (cont.)
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/
Resources
http://responsive.is/
http://bradfrost.github.com/this-is-responsive/patterns.html
http://mediaqueri.es/
http://futurefriend.ly/

90. Per chi volesse approfondire...
www.webdebs.org