Il responsive design è un approccio alla creazione di pagine web che fa uso di layout flessibili, immagini flessibili e media query con fogli di stile a cascata. L'obiettivo del responsive design è creare pagine web che rilevano le dimensioni e l'orientamento dello schermo del visitatore e modificano il layout di conseguenza.
Il responsive design è un approccio un po 'retrò al design del sito web che risolve molti problemi di design causati dalla proliferazione di nuovi tipi di dispositivi mobili. Le pagine di progettazione reattiva utilizzano coordinate xey su una griglia per il layout e percentuali matematiche per le immagini invece di parametri a larghezza fissa. L'utilizzo di percentuali invece di parametri a larghezza fissa e un layout a griglia crea un layout più fluido che si ridimensionerà per adattarsi alle dimensioni del display.
Le media query, una caratteristica dei fogli di stile a cascata (CSS), consentono allo sviluppatore di specificare quando un certo stile ha effetto. Con CSS2, ad esempio, una media query servirà fogli di stile stampabili se richiesto. CSS3 ha funzionalità di query estese che consentono di indirizzare i fogli di stile al display di un dispositivo e di servire un foglio di stile per desktop, tablet o smartphone a seconda della risposta alla query.
Questa capacità significa che invece di dover creare una versione mobile speciale di un sito Web, che spesso richiede la scrittura di nuovo codice da zero, gli sviluppatori possono semplicemente creare più fogli di stile per la stessa pagina Web e forse anche associare immagini diverse a ciascuna delle fogli di stile. Di conseguenza, il codice HTML può essere riutilizzato invece di dover essere riscritto, il che consente di risparmiare un considerevole tempo di sviluppo.
Chris Converse di Codify Design Studio dimostra gli elementi di base del responsive design:
Vedi anche: sviluppo di applicazioni mobili, app Web, app nativa, app ibrida, browser mobile, sistema operativo mobile,