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.
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%.
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.
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 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.
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.
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.
È 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.
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.
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:
- Wrapper o container
- Header
- Contenuto
- Barra laterale
- Footer
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.
È 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.
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.
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
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
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 è 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
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
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.
Redattore Capo presso Kinsta e Content Marketing Consultant per sviluppatori di plugin WordPress. Entra in contatto con Matteo su Twitter.
Lascia un commento