Nel mondo del web designer, al giorno d’oggi, si da praticamente per scontato il concetto di “responsive“. Non tutti i clienti però comprendono il gergo tecnico e spesso il concetto non è così chiaro a colui che richiede il proprio sito.

Per chi non lo sapesse, un sito web responsive è un sito web “intelligente“, che cambia il proprio layout e i propri contenuti, a seconda del dispositivo dal quale si accede (desktop, tablet, smartphone). Si adatta automaticamente alla grandezza dello schermo, al suo orientamento, alla risoluzione.

Progettare e realizzare un template responsive é molto più complesso rispetto ad un template che non lo è, appunto per questo è fondamentale che il cliente si renda conto di questo valore aggiunto che spesso viene inserito nel progetto senza quasi essere calcolato.

Un sito responsive non si tratta di qualcosa di separato, distinto dal sito desktop. La responsività non interessa la sostanza ma la forma. Gli elementi che compongono ogni pagina (logo, blocchi di testo, immagini…) si spostano al cambiare della risoluzione. Per vedere la responsività all’opera basta ridimensionare la finestra del browser, agganciandola con il mouse nell’angolo in basso a destra.
È normale quindi che se visito un sito responsivo dallo smartphone alcuni elementi che da pc vedo allineati orizzontalmente siano allineati verticalmente: serve per non costringere il navigatore a zoomare ogni elemento per poterne vedere il contenuto.
È anche normale che alcuni elementi spariscano: chi naviga da mobile infatti è interessato a trovare subito certe informazioni e non ha tempo da perdere con contenuti non essenziali.

L’immagine qua sopra mostra come un sito web è in genere visualizzato su un computer: la larghezza dello schermo permette di visualizzare il sito senza scrolling orizzontale ed i testi sono abbastanza grandi da essere chiaramente leggibili.

Ma su un telefono cellulare o un tablet, la larghezza fisica dello schermo diminuisce drasticamente, ed ecco come lo stesso sito viene visualizzato su uno smartphone a seconda se si tratta di un sito reattivo o no:

Il sito responsive ha adattato il suo layout alle dimensioni dello smartphone, il contenuto del sito è stato riorganizzato in altezza senza obbligare l’utente a scrollare orizzontalmente. Rimane facile da leggere e navigare.

Il sito non responsive compare nello stesso modo dello schermo del computer, ma su una superficie 80% più stretto. I testi diventano troppo piccoli per essere leggibili. Il visitatore deve compiere gesti costantemente sul touchscreen con zoom in & out e scorrere orizzontalmente e verticalmente per raggiungere le parti del sito che desidera consultare.