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.
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
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.
Fabrizio Caccavello
lunedì 18 giugno 12
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
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.
lunedì 18 giugno 12
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.eu
lunedì 18 giugno 12
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 4
lunedì 18 giugno 12
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 5
lunedì 18 giugno 12
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 6
lunedì 18 giugno 12
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 7
lunedì 18 giugno 12
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 8
lunedì 18 giugno 12
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 9
lunedì 18 giugno 12
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 10
lunedì 18 giugno 12
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 11
lunedì 18 giugno 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 12
lunedì 18 giugno 12
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 13
lunedì 18 giugno 12
14. Responsive design
il web mobile diventa primo
Content First
Fabrizio Caccavello fabrizio@akebia.it cfabry 14
lunedì 18 giugno 12
15. Responsive design
il web mobile diventa primo
Lo schermo
http://resizemybrowser.com/
Fabrizio Caccavello fabrizio@akebia.it cfabry 15
lunedì 18 giugno 12
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 16
lunedì 18 giugno 12
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 17
lunedì 18 giugno 12
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 18
lunedì 18 giugno 12
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 19
lunedì 18 giugno 12
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 20
lunedì 18 giugno 12
21. Responsive design
il web mobile diventa primo
Partiamo con il piede giusto
Fabrizio Caccavello fabrizio@akebia.it cfabry 21
lunedì 18 giugno 12
22. Responsive design
il web mobile diventa primo
Partiamo con il piede giusto
Fabrizio Caccavello fabrizio@akebia.it cfabry 22
lunedì 18 giugno 12
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 23
lunedì 18 giugno 12
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 24
lunedì 18 giugno 12
25. Responsive design
il web mobile diventa primo
la riscossa dell’accessibilità
Fabrizio Caccavello fabrizio@akebia.it cfabry 25
lunedì 18 giugno 12
26. Responsive design
il web mobile diventa primo
Fabrizio Caccavello
cfabry
Fabrizio Caccavello fabrizio@akebia.it cfabry 26
lunedì 18 giugno 12