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.