Responsive tradotto alla lettera dall'inglese significa adattabile. Nello specifico delle terminologia web significa ottimizzato per la visualizzazione su periferiche mobili.
A quanti di voi sarà capitato di aprire un sito web sullo smartphone piuttosto che sul tablet notando che la pagina si presenta come una miniaturizzazione della schermata
visualizzata altrimenti correttamente sul grande schermo di un pc da tavolo?
Avrete notato in tal caso che per leggere correttamente menu e testi siete costretti a zoommare continuamente avanti e indietro e a scorrere la pagina in tutte le direzioni. Dipende dal fatto che il sito è ottimizzato per schermi con risoluzione ampia (Pc Desktop) o medio piccola (notebook, netbook) ma non per periferiche mobili di dimensioni contenute, in particolare smartphone.
Ciò è dovuto al fatto che la diffusione massiva di dispositivi mobili touch-screen è un fatto relativamente recente come pure la tecnologia innovativa a disposizione degli sviluppatori per superare brillantemente questo gap tra nuovi media e corretta visualizzazione dei contenuti. Un grande aiuto in tal senso è giunto da alcuni social network come Facebook e Twitter che, oltre a sviluppare apposite app che permettono la fruizione delle loro pagine da mobile in modo dedicato, hanno ideato (come nel caso di twitter) sistemi open source di sviluppo orientati specificamente al mobile.
Il sistema attualmente più utilizzato è sicuramente Bootstrap nato proprio in casa Twitter e oggi indipendente. Bootstrap è di fatto il più importante framework dedicato alla progettazione di modelli grafici (template) in ottica responsiva per i principali CMS come Wordpress e Joomla.
Il framework è uno strumento di sviluppo basato su librerie e finalizzato alla creazione di template grafici attraverso un'interfaccia che permette di modificare font, colori di sfondo, architettura e vari altri elementi web dal contenuto dinamico. I contenuti dinamici sono quelli amministrabili direttamente dall'utente attraverso editing diretto delle pagine senza necessità di particolari conoscenze tecniche come l'html o altri linguaggi di sviluppo.
Le differenze di un sito responsivo rispetto a quelli tradizionali saltano subito all'occhio: un sito responsivo ha generalmente un'icona che indica un menù off canvas (fuori griglia) che si apre nella corretta dimensione del display touch-screen dello smartphone. Il menu occupa generalmente tutta la larghezza dello schermo e lo scorrimento e affidato al solo scroll verticale. Ugualmente le immagini con classe di stile responsivo tenderanno a ridursi di dimensione adattandosi ai piccoli schermi mentre i contenuti testuali su più colonne si incolonneranno dinamicamente e in modo fluido su una o due colonne secondo dimensioni preimpostate in percentuale che genereranno una dimensione adeguata dei caratteri permettendo una lettura corretta e scorrendo le pagine solamente in verticale.