Nei siti web responsive l’aspetto dell’header, del menu di navigazione o dei contenuti cambia in base alle dimensioni dello schermo. Tuttavia, si tende a non modificare i loghi: semplicemente si riducono o si espandono per adattarsi allo schermo.

A volte manca uno studio vero e proprio sull’aspetto responsive del logo, che definisca come debba essere il logo in base alle diverse dimensioni del dispositivo. Eppure il logo è il simbolo più potente del marchio di un brand.

Come dicevo, semplicemente ridurre o ampliare un logo secondo il suo contesto non è sempre la soluzione migliore.

Potrebbe essere necessario aggiungere dettagli nel logo man mano che la capacità del dispositivo aumenta o, al contrario, rendere minimale il suo aspetto se le dimensioni della finestra diminuiscono.  

Un ottimo esempio ci viene fornito da un progetto di studio di Joe Harrison sulla creazione di loghi responsive per i grandi marchi.

Questo progetto mostra come loghi delle marche più popolari possono essere efficacemente riprodotti in maniera responsive. Se aprite la pagina e ridimensionate il browser vedrete i loghi che si aggiornano dinamicamente in base alle dimensioni dello schermo. Via via che le dimensioni del browser si riducono, ognuno di questi loghi passa attraverso una sequenza di breakpoint e, ad ogni breakpoint, il logo viene modificato, rimanendo però fedele al marchio originario.

I layout diventano sempre più complessi e il responsive web design assume sempre più importanza, perciò noi sviluppatori abbiamo bisogno di una più ampia gamma di unità di misura che ci aiuti a creare design flessibili.

Diventa quindi utile approfondire le unità di misura vw e vh legate alla viewport, introdotte da CSS3.

Queste unità sono uno strumento molto potente per il responsive design e ci consentono di risparmiare pagine e pagine di media queries.

Prima di parlare delle novità facciamo un breve riepilogo sulle unità CSS disponibili e le loro principali caratteristiche.