Come realizzare un sito responsive

Rendere il proprio sito web adatto a ogni dispositivo

Responsive: chiarimenti
Chiariamo innanzitutto che un sito web responsive è sostanzialmente un sito ottimizzato per ottenere la risoluzione ideale non solo da pc, ma anche da smartphone e tablet. Infatti la traduzione italiana di responsive sarebbe proprio adattativo, cioè che reagisce e si adatta al comportamento e all’ambiente dell’utente.
Il web responsive è stata una vera è propria necessità a cui si è cercato di trovare una soluzione già nel 2011, e che si è creata con l’utilizzo, sempre crescente, dei dispositivi mobili, quali tablet e smatphone, per accedere ai vari siti, ottenendo risultati “limitati” e innervosendo l’utente.
Si parla di vera e propria necessità in quanto ora si tende a navigare prettamente con i dispositivi mobili, per cui se non si utilizza un sito mobile responsivo si rischia di perdere molti eventuali clienti.
In questo articolo vedremo come fare a realizzare un proprio sito web responsive.
Ovviamente si parte dal presupposto che si sappia come creare un sito web e si tratti solo di vedere come renderlo responsivo. Se così non fosse si consiglia vivamente di documentarsi su come fare oppure frequentare un corso web design.

Progettare
Per prima cosa bisogna progettare il proprio sito pensando ai contenuti, cioè i testi, le immagini informative, ma anche il logo o il menù di navigazione principale. Bisogna focalizzarsi su cosa, cioè sui contenuti che si vuole far visualizzare, e su come presentarli. Inoltre bisogna valutare come differenziare i contenuti sui vari dispositivi.
Per esempio, se devo pubblicizzare un hotel, potrò realizzare un sito che consenta sul desktop di avere tutte le immagini delle varie camere con descrizione, mentre sul mobile dovrò accontentarmi di mostrare piccole foto puramente rappresentative, ed evidenziare, invece, cioè che possa interessare di più, cioè i prezzi, magari facendo accenno alle buone recensioni o all’ottima offerta.
L’obiettivo é fare in modo che tutti gli utenti, anche i meno capaci, abbiano facile accesso alle informazioni.

Mobile first
Luke Wroblewski parlava, non a torto, di “mobile first”, cioè di partire nel progettare il sito proprio dal dispositivo più piccolo che, non a caso, sta diventando il più utilizzato. Cioè bisogna partire con il concentrarsi sui contenuti essenziali, che poi possono essere ampiamente arricchiti nei dispositivi più grandi.

Breakpoint e media query
Dopo aver lavorato sui contenuti bisogna fissare i breakpoint, che sono i punti nei quali avvengono le modifiche al layout della pagina e a ognuno di essi corrisponde una media query.
Si parte dunque da una struttura di default abbastanza semplice, che poi modificheremo con l’uso di media queries, grazie alle quali si definiscono varie regole CSS, specificando varie proprietà, quali l’orientamento dello schermo, l’altezza e la larghezza del dispositivo o la sua risoluzione.
Le varie media query identificheranno quindi i vari dispositivi.

Inoltre è possibile anche nascondere elementi web non fondamentali dalla visualizzazione da smartphone sempre mediante media query, in modo da rendere più fruibile il sito. Con queste semplici indicazioni si può, dunque, rendere il sito consultabile da ogni schermo e in grado di adattarsi a ogni dispositivo in modo ottimale.