Fin dall'inizio, il World Wide Web è stato progettato per essere agnostico. Non importa quale hardware hai. Non importa il sistema operativo sul tuo dispositivo. Finché puoi connetterti a internet, il World Wide Web è accessibile a te.
Agli albori del web, la maggior parte delle persone utilizzava computer desktop. Al giorno d'oggi il web è disponibile su computer, laptop, tablet, telefoni pieghevoli, frigoriferi e auto. Le persone giustamente si aspettano che i siti web vengano visualizzati correttamente su qualsiasi dispositivo. Grazie al responsive design, tutto questo è possibile.
Il responsive design non è il primo approccio alla progettazione di siti web. Negli anni precedenti il responsive design, i web designer e gli sviluppatori hanno provato molte tecniche diverse.
Design a larghezza fissa
All'inizio degli anni '90, quando il web stava diventando popolare, la maggior parte dei monitor aveva dimensioni dello schermo di 640 pixel di larghezza per 480 pixel di altezza. Si trattava di tubi a raggi catodici convessi, non come i display piatti a cristalli liquidi che abbiamo ora.
Nei giorni formativi dell'inizio del web design, era consigliabile progettare pagine web larghe 640 pixel. Ma mentre altre tecnologie, come i telefoni e le fotocamere, erano in miniatura, gli schermi diventavano più grandi (e alla fine più piatti). In poco tempo, la maggior parte degli schermi aveva dimensioni di 800 x 600 pixel. Web design è cambiato di conseguenza. I designer e gli sviluppatori hanno iniziato a presumere che 800 pixel fossero un valore predefinito sicuro.
Poi gli schermi sono tornati più grandi. 1024 per 768 è diventato l'impostazione predefinita. È sembrata una corsa agli armamenti tra web designer e produttori di hardware.
640, 800 o 1024 pixel, la scelta di una larghezza specifica per la progettazione è stata definita design a larghezza fissa.
Se specifichi una larghezza fissa per il layout, il layout sarà efficace solo con quella larghezza specifica. Se un visitatore del tuo sito ha uno schermo più ampio di quello da te scelto, lo schermo spreca spazio. Puoi centrare i contenuti delle pagine per distribuire lo spazio in modo più uniforme (invece di avere uno spazio vuoto su un lato), ma non riusciresti a sfruttare appieno lo spazio disponibile.
Analogamente, se un visitatore arriva con uno schermo più stretto rispetto alla larghezza che hai scelto, allora i contenuti non si adatteranno in orizzontale. Il browser genera una barra di scansione, l'equivalente orizzontale di una barra di scorrimento, e l'utente deve spostare l'intera pagina a sinistra e a destra per visualizzare tutti i contenuti.
Layout liquido
La maggior parte dei designer utilizzava layout a larghezza fissa, ma alcuni hanno scelto di renderli flessibili. Invece di utilizzare larghezze fisse per i layout, puoi creare un layout flessibile utilizzando le percentuali per la larghezza delle colonne. Questi design funzionano in più situazioni rispetto a un layout a larghezza fissa che sembra corretto solo con una dimensione specifica.
Questi erano chiamati layout fluidi. Tuttavia, anche se un layout fluido avrà un aspetto soddisfacente su un'ampia gamma di larghezze, inizierà a peggiorare agli estremi. Su uno schermo largo il layout sembra allungato. Su uno schermo stretto il layout sembra schiacciato. Entrambi gli scenari non sono ideali.
Puoi limitare questi problemi utilizzando min-width e max-width per il layout.
Ma poi, a qualsiasi dimensione inferiore alla larghezza minima o superiore alla larghezza massima si hanno gli stessi problemi che si riscontrano con un layout a larghezza fissa.
Su uno schermo largo lo spazio inutilizzato andrebbe sprecato.
Su uno schermo piccolo, l'utente deve spostare l'intera pagina a sinistra e a destra per vedere tutte le informazioni.
La parola liquid è solo uno dei termini utilizzati per descrivere questo tipo di layout. Questi tipi di design sono stati chiamati anche layout fluidi o layout flessibili. La terminologia era fluida quanto la tecnica.
Schermi piccoli
Nel 21° secolo, il web continuò a diventare sempre più grande. E anche i monitor. Ma arrivarono nuovi schermi più piccoli di qualsiasi computer. Con l'arrivo dei telefoni cellulari dotati di browser web completi, i designer si trovavano di fronte a un dilemma. Come potrebbe assicurarsi che i loro design venissero visualizzati correttamente su un computer desktop e su un cellulare? Avevano bisogno di un modo per definire i propri contenuti su schermi di dimensioni pari a 240 pixel di larghezza e fino a migliaia di pixel di larghezza.
Siti separati
Un'opzione è creare un sottodominio separato per i visitatori che usano dispositivi mobili. Ma poi devi mantenere due codebase e due progetti separati. Per reindirizzare i visitatori sui dispositivi mobili, dovresti sniffing dello user agent, che possono essere inaffidabili e facilmente falsificati. Chrome ritirerà la sua stringa user agent per motivi di privacy. Inoltre, non esiste una linea chiara tra dispositivi mobili e non. A quale sito invii i dispositivi tablet?
Layout adattivi
Invece di avere siti separati su sottodomini diversi, potresti avere un singolo sito con due o tre layout a larghezza fissa.
Quando le query supporti sono arrivate per la prima volta in CSS, hanno aperto le porte a rendere i layout più flessibili. Molti sviluppatori, però, erano ancora più a loro agio nel creare layout a larghezza fissa. Una tecnica prevedeva il passaggio da un numero limitato di layout a larghezza fissa alle larghezze specificate. In alcuni casi si parla di progettazione adattivo.
Il design adattivo ha permesso ai progettisti di fornire layout che andavano bene in alcune dimensioni. ma il design non era mai del tutto ottimale se visto in questi formati. Il problema dello spazio in eccesso persisteva, anche se non era così male come in un layout a larghezza fissa.
Utilizzando le query supporti CSS, puoi fornire agli utenti il layout più vicino alla larghezza del browser. Ma data la varietà dei dispositivi di dimensioni, è probabile che il layout appaia meno perfetto per la maggior parte delle persone.
Responsive Web Design
Se i layout adattivi sono una combinazione di query supporti e layout a larghezza fissa, il Adaptive Web Design è una combinazione di query supporti e layout flessibili.
Il termine è stato coniato da Ethan Marcotte nel un articolo di A List Apart del 2010.
Ethan ha definito tre criteri per il responsive design:
- Griglie fluide
- Contenuti multimediali fluidi
- Query supporti
Il layout e le immagini di un sito adattabile dovrebbero avere un aspetto corretto su qualsiasi dispositivo. Ma c'era un problema.
Un elemento meta per viewport
I browser sui cellulari dovevano gestire siti web progettati con layout a larghezza fissa per schermi più ampi. Per impostazione predefinita, i browser mobile presuppongono che 980 pixel fosse la larghezza a cui gli utenti progettavano (e non è un errore). Quindi, anche se hai utilizzato un layout liquido, il browser applica una larghezza di 980 pixel e poi ridimensiona la pagina web visualizzata in base alla larghezza effettiva dello schermo.
Se utilizzi il responsive design, devi indicare al browser di non eseguire la scalabilità.
Puoi farlo con un elemento meta nella sezione head della pagina web:
<meta name="viewport" content="width=device-width, initial-scale=1">
Ci sono due valori, separati da virgole.
Il primo è width=device-width.
Questo indica al browser di presumere che la larghezza del sito web corrisponda a quella del dispositivo
(anziché supporre che la larghezza del sito web sia di 980 pixel).
Il secondo valore è initial-scale=1.
che indica al browser il livello di scalabilità da eseguire.
Con il responsive design, non vuoi che il browser esegua alcuna scalabilità.
Con l'elemento meta impostato, le tue pagine web sono pronte per essere reattive.
Design reattivo moderno
Oggi siamo in grado di creare siti web reattivi in molti modi che vanno ben oltre le dimensioni dell'area visibile.
Le funzionalità multimediali offrono agli sviluppatori l'accesso alle preferenze degli utenti e consentono di avere esperienze personalizzate.
Le query del container consentono ai componenti di possedere le proprie informazioni adattabili.
L'elemento picture consente ai designer di prendere decisioni relative alle direzioni artistiche in base alle proporzioni degli schermi.
Verifica le tue conoscenze
Verifica le tue conoscenze del reindirizzamento del web
Nel 2021 è consigliabile progettare pagine web con larghezza fissa?
In genere, i layout liquidi hanno difficoltà con quali dimensioni degli schermi?
In origine, i tre criteri per il responsive design sono?
Il responsive design offre un mondo di possibilità in continuo aumento. Nel resto del corso, scoprirai queste tecnologie e come utilizzarle per creare siti web adattabili per tutti.