Mobile last

1,332 views

Published on

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.

Published in: Technology
  • @didoo Ah, ma anche io sono super allergico alle soluzioni che vanno bene per tutto! E poi non vanno bene per niente :) Nutro però dei dubbi sul legarsi, per l'aspetto breakpoint, ai pixel: il rischio è di dovere tenere traccia di una marea di dispositivi... Usare EM per i breakpoint - e REM, quando ha senso, nei fogli stile - non vuole dire in ogni caso dovere costruire sulla 'liquidità' assoluta. Semplicemente lo vedo come un approccio meno pixel/device/based per i breakpoint.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @ilpiac sono un po' allergico alle pagine em-based, memore del 'sacro graal' delle pagine interamente liquide (infatti vedi la slide su questo tema). Anche se concordo con te che per siti molto text-based possa avere un senso. Ma nella stragrande maggioranza dei casi, la complessità che ne deriva non compensa lo sforzo. Il gioco non vale la candela.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @haraldf It was a joke! Since in almost every presentation I took part in the last months Kahneman was cited, I decided to put a fake slide, saying that I tried to find a good reason to quote him about mobile, but I could not, so in any case I have made a slide with him and I could feel satisfied anyway.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Bella presentazione Cristiano! Mo' mi leggo anche il PDF perché le note sono indispensabili per capire bene il tuo percorso e ragionamento.
    Andare dietro ai pixel dei diversi dispositivi, sempre più numerosi in uscita e con caratteristiche sempre diverse, costituisce un deliberato tentativo di suicidio :)
    Cosa da fare rimpiangere la guerra tra browser, dove le variabili in gioco - le singolarità/diversità tra IE, Netscape, Mozilla, Firefox & co - erano minori in numero!
    Qui stiamo appunto parlando di centinaia di device, non solo di iPhone e iPad, destinati a diventare sempre più.
    Al di là della condivisione del tuo pensiero, io butto lì due altri elementi che reputo interessanti: EM e REM, con tutte le peculiarità che queste due misure portano in tema di breakpoint e misurazione dei diversi elementi di un sito (penso soprattutto alle immagini che vengono pur sempre create con H e W in pixel. Ma sulle immagini Responsive andrebbe aperto un capitolo a parte...).
    Per siti ad alta densità di contenuti testuali, riterrei utile dare spazio a EM e REM che portano con sé una maggiore attenzione al discorso leggibilità: che dimensione di carattere ha senso per un testo leggibile su un dispositivo di un certo tipo? Quanti caratteri ha senso mettere in riga se voglio ottenere un testo leggibile, quindi né troppo lungo né troppo corto? E paranoie così :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Mobile last

  1. 1. Mobile LastCrsIao RatL H-Farm – Tenuta Ca’ Tron Sabato 17 novembre 2012
  2. 2. #mob01 @areaweb
  3. 3. HeL
  4. 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
  5. 5. w DeEOpETIneFae & wb DeinIneAcin/U dsG
  6. 6. DeIN DeEOpET Tt & DeU
  7. 7. Mobile firstreality checkmobile lastconclusioni
  8. 8. attenzione
  9. 9. MOBILE FIRST
  10. 10. www.lukew.com/ff/entry.asp?933
  11. 11. www.abookapart.com/products/mobile-first
  12. 12. twitter.com/lukew/status/262920585938612224/photo/1/large
  13. 13. Dopodiché,il diluvio…
  14. 14. www.alistapart.com/articles/responsive-web-design/
  15. 15. www.abookapart.com/products/responsive-web-design
  16. 16. viljamis.com
  17. 17. bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  18. 18. www.alistapart.com/articles/responsive-comping-obtaining-signoff-with-mockups/
  19. 19. www.alistapart.com/articles/the-infinite-grid/
  20. 20. futurefriend.ly
  21. 21. techcrunch.com/2012/10/27/tablet-first-mobile-second/
  22. 22. Buzzword?
  23. 23. LUKE wroblewskitwitter.com/lukew/status/268406393944559616
  24. 24. RESPONSIVE RWD MDWD Vs. MFWD RESS ADAPTIVE PRD
  25. 25. ADAPTIVE RESPONSIVE
  26. 26. MOBILE PATTERN FIRST libraries ADAPTIVE FRAMEWORKRESPONSIVE boilerplate
  27. 27. REALITY CHECK
  28. 28. viljamis.com
  29. 29. bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  30. 30. 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/
  31. 31. www.alistapart.com/articles/the-infinite-grid/
  32. 32. Using a predefined grid seemsto make as much sense as using a predefined colour scheme.
  33. 33. one design fits all sizes
  34. 34. Welcometo Reality
  35. 35. BUDGET (tempo/soldi)requisiti contenutiobiettivi architettura delle informazioni userDESIGN experience
  36. 36. BUDGET (tempo/soldi)requisiti contenutiobiettivi architettura delle informazioni userDESIGN experience
  37. 37. mark boultonResponsive 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. Insome cases, too much. Or rather, we’re spending time on the wrong things. markboulton.co.uk/journal/gridset-and-the-red-pill
  38. 38. www.slideshare.net/yiibu/pragmatic-responsive-design/
  39. 39. BUDGET (tempo/soldi)requisiti contenutiobiettivi architettura delle informazioni userDESIGN experience
  40. 40. BUDGET (tempo/soldi)requisiti contenutiobiettivi architettura delle informazioni userDESIGN experience
  41. 41. Content First
  42. 42. BUDGET (tempo/soldi)requisiti contenutiobiettivi architettura delle informazioni userDESIGN experience
  43. 43. BUDGET (tempo/soldi)requisiti contenutiobiettivi architettura delle informazioni userDESIGN experience
  44. 44. LONGNECKERIm 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 clients story, and the visuallanguage we use is a large part of that. Not the mathematicalaccuracy of our grid. We have to make sure we dont 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 designingto our full potential. So far, my internet searching hasnt proven me wrong: most responsive sites arent bad, but they just dont capture your attention visually. www.netmagazine.com/opinions/responsive-web-design-boring
  45. 45. BUDGET (tempo/soldi)requisiti contenutiobiettivi architettura delle informazioni userDESIGN experience
  46. 46. 37signals.com/svn/posts/3285-the-typography-and-layout-behind-the-new-signal-vs-noise-redesign
  47. 47. BUDGET (tempo/soldi)requisiti contenutiobiettivi architettura delle informazioni userDESIGN experiencewaterfall
  48. 48. MOBILE LAST
  49. 49. HTML(5)LESS/CSS@mediaresponsive
  50. 50. HTML(5)LESS/CSS@mediaresponsive
  51. 51. HTML(5)LESS/CSS@mediaresponsive
  52. 52. HTML(5)LESS/CSS@mediaresponsive
  53. 53. HTML(5)LESS/CSS@mediaresponsive
  54. 54. For Real ©
  55. 55. www.webdebs.org
  56. 56. www.relais-abbazia.it
  57. 57. www.ermesponti.it
  58. 58. www.avanscoperta.it
  59. 59. CONCLUSIONI
  60. 60. ZeldmanResponsive 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/
  61. 61. 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/
  62. 62. www.slideshare.net/yiibu/pragmatic-responsive-design/
  63. 63. mobile ?FIRST / last / while
  64. 64. il punto è… USE YOUR HEAD FIRST
  65. 65. grazieIsiO StlI W.Dio.E
  66. 66. credits:Jacopo Romei + Sam Reghenzi
  67. 67. referenze:Must-Readhttp://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-boringhttp://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-difference.phphttp://markboulton.co.uk/journal/gridset-and-the-red-pillhttp://www.netmagazine.com/opinions/responsive-web-design-boringhttp://www.slideshare.net/pkattera/design-process-for-responsive-web-designhttp://37signals.com/svn/posts/3285-the-typography-and-layout-behind-the-new-signal-vs-noise-redesignhttp://www.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/Nice-to-Readhttp://www.lukew.com/ff/entry.asp?1394http://www.lukew.com/ff/entry.asp?1562http://www.lukew.com/ff/entry.asp?1436http://www.alistapart.com/articles/responsive-web-design/
  68. 68. 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-7877412http://www.slideshare.net/KMcGrane/adapting-ourselves-to-adaptive-content-12133365http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-webhttp://www.slideshare.net/pkattera/design-process-for-responsive-web-designhttp://www.slideshare.net/pekkos/mobile-experienceshttp://www.slideshare.net/bradfrostweb/beyond-media-queries-anatomy-of-an-adaptive-web-designhttps://speakerdeck.com/scottjehl/responsive-responsiblehttps://speakerdeck.com/erunyon/rebuilding-a-university-homepage-to-be-responsive-twice-in-less-than-a-yearhttps://speakerdeck.com/m83/responsive-webdesing-and-the-little-dirty-secret-behind-fluid-gridshttp://markboulton.co.uk/journal/adaptive_content_managementhttp://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-Designhttp://www.html5rocks.com/en/mobile/responsivedesign/http://www.sazzy.co.uk/2012/02/why-i-cant-design-in-the-browser/
  69. 69. 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-workflowhttp://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-introductionhttp://digital.cabinetoffice.gov.uk/govuk-launch-colophon/Resourceshttp://responsive.is/http://bradfrost.github.com/this-is-responsive/patterns.htmlhttp://mediaqueri.es/http://futurefriend.ly/
  70. 70. Per chi volesse approfondire... www.webdebs.org

×