Sito web con design responsivo spiegato con immagini
12 marzo 2025
Sommario: Un sito web moderno non è sempre visualizzato allo stesso modo, ma si adatta alle dimensioni degli schermi utilizzati dagli utenti per esprimere al meglio la sua bellezza e facilità d'uso.
Abbiamo già spiegato, a parole, cos'è e come si comporta un sito internet responsivo adattandosi alle dimensioni dello schermo utilizzato per visualizzarlo.
Ora, invece, ripeteremo gli stessi concetti, ma questa volta utilizzando una serie di immagini che mostrano in pratica come l'aspetto di un sito web responsivo cambia al cambiare delle dimensioni degli schermi.
Eccoci qui con in mano il nostro piccolo smartphone. Nella Figura 1 puoi vedere come appare la home page del sito bbcs.it appena aperta su un telefono di piccole dimensioni.
Come puoi notare, lo sfondo nero occupa l'intero schermo, fino a quando, scorrendo la pagina, il logo scoprirà la parola "molto" e volerà via.
Le dimensioni del testo e del logo sono adatte alla larghezza dello schermo. La dimensione della font del testo è di circa 29 pixels, mentre l'interlinea è del 140% (circa 40 pixels). La larghezza del logo è di 103 pixels.
Qui lo smartphone è tenuto in verticale. Cosa succede se invece lo ruotiamo in orizzontale? Nella figura che segue puoi vedere come la stessa pagina di prima si adegua alle nuove dimensioni.
Lo sfondo nero anche in questo caso occupa l'intero schermo, benché quest'ultimo sia molto più piccolo in altezza di quello precedente.
Anche le dimensioni del testo e del logo si sono adattate al nuovo schermo. Infatti, questa volta la larghezza del logo è di circa 206 pixels e la dimensione della font del testo è di circa 50 pixels. Tuttavia, l'interlinea non è aumentato proporzionalmente perché il sito ha tenuto conto dell'altezza ridotta dello schermo e ha ridotto di conseguenza l'interlinea al 110% (circa 55 pixels).
Per tenere conto dell'altezza ridotta dello schermo, il sito ha anche spostato il testo leggermente più in alto e il profilo del pianeta Terra leggermente più in basso.
Ma c'è dell'altro. Se scorriamo più in giù nella stessa pagina arriviamo al punto mostrato nella seguente figura.
Una prima cosa da notare è che, oltre al pulsante d'aiuto, in alto a destra c'è anche un pulsante per far apparire il menu del sito. La scelta di avere un pulsante invece del menu è dettata dal limitato spazio disponibile in uno schermo così piccolo.
In questa schermata possiamo osservare anche la grandezza di circa 39 pixels del titolo (interlinea circa 46 pixels) e di 16 pixels del testo dei paragrafi (interlinea 24 pixels).
Tenendo lo smartphone in orizzontale, vediamo come si adatta anche questa parte della pagina.
Seguendo gli stessi principi considerati nella Figura 2, anche gli elementi di questa parte della pagina si adeguano automaticamente all'altezza ridotta del dispositivo. In particolare la barra fissa superiore viene ridimensionata al minimo per dare più spazio possibile agli elementi che contano di più.
Le font e gli interlinea dei testi dei sottotitoli e dei paragrafi vengono adattati proporzionalmente in modo da rendere al meglio l'esperienza di lettura.
Ora cambiamo dispositivo. Passiamo a un tablet e iniziamo anche in questo caso tenendolo in verticale.
Come nel caso dello smartphone, la pagina del sito si adatterà di nuovo quando ruoteremo il tablet in orizzontale.
Un'altra impostazione importante è legata alla lunghezza delle righe, che come forse hai già notato nella Figura 4 dello smartphone in orizzontale, non si estende all'intera larghezza del dispositivo, ma si ferma a un valore massimo di circa 70 caratteri, evitando quello che ci piace chiamare "effetto partita di tennis".
Vedere come il sito si adatta alle diverse dimensioni di una finestra Windows sarà ancora più interessante. Nelle due figure che seguono ne puoi osservare due passaggi.
Mentre allarghiamo la finestra di Windows, gli ampi spazi a destra e a sinistra del testo saranno evidenti finché non si raggiunge una larghezza della finestra (1045 pixels) sufficiente a contenere anche il menu.
Ingrandendo ancora la finestra, gli spazi bianchi si modificheranno in modo da ottenere sempre un design proporzionato e gradevole fino a raggiungere la larghezza di 1200 pixels, come mostrato in Figura 8.
Da 1200 pixels in poi, le proporzioni degli elementi della pagina rimangono le stesse fino a dimensioni dello schermo infinite. L'unico, importante, limite sono le dimensioni delle immagini raster (che nella Figura 8 sono il pianeta Terra e il faccino di Giuseppe) che in questo momento sono visualizzabili correttamente al massimo su di un TV 8K.
Quello che abbiamo visto fino a questo momento poteva anche essere simulato utilizzando la "device toolbar" del DevTools di Chrome. Con essa è possibile modificare le dimensioni dello schermo a qualsiasi valore, comprese quelle di un TV 4K o 8K.
A parte le immagini raster, tutto il resto del design del sito si adatterebbe perfettamente a qualsiasi altra dimensione maggiore di 8K. Anche le immagini vettoriali, come quella del pulsante per il menu, si ridimensionerebbero a qualsiasi dimensione mantenendo il massimo della qualità.
Concludiamo quindi qui. Ci sono anche tanti altri tipi di modifiche che design particolari devono adottare per essere realmente responsivi. Ma le analizzeremo quando considereremo l'argomento "Design ed effetti speciali".
Condividi questa pagina:
In alternativa ai pulsanti che trovi qui sopra, puoi selezionare il seguente indirizzo, copiarlo e incollarlo nel messaggio da inviare sul tuo social preferito:
https://bbcs.it/sviluppo-sito-web-professionale/sito-responsivo/design-responsivo.html