{"id":40432,"date":"2020-09-17T05:16:46","date_gmt":"2020-09-17T12:16:46","guid":{"rendered":"https:\/\/kinsta.com\/?p=78861&preview=true&preview_id=78861"},"modified":"2023-02-02T12:07:35","modified_gmt":"2023-02-02T11:07:35","slug":"responsive-web-design","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/responsive-web-design\/","title":{"rendered":"Guida per Principianti al Responsive Web Design (con Esempi di Codice e di Layout)"},"content":{"rendered":"

Con un internet sempre pi\u00f9 accessibile da dispositivi mobili, non \u00e8 pi\u00f9 sufficiente avere un sito web statico<\/a> che appare bello solo sullo schermo di un computer.<\/p>\n

Per non parlare dei tablet, dei laptop 2 in 1 e dei diversi modelli di smartphone con diverse dimensioni dello schermo.<\/p>\n

Quindi, sbattere il vostro contenuto<\/a> in un’unica colonna e pensare di aver concluso il lavoro non vi aiuter\u00e0.<\/p>\n

Con il responsive web design, potete assicurarvi che il vostro sito web appaia al meglio su telefoni cellulari, tablet, laptop e schermi desktop.<\/p>\n

E questo miglioramento dell’esperienza utente significa conversioni pi\u00f9 elevate e crescita del business.<\/p>\n

Questa guida vi dir\u00e0 tutto ci\u00f2 che dovete sapere sulla progettazione di un sito web reattivo, comprese le definizioni, un percorso passo passo, esempi e altro ancora.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Cos’\u00e8 il Responsive Web Design?<\/h2>\n

Il responsive web design \u00e8 un approccio al web design che fa s\u00ec che i vostri contenuti web si adattino alle diverse dimensioni dello schermo e delle finestre di una variet\u00e0 di dispositivi.<\/p>\n

Ad esempio, i vostri contenuti potrebbero essere divisi in colonne diverse sugli schermi del desktop, perch\u00e9 questi sono abbastanza larghi da adattarsi a quel design.<\/p>\n

Se si dividono i contenuti in pi\u00f9 colonne su un dispositivo mobile, per gli utenti sar\u00e0 difficile leggere e interagire.<\/p>\n

Il design reattivo<\/a> consente di consegnare pi\u00f9 layout separati per i vostri contenuti e il vostro design a dispositivi diversi a seconda delle dimensioni dello schermo.<\/p>\n\n

Responsive Web Design e Design Adattivo<\/h2>\n

La differenza tra il responsive design e il design adattivo \u00e8 che il responsive design adatta il rendering di una singola versione di pagina. Al contrario, il design adattivo fornisce pi\u00f9 versioni completamente diverse della stessa pagina.<\/p>\n

\"Design
Design reattivo e adattivo<\/figcaption><\/figure>\n

Sono entrambe tendenze cruciali del web design<\/a> che permettono ai webmaster di controllare l’aspetto del loro sito su schermi diversi, ma l’approccio \u00e8 diverso.<\/p>\n

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

Perch\u00e9 il Design Reattivo \u00c8 Importante<\/h2>\n

Se siete nuovi di web design, sviluppo<\/a> o blogging<\/a>, potreste in primo luogo chiedervi perch\u00e9 il responsive design \u00e8 importante.<\/p>\n

La risposta \u00e8 semplice. Non \u00e8 pi\u00f9 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<\/a>, con oltre il 51%<\/a>.<\/p>\n

\"Quota
Quota di mercato mobile, tablet, desktop<\/figcaption><\/figure>\n

Quando oltre la met\u00e0 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.<\/p>\n

Ma non \u00e8 tutto. Gli utenti con dispositivi mobili costituiscono anche la maggior parte delle visite ai motori di ricerca<\/a>.<\/p>\n

\"Traffico
Traffico di ricerca mobile<\/figcaption><\/figure>\n

Infine, negli ultimi anni, il mobile \u00e8 diventato uno dei pi\u00f9 importanti canali pubblicitari. Anche in un mercato post-pandemico, la spesa pubblicitaria mobile cresce<\/a> del 4,8%, raggiungendo i 91,52 miliardi di dollari.<\/p>\n

Se scegliete di fare pubblicit\u00e0 sui social media<\/a> o di utilizzare un approccio organico come la SEO di YouTube<\/a>, la stragrande maggioranza del vostro traffico proverr\u00e0 da utenti mobili.<\/p>\n

Se le vostre landing page<\/a> 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<\/a> porter\u00e0 a un minor numero di lead e a uno spreco di soldi in spesa pubblicitaria.<\/p>\n

I Siti WordPress Sono Reattivi?<\/h2>\n

Se i siti WordPress sono reattivi o meno dipende dal tema del vostro sito WP. Un tema WordPress<\/a> \u00e8 l’equivalente di un template di un sito web statico e controlla il design e il layout dei contenuti.<\/p>\n

Se utilizzate un tema WordPress predefinito, come Twenty Twenty<\/a>, il design \u00e8 reattivo, ma dato che si tratta di un design a una colonna, potreste non accorgervene quando lo guardate su schermi diversi.<\/p>\n

Se utilizzate un altro tema WordPress, \u00e8 possibile verificare se sia reattivo o meno, confrontando il suo aspetto su diversi dispositivi o utilizzando Chrome Developer Tools.<\/p>\n

I Mattoni del Responsive Web Design<\/h2>\n

In questa sezione, descriveremo le basi della progettazione di un sito web reattivo e i suoi diversi elementi costitutivi.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

CSS e HTML<\/h3>\n

Il fondamento del responsive design \u00e8 la combinazione di HTML e CSS<\/a>, due linguaggi che controllano il contenuto e il layout di una pagina in un determinato browser web.<\/p>\n

\"HTML
HTML vs CSS (Fonte immagine: codingdojo.com)<\/figcaption><\/figure>\n

HTML controlla principalmente la struttura, gli elementi e il contenuto di una pagina web. Ad esempio, per aggiungere un’immagine a un sito web<\/a>, \u00e8 necessario utilizzare un codice HTML come questo:<\/p>\n

<img src=\"image.gif\" alt=\"image\" class=\u201dfull-width-img\u201d><\/code><\/pre>\n
Potete impostare una “classe” o un “id” cui potete successivamente puntare con il codice CSS<\/a>.<\/p>\n
Nel vostro codice HTML potreste anche controllare gli attributi primari come l’altezza e la larghezza, ma questa non \u00e8 pi\u00f9 considerata una best practice.<\/p>\n
Invece, i CSS<\/a> sono utilizzati per modificare il design e il layout degli elementi che si includono in una pagina con HTML. Il codice CSS pu\u00f2 essere incluso in una sezione < style> di un documento HTML o come file di foglio di stile separato.<\/a><\/p>\n
Ad esempio, potremmo modificare la larghezza di tutte le immagini HTML a livello di elemento in questo modo:<\/p>\n
img {\nwidth: 100%;\n}<\/code><\/pre>\n
Oppure potremmo puntare alla specifica classe “full-width-img” aggiungendo un punto all’inizio.<\/p>\n
.full-width-img {\nwidth: 100%;\n}<\/code><\/pre>\n
Potete anche controllare il design al di l\u00e0 di altezza, larghezza e colore<\/a>. Usare i CSS in questo modo permette di creare un progetto reattivo quando lo si combina con una tecnica chiamata media query.<\/p>\n
Media Query<\/h3>\n
Una media query<\/a> \u00e8 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.<\/p>\n
\"Media
Media query per desktop, tablet, smartphone<\/figcaption><\/figure>\n
Funziona in modo simile ad una “clausola if” di alcuni linguaggi di programmazione, controllando fondamentalmente se<\/em> la finestra di visualizzazione di uno schermo \u00e8 abbastanza larga o troppo larga prima di eseguire il codice appropriato.<\/p>\n
@media screen and (min-width: 780px) {\n.full-width-img {\nmargin: auto;\nwidth: 90%;\n}<\/code><\/pre>\n
Se lo schermo \u00e8 largo almeno 780 pixel, le immagini della classe “full-width-img” occuperanno il 90% dello schermo e saranno automaticamente centrate da margini altrettanto ampi.<\/p>\n
Layout Fluidi<\/h3>\n
Un layout fluido \u00e8 una parte essenziale di un design moderno e reattivo. Ai vecchi tempi, si impostava un valore statico per ogni elemento HTML, come 600 pixel.<\/p>\n
Un layout fluido si basa invece su valori dinamici come una percentuale della larghezza del viewport.<\/p>\n
\"Esempio
Esempio di layout fluido<\/figcaption><\/figure>\n
Questo approccio aumenter\u00e0 o diminuir\u00e0 dinamicamente le diverse dimensioni degli elementi del contenitore in base alle dimensioni dello schermo.<\/p>\n
Layout Flexbox<\/h3>\n
Mentre un layout basato sulle percentuali \u00e8 fluido, molti designer e sviluppatori web hanno ritenuto che non fosse abbastanza dinamico o flessibile. Flexbox \u00e8 un modulo CSS progettato come per essere pi\u00f9 efficiente nel disporre pi\u00f9 elementi, anche quando la dimensione del contenuto all’interno del contenitore \u00e8 sconosciuta.<\/p>\n
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\u00e0 uniche, come justify-content, che non \u00e8 possibile modificare con un normale elemento HTML.<\/p>\n
\"Contenitore
Contenitore Flexbox<\/figcaption><\/figure>\n
\u00c8 un argomento complicato, quindi se volete utilizzarlo nel vostro progetto, dovreste leggere la guida a flexbox di CSS Tricks<\/a>.<\/p>\n
Immagini Reattive<\/h3>\n
L’iterazione pi\u00f9 elementare delle immagini reattive segue lo stesso concetto di layout fluido, utilizzando un’unit\u00e0 dinamica per controllare la larghezza o l’altezza. Il codice CSS di esempio di cui abbiamo parlato prima realizza gi\u00e0 questo risultato:<\/p>\n
img {\nwidth: 100%;\n}<\/code><\/pre>\n
L’unit\u00e0 % si avvicina ad una singola percentuale della larghezza o dell’altezza del viewport e fa in modo che l’immagine rimanga proporzionata allo schermo.<\/p>\n
Il problema di questo approccio \u00e8 che ogni utente deve scaricare l’immagine a grandezza naturale, anche su cellulare.<\/p>\n
Per servire diverse versioni in scala per diversi dispositivi, \u00e8 necessario utilizzare l’attributo HTML srcset<\/code> nei tag img, per specificare pi\u00f9 di una dimensione di immagine.<\/p>\n
<img srcset=\"large-img.jpg 1024w,\nmiddle-img.jpg 640w,\nsmall-img.jpg \u00a0320w\"\nsrc=\"small.jpg\"\n\/><\/code><\/pre>\n
WordPress utilizza automaticamente questa funzionalit\u00e0 per le immagini incluse nei post o nelle pagine.<\/p>\n
Velocit\u00e0<\/h3>\n
Quando si cerca di creare un design reattivo per il proprio sito web, la velocit\u00e0 di caricamento dovrebbe essere una priorit\u00e0 assoluta<\/a>.<\/p>\n
Le pagine che si caricano in 2 secondi hanno una frequenza di rimbalzo<\/a> media del 9%, mentre le pagine che impiegano 5 secondi portano ad una frequenza di rimbalzo del 38%.<\/p>\n
Il vostro approccio alla reattivit\u00e0 non deve bloccare o ritardare il primo rendering della vostra pagina pi\u00f9 del necessario.<\/p>\n
Ci sono diversi modi per rendere pi\u00f9 veloci le vostre pagine. Ottimizzare le vostre immagini<\/a>, implementare la memorizzazione nella cache<\/a>, minificare, usare un layout CSS pi\u00f9 efficiente, evitare il JS che blocca il rendering<\/a>, e migliorare il vostro percorso critico di rendering<\/a> sono tutte idee che dovreste prendere in considerazione.<\/p>\n
Potreste anche provare ad implementare Google AMP per le vostre pagine mobili, ma nel nostro caso di studio di Google AMP<\/a>, i nostri lead mobili sono diminuiti di un enorme 59%.<\/p>\n
Comuni Breakpoint nel Responsive Web Design<\/h2>\n
Per lavorare con le media query, \u00e8 necessario decidere i “breakpoint responsive” o i breakpoint delle dimensioni dello schermo. Un breakpoint \u00e8 la larghezza dello schermo in cui si utilizza una media query per implementare nuovi stili CSS.<\/p>\n
Dimensioni comuni dello schermo<\/h3>\n