Il responsive web design per le organizzazioni non profitFrancesco VITALE, matricola 726886Relatore: prof. Roberto POLILLOCorrelatore: prof. Flavio DE PAOLI

Corso di laurea in Informatica, A.A. 2012-2013, Università degli Studi di Milano-Bicocca

Proiezioni in milioni di unità (Canalys 2013)

Smartphone

700

1.400

2012 2016

+93%

Tablet

200

400

2012 2016

+233%

Il web mobileCome cambia il mercato di Internet

Percentuale sul totale di utenti Internet (On Device Research 2010)

Mobile-onlyUtenti che usano in prevalenza dispositivi mobile per accedere a Internet

Russia19%

USA25%

India59%

Sud Africa57%

Egitto70%

Cina30%

Strumenti: griglie fluide, immagini e media flessibili, media queries

Responsive Web DesignTecniche sperimentali per creare siti reattivi

✤ 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

Obiettivi del progetto

✤ Analisi di casi di studio

✤ Catalogazione di pattern

✤ Prototipo HTML: WordPress + Foundation

Sviluppo del lavoro

✤ WWF

✤ Barack Obama

✤ JDRF

✤ Malaria No More

✤ Boot Campaign

✤ Unicef Svezia

Casi di studio

Alcuni pattern (in ordine orario): menu a comparsa con griglia, menu a comparsa, menu con icone, menu ancora

Come adattare il menu principale di navigazione

Pattern di navigazione

Pattern (in ordine orario): layout fluido, layout column drop, layout off canvas, layout shifter

Come adattare il layout delle pagine

Pattern di layout

✤ Organizzazioni estere, medio-grandi

✤ Struttura: “chi siamo”, “cosa facciamo”, “cosa puoi fare tu”

✤ Layout fluidi, menu a comparsa

✤ Prestazioni non eccellenti

✤ Problemi: donazioni, immagini

Stato dell’arte

Layout fluido sviluppato su più colonne

Contenuti in primo piano + contenuti dinamici (foto, video, eventi)

Il prototipo: homepage

Menu a comparsa, a due livelli

Chi siamo, dove siamo, cosa facciamo, cosa puoi fare tu, sostienici, novità

Il prototipo: navigazione

Tipi di input: email, tel, number, url, range, date, time, color, ecc.

I nuovi form di HTML5

Il prototipo: donazioni

Tipi di input: email, tel, number, url, range, date, time, color, ecc.

I nuovi form di HTML5

Il prototipo: donazioni

✤ Linee guida sul responsive web design

✤ Prototipo flessibile e veloce

✤ Modello di sviluppo flessibile

Risultati

✤ Semplificazione dell’esperienza utente

✤ Evoluzione di HTML5 e CSS

✤ API per i contenuti

Conclusioni e sviluppi futuri

Grazie

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

Domande

✤ 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)

Perché il responsive web design

Specifica di CSS3

Le media queries

@media screen and (max-width:400px) {.pippo { width: 80%; }

}@media screen and (min-resolution:300dpi) {

.pluto { background: url(http://sito.com/hq.jpg);

}}

Parametri: width, height, resolution, orientation, aspect ratio, color, ecc.

Il web mobile non esiste

Web unico

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.

Definizione del W3C

“ ”

✤ Donazioni

✤ Immagini responsive

✤ Codice JavaScript

Fattori critici

Bozza in HTML5

L’elemento <picture>

Immagini responsive

<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>

PB Responsive Images = SLIR (Smart Lencioni Image Resizer) + HTML

Una tecnica ibrida client-server in WordPress

Immagini responsive

../w300/img.jpg

15 KB

../w450/img.jpg

26 KB

../w700/img.jpg

59 KB

File originale: 796 KB

Strumenti: Conditional Tag e formati dei post in WordPress

Ottimizzare le prestazioni: le librerie JavaScript sono caricate solo quando necessario

Conditional JavaScript

function conditional_script_loading() { if ( has_post_format( 'gallery' ) ) {

...}

}add_action('wp_enqueue_scripts', 'conditional_script_loading');

- 40% KB