responsive web design rt
DESCRIPTION
Come cambia il web e il contesto. Nel 2015 gli utenti da mobile supereranno quelli da desktop. Le strutture dei siti devono essere sempre più liquide, e adattarsi al device dal quale vengono visualizzati.TRANSCRIPT
![Page 1: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/1.jpg)
Responsive Design
un sistema web multi-piattaforma e multi-device a garanzia della migliore esperienza d'uso
![Page 2: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/2.jpg)
We don't design web pages.We design systems.Andy Clarke
![Page 3: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/3.jpg)
Il Sorpasso
![Page 4: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/4.jpg)
fonte: Morgan Stanley
Si stima che nel 2015 il numero totale di utenti che navigano da un dispositivo mobile supererà il numero di utenti che navigano da desktop.
2014desktop users
mobile users
![Page 5: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/5.jpg)
fonte: Morgan Stanley
![Page 6: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/6.jpg)
fonte: Morgan Stanley
Già oggi il numero di utenti mobile che accedono a Facebook è doppio rispetto alla controparte desktop.
2013facebook desktop users
facebook mobile users
![Page 7: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/7.jpg)
COS’E ’ CAMBIATO?
![Page 8: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/8.jpg)
Questonon è più
il web
![Page 9: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/9.jpg)
Questo è il web
![Page 10: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/10.jpg)
Questonon è più
il webNavigare online significava stare seduti davanti a un PC, situazione oggi ormai sempre meno frequente
![Page 11: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/11.jpg)
Vecchio CONTESTO
![Page 12: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/12.jpg)
Nuovo CONTESTO
![Page 13: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/13.jpg)
che strada PRENDERE?
![Page 14: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/14.jpg)
facciamo un passo indietro...
![Page 15: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/15.jpg)
CONTENUTICONTESTO&
![Page 16: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/16.jpg)
Il contesto QUANTITATIVOdimensione del displayconnettivitàpotenzialità del dispositivotipi di input
QUALITATIVOobiettivi dell’utenteambiente attenzionecapacità
![Page 17: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/17.jpg)
Questa nuova concezione di CONTESTO mette in evidenza come siano profondamente diverse le motivazioni con le quali gli utenti sono spinti a interagire con i contenuti di un sito web.
![Page 18: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/18.jpg)
Pensiamo, per esempio, a come cambiano le necessità di un utente che sta organizzado una vacanza su internet:
su desktop
su mobile
![Page 19: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/19.jpg)
su desktop prediligerà un'esperienza più immersiva, magari descritta ampiamente da foto e video
![Page 20: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/20.jpg)
su mobile al contrario ricerca un'esperienza più rapida, informativa, meno suggestiva ma magari con orari, numeri di telefono e localizzazione ben evidenti.
![Page 21: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/21.jpg)
In tutti i processi creativi l'artista inizia la sua opera scegliendo lo spazio di utilizzo:
la tela per il pittore, il blocco di marmo per lo scultore ecc…
Nel web la definizione di "cornice" oggi non è più APPLICABILE.
Il contenuto
![Page 22: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/22.jpg)
Perchè?
![Page 23: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/23.jpg)
perché è completamente a discrezione dell'utente, del suo browser e del device utilizzato
![Page 24: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/24.jpg)
Contenuti come acquaquindi dobbiamo iniziare a pensare ai
![Page 25: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/25.jpg)
La "tela" diventa quindi un ambiente flessibile e incontrollabile.
potrebbe sembrare un aspetto negativo, in realtà apre scenari stimolanti, fornendo al design del
Web potenzialità decisamente elevate rispetto al vecchi standard di progettazione.
![Page 26: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/26.jpg)
cambiare radicalmente l’ approccio nello sviluppo dei prodotti focalizzato ora a gestire l'ubiquità del web, regolando il rapporto che esiste tra contenuto e contesto in cui viene presentato, oltre alle variabili "qualitative" più legate all'utente, i suoi obiettivi, l'ambiente che lo circonda, la sua attenzione e capacità, garantendo al contempo una gestione del codice più snella e rapida rispetto a uno sviluppo di molteplici versioni ad hoc.
Focus
![Page 27: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/27.jpg)
COME?
![Page 28: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/28.jpg)
Gli ingredienti per un sito Responsive
![Page 29: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/29.jpg)
Griglie fluide, immagini flessibili, tipografia elastica e media queries sono gli ingredienti fondamentali per lo sviluppo di un prodotto web responsivo.
Tecnicamente
![Page 30: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/30.jpg)
CSS3 e Media Queries ci permettono non più solo l'identificazione del media utilizzato (come accadeva con quelle CSS2) ma di rilevare anche le caratteristiche fisiche (larghezza - altezza) del dispositivo e del browser utilizzato servendo il giusto stile in ogni contesto di utilizzo.
CSS3 & media queries
![Page 31: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/31.jpg)
Nessuno degli elementi che abbiamo citato prima potrebbe garantire efficacia se non accompagnato dal cambiamento di impostazione e filosofia del progetto;
mai come ora la figura del web designer (o designer delle interfacce o UX designer) deve essere riconosciuta come fulcro di un progetto di comunicazione online, inserendosi in un piano ibrido dove si incontrano comunicazione, grafica, tecnica, tecnologia ecc...
Concettualmente
![Page 32: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/32.jpg)
I vantaggi di un sito WEB RESPONSIVE
• fornisce agli utenti sempre la migliore esperienza d'uso per ogni dispositivo• propone contenuti diversi declinandoli per modalità di accesso, intuendo le necessità
di chi accede al sito (desktop/mobile tipicamente)• raggiunge un pubblico più ampio e garantisce visite più profonde e rapide• non diluisce l'autorità del sito dal punto di vista SEO• risparmia codice nello sviluppo del prodotto e nella manutenzione• è efficace nella condivisione delle pagine tra utenti mobile e desktop
![Page 33: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/33.jpg)
Perchè non un APP?
![Page 34: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/34.jpg)
I contenuti devono essere gestiti due volte, è necessario sviluppare prodotti diversi per piattaforme diverse (iOs, Android, Windows Phone ecc…), passare per i rispettivi Store per approvazione e pubblicazione, e ultimo aspetto ma più importante si è completamente invisibili ai motori di ricerca.
Dobbiamo per contro pensare alle App come elemento che va ad integrare un piano globale di comunicazione online, utilizzabile per indurre comportamenti specifici distanti da una "convenzionale" ricerca in Rete.
![Page 35: Responsive web design RT](https://reader033.vdocuments.site/reader033/viewer/2022061204/546ef6d0af7959aa568b48a8/html5/thumbnails/35.jpg)
Our work is never over
Daft Punk