Il mondo del web continua ad evolversi e oggi la navigazione da dispositivi mobili (smartphone e tablet) ha superato quella da PC.

Secondo i dati Auditel riferiti a dicembre 2014, mediamente in una giornata si connettono a Internet da dispositivi mobili 17,3 milioni di italiani, mentre gli utenti da PC sono 12,5 milioni. "Il web è mobile" scrivevo in un articolo su Immaginaria nel 2009, ed oggi non è più una metafora.

Ciò significa che non ha proprio più senso progettare la grafica di un sito pensando al classico schermo di un PC. Che ha comunque (oggi) una dimesione e risoluzione assai variabile.

Pertanto, un sito web moderno va progettato in modo che i suoi contenuti restino ben fruibili indipendentemente dalle ormai variabilissime dimensioni degli schermi.

Una soluzione è quella di realizzare una versione separata del sito destinata alla navigazione mobile.

Un'altra soluzione, molto valida e meno costosa, è quella di utilizzare una tecnica grafica chiamata “responsive”, in modo che i contenuti del sito (testi e immagini) si adattino alle varie misure dello schermo dell'utente, mantenendo sempre buona leggibilità, usabilità e coerenza grafica.

Una buona grafica responsive deve essere ben progettata e declinata nelle principali dimensioni di visualizzazione (tecnicamente, “risoluzioni” dello schermo), per studiare come i vari elementi si reimpaginano al variare delle dimensioni dello schemo.

Non sempre è possibile rendere flessibile un layout grafico pensato per essere fisso, è sempre necessario introdurre qualche variazione, poiché gli elementi del sito non saranno più fissi come su un foglio di carta.

Quindi è sempre più indispensabile che la progettazione grafica di un sito sia pensata per essere elastica, e del tutto lontana dai classici schemi legati alla carta stampata. Impaginare un sito web non è la stessa cosa che impaginare una brochure. E anche limitare la progettazione a un file grafico è un lavoro incompleto.

Per poter valutare efficacemente l'effetto grafico è necessario verificare come si comportano i vari elementi al cambiare della risoluzione. Lavorando su un PC è facile fare delle semplici simulazioni rimpicciolendo la finestra del browser; un risultato più preciso si avrà usando appositi plugin per il browser. Ma certo questi test non possono essere effettuati su un file grafico (che sia Photoshop o Illustrator o altro).

Quindi, una volta definito sommariamente il "look & feel", cioè l'impostazione grafica generale, meglio lasciare Photoshop e lavorare con dei modelli HTML, abbandonare pennelli ed effetti e passare a scrivere codice.