Con un internet sempre più accessibile da dispositivi mobili, non è più sufficiente avere un sito web statico che appare bello solo sullo schermo di un computer.

Per non parlare dei tablet, dei laptop 2 in 1 e dei diversi modelli di smartphone con diverse dimensioni dello schermo.

Quindi, sbattere il vostro contenuto in un’unica colonna e pensare di aver concluso il lavoro non vi aiuterà.

Con il responsive web design, potete assicurarvi che il vostro sito web appaia al meglio su telefoni cellulari, tablet, laptop e schermi desktop.

E questo miglioramento dell’esperienza utente significa conversioni più elevate e crescita del business.

Questa guida vi dirà tutto ciò che dovete sapere sulla progettazione di un sito web reattivo, comprese le definizioni, un percorso passo passo, esempi e altro ancora.

Cos’è il Responsive Web Design?

Il responsive web design è un approccio al web design che fa sì che i vostri contenuti web si adattino alle diverse dimensioni dello schermo e delle finestre di una varietà di dispositivi.

Ad esempio, i vostri contenuti potrebbero essere divisi in colonne diverse sugli schermi del desktop, perché questi sono abbastanza larghi da adattarsi a quel design.

Se si dividono i contenuti in più colonne su un dispositivo mobile, per gli utenti sarà difficile leggere e interagire.

Il design reattivo consente di consegnare più layout separati per i vostri contenuti e il vostro design a dispositivi diversi a seconda delle dimensioni dello schermo.

Responsive Web Design e Design Adattivo

La differenza tra il responsive design e il design adattivo è che il responsive design adatta il rendering di una singola versione di pagina. Al contrario, il design adattivo fornisce più versioni completamente diverse della stessa pagina.

Design reattivo e adattivo
Design reattivo e adattivo

Sono entrambe tendenze cruciali del web design che permettono ai webmaster di controllare l’aspetto del loro sito su schermi diversi, ma l’approccio è diverso.

Con un design reattivo, gli utenti accederanno allo stesso file di base attraverso il loro browser, indipendentemente dal dispositivo, ma il codice CSS controllerà il layout e lo renderà in modo diverso in base alle dimensioni dello schermo. Con il design adattivo, c’è uno script che verifica la dimensione dello schermo e quindi accede al template progettato per quel dispositivo.

Perché il Design Reattivo È Importante

Se siete nuovi di web design, sviluppo o blogging, potreste in primo luogo chiedervi perché il responsive design è importante.

La risposta è semplice. Non è più sufficiente progettare per un singolo dispositivo. Il traffico web mobile ha superato il desktop e ora rappresenta la maggior parte del traffico dei siti web, con oltre il 51%.

Quota di mercato mobile, tablet, desktop
Quota di mercato mobile, tablet, desktop

Quando oltre la metà dei vostri potenziali visitatori utilizza un dispositivo mobile per navigare in internet, non potete servire loro una pagina progettata solo per il desktop. Sarebbe difficile da leggere e da usare e genererebbe una cattiva esperienza utente.

Ma non è tutto. Gli utenti con dispositivi mobili costituiscono anche la maggior parte delle visite ai motori di ricerca.

Traffico di ricerca mobile
Traffico di ricerca mobile

Infine, negli ultimi anni, il mobile è diventato uno dei più importanti canali pubblicitari. Anche in un mercato post-pandemico, la spesa pubblicitaria mobile cresce del 4,8%, raggiungendo i 91,52 miliardi di dollari.

Se scegliete di fare pubblicità sui social media o di utilizzare un approccio organico come la SEO di YouTube, la stragrande maggioranza del vostro traffico proverrà da utenti mobili.

Se le vostre landing page non sono ottimizzate per il mobile e facili da usare, non sarete in grado di massimizzare il ROI dei vostri sforzi di marketing. Un cattivo tasso di conversione porterà a un minor numero di lead e a uno spreco di soldi in spesa pubblicitaria.

I Siti WordPress Sono Reattivi?

Se i siti WordPress sono reattivi o meno dipende dal tema del vostro sito WP. Un tema WordPress è l’equivalente di un template di un sito web statico e controlla il design e il layout dei contenuti.

Se utilizzate un tema WordPress predefinito, come Twenty Twenty, il design è reattivo, ma dato che si tratta di un design a una colonna, potreste non accorgervene quando lo guardate su schermi diversi.

Se utilizzate un altro tema WordPress, è possibile verificare se sia reattivo o meno, confrontando il suo aspetto su diversi dispositivi o utilizzando Chrome Developer Tools.

I Mattoni del Responsive Web Design

In questa sezione, descriveremo le basi della progettazione di un sito web reattivo e i suoi diversi elementi costitutivi.

CSS e HTML

Il fondamento del responsive design è la combinazione di HTML e CSS, due linguaggi che controllano il contenuto e il layout di una pagina in un determinato browser web.

HTML vs CSS
HTML vs CSS (Fonte immagine: codingdojo.com)

HTML controlla principalmente la struttura, gli elementi e il contenuto di una pagina web. Ad esempio, per aggiungere un’immagine a un sito web, è necessario utilizzare un codice HTML come questo:

<img src="image.gif" alt="image" class=”full-width-img”>

Potete impostare una “classe” o un “id” cui potete successivamente puntare con il codice CSS.

Nel vostro codice HTML potreste anche controllare gli attributi primari come l’altezza e la larghezza, ma questa non è più considerata una best practice.

Invece, i CSS sono utilizzati per modificare il design e il layout degli elementi che si includono in una pagina con HTML. Il codice CSS può essere incluso in una sezione < style> di un documento HTML o come file di foglio di stile separato.

Ad esempio, potremmo modificare la larghezza di tutte le immagini HTML a livello di elemento in questo modo:

img {
width: 100%;
}

Oppure potremmo puntare alla specifica classe “full-width-img” aggiungendo un punto all’inizio.

.full-width-img {
width: 100%;
}

Potete anche controllare il design al di là di altezza, larghezza e colore. Usare i CSS in questo modo permette di creare un progetto reattivo quando lo si combina con una tecnica chiamata media query.

Media Query

Una media query è una parte fondamentale di CSS3 che permette di rendere il contenuto in modo che si adatti a diverse variabili come la dimensione dello schermo o la risoluzione.

Media query per desktop, tablet, smartphone
Media query per desktop, tablet, smartphone

Funziona in modo simile ad una “clausola if” di alcuni linguaggi di programmazione, controllando fondamentalmente se la finestra di visualizzazione di uno schermo è abbastanza larga o troppo larga prima di eseguire il codice appropriato.

@media screen and (min-width: 780px) {
.full-width-img {
margin: auto;
width: 90%;
}

Se lo schermo è largo almeno 780 pixel, le immagini della classe “full-width-img” occuperanno il 90% dello schermo e saranno automaticamente centrate da margini altrettanto ampi.

Layout Fluidi

Un layout fluido è una parte essenziale di un design moderno e reattivo. Ai vecchi tempi, si impostava un valore statico per ogni elemento HTML, come 600 pixel.

Un layout fluido si basa invece su valori dinamici come una percentuale della larghezza del viewport.

Esempio di layout fluido
Esempio di layout fluido

Questo approccio aumenterà o diminuirà dinamicamente le diverse dimensioni degli elementi del contenitore in base alle dimensioni dello schermo.

Layout Flexbox

Mentre un layout basato sulle percentuali è fluido, molti designer e sviluppatori web hanno ritenuto che non fosse abbastanza dinamico o flessibile. Flexbox è un modulo CSS progettato come per essere più efficiente nel disporre più elementi, anche quando la dimensione del contenuto all’interno del contenitore è sconosciuta.

Un contenitore flessibile espande gli elementi in modo che riempiano lo spazio libero disponibile o li restringe per evitare che trabordino. Questi contenitori flessibili hanno una serie di proprietà uniche, come justify-content, che non è possibile modificare con un normale elemento HTML.

Contenitore Flexbox
Contenitore Flexbox

È un argomento complicato, quindi se volete utilizzarlo nel vostro progetto, dovreste leggere la guida a flexbox di CSS Tricks.

Immagini Reattive

L’iterazione più elementare delle immagini reattive segue lo stesso concetto di layout fluido, utilizzando un’unità dinamica per controllare la larghezza o l’altezza. Il codice CSS di esempio di cui abbiamo parlato prima realizza già questo risultato:

img {
width: 100%;
}

L’unità % si avvicina ad una singola percentuale della larghezza o dell’altezza del viewport e fa in modo che l’immagine rimanga proporzionata allo schermo.

Il problema di questo approccio è che ogni utente deve scaricare l’immagine a grandezza naturale, anche su cellulare.

Per servire diverse versioni in scala per diversi dispositivi, è necessario utilizzare l’attributo HTML srcset nei tag img, per specificare più di una dimensione di immagine.

<img srcset="large-img.jpg 1024w,
middle-img.jpg 640w,
small-img.jpg  320w"
src="small.jpg"
/>

WordPress utilizza automaticamente questa funzionalità per le immagini incluse nei post o nelle pagine.

Velocità

Quando si cerca di creare un design reattivo per il proprio sito web, la velocità di caricamento dovrebbe essere una priorità assoluta.

Le pagine che si caricano in 2 secondi hanno una frequenza di rimbalzo media del 9%, mentre le pagine che impiegano 5 secondi portano ad una frequenza di rimbalzo del 38%.

Il vostro approccio alla reattività non deve bloccare o ritardare il primo rendering della vostra pagina più del necessario.

Ci sono diversi modi per rendere più veloci le vostre pagine. Ottimizzare le vostre immagini, implementare la memorizzazione nella cache, minificare, usare un layout CSS più efficiente, evitare il JS che blocca il rendering, e migliorare il vostro percorso critico di rendering sono tutte idee che dovreste prendere in considerazione.

Potreste anche provare ad implementare Google AMP per le vostre pagine mobili, ma nel nostro caso di studio di Google AMP, i nostri lead mobili sono diminuiti di un enorme 59%.

Comuni Breakpoint nel Responsive Web Design

Per lavorare con le media query, è necessario decidere i “breakpoint responsive” o i breakpoint delle dimensioni dello schermo. Un breakpoint è la larghezza dello schermo in cui si utilizza una media query per implementare nuovi stili CSS.

Dimensioni comuni dello schermo

  • Mobile: 360 x 640
  • Mobile: 375 x 667
  • Mobile: 360 x 720
  • iPhone X: 375 x 812
  • Pixel 2: 411 x 731
  • Tablet: 768 x 1024
  • Laptop: 1366 x 768
  • Laptop o desktop ad alta risoluzione: 1920 x 1080

Se si sceglie un approccio di design mobile-first, con una singola colonna e font di dimensioni più piccole come base, non è necessario includere i breakpoint mobili – a meno che non si voglia ottimizzare il design per modelli specifici.

Mobile-first design
Mobile-first design (Fonte: silocreativo.com)

In questo modo è possibile creare un design reattivo di base con due soli breakpoint, uno per tablet e uno per computer portatili e desktop.

Breakpoint Responsive di Bootstrap

Uno dei primi, e più popolari, framework reattivi, Bootstrap ha guidato l’assalto alla progettazione statica del web e ha contribuito a stabilire il design mobile-first come standard del settore.

Di conseguenza, ancora oggi molti designer seguono i breakpoint della larghezza dello schermo di Bootstrap.

Breakpoint reattivi di Bootstrap
Breakpoint reattivi di Bootstrap

Utilizzano le media query per indirizzare i telefoni in landscape (576px), i tablet (768px), i laptop (992px) e gli schermi extra large del desktop (1200px).

Come Rendere Reattivo il Vostro Sito Web

Ora che avete familiarità con i le basi, è il momento di rendere reattivo il vostro sito web.

Impostare gli Intervalli delle Media Query (Breakpoint Responsive)

Impostate gli intervalli delle vostre media query in base alle esigenze specifiche del vostro design. Ad esempio, se volessimo seguire gli standard di Bootstrap per il nostro design, utilizzeremmo le seguenti media query:

  • 576px per telefoni in portrait
  • 768px per tablet
  • 992px per laptop
  • 1200px per dispositivi di grandi dimensioni

Dimensione Elementi di Layout con Percentuali o Creazione di un Layout CSS a Griglia

Il primo e più importante passo è quello di impostare diverse dimensioni per i diversi elementi di layout a seconda della media query o del breakpoint dello schermo.

Il numero di contenitori di layout di cui disponete dipenderà dal design, ma la maggior parte dei siti web si concentra sugli elementi elencati di seguito:

Layout comune
Layout comune

Con l’approccio “mobile-first”, si possono stilizzare i principali elementi del layout in questo modo (senza media query per gli stili di base per i telefoni cellulari):

#wrapper {width:95%;  margin: 0 auto; }

#header {width:100%; }

#content {width:100%; }

#sidebar {width:100%; }

#footer {width:100%; }

// Small devices (landscape phones, 576px and up)

@media (min-width: 576px) {

// Medium devices (tablets, 768px and up)

@media (min-width: 768px) {

#wrapper {width:90%;  margin: 0 auto; }

#content {width:70%; float:left; }

#sidebar {width:30%; float:right; }

// Large devices (desktops, 992px and up)

@media (min-width: 992px) { ... }

}

// Extra large devices (large desktops, 1200px and up)

@media (min-width: 1200px) {

#wrapper {width:90%;  margin: 0 auto; }

}

In un approccio basato sulle percentuali, l’attributo “float” controlla da quale lato dello schermo apparirà un elemento, a sinistra o a destra.

Se si vuole andare oltre le basi e creare un design all’avanguardia e reattivo, è necessario familiarizzare con il layout flexbox di CSS e i suoi attributi come box-sizing e flex.

Implementare Immagini Reattive

Un modo per assicurarsi che le vostre immagini non si rompano è semplicemente quello di utilizzare un valore dinamico per tutte le immagini, come abbiamo spiegato in precedenza.

img {
width: 100%;
}

Ma questo non ridurrà il carico di lavoro dei visitatori mobili quando accedono al vostro sito web.

Quando aggiungete immagini alle vostre pagine, assicuratevi di includere sempre un srcset che con diverse dimensioni della vostra foto.

Farlo manualmente può richiedere molto tempo, ma con un CMS come WordPress, quando si caricano i file multimediali ciò avviene automaticamente.

Tipografia Reattiva per il Testo del Vostro Sito Web

Il focus principale del responsive web design è sulla reattività dei blocchi di layout, degli elementi e dei media. Il testo è spesso trattato come una cosa secondaria.

Ma per un design veramente reattivo, si dovrebbero regolare in modo appropriato anche le dimensioni dei caratteri, in modo che si adattino alle dimensioni dello schermo.

Il modo più semplice per farlo è impostare un valore statico per la dimensione del font, come 22 px, e adattarlo in ogni media query.

Punti di dispersione della Dimensione del carattere rispetto alla dimensione della vista
Punti di dispersione della Dimensione del carattere rispetto alla dimensione della vista

È possibile mirare a più elementi di testo contemporaneamente utilizzando una virgola per separarli.

@media (min-width: 992px) {

body, p, a, h4 {

font-size: 14px;

}

}

Test di Reattività

Per prima cosa, dovete verificare se il vostro sito è mobile-friendly con il test mobile-friendly di Google. Basta inserire l’URL del vostro sito web e cliccare sul pulsante “Test URL” per ottenere i risultati.

Il test Mobile-Friendly di Google
Il test Mobile-Friendly di Google

Non preoccupatevi se ci mette un po’ di tempo per trovare il vostro sito. Questo non riflette la velocità di caricamento delle pagine.

Se avete seguito i passaggi descritti in questo articolo, dovrebbe dirvi che avete un sito web mobile-friendly.

Poi dovete testare il vostro sito su più dimensioni di schermo con uno strumento come Chrome developer tools.

Premete CTRL + Shift + I su Windows, o Command + Option + I su Mac per aprire la relativa vista del dispositivo. Da qui, potete selezionare il dispositivo mobile o il tablet di vostra scelta per testare la reattività del vostro progetto.

Test di layout reattivi e mobili in Chrome
Test di layout reattivi e mobili in Chrome

Ci sono alcune domande alle quali dovreste rispondere durante la procedura.

  • Il layout si adatta al giusto numero di colonne?
  • Il contenuto si inserisce bene all’interno degli elementi del layout e dei contenitori su schermi diversi?
  • Le dimensioni dei caratteri si adattano ad ogni schermo?

Unità CSS e Valori per il Design Reattivo

CSS dispone di unità di misura sia assolute che relative. Un esempio di unità di misura assoluta è un cm o un px. Le unità relative o i valori dinamici dipendono dalle dimensioni e dalla risoluzione dello schermo o dalle dimensioni dei caratteri dell’elemento root.

PX, EM, REM, Unità Viewport per un Design Reattivo

  • PX – un singolo pixel
  • EM – unità relativa basata sulla dimensione del carattere dell’elemento.
  • REM – unità relativa basata sulla dimensione del carattere dell’elemento.
  • VH, VW – % dell’altezza o della larghezza del viewport.
  • % – la percentuale dell’elemento genitore.

Un nuovo web designer o developer dovrebbe probabilmente attenersi ai pixel per il testo perché sono l’unità di misura più diretta nei CSS.

Ma quando si imposta la larghezza e la larghezza massima delle immagini e di altri elementi, l’utilizzo delle % è la soluzione migliore. Questo approccio farà sì che i componenti si adattino alle dimensioni dello schermo di ogni dispositivo.

Esempi di Responsive Web Design

Qui di seguito mostreremo alcuni esempi di responsive web design provenienti da diversi settori industriali – e impareremo da ciò che fanno di giusto e sbagliato.

1. Giornale Online: New York Times

NYT su cellulare, tablet e laptop
NYT su cellulare, tablet e laptop

Sul desktop, il layout del NYT ricorda un giornale tradizionale, affollato di immagini e di diverse righe e colonne di contenuti. Sembra che ci sia una colonna o una riga separata per ogni categoria di notizie.

Su mobile, è conforme allo standard a una colonna e regola anche il menu in modo che sia nel formato a fisarmonica per essere più facile da usare.

2. Blog: The Art of Non-Conformity

The Art of Non-Conformity su cellulare, tablet e laptop
The Art of Non-Conformity su cellulare, tablet e laptop

Il blog di Chris Guillebeau “The Art of Non-Conformity” è online da oltre un decennio. Anche se il design non è il più all’avanguardia, è reattivo e adatta sui dispositivi mobili il layout a due colonne con barra laterale e contenuti principali a un design a una sola colonna.

3. Ecommerce: Amazon

Amazon su cellulare, tablet e laptop
Amazon su cellulare, tablet e laptop

Amazon è leader mondiale nel commercio elettronico per un motivo: l’interfaccia utente è perfettamente fluida su tutti i dispositivi.

Il layout del tablet rimuove semplicemente una parte dello spazio bianco e aggiunge una sezione di icone scrollabili per inserire più contenuti in un pacchetto più piccolo.

Il layout mobile porta tutto in un’unica colonna, concentrandosi sull’essenziale, come la storia recente degli acquisti, piuttosto che sulle icone dei link delle diverse sezioni della homepage principale.

4. Sito video: YouTube

YouTube su cellulare, tablet e laptop
YouTube su cellulare, tablet e laptop

Il cuore del design della homepage di YouTube è una griglia flessibile di video rilevanti per ogni utente. Sui tablet, il numero di colonne in ogni riga scende a tre. Sul mobile, è ridotto a una sola colonna.

La versione mobile sposta anche il menu principale nella parte inferiore dello schermo, più vicino ai pollici degli utenti con smartphone. Questo semplice spostamento migliora la navigazione e la UX.

5. Rivista online: Wired

Wired su cellulare, tablet e laptop
Wired su cellulare, tablet e laptop

L’approccio di Wired al responsive web design si focalizza su un layout a una colonna su tutti gli schermi più piccoli, a partire dai tablet.

Si tratta di un layout di base, ma attira l’attenzione dell’utente sulle storie di punta e sulla CTA per l’iscrizione.

Riepilogo

Ci sono molti elementi che entrano nel responsive web design. Se non si ha una comprensione di base di HTML e CSS, può essere facile commettere errori.

Ma, familiarizzando con i diversi elementi del design, con lo studio di esempi pratici e con i giusti strumenti di sviluppo web e testando il codice di esempio, dovreste essere in grado di rendere il vostro sito web reattivo senza alcun problema insormontabile.

Se vi sembra troppo da realizzare, potete sempre o assumere uno sviluppatore WordPress o semplicemente assicurarvi che il tema sia già reattivo.

Matteo Duò Kinsta

Redattore Capo presso Kinsta e Content Marketing Consultant per sviluppatori di plugin WordPress. Entra in contatto con Matteo su Twitter.