Quando si progetta un sito responsive capita spesso di limitarsi a riadattare il layout per desktop spostando e ridimensionando gli elementi in modo da evitare scroll e zoom.
A mio parere però, un approccio più corretto al responsive web design è quello di curare maggiormente gli aspetti che rendono efficace il tuo sito in modo che mantenga la propria efficacia, e quindi ti porti lead e vendite anche da mobile e tablet.
Ecco quindi i miei consigli su come ottimizzare gli step responsive del tuo sito in modo da mantenere la sua efficacia da ogni dispositivo.
Indice dei contenuti
Analizza i diversi contesti di utilizzo per ogni step responsive
Tieni in forte considerazione il cambio di contesto e di intenzione di chi naviga il tuo sito da dispositivi diversi.
Se ad esempio hai un ristorante con ogni probabilità chi naviga il tuo sito da smartphone starà cercando il numero per prenotare o l’indirizzo, quindi una buona idea sarebbe mettere su dispositivi mobile una call to action per la chiamata diretta ed una google map ben in evidenza in modo che il tuo visitatore possa chiamarti ed impostare il navigatore con un semplice click.
Viceversa se sta navigando da pc forse è in una fase più informativa e quindi avrai più tempo per conquistarlo con belle foto dei tuoi piatti, con il menu completo e magari potrai decidere di spingerlo a contattarti attraverso una form di contatto.
Ottimizza la posizione dei comandi principali nella versione mobile del sito
Sebbene la lettura del sito rimanga invariata, il sistema di navigazione varia di molto fra mobile, tablet e desktop.
È quindi fondamentale curare al massimo la user experience in modo che i comandi da mobile ad esempio siano tutti a portata di pollice.
Visto il costante aumento delle dimensioni dei display sarebbe quindi una buona idea quella di inserire il bottone del menu e la call to action principale in basso, e non in alto, in modo da favorirne il raggiungimento senza rischiare di far cadere il telefono.
Inoltre, sempre per lo stesso motivo, fai in modo che le voci di menu non si trovino troppo in alto, quindi, soprattutto se hai poche voci di menu, potresti preferire un menu che sale dal basso e che mantiene tutto nella parte medio bassa dello schermo.
Cura il formato delle immagini
Cura il formato delle immagini principali in modo che risultino sempre ben visibili da ogni dispositivo.
Se infatti una foto verticale non si presta ad essere visualizzata correttamente su uno schermo 16/9, una foto bassa e larga sarà poco visibile su smartphone, quindi hai 2 modi per agire:
1. Trovi un formato intermedio che tiene conto di tutte le esigenze (un 4/3 o quadrato in stile instagram ad esempio).
2. Fai si che il tuo sito carichi le foto in diversi formati in base al dispositivo da cui si naviga.
Cura gli ingombri
Assicurati che gli ingombri di elementi e sezioni man mano che scali gli step siano coerenti con l’importanza che quelle sezioni hanno nel tuo processo di conversione.
Inoltre considera che se hai una pagina molto lunga già su schermi fissi solo incolonnando gli elementi ti troverai con un sito mobile esponenzialmente più lungo e quindi innavigabile.
Poniti come obiettivo di mantenere ogni blocco di contenuto o sezione consultabile senza scrollare o al massimo con uno scroll.
Cura la grandezza dei font e la quantità dei testi
Considera che su dispositivi mobile la risoluzione è molto più alta quindi puoi usare font più piccoli mantenendo un’ottima leggibilità e questo ti consentirà di ridurre gli ingombri.
Prendi anche in considerazione l’idea di usare sugli step responsive più piccoli dei testi abbreviati.
Come dicevamo prima infatti la fruizione da smartphone dovrebbe essere molto più immediata per andare incontro alla possibile “fretta” che l’utente potrebbe avere.
Conclusioni
Un buon approccio potrebbe essere quello di disegnare gli step principali quasi come se fossero siti a se stanti e poi ottimizza gli step intermedi, in questo modo avrai il massimo controllo sul tuo progetto e potrai curare ogni aspetto per non perderti nemmeno una conversione.
Se hai dubbi, domande o vuoi un parere sul tuo sito non esitare a contattarmi 😉
A presto!
