Tesi di laurea in Informatica, Università degli Studi di Milano-Bicocca, AA 2012-2013. Slide preparate per la discussione.

1. Il responsive web design per le
organizzazioni non profit
Francesco VITALE, matricola 726886
Relatore: prof. Roberto POLILLO
Correlatore: prof. Flavio DE PAOLI
Corso di laurea in Informatica, A.A. 2012-2013, Università degli Studi di Milano-Bicocca

2. Smartphone
Tablet
1.400
400
700
200
2012
2016
+93%
Il web mobile
Come cambia il mercato di Internet
Proiezioni in milioni di unità (Canalys 2013)
2012
2016
+233%

3. Russia
19%
USA
25%
Egitto
70%
India
59%
Cina
30%
Sud
Africa
57%
Mobile-only
Utenti che usano in prevalenza dispositivi mobile per accedere a Internet
Percentuale sul totale di utenti Internet (On Device Research 2010)

4. Responsive Web Design
Tecniche sperimentali per creare siti reattivi
Strumenti: griglie fluide, immagini e media flessibili, media queries

5. Obiettivi del progetto
✤
Studiare lo stato dell’arte del responsive web design
✤
Individuare pattern e fattori critici in ambito non profit
✤
Sintetizzare alcune linee guida per creare siti responsive
in ambito non profit

6. Sviluppo del lavoro
✤
Analisi di casi di studio
✤
Catalogazione di pattern
✤
Prototipo HTML: WordPress + Foundation

7. Casi di studio
✤
WWF
✤
Barack Obama
✤
JDRF
✤
Malaria No More
✤
Boot Campaign
✤
Unicef Svezia

8. Pattern di navigazione
Come adattare il menu principale di navigazione
Alcuni pattern (in ordine orario): menu a comparsa con griglia, menu a comparsa, menu con icone, menu ancora

9. Pattern di layout
Come adattare il layout delle pagine
Pattern (in ordine orario): layout fluido, layout column drop, layout off canvas, layout shifter

10. Stato dell’arte
✤
✤
Organizzazioni estere, mediograndi
Struttura: “chi siamo”, “cosa
facciamo”, “cosa puoi fare tu”
✤
Layout fluidi, menu a comparsa
✤
Prestazioni non eccellenti
✤
Problemi: donazioni, immagini

11. Il prototipo: homepage
Contenuti in primo piano + contenuti dinamici (foto, video, eventi)
Layout fluido sviluppato su più colonne

12. Il prototipo: navigazione
Chi siamo, dove siamo, cosa facciamo, cosa puoi fare tu, sostienici, novità
Menu a comparsa, a due livelli

13. Il prototipo: donazioni
I nuovi form di HTML5
Tipi di input: email, tel, number, url, range, date, time, color, ecc.

14. Il prototipo: donazioni
I nuovi form di HTML5
Tipi di input: email, tel, number, url, range, date, time, color, ecc.

15. Risultati
✤
Linee guida sul responsive web design
✤
Prototipo flessibile e veloce
✤
Modello di sviluppo flessibile

16. Conclusioni e
sviluppi futuri
✤
✤
✤
Semplificazione
dell’esperienza utente
Evoluzione di HTML5 e
CSS
API per i contenuti

17. Grazie
Immagini: Free PSD Files (3), John Polacek (4), Luke Wroblewski (9), Wikimedia (16)

18. Domande

19. Perché il responsive web design
✤
Esperienza utente unica e distribuita (no curva di
apprendimento)
✤
Un unico sito da aggiornare e modificare
✤
Indipendenza da piattaforme di terze parti
✤
Flessibilità, velocità, semplicità
✤
Un sito pronto per i dispositivi futuri (se ben fatto)

20. @media screen and (max-width:400px) {
.pippo { width: 80%; }
}
@media screen and (min-resolution:300dpi) {
.pluto {
background: url(http://sito.com/hq.jpg);
}
}
Le media queries
Specifica di CSS3
Parametri: width, height, resolution, orientation, aspect ratio, color, ecc.

21. “
Web unico vuol dire fornire le stesse informazioni e
gli stessi servizi agli utenti, indipendentemente dal
dispositivo che stanno usando, nei limiti ragionevoli.
Tuttavia, non vuol dire che le stesse informazioni
sono rappresentate nello stesso identico modo in
dispositivi diversi.
Web unico
Il web mobile non esiste
Definizione del W3C
”

22. Fattori critici
✤
Donazioni
✤
Immagini responsive
✤
Codice JavaScript

23. <picture width="500" height="500">
<source media="(min-width: 45em)" src="large.jpg">
<source media="(min-width: 18em)" src="med.jpg">
<source src="small.jpg">
<img src="small.jpg" alt="Alt text">
<p>Accessible text</p>
</picture>
Immagini responsive
L’elemento <picture>
Bozza in HTML5

24. ../w300/img.jpg
../w450/img.jpg
../w700/img.jpg
15 KB
26 KB
59 KB
File originale: 796 KB
Immagini responsive
Una tecnica ibrida client-server in WordPress
PB Responsive Images = SLIR (Smart Lencioni Image Resizer) + HTML

25. function conditional_script_loading() {
if ( has_post_format( 'gallery' ) ) {
...
}
}
add_action('wp_enqueue_scripts', 'conditional_script_loading');
- 40% KB
Conditional JavaScript
Ottimizzare le prestazioni: le librerie JavaScript sono caricate solo quando necessario
Strumenti: Conditional Tag e formati dei post in WordPress