Responsive web design: realizzare siti con un layout moderno

Moltissimi utenti al giorno d'oggi navigano su internet con lo smartphone. Se una volta era il PC lo strumento più utilizzato, oggi sono i dispositivi mobile i preferiti per visualizzare i siti web. Il motivo è semplice: gli smartphone sono più pratici, sono sempre connessi a internet, ed essendo tascabili sono sempre a portata di mano. In questa realtà, è fondamentale realizzare siti in grado di adattarsi automaticamente alle dimensioni di chi li visita. La tecnica che rende possibile tutto questo si chiama responsive web design. In questo post, capiremo quali sono le caratteristiche del responsive web design e come queste influiscano sull'esperienza di navigazione degli utenti.

Caratteristiche del responsive web design

L'aspetto fondamentale che differenzia i siti web responsive da quelli tradizionali è la capacità di ridimensionarsi automaticamente in funzione del dispositivo di navigazione. Ma quali sono le tecniche di un buon sito responsive? Analizziamole nel dettaglio.

• Larghezza dei testi: i testi delle pagine non hanno una larghezza fissa, ma variabile in funzione delle dimensioni dello schermo. Questo non obbliga gli utenti a scorrere avanti e indietro per poterli leggere, e riduce i tempi di lettura e le distrazioni.
• Immagini per desktop e mobile: per velocizzare la visualizzazione delle immagini, a volte si caricano sul sito due o più versioni della stessa foto. La più definita sarà presentata a chi utilizza un PC desktop, mentre quella più ridotta sarà offerta ai visitatori con dispositivi mobile. Questo consente di ridurre i tempi di caricamento della pagina.
• Layout adattabile: sugli schermi dei PC gli elementi di una pagina sono presentati in modo affiancato. Pensiamo ad esempio ai prodotti di un sito e-commerce, o alla gallery delle realizzazioni effettuate. Sugli schermi degli smartphone gli elementi sono invece disposti in modo verticale, uno sotto all'altro, per consentirne una facile consultazione tramite scorrimento.
• Dimensione dei font: anche i font giocano un ruolo fondamentale nella facilità di navigazione. Se infatti su PC possiamo utilizzare caratteri di dimensioni molto grandi per comporre i testi, su smartphone dovremo ridurne la grandezza per rendere agevole la lettura.
• Menù di navigazione: la barra del menù su PC viene mostrata per esteso, solitamente nella parte superiore dello schermo. Questo consente agli utenti di accedere direttamente alle varie pagine, cliccando sulla voce desiderata. Questo comportamento, per ragioni di spazio, non è possibile su mobile. In questo caso, si preferisce inserire un bottone con 3 puntini: cliccandolo, si aprirà un menu di navigazione a tendina verticale.

Per realizzare tutti questi aspetti è necessario definire una serie di break-points (punti di rottura) all'interno del codice sorgente del sito. Grazie ai break-points, possiamo fare in modo (ad esempio) di mostrare le immagini per desktop per gli schermi più larghi di 480px e quelle per mobile per quelli più stretti. Possiamo definire quanti break-points vogliamo, per rendere il più adattivo possibile il comportamento del sito.

Quali sono i vantaggi dei siti responsive?

Avere un sito responsive offre una serie di vantaggi, che determinano la soddisfazione del visitatore e un conseguente ritorno sui contatti ricevuti.

• User experience: gli utenti che visitano siti responsive sono a loro agio, in quanto le pagine si caricano velocemente, i testi hanno dimensioni adeguate allo schermo e tutto è a portata di clic. Questo porta ad una user experience ottimale, che fa conferisce al sito un aspetto moderno e professionale.
• Tempo di permanenza: se un sito è facile da navigare, i visitatori trascorreranno più tempo sulle pagine, aumentando il tempo medio di permanenza. Il tempo di permanenza è un parametro molto importante, che viene spesso utilizzato dai motori di ricerca per determinare il posizionamento dei siti nei risultati organici. È quindi importante mantenerlo il più alto possibile.
• Maggiori conversioni: offrire ai visitatori tutte le informazioni che cercano aumenta le probabilità di contatto, o di acquisto dei prodotti. Avere un sito responsive ci aiuta quindi a raggiungere più facilmente i nostri obiettivi, producendo un elevato numero di conversioni.
• Tempi di sviluppo: fino a qualche anno fa, era abitudine realizzare uno stesso sito in versione desktop e in versione mobile. Questo aumentava i tempi di sviluppo e di manutenzione, e poteva portare a penalizzazioni di contenuto duplicato. Avere un design di tipo responsive consente invece di gestire il sito in modo veloce e manutenibile.

Conclusioni

In questo post abbiamo illustrato alcune fra le più importanti tecniche per realizzare un sito responsive. Abbiamo capito come questa tecnica aiuti a conquistare la fiducia degli utenti, raggiungendo gli obiettivi che ci siamo prefissi. L'utilizzo crescente dei dispositivi mobile sta portando i web designer a creare siti sempre più orientati verso gli smartphone (mobile first), privilegiando le caratteristiche a loro più congeniali.