Vai alla home page

Responsive layout con WordPress

Responsive layout 960x480 - Responsive layout con WordPress

Un responsive layout WordPress è il responsabile della visualizzazione del sito, il blog o il tuo eCommerce sui diversi dispositivi. Fissi come il computer, mobili come il cellulare. Oltre a scegliere un tema WordPress responsive è necessario quindi conoscere il tuo target e quali dispositivi saranno maggiormente usati, per ottimizzare al meglio il progetto online. Vediamo assieme come.

Tutti i temi WordPress, siano gratuiti o premium (in questa pagina di Temi & Plugin la nostra scelta) usano un responsive layout. In questo modo potrai realizzare e pubblicare un sito web che rispecchia al meglio questo standard. Con un sito WordPress che sarà visibile su tutti i dispositivi, fissi e mobili. Anche se non dovrai escludere delle modifiche ai CSS (i responsabili dello stile). Usando le media query per una visualizzazione migliore su un dispositivo mobile come un iPhone o un iPad.


Responsive layout con WordPress

Prima ancora di iniziare però, voglio spiegarti meglio cos’è e come funziona un responsive layout. Lo sviluppo di un sito web che sta alla base del responsive design con WordPress (la piattaforma CMS più famosa al mondo). La progettazione responsive è un approccio alla creazione di pagine Web che utilizzano layout flessibili, immagini con diverse dimensioni e query di supporto per i CSS (i fogli di stile). Gli obiettivi del responsive design e dei responsive layout sono quelli di creare pagine web che rilevino le dimensioni e l’orientamento dello schermo del visitatore e di conseguenza modifichino il layout.

Anteprime immagini WordPress

WordPress genera dalle 10 alle 12 anteprime per ogni immagine. Un motivo in più perché siano tutte caricate e inserite nel formato giusto e ottimizzate. Sul blog parliamo spesso di come un sito web debba essere veloce e da 4 anni offriamo ai nostri clienti la page speed (velocità di navigazione), usando uno tra i plugin più adatti allo scopo di alleggerire tutte le immagini. In favore di una migliore velocità ed esperienza utente soprattutto sul mobile. Immagini per siti web ottimizzate con ShortPixel.

Responsive layout con WordPress

Cosa sono le media query?

Le query multimediali invece, sono una caratteristica specifica dei fogli di stile CSS e consentono allo sviluppatore (il web designer) di specificare quando un determinato stile ha effetto. Con i CSS, ad esempio, una query multimediale servirà fogli di stile facili da stampare, se richiesto. I CSS3 hanno ampliato le funzionalità di query che consentono ai fogli di stile di essere indirizzati al display di un dispositivo e di servire un foglio di stile desktop, tablet o smartphone in base alla risposta della query.


Responsive layout diversi in funzione degli utenti

Normalmente, l’uso attento dei responsive layout evita di dover progettare 2 versioni diverse di un sito WordPress. In funzione della sua navigazione e da quale dispositivo sia visto dagli utenti. È altrettanto vero però, che prima di considerare l’aspetto responsive e i contenuti del tuo responsive layout, andrebbe fatta un’attenta analisi sul tuo target di riferimento. E quali dispositivi usano maggiormente i tuoi utenti. In questa immagine gli utenti di Gestione WP.

Navigazione di un sito web - Responsive layout con WordPress

Analizzando in dettaglio questi dati, puoi facilmente intuire come un sito web professionale come il nostro e che fornisce servizi B2B dedicati ad altrettanti professionisti o aziende che amministrano i propri siti web, sia maggiormente navigato su computer desktop. E se vogliamo, in controtendenza rispetto a quella che oggi è considerata una priorità (anche da Google). La navigazione mobile. Un motivo in più per fare una corretta analisi ancora prima di cominciare.


Conclusioni

Gestione WP, il sito che forse stai navigando su desktop è naturalmente ottimizzato per la sua versione mobile. Ma nel nostro caso abbiamo volutamente creato due versioni diverse. La prima completa di tutti i contenuti, la seconda più “smart”. Se anche tu vuoi ottenere un risultato simile e non sai come fare, contattaci! La nostra 1a consulenza è gratuita. Stay tuned, Gestione WP.

Nascondi
Guida WordPress 2019