IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT:
IL WEB PER UN'ORGANIZZAZIONE COMPLESSA COME L'UNIVERSITÀ DI SIENA
IGOR BERSANETTI
Perché cambiare ?
Il web come l'abbiamo conosciuto
Perché cambiare ?
Il web com'è oggi!
The web's moved beyond the desktop, and it's not looking back. The number of devices we're designing for is growing just as quickly as mobile traffic.Ethan Marcott
Perché cambiare ?Un mondo nuovo di dispositivi...
Perché cambiare ?...e di situazioni ...
Soluzioni?
• Mobile Applications ?
• Mobile Website ?
• Responsive Web Design ?
Mobile Apps
• Migliore user experience possibile sul device indirizzato
• Costi elevati di sviluppo e soprattutto manutenzione
• Soddisfa solo una piccola parte dell'utenza
• Approccio non “future friendly”
Mobile AppsCreeresti una App per ognuno di questi ?
Mobile Website
• Interfaccia pensata e ottimizzata per display più piccoli
• Contenuti riveduti e ottimizzati per schermi piccoli
• Sito semplice, rapido da consultare
• Costi di sviluppo extra
• Veicola solo una parte dei contenuti disponibili
• Richiede un doppio lavoro di redazione
• User Agent
Mobile WebsiteDecifrare la user agent è così semplice ?Android Webkit Browser - Mozilla/5.0 (Linux; U; Android 2.3.5; zh-cn; HTC_IncredibleS_S710e Build/GRJ90) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1- Mozilla/5.0 (Linux; U; Android 2.3.5; en-us; HTC Vision Build/GRI40) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
IE Mobile- Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)- HTC_Touch_3G Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile 7.11)- Mozilla/4.0 (compatible; MSIE 7.0; Windows Phone OS 7.0; Trident/3.1; IEMobile/7.0; Nokia;N70)
Responsive Web Design
• Abbatte i costi complessivi del progetto: - 1 solo progetto- 1 sola redazione
• La user experience è sempre coerente
• Il contenuto di un sito responsive è lo stesso per tutti; anche questa è una forma di equità sociale
• È “future friendly”
• Il progetto di design aumenta in complessità
• Servono competenze mirate in tutte le fasi del progetto.
Responsive Web Design
Ancora dubbi ??http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/
Ho scelto... e adesso ?Quali sono i passi necessari per realizzare un
progetto sostenibile ?
Un progetto sostenibile
• Sviluppare il progetto con la governance dell'organizzazione e gestire positivamente le naturali resistenze interne
• Definire gli obiettivi della comunicazione
• Scegliere una piattaforma tecnologica adeguata
• Adottare le corrette metodologie di analisi e sviluppo
I protagonisti?
Università di Siena
www.unisi.it
la Governance d'Ateneo
il Personale d'Ateneo
Il Servizio portale L'Utente finale
Gli obiettiviTrasmettere
il brand di Ateneo
Un portale orientato allo studente
e all'internazionalizzazione
Diffondere l'identità digitale
e le soluzionitecnologiche
su tutti isiti satelliti
Mantenere bassii costi
Integrare igestionali
Gli obiettiviRaggiungere il
maggior numerodi utenti possibile
Lavorare con un strumentoveloce e flessibile
Parlare con efficaciaa tutte
le categoriedi utenti
Valorizzare epromuovere
con efficacia leeccellenze d'Ateneo
Gli obiettiviLavorare con interfacce
semplici e intuitive
Inserire le informazioniuna sola volta
Migliorare iprocessi interni
Gli obiettiviRaggiungere velocemente
le informazioniche mi servono
Rimanere aggiornatasulle opportunità per
lo studio e per il lavoro
Trovareinformazioni
comprensibili!
Conoscerel'Università e
la città di Siena
Progettazione partecipata
User research
Sono stati raccolti i punti di vista di tutti i key users
Progettazione partecipata
Scelte condivise
la Governance d'Ateneo valida ogni singolo aspetto
Progettazione partecipata
Knowledge Transfer
Condividere la conoscenza aiuta la
sostenibilità del progetto
Yes! We Drupal
Costi contenuti
Drupal
Flessibilità
• Integrabile
• Modulare
• Robusto
• Configurabile
Drupal
Semplicità
“Dopo un'oretta di corso tutte le resistenze verso lo
strumento scompaiono”Giacomo
“Il backend è snello e intuitivo. Personale molto eterogeneo lo usa in egual modo”
Giacomo
Drupal
Supporto al responsive
design
Approcci e Metodologie UX
Architettura dell'informazione
Facilitare l'accesso alle informazioni:meno livelli e più sezioni tematiche
Approcci e Metodologie UX
Sapere esattamente cosa vuoi comunicare...
… e cosa l'utente si aspetta di trovare!
Content Strategy
Cosa farò da grande ?
Approcci e Metodologie UX
Mantenere il tuo messaggio intatto a prescindere dalla dimensione dello
schermo
Content Strategy
Approcci e Metodologie UX
ContinuosUser
Experience
www.cineca.it
PC desktop Tablet SmartphoneTablet SmartphoneTablet SmartphoneTablet SmartphoneTabletPC desktop SmartphoneTablet
Il risultato?
Smart TV Samsung nel salotto di Roberto
Ipad 3 di Luca, utilizzato anche a Machu Picchu
Samsung S2 di Elena, più volte scampato per miracolo alla pentola del sugo
HTC Magic di Roberto, il suo preferito
Sony Ericsson P1i (a.d.2007)di Giacomo
Blackberry9360 di Marco, 41 anni, Ingegnere Elettronico. Pensa di acquistare anche un Playbook...
Nokia N97 di Fabio, uno dei tanti della sua collezione
Samsung Nexus 7 di Marcopolo Expert
Casalecchio di Reno(BO)
NintendoDS di Vera, 10 anni e nativamente mobile. Interrotta durante una sessione di “Animal Crossing”
Fon Fon Tan Crin di Giuseppe, 49 anni, romagnolo
Domande [email protected]
Suggerimenti per la lettura:• http://www.lukew.com/
• http://www.alistapart.com/articles/responsive-web-design
• http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
• http://www.alistapart.com/articles/your-content-now-mobile/
DICE GRAZIE A SPONSOR
MEDIA PARTNER
IN COLLABORAZIONE CON
FIRMATO: GLI ORGANIZZATORI ;)
Top Related