IL RESPONSIVE WEB DESIGN NON SOLO UNA QUESTIONE DI LAYOUT:
IL WEB PER UN'ORGANIZZAZIONE COMPLESSA COME L'UNIVERSIT DI SIENA

IGOR BERSANETTI@bigol76

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 Apps

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

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 obiettivi

Trasmettere
il brand di AteneoUn portale
orientato allo studente
e all'internazionalizzazioneDiffondere
l'identit digitale
e le soluzioni
tecnologiche
su tutti i
siti satellitiMantenere bassi
i costiIntegrare i
gestionali

Gli obiettivi

Raggiungere il
maggior numero
di utenti possibileLavorare con un strumento
veloce e flessibileParlare con
efficacia
a tutte
le categorie
di utentiValorizzare e
promuovere
con efficacia le
eccellenze d'Ateneo

Gli obiettivi

Lavorare con interfacce
semplici e intuitiveInserire le informazioni
una sola voltaMigliorare i
processi interni

Gli obiettivi

Raggiungere
velocemente
le informazioni
che mi servonoRimanere aggiornata
sulle opportunit per
lo studio e per il lavoroTrovare
informazioni
comprensibili!Conoscere
l'Universit e
la citt di Siena

Progettazione partecipata

User researchSono stati raccolti i punti di vista di tutti i key users

Progettazione partecipata

Scelte condivisela Governance d'Ateneo valida ogni singolo aspetto

Progettazione partecipata

Knowledge TransferCondividere la conoscenza aiuta la sostenibilit del progetto

Yes! We Drupal

Costi contenuti

Drupal

Flessibilit

Integrabile

Modulare

Robusto

Configurabile

Drupal

SemplicitDopo 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'informazioneFacilitare 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 StrategyCosa far
da grande ?

Approcci e Metodologie UX

Mantenere il tuo messaggio intatto a prescindere dalla dimensione dello schermo

Content Strategy

Approcci e Metodologie UX

Continuos
User Experience

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

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/

DICE GRAZIE A SPONSOR

MEDIA PARTNER

IN COLLABORAZIONE CON

FIRMATO: GLI ORGANIZZATORI ;)