Sito web responsive: cos'è, a cosa serve

Neamedia Web Agency

Non di rado mi capita di soffermarmi a parlare con dei clienti e di rendermi conto che il concetto di sito web responsive, per molti di loro, è ancora ignoto o semplicemente appreso per sentito dire. Per alcuni tale espressione è un sinonimo di sito web per smartphone o più semplicemente sito web mobile, ma tale intuizione è forse un po' riduttiva. Nelle prossime righe cercherò di darti qualche informazione in più:
 

Cos'è esattamente un sito web responsive?

PER DIRLA IN BREVE

Con il termine "responsive" si identificano quei siti web che sono in grado di modificare la loro struttura e conseguentemente di riorganizzare i contenuti in essi presenti per ottimizzare l'esperienza di navigazione degli utenti su tutti i tipi di supporto (desktop, smart TV, tablet, smartphone). Tale ottimizzazione si concretizza mediante una riorganizzazione delle pagine e dei blocchi che le compongono.

Un sito web responsivo (all'italiana) si differisce da un sito di architettura più classica per la sua struttura, non più formata da pagine liberamente compilate come fogli bianchi, con testi, immagini e quant'altro ma da una griglia di base, formata da righe che al loro interno ospitano colonne dinamiche (da non confondersi con le comuni tabelle), all'interno delle quali vengono collocati e gestiti i contenuti.
 

UN SITO CHE FA PER QUATTRO

Naturalmente parliamo di un unico sito web che si adatta, non uno per ciascun supporto di visualizzazione, come era consuetudine fare qualche anno fa (ricordi i siti con estensione .mobi, nati proprio per generare siti paralleli ottimizzati per telefonini? Forse no, l'impresa non ha avuto il successo atteso).

L'adattamento delle pagine avviene mediante un codice esteso (CSS) che, unitamente al linguaggio HTML di ultima generazione, prevede tutte le variabili possibili, generalmente suddividendo la gamma dei supporti di navigazione (device) in 3/4 categorie, e modifica istantaneamente le proprietà della struttura del sito non appena questa viene richiamata da un browser di navigazione (Mozilla Firefox, Google Chrome, Safari e simili).
 

SOLO RIADATTAMENTO O QUALCOSA DI PIÙ?

Esatto, è una domanda retorica. Di fatto la modularità e la plasticità con le quali le pagine di un sito realizzato in design responsive sono realizzate e gestite non si esplicano semplicemente in una riorganizzazione dei "blocchi" della struttura ma toccano diversi aspetti. Le immagini che seguono sono uno spunto per fornirti alcuni dettagli.
 

sito web con struttura classica
Figura1 - Schema di visualizzazione di un sito con struttura classica su differenti device. I colori differenziano la tipologia dei blocchi che conpongono la pagina (Testata - Header - del sito, Menu orizzontale, Contenuti generici affiancati, Contenuto generale della pagina, fascia dedicata alle ultime News, Piede - Footer - del sito).


Nel caso di una struttura classica puoi notare (Figura 1) come le caratteristiche del sito, visualizzato su diversi supporti, fondamentalmente sia sempre lo stesso. I blocchi che lo compongono non sono soggetti a modifica o adattamento, se non in alcuni piccoli aspetti, e vengono semplicemente ridotti proporzionalmente allo spazio di visualizzazione disponibile. Ciò che otteniamo è una perfetta miniatura del nostro sito. Per apprezzare il contenuto delle pagine, grafico ma soprattutto testuale, è necessario che gli utenti effettuino uno zoom manuale e spostino l'immagine ingrandita nel punto desiderato per poter essere correttamente visualizzata.

Puoi notare come anche l'ordine dei blocchi presi ad esempio sia il medesimo in tutti i device (3 blocchi contenuto allineati, in rosso, 2 blocchi news allineati, in rosa, e così per tutti gli altri).
 

esempio di sito web con design responsive
Figura2 - Schema di visualizzazione di un sito web responsive. La suddivisione cromatica dei blocchi, la medesima dell'esempio precedente, mette in evidenza la diversa disposizione e visualizzazione dei contenuti in supporti di taglia diversa.


Nel caso del design responsive (Figura2), il risultato è ben differente e possiamo riassumerlo in un breve elenco:

  • L'ordine gerarchico dei blocchi viene generalmente preservato ma la loro distribuzione nello spazio cambia (i blocchi rossi contenuto ad esempio vengono riorganizzati nel tablet in due fasce, tre nello smartphone, cosi come per i blocchi news in rosa), così come può cambiare anche il numero di oggetti mostrati (nel caso dello smatphone, per il quale si predilige immediatezza e velocità di caricamento, i contenuti di minor rilievo possono essere sacrificati a favore di altri da porre in evidenza).
  • L'esperienza di navigazione cambia radicalmente (il menu orizzontale, o eventualmente verticale, vengono sostituiti da un pulsante di apertura menu nella visualizzazione su smartphone, per evitare che i contenuti essenziali delle pagine vengano penalizzati).
  • Si predilige una esposizione dei contenuti a cascata, per favorire la navigazione sui supporti minori mediante le gestualità manuali, evitando di collocare più di un blocco nella medesima fascia orizzontale, a volte anche nel caso dei tablet.
  • La dimensione del testo viene calibrata per una migliore consultazione delle pagine, allo scopo di eliminare l'esigenza di zoomare le finestre.
  • Le immagini e gli sfondi vengono ottimizzati e scalati in maniera razionale, adattando il più possibile la loro dimensione a quella massima della finestra a disposizione (le immagini non hanno più una misura fissa, come nelle strutture classiche, ma vengono gestite con parametri percentuali in alcuni casi, ritagliate per mostrarne le porzioni migliori in altri).
 

UN ESEMPIO REALE DI SITO WEB REALIZZATO CON DESIGN RESPONSIVO (MOBILE-FRIENDLY)

Passiamo ad un esempio più pratico e di più immediata comprensione. Rispetto alle precedenti immagini, la Figura 3 mostra in maniera più evidente l'aspetto che il medesimo sito può avere su supporti differenti. Ho scelto una pagina del sito dell'agenzia di comunicazione Neamedia (quello in cui stai navigando adesso e al quale, naturalmente, sono particolarmente affezionato. Mi perdonerai per la citazione).
 

esempio reale del nuovo sito web di neamedia responsive
Figura 3 - Visualizzazione di una pagina campione dell'attuale sito di Neamedia su diversi device. La lettura della pagina è sempre ottimizzata.


Puoi facilmente vedere come, nella nuova versione, una pagina interna presa ad esempio cambi significativamente nella collocazione e la dimensione dei suoi contenuti, passando dalla modalità monitor a quella smartphone, ottimizzando l'esperienza di navigazione degli utenti in entrambi i casi.

Qui di seguito, invece, il medesimo schema relativo alla versione precedente del sito, con design classico, rimasta online fino a un paio di anni fa (Figura 4). L'approccio sul monitor desktop era particolarmente immediato e il menu verticale dava spazio ad un numero di dettagli e argomentazioni piuttosto elevato (forse troppo), raggiungibili in pochi click. Al contrario l'usabilità su smartphone era decisamente scarsa e scoraggiante, soprattutto in funzione del fatto che la collocazione del menu non rendesse giustizia ai contenuti del sito stesso.

Come risultato di questo assetto, si registrava un aumento progressivo di accessi provenienti da mobile nelle pagine linkate nel menu orizzontale (che di fatto erano accessorie a quelle del menu laterale ma più visibili), che fondamentalmente non portavano alcun risultato in termini di visibilità nel web.
 

esempio reale del vecchio sito web di Neamedia
Figura 4 - Visualizzazione della vecchia homepage della precedente versione del sito di Neamedia, con design classico.

 

Quali vantaggi ci sono nell'avere un sito realizzato con questo tipo di design?

C'è da dire che trasformare il proprio sito non deve essere un obbligo ma un'esigenza. Una tale azione implica impegno e dedizione, da parte del cliente in primis e da parte del professionista al quale viene affidata l'opera. Ritengo personalmente che questo passo debba essere ben ragionato e ponderato, al fine di realizzare un prodotto davvero efficiente e che dia valore aggiunto rispetto ad una eventuale versione più classica.

Detto questo, ritengo che i vantaggi apportati da questo nuovo tipo di design siano:

  • Catturare l'attenzione dell'utente in maniera più semplice ed immediata (difficilmente gli utenti consultano approfonditamente siti non ottimizzati, rimandando la visita ad un potenziale futuro che potrebbe non arrivare).
  • Facilitare la fruizione dei contenuti su tutti i supporti (i contenuti del tuo sito sono universali, perchè non anche la forma?).
  • Andare incontro alla crescente tendenza nell'utilizzo di device di piccola taglia (le ultime campagne di web marketing rivelano un'utenza proveniente da tablet e smartphone pari al 75% del totale).
  • Aumentare il valore dell'immagine aziendale e professionale (un sito al passo con i tempi evidenzia impegno e volontà di proporre il proprio business con entusiasmo).
  • Migliore indicizzabilità delle pagine nelle ricerche degli utenti effettuate su mobile (come si evince da questo articolo ufficiale, il motore di ricerca più diffuso prende in seria considerazione il design per siti web mobile).

Quest'ultima immagine (Figura 5) mostra chiaramente come, nonostante i supporti presi ad esempio siano estremamente differenti per dimensione e per risoluzione, la leggibilità dei contenuti (ad esempio il titolo della pagina ed il testo descrittivo) è perfettamente eguagliata.
 

dimensione dei font a confronto su monitor e smartphone
Figura 5 - Confronto tra i contenuti della homepage dell'attuale sito Neamedia su supporti diversi.

 

Il costo è più elevato rispetto ad un sito con struttura classica?

Non necessariamente. Naturalmente il costo è una variabile che dipende da molteplici fattori (dimensione del sito, architettura, eventuali moduli dinamici o funzionalità nel back-end, tipologia di intervento richiesto e soprattutto il tipo di approccio nei confronti dell'argomento "indicizzazione") ma è evidente che un prodotto professionale abbia un valore economico proporzionato alla sua qualità (siamo sempre lì: Ferrari o Panda? A ognuno la sua scelta, senza che l'una escluda l'altra).

Ritengo personalmente che il giusto prezzo di un lavoro si ottenga dal perfetto equilibrio tra necessità del cliente e professionalità dello sviluppatore.
 

Ci sono delle limitazioni da considerare?

UN DIVERSO IMPATTO GRAFICO

Quando ho iniziato a studiare le modalità e le procedure per la realizzazione di siti di nuova generazione, ricordo di aver letto, tra i tanti, un articolo che riportava all'incirca questa affermazione: "Se pensate di realizzare siti web moderni con impatto grafico e dettagli pari ai siti con struttura classica, il design responsivo non fa per voi!".

Non posso certo negare che le modalità di gestione contenuti, ben diverse da qualche anno fa, segnino un cambio netto di direzione. Quest'ultimo può rappresentare una limitazione per chi ha fatto della professione di web designer la sola espressione di gusto estetico e capacità artistiche ma anche un'opportunità per i professionisti che, giorno per giorno, sviluppano idee innovative che siano un giusta fusione tra design e tecnologia.

Quindi nessun timore, ad ogni limite si contrappone una soluzione!
 

ALCUNI CONSIGLI

Non dimentichiamoci che l'obiettivo di questo nuovo design, di cui abbiamo trattato, in maniera leggera ed evitando tecnicismi, è quello di favorire l'utenza verso i siti web mobile-friendly ampliando la propria visibilità; per questo motivo è necessario ottimizzare il sito e le sue performance in maniera che:

  • Sia subito e sempre raggiungibile (affidiamoci ad un servizio di hosting professionale e solido; crolli continui e periodi di down prolungati possono nuocere alla percezione di affidabilità e serietà che gli utenti hanno di noi).
  • Sia veloce da caricare (evitiamo di sovraccaricare le pagine con gallerie di immagini, a meno che non siano ben collocate e aggiungano valore effettivo ai contenuti del sito).
  • Sia facilmente leggibile (utilizziamo concetti concreti, evitando inutili giri di parole e paragrafi di testo che possiamo risparmiare all'utenza, a meno che non stiamo scrivendo un articolo di approfondimenti).
  • Sia semplice da navigare (sforziamoci di organizzare menu razionali, un'eccessiva gerarchizzazione delle pagine non è l'arma migliore per stimolare la navigazione).

Queste regole, forse all'apparenza anche banali, rappresentano il modo migliore per approcciare alla realizzazione di un sito funzionale, soprattutto se dedicato a supporti mobili.
 

Si può gestire un sito web responsive di questo tipo tramite un pannello?

Si, è possibile gestire, in parte o in totale autonomia, i contenuti del sito attraverso un'interfaccia user friendly (ai clienti che lo richiedono fornisco un accesso ai contenuti tramite un pannello di amministrazione appositamente creato), anche se per esperienza ritengo che il cliente vada seguito ed affiancato per tutto il periodo di vita del prodotto.

Il web è una professione a tutti gli effetti e, nonostante l'approccio spesso illusorio del fai da te sia sempre più propagandato, comporta conoscenze tecniche, grafiche e continuo aggiornamento; non si può pretendere una tale preparazione dai propri clienti, "smanettoni" o meno che siano (ognuno ha una vita da vivere, no?). Ma di questo magari parlerò in un prossimo articolo.
 

Ho già un sito web. Come faccio a sapere se è responsivo?

Se hai già un sito web dovresti avere la risposta ma, se dopo aver letto questo articolo hai il dubbio che il tuo sito non sia stato realizzato a dovere, puoi utilizzare un tool ufficiale messo a disposizione da Google. Questa utile applicazione consente a tutti, anche a chi non ha un rapporto troppo confidenziale con il web, di verificare:

  • Se il sito analizzato è stato realizzato con design mobile-friendly.
  • Se l'architettura del sito, è stata realizzata con accuratezza e nel pieno rispetto dei canoni basilari per una visualizzazione ottimale su supporti di piccola taglia.

Per ora è tutto. Se hai trovato l'articolo interessante, ti invito a condividerlo o a linkarlo. Per informazioni o curiosità, puoi contattarmi all'indirizzo di posta che trovi di fianco alla mia foto.
A presto!
Ultimo aggiornamento: