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