responsive design - wordpress.com...il responsive design è una rivoluzione del processo creativo...
TRANSCRIPT
RESPONSIVE DESIGN
Il Responsive Design è una rivoluzione del processo
creativo propria del web, che mettendo a frutto una
grande fl essibilità, garantisce all’utente una user
experience continua e gratifi cante su ogni genere di
dispositivo.
Responsive design
Ma comefare?
Per realizzare un progetto responsive occorre tener
conto di alcune dimensioni di riferimento relative al
Mare Magnum dei dispositivi.
Dimensioni di riferimento
Dimensioni di riferimento
Web is a fl uid medium
Content is like water
Il web è un contenitore fl uido
il contenuto è come l’acqua
CONTENT FIRST
il contenuto è alle base delle scelte di design.
MOBILE FIRST
La creazione di un progetto web responsive
inizia dalla versione mobile.
Mostly Fluid: Quasi fl uido
Tipi di layout Luke Wroblewski
Column Drop: Prima il contenuto principale
Tipi di layout Luke Wroblewski
Layout Shifter: Prima la barra laterale
Tipi di layout Luke Wroblewski
Tiny Tweaks: Piccoli cambiamenti
Tipi di layout Luke Wroblewski
Off Canvas: Contenuti secondari nascosti in mobile
Tipi di layout Luke Wroblewski
Prima di progettare la navigazione di un sito
responsive, occorre prendere in considerazione la
diversa gestualità tra ambiente mouse e
ambiente touch.
Navigazione e responsive design
I link possono avere dimensioni ridotte e animazioni
basate sullo stato hover
Gestualità in ambiente mouse
Gestualità in ambiente touch
Fat fi nger design: i link devono essere facilmente
cliccabili con un dito.
Non devono quindi essere né troppo piccoli né
troppo vicini.
Lo stato hover non esiste.
Gestualità in ambiente touch
Tipi di navigazione
Shrinking sticky bar
Utilizzare una barra di navigazione posizionata nella
header che rimane fi ssa e si ridimensiona durante
lo scroll.
http://www.kaus.com.br/
http://www.kaus.com.br/
http://www.kaus.com.br/
Tipi di navigazione
Navigation as content
Area di navigazione che è in tutto e per tutto un
contenuto.
http://www.aerospike.com/
http://www.aerospike.com/
http://www.aerospike.com/
Tipi di navigazione
Off-canvas navigation drawer
Area di navigazione che compare solo quando
clicchiamo sopra un hamburger menu
http://education.iceandsky.com/
http://education.iceandsky.com/
Tipografi a e responsive design
La dimensione dello schermo unita alla distanza
dell’utente da esso, incidono sulla leggibilità e
quindi sull'usabilità di un testo.