Come realizzare un sito web responsivo

Un sito web aziendale articolato ed una serie di “landing page” realizzate ad hoc per le campagne, costituiscono un’importante risorsa per il marketing. Tuttavia le pagine html realizzate devono non soltanto essere accattivanti, facili da leggere ed interessanti: occorre anche che il sito sia “responsivo”, ovvero capace di funzionare al meglio in ogni circostanza.

Citando Wikipedia: “il design responsivo, o responsive web design (RWD), indica una tecnica per la realizzazione di siti in grado di adattarsi graficamente in modo automatico al dispositivo col quale vengono visualizzati (computer con diverse risoluzioni, tablet, smartphone, cellulari, web tv), riducendo al minimo la necessità dell’utente di ridimensionare e scorrere i contenuti. Il design responsivo è un importante elemento dell’accessibilità, la quale tiene conto inoltre di numerosi altri fattori, incentrati non solo sui dispositivi ma anche sulle caratteristiche dell’utente (quali: capacità cognitive, vista, difficoltà fisiche, e così via)”.

Un sito web responsivo deve essere accessibile e fruibile da chiunque, attraverso qualsiasi software di browsing installato su qualunque tipo di dispositivo fisso o mobile

Circa 2 anni fa, Google annunciò che: “a partire dal 21 aprile 2015, Google Search terrà conto dell’ottimizzazione per dispositivi mobili nell’indice di posizionamento dei siti. Questa modifica non solo interesserà le ricerche per cellulari in tutte le lingue e a livello mondiale, ma avrà anche un notevole impatto sui risultati di ricerca di Google. Per gli utenti sarà più facile ottenere risultati pertinenti e di alta qualità, ottimizzati per i propri dispositivi”. Inoltre, secondo le analisi effettuate dagli esperti di Google, fino al 61% di utenti mobili non ritornerà su un sito che ha avuto difficoltà a visitare ed il 40% passerà al sito di un’azienda concorrente.

Perché un sito deve essere responsivo

Gli utenti sono abituati ad accedere in modo semplice ed immediato a qualsiasi tipo di informazione dal loro smartphone e pretendono che ciò sia sempre e comunque possibile senza problemi; ovviamente si sentono frustrati se un sito non è ottimizzato per i dispositivi mobili, oppure se devono aspettare molto affinché una pagina venga caricata completamente (anche soltanto una decina di secondi invece dei soliti due o tre), ovvero tendono ad evitare un sito poco responsivo. Chi si occupa di marketing deve tenere in gran conto le emozioni delle persone: la delusione e persino la stizza accompagnano spesso la frustrazione, spingendo gli utenti a rivolgersi immediatamente a qualcun altro.

Per non suscitare sentimenti negativi, occorre quindi fare in modo che i siti web garantiscano sempre un’esperienza ottimale da parte dei visitatori. Ecco come riuscirci, con un processo articolato in cinque step.

Primo step

Definire l’idea in termini generali – anche se si possiede già un sito, occorre osservarlo con un occhio critico ed analizzarne le caratteristiche. E’ utile chiedersi:

  • Qual è il suo scopo? (Presentazione dell’azienda, formazione/informazione, vendita…)
  • Qual è il nucleo del sito, ovvero la parte più importante?
  • Perché gli utenti hanno bisogno di visitarlo?

Come sempre, osservare le cose “dall’esterno”, magari da una prospettiva nuova, aiuta a farsi un concetto dell’insieme e scoprire eventuali carenze; l’importante è focalizzarsi sugli elementi chiave e riservare meno spazio alle cose di secondaria importanza.

Secondo step

Identificare le necessità dei propri utenti – esistono dozzine di varianti, sia tra i dispositivi mobili che tra i rispettivi sistemi operativi; dobbiamo concentrarci su iOS oppure su Android, sui tablet o sugli smartphone? La soluzione perfetta di questo dilemma viene offerta dalla profilazione comportamentale: deleghiamo perciò il compito al sistema, invece di effettuare ricerche e survey. Raccogliamo le informazioni alla fonte, grazie alla capacità delle piattaforme di Mobile Marketing Automation di gestire in tempo reale i dati sugli utenti, riducendo così il numero di strumenti da utilizzare; il risultato consisterà in una visione chiara e costantemente aggiornata della situazione, con i possibili errori umani ridotti al minimo.

Terzo step

Riorganizzare i contenuti – sfruttando al massimo la disposizione dei testi all’interno delle colonne. Una volta effettuato il primo step, dovremmo avere compreso quali sono i contenuti davvero importanti da presentare sul sito; a questo punto diamo la priorità all’intestazione ed agli strumenti che consentono e agevolano la navigazione, dopodiché passiamo agli elementi importanti da mettere in evidenza, lasciando in fondo i dettagli meno importanti.

E’ anche utile minimizzare sia i banner che i testi particolarmente articolati; la mobilità ha le sue regole: alcune cose fanno parecchio effetto su un desktop, ma possono essere molto meno accattivanti o di agevole visualizzazione sul minuscolo schermo di uno smartphone, magari non di ultimissima generazione.

Quarto step

Ottimizzare il codice per i dispositivi mobili – tenendo presente che “responsivo” non significa semplicemente “ottimizzato”. Ogni elemento della pagina dovrebbe essere facilmente raggiungibile e “cliccabile”; poiché sappiamo bene quali banner ed inserzioni pubblicitarie generano più interesse e conversioni, dovremmo collocarli nei punti in cui saranno maggiormente visibili, anche se non dovranno coprire interamente i contenuti. L’unica eccezione a questa regola è rappresentata dai pop-up.

E’ importante tenere il design delle pagine estremamente pulito e razionale: il sito dovrebbe essere “leggero” e piacevole da navigare; inoltre occorre che i contenuti vengano caricati rapidamente e senza necessitare di un traffico di dati eccessivo (che aumenta il consumo della batteria e incide sul numero di “giga” scaricabili previsti dal contratto con i fornitori del servizio). Questo va tenuto presente specialmente quando si scelgono elementi grafici e contenuti multimediali.

Nell’ottimizzare, spesso si effettuano interventi minimi, per questo non occorre rifare il sito da zero ma si può benissimo modificare opportunamente quello esistente.

Quinto step

Effettuare dei testverificando tutto! A cominciare dal supporto dei vari sistemi operativi, in modo da non escludere nessun potenziale utente dalla nostra audience. Tuttavia, al di là degli aspetti puramente tecnici, vanno anche valutate le razioni delle persone, i collegamenti tra le pagine, il corretto funzionamento dei vari link, la presenza di eventuali incongruenze, ecc.

Per diventare bravissimi

Se si desidera approfondire l’argomento, sul web esistono numerosi tutorial in cui si spiegano bene i vari aspetti dei problemi legati al come rendere responsivo il proprio sito; eccone alcuni:

Volete saperne di più? Contattateci.