Seleziona una pagina

Sito web responsive

che cos'è e perché è necessario averlo

 

Se hai un sito web e vuoi posizionarti su Google per dare maggiore visibilità alla tua attività, è fondamentale che il tuo sito sia responsive. In questa guida troverai le informazioni che ti permetteranno di capire cosa significa avere un sito web responsive e perché è così importante averlo. Troverai anche un pratico tutorial per poterlo applicare alla tua realtà e che ti insegnerà a costruirlo passo passo.

sito web responsive

Cosa significa sito web responsive e perché è fondamentale averlo

Un sito web responsive è un sito intelligente, perché riconosce il tipo di dispositivo dal quale l’utente lo sta visualizzando e varia il suo layout in modo da consentirne una visualizzazione corretta, qualsiasi sia lo spazio a disposizione. In questo modo, l’utente non dovrà ricorrere allo zoom per navigare i contenuti e sarà facilitato nella navigazione.

responsive web design da diversi dispositivi

Si differenzia da un sito web adaptive perché utilizza un’unico template che adatta i suoi elementi interni allo spazio disponibile. Nei siti web adaptive invece, vengono creati tanti template quanti sono i possibili dispositivi dai quali può essere visionato il sito. Questa è una soluzione più limitante sia in termini di pesantezza, che in termini di praticità: più template vengono caricati, più la struttura del sito diventerà lenta. Inoltre l’elenco dei template adaptive dovrà essere sempre aggiornato all’aggiunta sul mercato di nuovi devices, o non si sarà in grado di visionare il sito correttamente.

Quindi, il responsive web design è di fondamentale importanza, soprattutto per tre ragioni:

  • essere mobile friendly per l’utente e per Google
  • accessibilità e user experience
  • SEO on site

Secondo gli ultimi report di Statcounter il 37,5% degli italiani naviga da smartphone. E’ necessario quindi che il nostro sito web sia responsive per poter raggiungere un maggior numero di utenti.
Se così non fosse, il nostro sito sarebbe molto poco navigabile da mobile, perché avrebbe un layout poco elastico e che fatica ad adattarsi a spazi più piccoli, rendendo molto difficoltosa la navigazione all’utente, che faticherà a trovare la risposta al suo bisogno. E il sito verrebbe scartato. Un sito web responsive, invece, è caratterizzato da una griglia fluida, con immagini e testi flessibili.

Inoltre, sappiamo bene che la lentezza non è una caratteristica molto apprezzata dagli utenti. Quante volte vi è capitato di entrare in un sito dall’aria molto promettente e di abbandonarlo dopo pochi secondi per la lentezza di caricamento? Anche se il sito è costruito per essere veloce su un dispositivo standard, come da desktop, non è affatto scontato che lo sarà su tutti gli altri, a causa dell’inserimento di materiale che in termini di pesantezza mal si adatta, ad esempio, alla connessione dati da smartphone. Al giorno d’oggi non possiamo permetterci di essere lenti, da nessun dispositivo, perché i modi di navigazione sono cambiati, diventando più eterogenei. Un sito non performante in termini di velocità su devices diversi causa la perdita di preziose opportunità.

mobile dispositivo

Ma non solo. La lentezza non piace non solo ai nostri utenti, ma neanche a Google, il cui obiettivo primario è offrire una risposta immediata a un bisogno dell’utente ed è spietato con chi non lo fa. Quindi, se vuoi migliorare il tuo sito a lato SEO per apparire in prima pagina su Google, è necessario applicare quella che è considerata a tutti gli effetti una best practice agli occhi di Google, rendendo il tuo sito resposive. Sarà così visibile velocemente e senza problemi anche da mobile o da altri dispositivi, risparmiando a Google la fatica di dover indicizzare pagine diverse. Il sito avrà infatti sempre la stessa URL e lo stesso codice HTML.

A lato SEO, sarà anche più facile migliorare le performance del sito, in quanto si dovrà mettere mano ad un unico contenuto, che si adatta a tutti i metodi di fruizione, piuttosto che dover lavorare su contenuti diversi. In questo modo si ridurranno i tempi e i costi.

Se ti interessa approfondire l’argomento, per scoprire le best practice per creare un sito valido agli occhi di Google, segui i nostri corsi SEO dedicati, tenuti da docenti esperti nel settore.

Nella ricerca da mobile, inoltre, Google da la precedenza a siti mobile friendly, perché premia quei contenuti la cui visualizzazione è più semplificata. Che cos’è un sito mobile friendly? E’ un sito la cui navigazione è pensata per essere facilitata anche da dispositivi come smartphone, tablet e smartwatch. Da Aprile 2015, Google ha introdotto un algoritmo che premia questa caratteristica, rendendo ancora più necessario l’utilizzo di siti web responsive.

Come creare un sito web responsive

In WordPress

Se hai intenzione di creare un sito servendoti di un CMS, come WordPress o Joomla, non c’è niente di più semplice!

Al momento della creazione del sito, dovrai semplicemente scegliere un tema classificato come “responsive”, che automaticamente adatterà la sua struttura in base al device utilizzato. Questi tipi di tema sono ormai da tempo sempre più disponibili sul mercato proprio per questo aumento dell’esigenza di creare con facilità siti responsive da adattare su qualsiasi dispositivo.

Se non sai come utilizzare WordPress e come impostare un tema responsive, inizia da qui.

Ma se vogliamo una libertà completa sulla selezione e posizionamento dei vari elementi della pagina, per poter scegliere a quale componente dare priorità in caso di visualizzazione da mobile ad esempio, ci tocca sporcarci le mani. Perché in caso di selezione da parte del tema del CMS, non potremo selezionare manualmente cosa far vedere e cosa no, quindi, soprattutto nella versione mobile, alcuni contenuti andranno necessariamente persi per mancanza di spazio.

Per questo motivo, quando si crea un sito responsive, si parte sempre dal lato mobile: è quello più limitante in termini di spazio e questo ci aiuterà a creare una gerarchia dei contenuti e a fare una selezione più attenta di quegli elementi a cui vogliamo dare priorità assoluta e che devono essere visibili da ogni dispositivo.

Per avere la facoltà di scelta sui contenuti da mostrare in ogni tipo di device, dobbiamo necessariamente mettere mano al codice.

In HTML e CSS

Per creare un sito responsive che ti permetta di gestire in maniera assolutamente autonoma la gerarchia degli elementi del layout, come abbiamo detto, dobbiamo sporcarci le mani con un po’ di codice.

Dopo aver deciso la gerarchia dei contenuti da mostrare, è necessario conoscere il significato di tre elementi:

  • metatag viewport
  • media queries
  • breakpoint

Il metatag viewport è un segmento di codice da inserire nell’head, che definisce la superficie su cui viene creata la pagina web. Ogni dispositivo ne ha uno specifico, che definisce l’area visibile senza andare dover ricorrere allo scrolling.

Corrisponde a questa stringa di codice:

metatag viewport per rendere sito responsive

Inserendo queste istruzioni nell’head, stiamo dicendo al browser che dovrà gestire lo spazio disponibile in base alla grandezza del tipo di device, che andremo a definire specificatamente con le media queries.

Le media queries sono dichiarazioni CSS, un elenco di regole e condizioni che, in base alla dimensione del dispositivo utilizzato dall’utente, permettono di gestire in maniera differente il layout della pagina.
Le media queries sono del tipo

media query per sito web responsive

A separare un’istruzione dall’altra, andremo a inserire i cosiddetti breakpoint. I breakpoint sono dei punti del CSS in cui avvengono delle modifiche al layout in base alla larghezza del dispositivo da cui viene visualizzato il sito web. Vengono appunto usati insieme alle media queries per definire regole diverse in base allo spazio disponibile. Essi possono essere fissati in base al contenuto di una pagina o in base, appunto, al dispositivo.

Nell’immagine sottostante, possiamo vedere come apparirebbe il codice se decidemmo di modificare una pagina, in modo da farla cambiare colore in base alle dimensioni dello schermo.

esempio media queries

In questo modo stiamo definendo che la pagina ha sfondo verde (1). Inserendo un breakpoint a 992px con la relativa media query (2) stiamo istruendo il browser a mostrare quella pagina con sfondo rosa per i dispositivi da 992px o inferiori. E con l’ultima stringa di codice (3), definiamo lo sfondo di colore azzurro per i devices da 600px o più piccoli.

Quindi, impostando i giusti breakpoint e le corrette istruzioni tramite le media queries è possibile istruire il browser a cambiare il layout del sito in base allo spazio a disposizione. Ricorda però che, come per ogni cosa, prima di partire in quarta è necessario avere una strategia, andare a definire i contenuti in ordine di priorità per decidere quali mostrare con precedenza rispetto agli altri.

 

 

[wprs-box]

Valutazione Digital Coach su Google