Una guida facile alla creazione di un sito web reattivo

Ti sei sempre chiesto quanti siti Web moderni sembrano "adattarsi" così perfettamente indipendentemente dal dispositivo che stai utilizzando per visualizzarli? La codifica di una pagina Web reattiva è una pratica comune che ora è ampiamente diffusa in molti nuovi siti Web oggi. Le pagine Web reattive eseguono un trucco intelligente ridimensionandosi per adattarsi allo schermo del dispositivo utilizzato per visualizzare il sito Web. Ciò significa che stanno benissimo su un iPhone o un computer desktop e tutto il resto.

Questa "reattività" si verifica così facilmente che potresti non averne nemmeno notato. Un ottimo design web reattivo dovrebbe fluire senza interruzioni da dispositivo a dispositivo garantendo al contempo il mantenimento dell'esperienza di navigazione ottimale. I siti Web reattivi sono passati dall'essere una caratteristica "piacevole da avere" a qualcosa che ora è praticamente obbligatorio per qualsiasi sito Web. Come mai? Semplicemente perché il numero di persone che oggi utilizzano i dispositivi mobili per navigare online è schizzato negli ultimi anni e questa tendenza verso i dispositivi mobili (e quindi gli schermi più piccoli) non accenna a rallentare.

Dai un'occhiata ai dati sottostanti (forniti per gentile concessione di statcounter.com). Vedrai che le dimensioni dello schermo di gran lunga più diffuse sono piccole (es. schermi mobili).

Immagina se tutti questi milioni di utenti dovessero guardare siti Web non reattivi su questi dispositivi. Sarebbero estremamente frustrati in quanto comporterebbe l'esecuzione di molte azioni "pizzica e ingrandisci" per essere in grado di vedere adeguatamente il contenuto su quei rispettivi siti Web. È molto probabile che questi utenti abbandonino questi siti Web a favore di un equivalente reattivo.

Se perdere potenziali clienti non è abbastanza per convincerti del valore di avere un sito web reattivo, allora forse il pensiero di perdere le classifiche di ricerca potrebbe esserlo. Google ha da tempo penalizzato i siti web che non offrono una qualche forma di design reattivo o adattivo per gli utenti mobili. Ciò significa che se il tuo sito Web non funziona bene su un dispositivo mobile, aspettati di ricevere una penalità di posizionamento. Cosa significa "funziona bene" su un cellulare? Bene, il contenuto deve essere visualizzato in un modo che sia facile da usare. Ciò significa che deve essere leggibile senza pizzicare e ingrandire. Deve anche caricarsi rapidamente (interessati a come WordPress Caching può aiutare con i tuoi obiettivi di velocità, quindi dai un'occhiata a questo articolo 'WordPress Caching: come funziona e perché dovresti usarlo !')

Pagine Web reattive e pagine Web adattive

Se torniamo indietro di un decennio o due, i telefoni cellulari non erano così diffusi come lo sono ora. Certamente, quelli che hanno fatto un buon lavoro permettendoti di navigare sul web non hanno davvero iniziato ad arrivare fino al 2005 in poi (per quanto incredibile sembri l'iPhone non è nemmeno arrivato sulla scena fino al 2007). Anche le reti cellulari non erano in grado di trasportare molti dati, il che significava che c'erano limitate opportunità per la navigazione sul Web mobile. Tutto è cambiato rapidamente nell'ultimo decennio e i siti Web sono stati lasciati in bilico per recuperare il ritardo al fine di servire meglio i propri clienti nel nuovo mondo basato sui dispositivi mobili in cui ci troviamo ora.

C'erano diversi modi in cui i web designer hanno lavorato per risolvere il problema della necessità di adattare un sito Web "desktop" su uno schermo mobile. All'inizio, venivano sviluppati siti Web "solo mobili" autonomi che venivano eseguiti insieme alla versione principale "desktop" di un sito Web. Questi erano normalmente abbastanza rozzi nel design e spesso offrivano un'esperienza di navigazione ridotta che ometteva molte caratteristiche del loro fratello desktop più grande.

Dopo questo, è entrato in scena l'Adaptive Design. Ciò ha portato la versione solo mobile della pubblicazione di un sito Web per dispositivi mobili appositamente progettato un ulteriore passo avanti. Vengono creati più layout statici che offrono un'esperienza di navigazione mobile più avvincente per l'utente. Viene caricata la dimensione dello schermo del dispositivo che utilizza il sito Web e viene offerta la dimensione più adatta. In genere verrebbero costruite sei dimensioni per soddisfare schermi che vanno da un desktop di grandi dimensioni fino a un cellulare. Il design adattivo, tuttavia, è in qualche modo limitante e sicuramente non a prova di futuro in quanto non riesce a soddisfare le dimensioni dello schermo che non rientrano esattamente nelle 6 categorie del set che sono state costruite. È anche dispendioso in termini di risorse dal punto di vista del design poiché è necessario creare 6 versioni di un sito Web.

Gli svantaggi principali dei design adattivi sono stati risolti con il design reattivo. Invece di offrire un layout predefinito basato sulle dimensioni dello schermo, i design reattivi regolano il modo in cui vengono visualizzati in base al dispositivo. Ciò significa che dovresti ottenere un sito Web di bell'aspetto e facile da usare, indipendentemente dal dispositivo (e dalle dimensioni dello schermo corrispondenti) utilizzato per visualizzare il sito Web.

Il design reattivo è ora considerato lo standard del settore per i siti Web mobili. In effetti, Google stesso consiglia il Responsive Web Design. In questo tutorial daremo uno sguardo ai principianti al design reattivo e a come questo può essere applicato al layout del tuo sito web.

Come funzionano i siti web reattivi?

I siti Web reattivi utilizzano quelle che vengono chiamate CSS Media Query per modificare il layout di un sito Web in base alla larghezza dello schermo. Le CSS Media Query sono uno strumento potente che in realtà è abbastanza semplice da implementare se hai una conoscenza di base dei CSS. Un punto di partenza prima di immergerti nel processo di creazione di un sito Web repsonsive è dare un'occhiata ad alcuni esempi dal vivo. Il modo migliore per farlo è su uno schermo desktop o laptop. Apri un browser, come Chrome e vai a un sito Web popolare. Potresti provare il nostro su pressdium.com.

Riduci le dimensioni della finestra del browser e quindi, passando con il mouse sul bordo destro della finestra del browser, inizia a far scorrere la finestra in modo che si restringa. Vedrai che man mano che diventa più piccolo, il layout del sito Web cambia. Ciò che sta accadendo è che quando il sito Web raggiunge una dimensione predefinita (ad esempio 1.000 px di larghezza) viene attivata una CSS Media Query che indica al browser di utilizzare lo stile CSS relativo a questa larghezza dello schermo. Il sito Web quindi scorre o risponde con grazia a questa nuova dimensione dello schermo e viene visualizzato di conseguenza. Abbastanza intelligente!

Quindi, ora abbiamo una comprensione di base di cosa sta succedendo, tuffiamoci nel nocciolo della questione e vediamo come potremmo costruire noi stessi una pagina web reattiva.

Creazione di una pagina Web reattiva

In questo tutorial non utilizzeremo alcun codice di back-end, quindi non è necessario accedere a un server per provare. Basta creare una cartella sul desktop e aggiungere i file di lavoro a questa.

Passaggio 1: HTML

Crea un file index.html all'interno della tua nuova cartella. Apri questo file con il tuo editor di testo/codice preferito e quindi inserisci il seguente codice:

 <!DOCTYPE html> <html lang="en-US"> <head> <link rel="stylesheet" type = "text/css" href = "style.css" /> </head> <body> <div> <div> <h1>My website</h1> <div> <div class="post"> <h3 class="post-title">Post 1 title</h3> <p><b>post 1 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 2 title</h3> <p><b>post 2 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 3 title</h3> <p><b>post 3 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 4 title</h3> <p><b>post 4 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 5 title</h3> <p><b>post 5 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> <div> <div> <h3>Menu title</h3> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul> </div> </div> </div> </div> </body> </html>

Passaggio 2: CSS esterno

Dovrai aggiungere un file style.css esterno. Per fare ciò, crea un file chiamato style.css e mettilo nella stessa cartella del tuo file index.html. Quindi, aggiungi il codice seguente:

 h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 900px; float: left; padding: 20px; margin: 20px; border: 1px solid darkgrey; } div#sidebar { width: 300px; float: left; padding: 20px; margin: 20px; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; }

A questo punto, se apri il tuo file index.html con il tuo browser internet (abbiamo usato Chrome in questo esempio), quello che dovresti vedere sulla tua pagina è qualcosa del genere:

Ora diamo un'occhiata agli strumenti di sviluppo del nostro browser (di nuovo, stiamo usando Chrome per questo esempio). Apri Chrome e premi F12 e impostalo per visualizzare sul lato destro.

Modifica le dimensioni della finestra spostando il cursore separatore e osserva la risoluzione dello schermo cambiare in tempo reale.

Passaggio 3: unità relative CSS

Nel nostro esempio, vedrai che se lo trascini a 1396px di larghezza noterai che la barra laterale destra con il menu si sposterà sotto il contenuto principale poiché non si adatterà più.

Ciò è accaduto perché abbiamo impostato una larghezza fissa di 900px su div#main e 300px su div#sidebar . Cambiamo il formato di questi valori e utilizziamo invece le percentuali. (Si noti che anche le spaziature interne e i margini vengono conteggiati sulla larghezza, quindi anche questi valori devono essere convertiti in una percentuale.)

Dopo aver apportato queste modifiche, style.css dovrebbe assomigliare a questo:

 h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; }

Ora sta diventando eccitante poiché abbiamo una pagina che ora sta diventando più reattiva!

Sebbene le cose stiano prendendo forma, l'area dei post necessita di ulteriori modifiche CSS. Più piccola è la larghezza, più "brutte" diventano le cassette postali. Per aggirare questo problema, dobbiamo modificare il post CSS in modo da ottenere un layout più carino e più reattivo.

Noterai che i problemi visivi si verificano solo quando lo schermo si restringe. Per risolvere questo problema dovremo utilizzare alcune media query CSS in modo che oltre un certo punto si attivi CSS alternativi che producono un layout più bello.

Quello che proveremo a fare è convertire la nostra area post a 3 colonne "wide screen" in un'area a 2 colonne che si adatterà meglio a uno schermo più stretto. Per fare ciò utilizziamo le media query CSS.

Passaggio 4: query multimediali CSS

Per la nostra modalità "wide screen" introdurremo una query multimediale CSS come questa: come questa @media screen and (min-width: 1396px) . Questa query risiede nella parte superiore del nostro foglio di stile CSS e racchiude l'intero set di CSS che vogliamo eseguire quando il nostro schermo ha una larghezza minima di 1396px.

Ora possiamo copiare tutto questo codice e duplicarlo nel nostro foglio di stile CSS (copialo e incollalo sotto il CSS corrente in modo da avere due versioni identiche in un unico file). Ora, modifica la query multimediale CSS nella parte superiore del secondo batch di CSS per leggere @media screen and (max-width: 1395px) . Questo ora sta dicendo al nostro browser che se è più piccolo di 1395px, dovrebbe eseguire questo CSS. Fatto ciò, possiamo modificare il CSS in questa sezione "più piccola" in modo che alteri il layout della nostra pagina Web in modo che si adatti meglio a uno schermo più piccolo. In questo esempio modificheremo il e lì dovremmo modificare la percentuale div.post dal 31,1% al 45%.

Ora dovresti avere un file CSS simile a questo:

 @media screen and (min-width: 1396px) { h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; } } @media screen and (max-width: 1395px) { h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 45%; float: left; padding: 2%; } }

Ora che le caselle dei post hanno uno stile diverso per gli schermi con larghezza inferiore a 1395px, vediamo come si riflette in azione:

Simpatico!

Noterai che le cose stanno ancora diventando strane durante il ridimensionamento e dopo aver attraversato 760 px di larghezza.

Per ordinare questo possiamo usare lo stesso trucco che abbiamo usato per passare da 3 colonne a 2. Questa volta useremo un "punto di interruzione" di 760px e modificheremo il nostro div.post CSS al 94%. Se lo facciamo, avremo tre media query CSS che dovrebbero assomigliare a questa:

 @media screen and (min-width: 1396px) { } @media screen and (min-width: 761px) and (max-width: 1395px) { } @media screen and (max-width: 760px) { }

La nostra @media screen and (max-width: 760px) CSS includeranno il nostro div.post modificato che sarà simile a questo:

 div.post { width: 94%; float: left; padding: 2%; }

Tutto bene, ora dovresti vedere qualcosa di simile al seguente quando riduci la larghezza del tuo browser a meno di 760px di larghezza:

E questo è tutto! Ora abbiamo creato una pagina web reattiva che funziona su schermi più grandi, tablet e cellulari!

L'uso di questo modello ha più di un gioco e sperimenta con altri stili CSS. C'è molto da imparare giocando con questo esempio e applicando varie regole CSS che possono essere utilizzate in seguito per creare siti Web belli e reattivi.

Ospita il tuo sito web con Pressidium

GARANZIA DI RIMBORSO DI 60 GIORNI

GUARDA I NOSTRI PIANI

Conclusione

Se stai utilizzando un CMS come WordPress, ti starai chiedendo perché è necessario approfondire le query CSS e multimediali sottostanti che alimentano una pagina Web reattiva. Dopotutto, qualsiasi tema WordPress codificato in modo decente dovrebbe già avere un design reattivo integrato. Anche se questo è vero, capire perché un sito Web si comporta in base a determinate larghezze del browser può essere estremamente utile. Potrebbero esserci momenti in cui, per qualche motivo, il design reattivo iniziale aggiunto dall'autore del tema non funziona come ti serve. Sapendo come applicare le query multimediali per modificare quale CSS viene visualizzato in determinati punti di interruzione, sei libero di procedere e applicare le modifiche che si traducono nell'aspetto e nella funzione di cui hai bisogno.

E se hai mai intenzione di creare il tuo tema WordPress, una solida comprensione delle query multimediali è un must assoluto! Speriamo che questo articolo ti abbia dato un'idea di cosa succede dietro le quinte con i siti Web reattivi di oggi. Buona codifica reattiva!