Guarda il talk su http://www.youtube.com/watch?v=5M6K3DpzRqw E dai un giudizio su https://joind.in/talk/view/7712

1. IL RESPONSIVE WEB DESIGN NON È
SOLO UNA QUESTIONE DI LAYOUT:
IL WEB PER UN'ORGANIZZAZIONE COMPLESSA
COME L'UNIVERSITÀ DI SIENA
IGOR BERSANETTI

2. Perché cambiare ?
Il web come
l'abbiamo conosciuto

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

4. Perché cambiare ?
Un mondo nuovo di dispositivi...

5. Perché cambiare ?
...e di situazioni ...

6. Soluzioni?
• Mobile Applications ?
• Mobile Website ?
• Responsive Web Design ?

7. Mobile Apps
• Migliore user
• Costi elevati di sviluppo e
experience possibile
sul device soprattutto manutenzione
indirizzato • Soddisfa solo una piccola
parte dell'utenza
• Approccio non “future
friendly”

8. Mobile Apps
Creeresti una App per ognuno di questi ?

9. Mobile Website
• Interfaccia pensata e
• Costi di sviluppo extra
ottimizzata per
display più piccoli • Veicola solo una parte
dei contenuti disponibili
• Contenuti riveduti e
ottimizzati per • Richiede un doppio
schermi piccoli lavoro di redazione
• Sito semplice, rapido • User Agent
da consultare

10. Mobile Website
Decifrare 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)

11. Responsive Web
Design
• Abbatte i costi complessivi del • Il progetto di design
progetto: aumenta in complessità
- 1 solo progetto
- 1 sola redazione • Servono competenze
mirate in tutte le fasi del
• La user experience è sempre progetto.
coerente
• Il contenuto di un sito responsive
è lo stesso per tutti; anche questa
è una forma di equità sociale
• È “future friendly”

12. Responsive Web
Design
Ancora dubbi ??
http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-
responsive-website-presidential-smackdown/

13. Ho scelto... e adesso ?
Quali sono i passi necessari per realizzare un
progetto sostenibile ?

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

15. I protagonisti?
la Governance
d'Ateneo
Università
di Siena
www.unisi.it
Il Servizio portale L'Utente finale
il Personale
d'Ateneo

16. Gli obiettivi
Trasmettere Diffondere
il brand di Ateneo l'identità digitale
e le soluzioni
tecnologiche
Integrare i su tutti i
gestionali siti satelliti
Mantenere bassi
Un portale i costi
orientato allo studente
e all'internazionalizzazione

17. Gli obiettivi
Parlare con
Raggiungere il
efficacia
maggior numero
a tutte
di utenti possibile
le categorie
di utenti
Valorizzare e
promuovere
con efficacia le
Lavorare con un strumento
eccellenze d'Ateneo
veloce e flessibile

18. Gli obiettivi
Lavorare con interfacce Migliorare i
semplici e intuitive processi interni
Inserire le informazioni
una sola volta

19. Gli obiettivi
Raggiungere Trovare
velocemente informazioni
le informazioni comprensibili!
che mi servono
Conoscere
Rimanere aggiornata l'Università e
sulle opportunità per la città di Siena
lo studio e per il lavoro

20. Progettazione
partecipata
Sono stati raccolti i punti
User
di vista di tutti i key users
research

21. Progettazione
partecipata
Scelte
condivise
la Governance
d'Ateneo valida ogni
singolo aspetto

22. Progettazione
partecipata
Condividere la
conoscenza aiuta la
sostenibilità del progetto
Knowledge
Transfer

23. Yes! We Drupal
Costi
contenuti

24. Drupal
Flessibilità
• Integrabile
• Modulare
• Robusto
• Configurabile

25. Drupal
“Il backend è snello e
intuitivo. Personale
molto eterogeneo lo
usa in egual modo”
Giacomo
“Dopo un'oretta di corso
tutte le resistenze verso lo Semplicità
strumento scompaiono”
Giacomo

26. Drupal
Supporto al
responsive
design

27. Approcci e
Metodologie UX
Facilitare l'accesso
alle informazioni:
meno livelli e più
sezioni tematiche
Architettura
dell'informazione

28. Approcci e
Metodologie UX
Sapere esattamente
cosa vuoi comunicare... Cosa farò
da grande ?
Content … e cosa l'utente si
Strategy aspetta di trovare!

29. Approcci e
Metodologie UX
Mantenere il tuo
messaggio intatto a
prescindere dalla
dimensione dello
schermo
Content
Strategy

30. Approcci e
Metodologie UX
Continuos
User
Experience

31. Il risultato?
PC desktop Tablet Smartphone
www.cineca.it

32. Smart TV Samsung nel salotto di Roberto

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

34. Blackberry9360 di Marco, 41 anni,
Sony Ericsson Ingegnere Elettronico. Pensa di
P1i (a.d.2007) acquistare anche un Playbook...
di Giacomo

35. Nokia N97 di Fabio, uno dei
tanti della sua collezione

36. Samsung Nexus 7 di
Marcopolo Expert
Casalecchio di Reno(BO)

37. NintendoDS di Vera, 10 anni e nativamente mobile.
Interrotta durante una sessione di “Animal Crossing”

38. Fon Fon Tan Crin di Giuseppe, 49 anni, romagnolo

39. Domande ?
i.bersanetti@cineca.it
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/

40. DICE GRAZIE A SPONSOR
MEDIA PARTNER
IN COLLABORAZIONE CON
FIRMATO: GLI ORGANIZZATORI ;)