Responsive Web Design

1,344 views
1,286 views

Published on

La navigazione in internet da dispositivi mobili è esplosa negli ultimi anni e ha un trend di crescita molto importante. Sviluppando design per il web è giunto quindi il momento di pensare:  "mobile-first"? Ossia, di dare importanza primaria ai design che si  adattano principalmente ai dispositivi mobili?
In questo workshop vedremo che, da un punto di vista tecnologico, il "responsive design" potrebbe risultare l'uovo di colombo per risolvere le annose ricerche di compatibilità cross-browser e cross-device, ma che potrebbe introdurre ed evidenziare problematiche strategiche tutt'altro che secondarie.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,344
On SlideShare
0
From Embeds
0
Number of Embeds
71
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive Web Design

  1. 1. Responsive design il web mobile diventa primo La navigazione in internet da dispositivi mobili è esplosa negli ultimi anni e ha un trend di crescita molto importante. Sviluppando design per il web è giunto quindi il momento di pensare:  "mobile-first"? Ossia, di dare importanza primaria ai design che si  adattano principalmente ai dispositivi mobili? In questo workshop vedremo che, da un punto di vista tecnologico, il "responsive design" potrebbe risultare luovo di colombo per risolvere le annose ricerche di compatibilità cross-browser e cross-device, ma che potrebbe introdurre ed evidenziare problematiche strategiche tuttaltro che secondarie. Fabrizio Caccavellolunedì 18 giugno 12
  2. 2. Responsive design il web mobile diventa primo About me: Fabrizio Caccavello Web Project Manager e User Experience Designer. Mi occupo di strategie di comunicazione online, e di sviluppo di applicazioni web con particolare riferimento ai temi dellaccessibilità. Cerco di applicare ai miei progetti processi di semplificazione e riduzione in modo da renderli più efficienti e semplici. Sono amministratore e fondatore di Akebia società di servizi per il web. Sono membro del Consiglio Direttivo di IWA Italy. Sono relatore di IWA/HWG ai workshop formativi di SMAU.lunedì 18 giugno 12
  3. 3. Responsive design il web mobile diventa primo IWA/HWG è un’Associazione professionale no profit riconosciuta leader mondiale nella fornitura dei principi e delle Partecipazioni certificazioni di formazione per i professionisti della Rete Internet; è presente in 100 paesi, con 130 sedi ufficiali in rappresentanza di più di 165.000 associati. La sua missione: • Fornire programmi formativi di qualità; • Fornire agli associati supporto e collaborazione a livello regionale, nazionale e internazionale, nonché un marchio di Partecipazioni affiliazione riconosciuto a livello mondiale; • Promuovere i principi universali di etica e di pratica professionale per tutti i professionisti della Rete Internet; • Fornire supporto per la definizione e lo studio di normative nei Paesi in cui è presente Network: http://www.iwa.it http://blog.iwa.it http://webaccessibile.org http://skillprofiles.eulunedì 18 giugno 12
  4. 4. Responsive design il web mobile diventa primo Perché IWA? • Fare rete tra professionisti – Scambiarsi informazioni / esperienze – Condividere buone pratiche di lavoro • Apprendere – Consultare documentazione condivisa – Discutere con gli altri soci – Partecipare ad eventi formativi / informativi • Divulgare – Effetto “ebola”: condividere la conoscenza – Proporsi come discenti per seminari e corsi Fabrizio Caccavello fabrizio@akebia.it cfabry 4lunedì 18 giugno 12
  5. 5. Responsive design il web mobile diventa primo Mobile First Nel web design pensare prima alla progettazione per il web mobile perché Fabrizio Caccavello fabrizio@akebia.it cfabry 5lunedì 18 giugno 12
  6. 6. Responsive design il web mobile diventa primo Mobile First Si prevede che 2014 la navigazione da dispositivi mobili supererà (forse) quella da desktop Fabrizio Caccavello fabrizio@akebia.it cfabry 6lunedì 18 giugno 12
  7. 7. Responsive design il web mobile diventa primo Mobile First anche se per ora la marcia di avvicinamento sembra più lenta del previsto Fabrizio Caccavello fabrizio@akebia.it cfabry 7lunedì 18 giugno 12
  8. 8. Responsive design il web mobile diventa primo Mobile First ... e dovremmo anche stabilire cosa intendiamo per “navigazione mobile” ... e concentrarci sul contesto d’uso Fabrizio Caccavello fabrizio@akebia.it cfabry 8lunedì 18 giugno 12
  9. 9. Responsive design il web mobile diventa primo COSA C’È DI NUOVO nell’idea di pensare prima al mobile? NIENTE TUTTO Per chi ha sempre pensato con Il responsive design è l’accessibilità in testa una strategia e molto può anche essere un poco una tecnica raffinato deja vu Fabrizio Caccavello fabrizio@akebia.it cfabry 9lunedì 18 giugno 12
  10. 10. Responsive design il web mobile diventa primo Mobile First è raffinare progressivamente una strategia per ottenere il massimo dei risultati nella maggior parte degli casi possibili come in una gara di Formula 1 Fabrizio Caccavello fabrizio@akebia.it cfabry 10lunedì 18 giugno 12
  11. 11. Responsive design il web mobile diventa primo Mobile First - il budget l’accessibilità non ha un costo l’approccio mobile first un buon progetto web è pensato non ha un costo già accessibile e non è ipotizzabile aggiuntivo può essere una una cosa a minor prezzo non strategia di sviluppo accessibile standard 2000 2012 Fabrizio Caccavello fabrizio@akebia.it cfabry 11lunedì 18 giugno 12
  12. 12. Responsive design il web mobile diventa primo Mobile First - il budget il costo è relativo alla progettazione consapevole, professionalmente evoluta Fabrizio Caccavello fabrizio@akebia.it cfabry 12lunedì 18 giugno 12
  13. 13. Responsive design il web mobile diventa primo Content First partire dai contenuti significa concentrarsi su ciò che è veramente importante e tralasciare i dettagli o la tecnologia con la quale si realizzeranno le strutture che strategicamente è esattamente l’opposto di quando si parte dalla scelta di un tema da scaricare per un CMS Fabrizio Caccavello fabrizio@akebia.it cfabry 13lunedì 18 giugno 12
  14. 14. Responsive design il web mobile diventa primo Content First Fabrizio Caccavello fabrizio@akebia.it cfabry 14lunedì 18 giugno 12
  15. 15. Responsive design il web mobile diventa primo Lo schermo http://resizemybrowser.com/ Fabrizio Caccavello fabrizio@akebia.it cfabry 15lunedì 18 giugno 12
  16. 16. Responsive design il web mobile diventa primo Lo schermo non possiamo pensare di testare tutti i dispositivi sul mercato ...diamoci delle priorità Fabrizio Caccavello fabrizio@akebia.it cfabry 16lunedì 18 giugno 12
  17. 17. Responsive design il web mobile diventa primo Breakpoint principali ma ognuno potrà aggiungere o eliminare altri breakpoint in base al proprio progetto 320px 480px 768px 1024px Progressive enhancement Fabrizio Caccavello fabrizio@akebia.it cfabry 17lunedì 18 giugno 12
  18. 18. Responsive design il web mobile diventa primo Partiamo con il piede giusto user agent $iphone = strpos($_SERVER[HTTP_USER_AGENT],"iPhone"); Stiamo pensando $android = strpos($_SERVER[HTTP_USER_AGENT],"Android"); $palmpre = strpos($_SERVER[HTTP_USER_AGENT],"webOS"); di indirizzare i $berry = strpos($_SERVER[HTTP_USER_AGENT],"BlackBerry"); device mobile $ipod = strpos($_SERVER[HTTP_USER_AGENT],"iPod"); verso siti dedicati? $ipad = strpos($_SERVER[HTTP_USER_AGENT],"iPad"); if ($iphone || $android || $palmpre || $ipod || $berry || $ipad == true){ ... } Fabrizio Caccavello fabrizio@akebia.it cfabry 18lunedì 18 giugno 12
  19. 19. Responsive design il web mobile diventa primo Partiamo con il piede giusto E’ giusto mantenere la stessa user experience? mantenere non mantenere perché l’utente di solito ha già avuto una UX se in fase di progettazione si è già in modalità desktop, proporgli una UX individuata una precisa strategia di completamente diversa potrebbe comunicazione da destinare all’utente disorientarlo mobile Un progetto web è strategia e comunicazione, una diversa UX potrebbe modificare le strategie studiate per il desktop Fabrizio Caccavello fabrizio@akebia.it cfabry 19lunedì 18 giugno 12
  20. 20. Responsive design il web mobile diventa primo Partiamo con il piede giusto media query @media screen and (min-width: 480px) { ... }   @media screen and (min-width: 768px) { ... }   @media screen and (min-width: 1024px) { ... }   @media screen and (min-width: 1200px) { ... } possiamo modellare il layout in base alle dimensioni del dispositivo Fabrizio Caccavello fabrizio@akebia.it cfabry 20lunedì 18 giugno 12
  21. 21. Responsive design il web mobile diventa primo Partiamo con il piede giusto Fabrizio Caccavello fabrizio@akebia.it cfabry 21lunedì 18 giugno 12
  22. 22. Responsive design il web mobile diventa primo Partiamo con il piede giusto Fabrizio Caccavello fabrizio@akebia.it cfabry 22lunedì 18 giugno 12
  23. 23. Responsive design il web mobile diventa primo La criticità delle immagini immagini fluide img { max-width: 100%; } http://www.italianalistapart.com/articoli/42-numero-29-15-giugno-2011/168-immagini-fluide Fabrizio Caccavello fabrizio@akebia.it cfabry 23lunedì 18 giugno 12
  24. 24. Responsive design il web mobile diventa primo un passo alla volta accontentarsi del minimo non fare tanto per fare Progressive enhancement Fabrizio Caccavello fabrizio@akebia.it cfabry 24lunedì 18 giugno 12
  25. 25. Responsive design il web mobile diventa primo la riscossa dell’accessibilità Fabrizio Caccavello fabrizio@akebia.it cfabry 25lunedì 18 giugno 12
  26. 26. Responsive design il web mobile diventa primo Fabrizio Caccavello cfabry Fabrizio Caccavello fabrizio@akebia.it cfabry 26lunedì 18 giugno 12

×