Responsive web design, l'altra faccia dell'accessibilità

976 views

Published on

Progettare layout per il mobile in modalità responsive. Strategia che permette di ottimizzare i layout per il webn mobile e che puù facilitare una progettazione accessibile

1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
976
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
20
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Responsive web design, l'altra faccia dell'accessibilità

  1. 1. Responsive Web Design, laltra faccia dellaccessibilità Fabrizio Caccavello 3/20 /20 Titolo della presentazionemartedì 23 ottobre 12
  2. 2. 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. 3/20 /20 09/05/1 Titolo della presentazionemartedì 23 ottobre 12
  3. 3. INTERNATIONAL WEBMASTERS ASSOCIATION http://www.iwa.it Partecipazioni internazionali Prima associazione al mondo (dal 1996) che raggruppa chi lavora nel Web, sia nel settore pubblico che privato Obiettivo di IWA è creare rete tra i soci, partecipare allevoluzione della rete e Partecipazioni nazionali divulgare conoscenza tramite i soci con eventi ed iniziative media 3/20 /20 09/05/1 Titolo della presentazionemartedì 23 ottobre 12
  4. 4. INTERNATIONAL WEBMASTERS ASSOCIATION http://www.iwa.it Perché associarsi media partner 1 rete tra professionisti partecipazione a gruppi di lavoro 2 anche internazionali convenzioni per tutela professionalità 3 (esempio: studi legali) quota speciale SMAU: euro 50,00 presso stand IWA 3/20 /20 09/05/1 Titolo della presentazionemartedì 23 ottobre 12
  5. 5. Responsive Web Design, laltra faccia dellaccessibilità CHI SCRIVE LE REGOLE PER PROGETTARE IL WEB E PER L’ACCESSIBILITA’? http://www.w3.org/Translations/WCAG20-it/ Principio 1: Percepibile Le informazioni e i componenti dellinterfaccia utente devono essere presentati agli utenti in modo che possano essere percepiti. Linea guida 1.3 Adattabile: Creare contenuti che possano essere rappresentati in modalità differenti (ad esempio, con layout più semplici), senza perdere informazioni o la struttura. 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  6. 6. Responsive Web Design, laltra faccia dellaccessibilità Mobile First Nel web design pensare prima alla progettazione per il web mobile perché 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  7. 7. Responsive Web Design, laltra faccia dellaccessibilità Mobile First Si prevede che 2014 la navigazione da dispositivi mobili supererà (forse) quella da desktop 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  8. 8. Responsive Web Design, laltra faccia dellaccessibilità Mobile First anche se per ora la marcia di avvicinamento sembra più lenta del previsto 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  9. 9. Responsive Web Design, laltra faccia dellaccessibilità Mobile First ... e dovremmo anche stabilire cosa intendiamo per “navigazione mobile” ... e concentrarci sul contesto d’uso 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  10. 10. Responsive Web Design, laltra faccia dellaccessibilità 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 déjà vu 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  11. 11. Responsive Web Design, laltra faccia dellaccessibilità Mobile First è raffinare progressivamente una strategia per ottenere il massimo dei risultati nella maggior parte dei casi possibili come in una gara di Formula 1 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  12. 12. Responsive Web Design, laltra faccia dellaccessibilità 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 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  13. 13. Responsive Web Design, laltra faccia dellaccessibilità Mobile First - il budget il costo è relativo alla progettazione consapevole, professionalmente evoluta 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  14. 14. Responsive Web Design, laltra faccia dellaccessibilità 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 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  15. 15. Responsive Web Design, laltra faccia dellaccessibilità Content First 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  16. 16. Responsive Web Design, laltra faccia dellaccessibilità Lo schermo http://resizemybrowser.com/ 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  17. 17. Responsive Web Design, laltra faccia dellaccessibilità Lo schermo non possiamo pensare di testare tutti i dispositivi sul mercato ...diamoci delle priorità 1 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  18. 18. Responsive Web Design, laltra faccia dellaccessibilità Breakpoint principali ma ognuno potrà aggiungere o eliminare altri breakpoint in base al proprio progetto 320px 480px 768px 1024px Progressive enhancement 1 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  19. 19. Responsive Web Design, laltra faccia dellaccessibilità 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){ ... } 1 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  20. 20. Responsive Web Design, laltra faccia dellaccessibilità 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 2 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  21. 21. Responsive Web Design, laltra faccia dellaccessibilità 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 2 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  22. 22. Responsive Web Design, laltra faccia dellaccessibilità un sito non è una brochure monitor 28 pollici 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  23. 23. Responsive Web Design, laltra faccia dellaccessibilità un sito non è una brochure monitor 19 pollici 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  24. 24. Responsive Web Design, laltra faccia dellaccessibilità un sito non è una brochure smartphone 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  25. 25. Responsive Web Design, laltra faccia dellaccessibilità un sito non è una brochure monitor 19 pollici caratteri molto ingranditi 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  26. 26. Responsive Web Design, laltra faccia dellaccessibilità cos’è questa confusione? semplicemente la posta di Google ingrandita come farebbe un ipovedente 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  27. 27. Responsive Web Design, laltra faccia dellaccessibilità Framework http://960.gs/ http://yuilibrary.com/yui/docs/cssgrids/ http://www.netmagazine.com/features/50- fantastic-tools-responsive-web-design http://www.responsivegridsystem.com/ 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  28. 28. Responsive Web Design, laltra faccia dellaccessibilità Framework http://www.responsivegridsystem.com/ 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  29. 29. Responsive Web Design, laltra faccia dellaccessibilità Criticità ? HTML5 non è ancora uno standard 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  30. 30. Responsive Web Design, laltra faccia dellaccessibilità La criticità delle immagini immagini fluide img { max-width: 100%; } http://www.italianalistapart.com/articoli/42-numero-29-15-giugno-2011/168-immagini-fluide una possibile soluzione http://adaptive-images.com/ 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  31. 31. Responsive Web Design, laltra faccia dellaccessibilità Criticità i framework possono importare un bel mucchio di codice inutile 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  32. 32. Responsive Web Design, laltra faccia dellaccessibilità un passo alla volta accontentarsi del minimo non fare tanto per fare Progressive enhancement 3 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12
  33. 33. Responsive Web Design, laltra faccia dellaccessibilità cfabry 3/20 /20 09/05/1 Fabrizio Caccavello Titolo della presentazionemartedì 23 ottobre 12

×