Creazione siti web responsive: cosa significa? 

Quante volte ti è capitato di usare un sito nella sua versione mobile, e di trovare impossibile la navigazione? Di siti web responsive se ne parla almeno dal 2010, ma se andiamo ad analizzare un campione casuale di 100 brand, anche famosi, non sempre troveremo dei siti web responsive.

Eppure, la cosiddetta responsiveness è il fattore numero uno per determinare la buona esperienza dell’utente in pagina, e quindi la tua posizione di vantaggio rispetto ai competitor.

La psicologia del web responsive

Hai mai fatto caso al fatto che in molte vie dello shopping nelle più grandi città italiane le porte sono a scorrimento automatico, oppure rimangono aperte?

Questo succede anche in pieno inverno, o d’estate, quando il riscaldamento/climatizzatore sono accesi. Perché questo dispendio energetico incredibile?

Semplicemente, perché gli utenti vedono una porta spalancata, dei prodotti esposti, e gli studi di psicologia del marketing affermano che ciò invoglia ad entrare.
Creare un ambiente accogliente in un sito è la chiave del concetto di web responsiveness.

Sito web responsive: significato

Il problema principale è che non ci si intende sempre sul significato di web responsive. Un sito web responsive non ha solo menu a tendina scalabili e caricamento di pagina veloce, a differenza di quello che in molti credono.  

Per capire cosa significa web responsive e applicare le regole base della disciplina sul proprio sito, bisogna iniziare dai fondamenti. Ci sono fortunatamente alcune regole di responsive web design sempre valide – anche se un po’ vintage – che risultano chiare anche a chi non si occupa di web design e vorrebbe semplicemente capirne di più. 

Come in ogni disciplina tecnica che si interseca con marketing e arte, anche nel web design ci sono tante correnti di pensiero su quale sia il vero significato di design web responsive.  

Nei consigli che daremo qui, ci basiamo sul semplice assunto che il “design responsivo” (traduzione ufficiale) è tutto ciò che consente alla pagina web di adeguarsi alle necessità di navigazione dell’utente. 

Com’è un sito web responsive

In un sito davvero responsivo, l’utente avrà la stessa esperienza del sito dal proprio telefono, da un web browser e da un tablet. Anche se userà lo zoom, vedrà sempre gli elementi importanti della pagina, e potrà navigare con facilità da una sezione all’altra.

Troverà i menu e le barre laterali comode da navigare, e non si spazientirà per immagini che vengono deformate o scompaiono.

Come si ottiene quest’effetto? È sufficiente scegliere il tema giusto di WordPress? E se invece stai creando un sito da zero con un web designer?

È il momento di fare chiarezza: vediamo 3 regole fondamentali per ottenere un sito web responsive, che valgono sia se hai competenze strutturate di web design, sia se usi un CMS che riduce il web design all’osso.

Le 3 regole per realizzare un sito web responsive

1) Curare le media query CSS

La Media Query CSS appare in generale così:

@media media-type and (media-feature-rule) {
  /* qui si inseriscono le regole*/
}

In sostanza, una media query consente di applicare i CSS solo quando il dispositivo dell’utente ha delle specifiche regole. Ad esempio, quando il dispositivo in mano al tuo cliente limita la grandezza dello schermo, come nel caso di uno smartphone.

Vantaggi delle media query corrette

Le media query sono una parte fondamentale nella realizzazione di siti responsive. Quando progettiamo una qualsiasi piattaforma, idealmente dovremmo rivolgerci rivolgerci a tutti i tipi di dispositivo, quindi ogni oggetto sul sito deve integrarsi correttamente e rapidamente al dispositivo dell’utilizzatore finale.

Le media query, se impostate in modo corretto e con i giusti breakpoints, consentono un’esperienza utente fluida, rapida e scalabile.   

2) Creare Griglie fluide 

I dispositivi mobili stanno diventando sempre più piccoli, e viceversa gli schermi di pc si ingrandiscono, aumentando la propria risoluzione media.

Per chi si occupa di web design diventa importantissimo progettare delle interfacce che si adattino bene a entrambi, senza sacrificare nulla.

Per capire cosa sono le griglie – lo spieghiamo per i non addetti ai lavori – è utile immaginarsi delle vere e proprie linee orizzontali e verticali che chi fa web design “riempie” con informazioni.

La griglia è sia costruita da zero, sia disponibile in un framework prestabilito. Può essere già pronta e consentire di risparmiare molto lavoro, perché dovrai solo “riempirla” di contenuto, come accade su Wix, ad esempio.

Oppure, potrai strutturarle da zero, con risultati molto migliori in termini di web responsiveness.

Vantaggi delle griglie fluide

Realizzare le proprie griglie personalmente consente di:

1. Risparmiare molto più tempo in futuro per eventuali modifiche;
2. Avere un layout dello schermo che scorre e si adatta immediatamente allo schermo e allo zoom dell’utente finale;
3. Per una questione di brand: il web designer mantiene un’immagine, un logo, un motivo in modo coerente all’interno di griglie diverse;
4. Risparmiare tempo durante l’aggiornamento dei siti e la migrazione di dominio. 

Come ottenere griglie fluide

1. Usare una griglia CSS esistente;
2. Generare una griglia come base per la progettazione del tuo layout. Si possono usare programmi come Tiny fluid grid o Fluid Grid by Bootstrap.

3) Avere immagini fluide 

Ultimo aspetto per la creazione di siti web responsive, spesso trascurato ma estremamente importante: rendere fluide le immagini all’interno delle griglie.

In termini pratici, una volta che si è inserita l’immagine e le si sono date le giuste media queries (float, margin e width, ad esempio), serve rendere l’immagine perfettamente scalabile. 

Un sito web responsive è un sito adattabile

Per tutte e tre queste caratteristiche vale lo stesso principio: consentire alla grafica del vostro sito di adattarsi a ogni dispositivo indipendentemente dalla sua forma o dimensione, cosa che rende l’esperienza dell’utente potenzialmente valida per tutti i dispositivi al mondo.

Forse una corretta traduzione di “responsiveness” potrebbe a questo punto essere “adattabilità”.

Oggi molti CMS hanno integrate funzioni comodissime per rendere il vostro sito responsive, però un web designer che si occupa unicamente di quello sarà sicuramente in grado di arrivare a risultati migliori nella realizzazione di ecommerce e siti web responsive. 

Vuoi qualche esempio pratico di un design che funziona? I trend di design del 2020 selezionati da Pizero Design possono essere un buon punto di partenza!

E per dare al tuo sito web una marcia in più, applica sempre un design UX e UI!