By | 7 Febbraio, 2020
Sito responsive: che cosa significa e come realizzarlo

Oggi un sito dev’essere responsive. Gli utenti navigano sul web sempre di più tramite dispositivi mobili (che hanno soppiantato i desktop come strumenti di navigazione già nel 2013) e i siti devono tenerne conto: i testi devono andare a capo, le immagini non devono rimanere una a fianco all’altra ma spostarsi in colonna, le tabelle devono modificarsi da sole, secondo le dimensioni dello schermo utilizzato.

Sito responsive: che cos’è?

Un sito responsive – in inglese tradotto con “reattivo” – è per l’appunto un website capace di riconoscere istantaneamente e automaticamente il dispositivo su cui l’utente sta navigando (smartphone, tablet, desktop) e conseguentemente adattare il template, le funzioni e i contenuti alle dimensioni dello schermo. In questo modo, a prescindere dal dispositivo, la pagina risulta facile da navigare e da leggere.

Siti web responsive: perché realizzarli?

Un sito responsivo procura un risparmio di gestione

Un sito responsivo necessita una sola area di gestione per i contenuti. Questa permette un inserimento unico del materiale, e conseguentemente un risparmio di denaro, e soprattutto di tempo. È come avere tre siti in uno: per aggiornare basta agire una volta sola ed è solo il layout a cambiare sulla base del dispositivo.

Un layout responsive rende il sito user-friendly

L’esperienza di navigazione è nettamente migliore: semplice, prima di tutto, ma anche fluida e intuitiva. Un sito non responsive, visto da cellulare, non è facilmente fruibile, e di conseguenza non fa altro che aumentare il tasso di rimbalzo degli utenti.

Se mobile responsive, il sito amplia il suo mercato

Come già detto nel primo paragrafo, dal 2013 in poi Internet è sempre più utilizzato mediante dispositivi mobili. Conseguentemente, i siti responsive sono raggiungibili da un maggior numero di persone (contando per l’appunto quelli che navigano da smartphone e tablet). La conseguenza? L’aumento dei clienti potenziali raggiunti e quindi delle vendite.

Google consiglia agli utenti siti web responsive

Google utilizza la stessa “user-experience” come fattore di ranking: se il tasso di rimbalzo è alto, la qualità del sito cala. Come detto sopra, un sito responsive è un fattore importantissimo per gli utenti e la loro esperienza di navigazione.

Responsive site: elementi essenziali

Layout responsive

Un layout responsive è anche detto layout fluido, con dimensioni in percentuali (al contrario di quello fisso dove queste sono in pixel). Grazie a questo, il sito si adatta alla risoluzione del dispositivo che lo visualizza.

Contenuti accessibili

Come già detto, con un sito responsive c’è un risparmio gestionale, poiché non serve lavorare su tre template diversi e non bisogna caricare ogni volta gli stessi contenuti tre volte. Ma l’utente si aspetta di trovare su mobile le stesse cose che ci sono sulla versione desktop. È importante quindi rendere i contenuti accessibili da ogni dispositivo, e non nascosti o coperti da altri elementi.

Grafica ordinata, non esagerata

È importante avere una grafica che attiri l’attenzione degli utenti, ma bisogna accertarsi di non rallentare particolarmente il caricamento da smartphone e tablet con grossi effetti grafici e troppi elementi decorativi. Una grafica ordinata, senza troppe distrazioni è una scelta in linea con un sito responsive. Mi raccomando: lineare e pulito non significa scarno e senza elementi fondamentali come logo e colori del brand.

Come realizzare sito responsive?

Rendere un sito web responsive tramite codice

Per rendere un sito responsive tramite codice ci sono due tecniche molto conosciute:

  • la prima è la viewport, ovvero un’istruzione da inserire nel codice HTML, più precisamente nella <head>, che descrive la larghezza della pagina (uguale a quella del device) e il livello di zoom iniziale (pari a 1).

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

  • la seconda tecnica invece è una modifica del codice CSS chiamata mediaquery che, aggiunta al file stile di CSS, descrive l’aspetto di alcuni elementi nel caso in cui il sito venga visualizzato su un dispositivo con larghezza minore dei pixel indicati.

@media screen and (max-width: 480px) {

/* codice CSS per il dispositivo mobile */

}

Realizzare un sito responsive con i plugin di WordPress

Un sito responsivo può essere realizzato tramite alcuni plugin di WordPress:

  • Responsive Menu: permette di creare dei menù responsive, facilmente personalizzabili;
  • Site Origin Page Builder: utile per costruire layout personalizzati, che donano un’estetica moderna e responsive al sito;
  • Any Mobile Theme Switcher: rileva il browser del dispositivo che sta visualizzando il sito e offre impostazioni diverse a seconda dei browser e dei dispositivi (es.: layout diversificati);
  • Imagify: ridimensiona il peso delle immagini, per velocizzare la fase di caricamento, senza abbassarne la qualità;
  • Responsive Lightbox & Gallery: rende tutte le immagini, i video e le gallery compatibili con qualunque dispositivo;
  • WPtouch: permette di creare una versione alternativa del sito, che si adatti ai dispositivi mobile senza impatti negativi sulla SEO.
Category: Web