Creare un sito responsive con WordPress

Creare un sito responsive vuol dire dare la massima importanza alla visualizzazione sui dispositivi mobili. In taluni casi è anche importante distinguere due versioni diverse del progetto, in virtù di una navigazione più “smart”. Noi per esempio abbiamo creato due versioni diverse della home page e ottimizzato in modo diverso alcune pagine del sito. Il tuo sito web è stato progettato per essere responsive?

La mobilità esiste già dal 2014, l’uso di Internet per le app mobili eclissava (negli Stati Uniti) l’utilizzo per desktop e non molto tempo dopo, nel 2016, la navigazione Internet totale su dispositivi mobili ha superato quella su desktop (in tutto il mondo). Le nuove tecnologie e l’uso degli Smartphone hanno ha cambiato le regole del gioco e il design dei siti web si è dovuto adeguare.

Creare un sito responsive con WordPress

Creare un sito responsive con WordPress è la sfida che aspetta tutti gli appassionati “fai da te” e i professionisti che, dal canto loro, dovrebbero mangiare CSS come io mi divoro gli hamburger di Mac Donald’s a colazione. Non basta infatti installare un tema preconfezionato per essere sicuri della perfetta visualizzazione di home page, pagine e articoli sullo Smartphone.

Anche gli sviluppatori stessi commettono errori grossolani e il tuo compito è quello di correggerli. Per questo motivo naviga sempre il sito su tutti i dispositivi e, grazie alla pagina “Personalizza”, che trovi nel menu “Aspetto” della tua Dashboard, inserisci i codici CSS corretti usando le media query per definire l’aspetto nelle varie risoluzioni.

Mobile vs Desktop: cosa cambia?

Naturalmente la differenza principale sta nelle dimensioni dello schermo e nel tipo di navigazione dei contenuti. I siti web su desktop supportano per esempio le barre di navigazione fisse, mentre i dispositivi mobili sono generalmente limitati ai menu estraibili (hamburger menu). Sul tuo PC o sul Mac sei portato a visualizzare i contenuti secondo la classica lettura a “Z”, dove il logo, la cosa più importante del sito, di solito è a sinistra o al centro. Andando poi verso destra, per poi scendere con lo scrolling della pagina, traccerai proprio una zeta. Su questi buoni principi di usabilità negli anni sono stati scritti trattati.

Le differenze tra Mobile e Desktop

• Desktop (schermo grande)
• Smartphone (schermo piccolo)
• Interazione sul Desktop (cursori)
• Interazione sullo Smartphone (le dita della mano)
• Contenuti sul Desktop (colonne)
• Contenuti sullo Smartphone (scorrimento)
• Funzionalità sul Desktop (grandi cose)
• Funzionalità sullo Smartphone (sperimentale)

Al contrario, sul dispositivo mobile tutto cambia. Il logo è al centro dello schermo, il menu è chiuso e la navigazione è verticale (tranne per qualche gallery che può dare possibilità di scorre le immagini con il dito). Possiamo anche immaginare che la composizione grafica è semplificata e qualcuno sostiene anche meno creativa. Tutto quello che vedo in orizzontale, infatti, si trasforma in un blocco in verticale che effettivamente non offre molte altre possibilità, che non siano la scelta dei colori e dei caratteri usati. La cosa più importante sul mobile non è la grafica, ma le “Call to action” che servono a convertire, oltre naturalmente ad un copy efficace. Ne ho parlato anche in questo articolo: Siti web più belli con WordPress.

A cosa serve il sito web sul cellulare?

Hai capito quindi che i dispositivi determinano il design e le strategie di comunicazione e niente si improvvisa. Un sito web moderno, che dia un vero valore aggiunto non deve essere solo bello e “usabile” a prova di UX (User Experience) ma deve convertire utenti in clienti con tecniche diverse come la migliore visibilità sui motori di ricerca.

Principali obiettivi:

• Avere un’immagine gradevole (la tua immagine aziendale coordinata)
• Evidenziare i tuoi benefit (rispetto agli altri concorrenti)
• Raccontare che sei e cosa offri (in modo chiaro, sintetico e preciso)
• Permettere di contattarti velocemente (un modulo di contatto e le call to action necessarie)
• Farti trovare (indicizzazione e mappa di Google)

Se la versione mobile non risponde alle aspettative, il sito web verrà abbandonato, anche se il sito è bene indicizzato e trovato. Immagina di creare una campagna o una promozione destinata a portare gli utenti su una pagina specifica (landing page) e immagina se questa pagina non fosse perfettamente visibile sullo Smartphone, sarebbe davvero un disastro!

Creare un sito responsive: conclusioni

Prima di giocare al piccolo web master o web designer per risparmiare qualche sghello pensaci. Anche usando WordPress tutto il tuo lavoro potrebbe essere inutile, se non studiato a tavolino e ben realizzato. Ma se hai già pubblicato un sito web con WordPress e vuoi sapere se è funzionale e bene impostato, approfitta della nostra analisi, grazie alla quale ti invieremo un report completo e se troveremo degli errori ti indicheremo le nostre migliori soluzioni. Stay tuned, Gestione WP.