Fin dall'inizio, il World Wide Web è stato progettato per essere indipendente. Non importa di che hardware hai. Non è importante sapere quale sistema operativo è installato sul tuo dispositivo. Finché sei in grado di connetterti a Internet, il World Wide Web è accessibile per te.
Agli albori del web, la maggior parte delle persone utilizzava computer desktop. Oggi il Web è disponibile su computer, laptop, tablet, telefoni pieghevoli, frigoriferi e auto. Le persone si aspettano giustamente che i siti web abbiano un aspetto soddisfacente su qualsiasi dispositivo utilizzano. Tutto ciò è reso possibile dal adattabile.
Il design adattabile non è il primo approccio alla progettazione di siti web. Negli anni precedenti il design reattivo, web designer e 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 (larghezza) per 480 pixel (altezza). Si tratta di tubi a raggi catodici convessi, non come i display a cristalli liquidi piatti che abbiamo ora.
Agli albori del web design era una scommessa sicura progettare pagine web con una larghezza di 640 pixel. Ma mentre altre tecnologie, come gli smartphone e le fotocamere, erano in miniatura, gli schermi diventavano più grandi (e alla fine si diventavano più limpidi). In breve tempo, la maggior parte degli schermi aveva dimensioni di 800 x 600 pixel. Il design web è cambiato di conseguenza. Designer e sviluppatori hanno iniziato a presumere che 800 pixel fosse un valore predefinito sicuro.
Poi gli schermi sono tornati di nuovo più grandi. 1024 x 768 è diventato l'impostazione predefinita. È stata come una corsa di armi tra web designer e produttori di hardware.
Che fosse 640, 800 o 1024 pixel, la scelta di una larghezza specifica per la progettazione era chiamata larghezza fissa.
Se specifichi una larghezza fissa per il tuo layout, questo verrà visualizzato correttamente solo con questa larghezza. Se un visitatore del tuo sito ha uno schermo più largo di quella scelta da te, lo spazio disponibile sullo schermo sarà sprecato. Puoi centrare i contenuti delle pagine per distribuire lo spazio in modo più uniforme (anziché avere uno spazio vuoto su un lato), senza sfruttare appieno lo spazio disponibile.
Analogamente, se un visitatore arriva con uno schermo più piccolo della larghezza che avete scelto, i contenuti non verranno adattati orizzontalmente. Il browser genera una barra di scansione, l'equivalente orizzontale di una barra di scorrimento, e l'utente deve spostare l'intera pagina verso destra e sinistra per vedere tutti i contenuti.
Layout liquidi
Sebbene la maggior parte dei designer utilizzasse layout a larghezza fissa, 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 consente di visualizzare solo una dimensione specifica.
Questi erano chiamati layout liquidi. Tuttavia, anche se un layout fluido avrà un aspetto soddisfacente su un'ampia gamma di larghezze, inizierà a peggiorare ai livelli estremi. Su uno schermo ampio il layout sembra allungato. Su uno schermo piccolo il layout appare compresso. Entrambi gli scenari non sono ideali.
Puoi mitigare questi problemi utilizzando min-width e max-width per il tuo layout.
Tuttavia, con qualsiasi dimensione inferiore alla larghezza minima o superiore alla larghezza massima, si verificano gli stessi problemi che si verificherebbero con un layout a larghezza fissa.
Su uno schermo ampio lo spazio inutilizzato potrebbe essere sprecato.
Su uno schermo stretto, l'utente deve spostare l'intera pagina a sinistra e a destra per vedere tutto.
La parola liquido è solo uno dei termini utilizzati per descrivere questo tipo di layout. Questi tipi di design venivano anche chiamati layout fluidi o layout flessibili. La terminologia era fluida quanto la tecnica.
Schermi piccoli
Nel XXI secolo il Web continuò a ingrandirsi sempre di più. E anche i monitor. Ma arrivarono nuovi schermi che erano più piccoli di qualsiasi dispositivo desktop. Con l'arrivo dei telefoni cellulari dotati di browser web completi, i designer hanno dovuto affrontare un dilemma. Come possono assicurarsi che il loro design venga visualizzato correttamente su un computer desktop e un cellulare? Era alla ricerca di un modo per definire i propri contenuti su schermi di dimensioni comprese tra 240 pixel e 240 pixel di larghezza e migliaia di pixel di larghezza.
Siti separati
Un'opzione è creare un sottodominio separato per i visitatori che utilizzano dispositivi mobili. ma poi devi mantenere due codebase e due progetti separati. Per poter reindirizzare i visitatori sui dispositivi mobili, dovresti eseguire lo sniffing degli user agent, che può essere inaffidabile e facilmente soggetto a spoofing. Chrome ritirerà la stringa dello user agent per motivi di privacy. Inoltre, non c'è un confine netto 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 solo sito con due o tre layout a larghezza fissa.
Quando sono arrivate per la prima volta le query supporti in CSS, l'azienda ha aperto le porte a una maggiore flessibilità dei layout. Tuttavia, molti sviluppatori si sono dimostrati comunque molto a proprio agio nel creare layout a larghezza fissa. Una tecnica prevedeva il passaggio da un numero limitato di layout a larghezza fissa a determinate larghezze. Alcune persone lo definiscono un design adattivo.
Il design adattivo ha permesso ai designer di fornire layout che fossero utili con dimensioni diverse, ma il design non è mai stato del tutto corretto se visto tra le due dimensioni. Il problema dello spazio in eccesso persisteva, anche se non era grave come in un layout a larghezza fissa.
Utilizzando le query multimediali CSS, puoi fornire agli utenti il layout più simile alla larghezza del loro browser. Tuttavia, data la varietà di dimensioni dei dispositivi, è probabile che il layout sembri meno che perfetto per la maggior parte delle persone.
Responsive web design (RWD)
Se i layout adattivi sono un mashup di query supporti e layout a larghezza fissa, il web design reattivo è un mashup di query supporti e layout fluidi.
Il termine è stato coniato da Ethan Marcotte in un articolo di A List Apart nel 2010.
Ethan ha definito tre criteri per il design reattivo:
- Griglie fluide
- Contenuti multimediali fluidi
- Query supporti
Il layout e le immagini di un sito adattabile vengono visualizzati bene su qualsiasi dispositivo. Ma c'era un problema.
Un elemento meta per viewport
I browser dei cellulari dovevano gestire siti web progettati con layout a larghezza fissa per schermi più ampi. Per impostazione predefinita, i browser per dispositivi mobili presupponevano che 980 pixel fosse la larghezza prevista dalle persone (e non sbagliavano). Pertanto, anche se utilizzassi un layout fluido, il browser applicherebbe una larghezza di 980 pixel e poi ridimensionerà la pagina web visualizzata fino alla larghezza effettiva dello schermo.
Se utilizzi il Adattamento reattivo, devi indicare al browser di non applicare la scalabilità.
Puoi farlo con un elemento meta in head della pagina web:
<meta name="viewport" content="width=device-width, initial-scale=1">
Sono presenti 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 (invece di presumere che la larghezza del sito web sia 980 pixel).
Il secondo valore è initial-scale=1.
Indica al browser quanta scalabilità eseguire o quanto poco.
Grazie al design reattivo, il browser non deve scalare in alcun modo.
Con l'elemento meta impostato, le tue pagine web sono pronte per essere adattabili.
Design moderno di risposta
Oggi siamo in grado di creare siti web adattabili in modi che vanno ben oltre le dimensioni dell'area visibile.
Le funzionalità dei contenuti multimediali consentono agli sviluppatori di accedere alle preferenze dell'utente e permettono di avere esperienze personalizzate.
Le query container consentono ai componenti di possedere le proprie informazioni adattabili.
L'elemento picture consente ai designer di prendere decisioni artistiche in base alle proporzioni dello schermo.
Verifica le tue conoscenze
Verifica le tue conoscenze del web design reattivo
È sicuro progettare pagine web con una larghezza fissa nel 2021?
In genere, per quali dimensioni di schermo è difficile usare i layout fluidi?
I tre criteri originali per il responsabilizzazione sono:
Il design adattabile è un mondo di possibilità entusiasmante e in continua crescita. Nel resto del corso, scoprirai queste tecnologie e come utilizzarle per creare siti web belli e adattabili per tutti.