L’importanza di un sito web responsive

Sito web responsive, cosa significa e perché è importante

Vi è mai capitato di navigare con il vostro smartphone su un sito web che non si adatta completamente al vostro schermo?

Sicuramente non sarà stata una bella e facile esperienza!

Per questo motivo voglio parlarvi del perché oggi, un sito web responsive sia davvero importante.

Un sito web responsive non è altro che un sito avente un layout in grado di adattarsi in modo del tutto automatico e ottimale alle dimensioni dello schermo del dispositivo attraverso cui lo stiamo visualizzando e quindi anche all’orientamento di quest’ultimo.

Per intenderci, un sito web per essere responsive, deve poter essere visualizzato in maniera corretta su uno schermo in formato desktop, piuttosto che su un tablet o su uno smartphone, qualunque essi siano e in qualunque modo siano orientati, verticalmente o orizzontalmente.

Perché è importante che un sito web sia responsive?

Diversi sono gli aspetti che rendono importante la responsività di un sito web:

1. Migliorare l’esperienza utente

La forte crescita dell’uso di tablet e smartphone nella vita di tutti i giorni ha reso internet alla portata di tutti.

Avere un sito reattivo, che offre la miglior esperienza possibile ad un utente qualsiasi che naviga attraverso un dispositivo qualsiasi, è sicuramente un aspetto importante se non vogliamo perdere i nostri utenti.

Infatti, immaginiamo che un utente utilizzando uno smartphone, approdi sulla homepage di un sito web non responsive avente una navigazione scorretta e difficile, o con contenuti poco leggibili.

Sicuramente l’utente abbandonerà rapidamente la piattaforma, per cercare un sito più leggibile e intuitivo.

Cosa significa questo?

Che la “bounce rate” o frequenza di rimbalzo del tuo sito web, cioè la percentuale di visitatori che si limita a visitare una sola pagina del sito web in cui sono atterrati, aumenterà.

Una bounce rate alta per un sito web non è sicuramente un indice ottimale.

Per questo è importante mantenere una buona visibilità e usabilità del nostro sito web sui diversi dispositivi utilizzati dagli utenti che navigano sul web.

2. Google preferisce i siti web responsive

Dal 2015, vista la sempre più massiccia diffusione dei dispositivi portatili, anche Google, il motore di ricerca più utilizzato per le ricerche sul web, ha deciso di premiare i siti mobile-friendly penalizzando i siti web non ottimizzati per i dispositivi mobili, i quali perderanno quindi, punti nel posizionamento sui risultati di ricerca.

3. Facilità di gestione

Avere un unico sito reattivo, piuttosto che crearne uno ad-hoc, coesistente con la versione desktop, per rendere positiva l’esperienza di navigazione dell’utente da smartphone, è più vantaggioso.

Infatti verranno risparmiati sicuramente ulteriori sforzi in termini di progettazione, sviluppo e manutenzione, ma soprattutto evitiamo la coesistenza di un nuovo dominio.

L’adottare un dominio diverso per il sito mobile infatti, implicherebbe una suddivisione del traffico su pagine differenti, e quindi perdita di punteggio a livello di posizionamento.

Un altro vantaggio è sicuramente anche la gestione centralizzata dei contenuti.

Le modifiche sono più semplici, in quanto centralizzate, ed evitiamo la duplicazione dei contenuti, motivo di penalizzazione da parte di Google.

Inoltre, quando avrai la necessità di condividere una pagina del tuo sito attraverso un link, non ti troverai mai a chiederti se dovresti collegare il sito mobile o il sito desktop.

Dunque intuiamo che rendere il proprio sito web responsive aumenterà automaticamente il suo posizionamento nei risultati di ricerca di Google.

Quali sono gli strumenti fondamentali per creare un sito web responsive?

Per ottenere un buon sito responsive occorrono tre elementi fondamentali:

1. BreakPoint

Prima di cominciare a scrivere del codice occorre determinare su quali dispositivi cambiare la visualizzazione, definendo i breakpoint, ovvero i punti in cui le modifiche al nostro layout devono avvenire.

I breakpoint rappresentano quindi degli intervalli espressi in pixel che si riferiscono alla larghezza del dispositivo.

Solitamente si determinano quelli più importanti facendo attenzione e scegliendoli con cautela in quanto ad oggi esistono tantissimi dispositivi in formati diversi.

2. Fluid Grid

Una griglia fluida, rappresenta l’elemento fondamentale per la creazione di un sito responsive.

Essa garantirà che il layout dell’intero sito sia flessibile e scalabile.

Ogni elemento sarà così posizionato secondo determinate regole che si adatteranno in modo del tutto proporzionale alle dimensioni dello schermo.

3. Media Queries

Uno dei concetti fondamentali del responsive è quello di mantenere inalterato il codice HTML e di agire sulle regole di stile per gestire l’aspetto dei diversi elementi presenti nella pagina che potranno avere caratteristiche diverse a seconda della risoluzione dello schermo.

Per ottenere ciò, utilizziamo le media queries.

Le media queries non sono altro che un insieme di direttive CSS che ci consentono di definire regole differenti in relazione alle dimensioni dello schermo o al suo orientamento.

Definendo quindi una media queries per un determinato breakpoint, andremo a settare il comportamento degli elementi HTML per quella risoluzione.

… ed ecco

questi sono gli elementi fondamentali per ottenere un layout responsive, e poiché uno dei concetti fondamentali della programmazione è il riuso del codice, ovvero è buona norma riutilizzare il più possibile quanto di buono già è stato fatto, per aiutarci a rendere il nostro sito web responsive potremmo utilizzare uno dei tantissimi framework frontend già esistenti sul web che implementano tutto quanto visto fino ad ora.

Ad esempio uno dei più famosi è sicuramente Bootstrap, gratuito ed open source, ma esistono anche altre valide alternative come Boilerplate e Foundation.

Una volta definito il comportamento responsive del nostro sito web, sarebbe buona norma testarne il corretto funzionamento per garantirne la reattività e fluidità su tutti i browser e dispositivi mobili.

Google Chrome ad esempio mette a disposizione il tool “Toogle device toolbar” per simulare la visualizzazione del nostro sito su vari tablet e smartphone.

Ad oggi quindi avere un sito mobile-friendly non è più una scelta ma un obbligo.

Avere un sito web funzionante implica anche essere presenti sulla rete in maniera efficiente ed efficace, tenendo in considerazione tutti i dispositivi mobili attraverso i quali i nostri utenti ci raggiungeranno.

In questo modo potremo aumentare la visibilità e la popolarità del nostro sito sul web.