Cosa vuol dire responsive? 7 segreti per disegnare un sito


Cosa vuol dire responsive? Saper disegnare un sito responsive è un tema piuttosto importante (diventato fondamentale non solo per la User experience ma anche per il ranking SEO), che nell'ultimo anno ha finalmente richiamato l'interesse di molte aziende (e non solo delle loro agenzie digital). Non è un mistero che l'Italia sia da anni al primo posto della classifica del numero di cellulari pro-capite: ora non sono sicuro sia ancora al primo posto, di certo vanta circa 80 milioni di abbonamenti mobile che su una popolazione totale (bambini compresi) di poco meno di 60 milioni non è male. Se consideriamo che il 62% di tutte le SIM è inserita in uno smartphone, possiamo dire con approssimazione che i telefoni di nuova generazione sono circa 50 milioni (al 2016). Non siamo ancora convinti? Qualche altro dato? Ebbene sì, pare che almeno sulla carta siamo un popolo digitalmente evoluto:

  • 37 milioni di utenti internet
  • l'80% dei quali si connette ogni giorno
  • il 21% dei quali genera traffico da mobile
  • 28 milioni di italiani hanno un profilo Facebook
  • di cui il 50% è sotto i 40 anni

Insomma, praticamente tutti i vostri consumatori hanno in tasca un cellulare di nuova generazione e lo usano per le ragioni più svariate, giustificando il tempo che state perdendo nel leggere questo articolo. Ora, se pensate che quelle appena elencate siano ragioni sufficienti per giustificare l'investimento in un sito che sia ben visualizzato su ogni smartphone, procediamo oltre. Se, al contrario, non siete ancora convinti rileggetevi quanto scritto nelle righe qui sopra fino a che non cambiate opinione. Ok, ora che tutti la pensiamo allo stesso modo, procediamo con i nostri 7 consigli:

  1. Considerate la versione mobile del vostro sito come se fosse un sito a sé stante. Le dimensioni dello schermo, soprattutto in visualizzazione verticale, non sempre si prestano ad una visibilità ottimale di tutti gli elementi presenti sul sito: non abbiate paura di togliere elementi visualizzati male o che distraggono dall'obiettivo della pagina. Come in un teorema di Einstein, banalmente, anche qui è una questione di spazio/tempo: il tempo che gli utenti hanno da dedicare ad un sito è sempre meno e tanto vale sacrificare qualcosa di accessorio in favore di un'unica informazione pertinente a ciò che stiamo promettendo di dare attraverso quella pagina.
  2. Non è possibile eliminare un contenuto? Nascondetelo, dando priorità (che significa letteralmente "spostare più in alto") agli argomenti che l'utente si aspetta da noi. Un classico esempio di quello che sto cercando di dire qui è quando nascondiamo l'intero menu di navigazione sotto al più classico degli "hamburger", quell'icona con tre linee orizzontali (che potete vedi qui in alto a destra). In questo modo non sacrifico il menu ma ricavo utile spazio per altre informazioni.
  3. Utilizzate Grafiche Vettoriali Scalabili (SVG) al posto delle immagini. Oggi infatti è possibile utilizzare immagini vettoriali anche sul web in modo da garantire una loro visualizzazione ottimale con continuità su ogni dispositivo. Quindi diciamo addio a JPG o PNG per i nostri loghi o icone e passiamo al vettoriale. Tra l'altro normalmente gli SVG pesano meno delle corrispettive immagini, facendo caricare il sito più velocemente.
  4. Create aree cliccabili che siano facilmente "schiacciabili" da un dito: dite la verità, quanto vi dà fastidio dover ingrandire i siti non ottimizzati e provare a schiacciare un link disegnato per la precisione del puntatore del mouse? Quindi, pensiamo che il nostro sito dovrà essere navigato letteralmente "a dito". Dimensione consigliata dell'area cliccabile? Almeno 45 o 50 pixel di altezza. Questo eliminerà aperture di pagine indesiderate e la conseguente frustrazione dei vostri utenti.
  5. Fate un buon uso delle immagini: la vecchia scuola vuole un'unica immagine per la versione desktop e per quella mobile. In realtà stiamo parlando di dimensioni e proporzioni molto diverse tra loro e il rischio è che parti importanti sul cellulare vengano tagliate. Oggi si tende a caricare 2 versioni della stessa immagine, in modo da essere certi di mostrare tutto quello che deve essere mostrato. Questo significa anche ottimizzare i pesi in kb dei file, rendendo più veloce e scorrevole la navigazione mobile.
  6. Ripensare alle grandezze dei font: la leggibilità è fondamentale per tutti i nostri contenuti per cui è necessario scegliere un carattere tipografico che sia sempre leggibile, indipendentemente dalla grandezza dello schermo su cui viene visualizzato. Diventa necessario anche trovare la giusta proporzione tra le grandezze di titoli e testi.
  7. Sfruttare i vantaggi che la piattaforma mobile offre: avete un numero di telefono? Rendetelo cliccabile per far partire la chiamata direttamente. Lo stesso valga per le e-mail o messaggi SMS. Aggiungete il tasto "share via whatsapp" nella barra delle condivisioni social e impostatela in modo che apra le rispettive applicazioni piuttosto che il browser.

Responsive Design è un importante tassello della vostra strategia di digital marketing, un passo verso la costruzione di una vera User Experience, un fondamentale passo verso la digitalizzazione del customer journey e uno step inevitabile per non essere penalizzati nel ranking di Google.

Vuoi saperne di più sulla User Experience? Leggi gli altri articoli su come costruire un'esperienza di marca:

  1. Creare una customer experience
  2. Quanto i consumatori interagiscono con il tuo brand
  3. SEO come Search Experience Optimization
  4. Social media come strumento per il customer care 

Luca Bizzarri

Topics: Analisi SEO e Strumenti utili, Digital Marketing & E-commerce

Pubblicato da Ofg Advertising il 27/0/2017