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 ?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 ;)