✅ Come creare un layout reattivo

Sommario

Requisiti
Le proprietà larghezza minima e larghezza massima
Usando il Imbottitura relativa

UN layout reattivo è diventata la norma nel web design, questo tipo di layout di pagina significa che se la finestra che lo contiene cambia di dimensione bruscamente, cioè da molto grande a molto piccola e viceversa, i nostri elementi devono essere in grado di riorganizzarsi per mantenere un esperienza utente decente e funzionale.

Questo è sempre stato disponibile con le regole di CSSTuttavia, nell'ultima implementazione dello stesso, sono state prese misure migliori, in parte dovute alla già esistenza del moderno mondo mobile, che è uno dei grandi consumatori di design reattivo.

Sebbene ci siano diversi framework come Bootstrap o Fondazione che ci danno un layout responsive di default, non possiamo sempre dipendere da loro, ecco perché è molto utile sapere come possiamo costruire un layout di queste caratteristiche con i nostri mezzi.

Requisiti

1- Per completare questo tutorial avremo bisogno di avere una conoscenza di base di HTML sì CSS, poiché sono fondamentali per comprendere gli esempi realizzati nel tutorial.

2- Dal punto di vista tecnico, richiediamo almeno un browser moderno come Google Chrome, un editor di testo per scrivere il nostro codice, possiamo usare Testo sublime o NotePad ++ o anche il blocco note di Windows o Gedit su Linux se ci sentiamo avventurosi.

3- Infine abbiamo bisogno di una connessione Internet per scaricare un'immagine o due se vogliamo inserirla nel nostro codice come vedremo in uno degli esempi mostrati.

Le proprietà larghezza minima e larghezza massima

Questo è forse il primo aspetto che incontriamo quando lavoriamo con gli ambienti reattivo, dato che molte volte ci concentriamo su quando la pagina diventa più piccola, ma che dire delle nuove schermate di 4K? Ecco perché non dobbiamo trascurare la risoluzione massima sotto la quale il nostro sito Web sembra decente.

larghezza minima e larghezza massimaLe proprietà o attributi larghezza minima sì larghezza massima I CSS ci aiutano a combattere questo problema, poiché ci consentono di stabilire i margini massimi sotto i quali vogliamo che sia il nostro design reattivo, poiché se così non fosse, gli estremi nelle taglie possono giocarci uno scherzo, soprattutto in questi momenti in cui le risoluzioni continuano ad aumentare, ma non ancora diventano massicce.

Nell'esempio seguente dimostreremo come possiamo regolare il nostro disposizione grazie alle proprietà menzionate, per questo creeremo un documento HTML con il seguente contenuto:

Esempio di layout reattivo 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, sempre elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales. Phasellus varius ipsum non ligula aliquet ultricies in quis pain. Veicolo Aliquam ac nisl.

Quello che abbiamo fatto è creare tre elementi div che funzionano come una sorta di colonne, quindi in questo caso diciamo al suo elemento contenitore articolo che la sua larghezza massima sarà 1200 pxQuindi, non importa quanto sia grande lo schermo, il design non crescerà mai più da lì, quindi creiamo tre classi, una per ogni div e una assegniamo una larghezza minima in questo modo, non importa quanto lo schermo sia ridotto, va sempre a mantenere quel minimo di proporzioni, questo è ottimo per le immagini come vedremo nello screenshot dell'esempio, ed infine per la classe galleggiante gli assegniamo anche una larghezza minima. Vediamo come appare il nostro esempio nel browser quando abbiamo una grande risoluzione:

INGRANDIRE

Ora vediamo come si ridimensiona quando riduciamo un po' la finestra del browser:

INGRANDIRE

Infine, vediamo il risultato quando facciamo in modo che la finestra abbia una dimensione simile a quella di un cellulare:

Abbiamo potuto vedere come sono state mantenute le proporzioni stabilite come minimo e massimo, ma la cosa più importante è che il nostro design è stato adattato alle diverse risoluzioni con cui lo abbiamo visualizzato, e in questo modo siamo riusciti a garantire che l'utente non perdesse usabilità nella loro esperienza con il nostro sito.

Naturalmente, questo è lungi dall'essere qualcosa da mostrare in produzione, ma ci dà un'idea di dove dovremmo concentrare alcuni degli sforzi quando lavoriamo su progetti reali per le nostre applicazioni e pagine, la cosa interessante è che le colonne sono state regolate in modo da poter vedere come siamo passati da un layout a 3 colonne a un layout a colonna singola.

Usando il Imbottitura relativa

Il imbottitura È una misura che ci consente di mantenere uno spazio del contenuto contro i bordi del contenitore in modo da stabilire un limite di quanto andrà lontano, non deve essere confuso con il margine poiché questo è un altro concetto.

Il punto è che imbottitura non viene quasi mai preso in considerazione quando si effettua un disposizione essere reattivo risultando in testi e contenuti che in seguito rimangono non estetici quando si cambia la risoluzione con cui viene visualizzato il design.

Nel codice seguente ciò che faremo è posizionare a imbottitura che funziona relativamente, cioè quando si regola la dimensione della finestra, il nostro imbottitura Cambierà per mantenere le proporzioni e in questo modo fare in modo che il contenuto rimanga sempre come lo abbiamo disposto nonostante abbia meno spazio a causa del cambio di risoluzione. Vediamo il nostro esempio di codice:

Imbottitura relativaMantieni le proporzioni con una relativa imbottitura

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, sempre elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales.

Come vediamo definiamo le proprietà imbottitura di ogni classe con valori percentuali anziché valori fissi con misure in pixel, in questo modo l'interprete di stile del browser darà una misura che va in base al valore che abbiamo posizionato, alla fine quando vediamo il nostro esempio nel browser otteniamo quanto segue:

INGRANDIRE

Ora se riduciamo le dimensioni della finestra vedremo come si effettua una regolazione ma mantenendo una distanza proporzionale dal testo ai bordi:

Notiamo quindi come viene mantenuto il nostro design e previene la deformazione riducendo la risoluzione della persona che lo contiene, mantenendo così un'esperienza coerente per il nostro utente.

Sebbene ci siano concetti più avanzati che toccheremo in altri tutorial, con questo paio di trucchi o suggerimenti possiamo riuscire a dare nuova vita ai nostri vecchi siti, e molto più ora dei motori di ricerca come Google Ci chiedono una versione mobile per poterci dare le preferenze nei risultati. La cosa più importante per ottenere grandi risultati è sperimentare e continuare a praticare molto in modo che queste soluzioni escano naturalmente dalla nostra mente e non debbano ricorrere sempre a guide.

Con questo finiamo questo tutorial, come vediamo non abbiamo bisogno di alcun framework per ottenere risultati reattivo, e non abbiamo nemmeno bisogno di lasciare la combinazione HTML + CSSL'unica cosa è che se dobbiamo costruire i nostri strumenti, tuttavia, la soddisfazione di migliorare il nostro design è una grande ricompensa.