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
Responsive web design, l'altra faccia dell'accessibilità
1. Responsive Web Design, l'altra faccia dell'accessibilità
Fabrizio Caccavello
3/20
/20
Titolo della presentazione
martedì 23 ottobre 12
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 dell'accessibilità.
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 presentazione
martedì 23 ottobre 12
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 all'evoluzione della rete e
Partecipazioni nazionali divulgare conoscenza tramite i soci con
eventi ed iniziative
media
3/20
/20
09/05/1 Titolo della presentazione
martedì 23 ottobre 12
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 presentazione
martedì 23 ottobre 12
5. Responsive Web Design, l'altra faccia dell'accessibilità
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 dell'interfaccia 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 presentazione
martedì 23 ottobre 12
6. Responsive Web Design, l'altra faccia dell'accessibilità
Mobile First
Nel web design pensare prima alla
progettazione per il web mobile
perché
3/20
/20
09/05/1 Fabrizio Caccavello
Titolo della presentazione
martedì 23 ottobre 12
7. Responsive Web Design, l'altra faccia dell'accessibilità
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 presentazione
martedì 23 ottobre 12
8. Responsive Web Design, l'altra faccia dell'accessibilità
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 presentazione
martedì 23 ottobre 12
9. Responsive Web Design, l'altra faccia dell'accessibilità
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 presentazione
martedì 23 ottobre 12
10. Responsive Web Design, l'altra faccia dell'accessibilità
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 presentazione
martedì 23 ottobre 12
11. Responsive Web Design, l'altra faccia dell'accessibilità
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 presentazione
martedì 23 ottobre 12
12. Responsive Web Design, l'altra faccia dell'accessibilità
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 presentazione
martedì 23 ottobre 12
13. Responsive Web Design, l'altra faccia dell'accessibilità
Mobile First - il budget
il costo è relativo alla
progettazione consapevole,
professionalmente evoluta
3/20
/20
09/05/1 Fabrizio Caccavello
Titolo della presentazione
martedì 23 ottobre 12
14. Responsive Web Design, l'altra faccia dell'accessibilità
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 presentazione
martedì 23 ottobre 12
15. Responsive Web Design, l'altra faccia dell'accessibilità
Content First
3/20
/20
09/05/1 Fabrizio Caccavello
Titolo della presentazione
martedì 23 ottobre 12
16. Responsive Web Design, l'altra faccia dell'accessibilità
Lo schermo
http://resizemybrowser.com/
3/20
/20
09/05/1 Fabrizio Caccavello
Titolo della presentazione
martedì 23 ottobre 12
17. Responsive Web Design, l'altra faccia dell'accessibilità
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 presentazione
martedì 23 ottobre 12
18. Responsive Web Design, l'altra faccia dell'accessibilità
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 presentazione
martedì 23 ottobre 12
19. Responsive Web Design, l'altra faccia dell'accessibilità
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 presentazione
martedì 23 ottobre 12
20. Responsive Web Design, l'altra faccia dell'accessibilità
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 presentazione
martedì 23 ottobre 12
21. Responsive Web Design, l'altra faccia dell'accessibilità
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 presentazione
martedì 23 ottobre 12
22. Responsive Web Design, l'altra faccia dell'accessibilità
un sito non è una brochure
monitor
28 pollici
3/20
/20
09/05/1 Fabrizio Caccavello
Titolo della presentazione
martedì 23 ottobre 12
23. Responsive Web Design, l'altra faccia dell'accessibilità
un sito non è una
brochure
monitor
19 pollici
3/20
/20
09/05/1 Fabrizio Caccavello
Titolo della presentazione
martedì 23 ottobre 12
24. Responsive Web Design, l'altra faccia dell'accessibilità
un sito non è una brochure
smartphone
3/20
/20
09/05/1 Fabrizio Caccavello
Titolo della presentazione
martedì 23 ottobre 12
25. Responsive Web Design, l'altra faccia dell'accessibilità
un sito non è una
brochure
monitor
19 pollici
caratteri
molto
ingranditi
3/20
/20
09/05/1 Fabrizio Caccavello
Titolo della presentazione
martedì 23 ottobre 12
26. Responsive Web Design, l'altra faccia dell'accessibilità
cos’è questa
confusione?
semplicemente
la posta di
Google
ingrandita
come farebbe
un ipovedente
3/20
/20
09/05/1 Fabrizio Caccavello
Titolo della presentazione
martedì 23 ottobre 12
27. Responsive Web Design, l'altra faccia dell'accessibilità
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 presentazione
martedì 23 ottobre 12
28. Responsive Web Design, l'altra faccia dell'accessibilità
Framework
http://www.responsivegridsystem.com/
3/20
/20
09/05/1 Fabrizio Caccavello
Titolo della presentazione
martedì 23 ottobre 12
29. Responsive Web Design, l'altra faccia dell'accessibilità
Criticità
?
HTML5 non è ancora uno standard
3/20
/20
09/05/1 Fabrizio Caccavello
Titolo della presentazione
martedì 23 ottobre 12
30. Responsive Web Design, l'altra faccia dell'accessibilità
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 presentazione
martedì 23 ottobre 12
31. Responsive Web Design, l'altra faccia dell'accessibilità
Criticità
i framework possono importare un
bel mucchio di codice inutile
3/20
/20
09/05/1 Fabrizio Caccavello
Titolo della presentazione
martedì 23 ottobre 12
32. Responsive Web Design, l'altra faccia dell'accessibilità
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 presentazione
martedì 23 ottobre 12
33. Responsive Web Design, l'altra faccia dell'accessibilità
cfabry
3/20
/20
09/05/1 Fabrizio Caccavello
Titolo della presentazione
martedì 23 ottobre 12