Come creare un sito responsive con WordPress

Immagine avatar per Andrea Di Rocco

Pubblicato da Andrea Di Rocco in

1K+ Visite sul post corrente.

Sito Responsive come crearlo in WordPress

Stai pensando di creare un sito web responsive per conquistare il mondo “mobile”?

È sicuramente il passo da fare per dimostrare la tua serietà e professionalità.

La diffusione di dispositivi mobili è ormai diventata virale e non è possibile ignorare il fatto che siamo tutti abituati ad avere “il mondo in tasca”.

Cosa fai quando vuoi sapere gli orari dell’autobus? O non conosci il significato di una parola?

O magari hai bisogno di cambiare la ruota dell’auto? Prendi il cellulare e ti affidi a internet!

E se facciamo così tanto affidamento al nostro dispositivo preferito, ci aspettiamo non solo di trovare le informazioni che cerchiamo, ma anche di trovarle ben organizzate e facili da consultare.

In caso contrario, andremo a cercare l’informazione da un’altra parte.

È davvero frustrante navigare in un sito dal proprio smartphone, e trovarsi davanti a caratteri microscopici.

Oppure essere costretti a scorrere chilometri verso destra per leggere una sola riga, e ritornare all’inizio per poter leggere la riga successiva.

O, ancora peggio, ritrovarci davanti a contenuti illeggibili perché risultano tagliati o sovrapposti.

Se non vuoi che gli utenti dei dispositivi mobili chiudano il tuo sito dopo due secondi, è ora di creare un sito responsive!

A proposito, per migliorare le tue competenze, non dimenticare di tenere d’occhio la sezione dedicata ai nostri video corsi su WordPress, dove trovi lezioni utili, in costante aggiornamento, e interessanti approfondimenti.

Perché creare un sito responsive

Perché creare un sito responsive

Il termine responsive in inglese significa “reattivo”, e ciò che fa un sito responsive è “reagire” in maniera diversa a seconda del dispositivo con cui viene visualizzato.

Se hai deciso di creare un sito responsive, forse pensi che significhi solamente realizzare un sito web e poi fare in modo che il testo vada a capo una volta arrivato al margine destro.

Ma il sito responsive è molto di più.

Certo, prima di tutto deve adattarsi alla larghezza dello schermo utilizzato.

Ma soprattutto il sito responsive è visualizzato da tutti i dispositivi senza perdita di contenuti, di elementi grafici essenziali e, infine, di usabilità.

Vorrei farti riflettere qualche secondo su questi aspetti, in modo che poi sarai in grado di creare un sito responsive con WordPress che sia veramente funzionale.

Perciò, vediamo un attimo queste caratteristiche più nel dettaglio.

Creare un sito responsive: adatta il contenuto alla larghezza del dispositivo

Creare un sito responsive - larghezza dispositivo

Un sito responsive ha un layout fluido: il testo ritorna a capo una volta raggiunto il margine destro, mentre gli elementi affiancati si riposizionano uno sotto l’altro.

La disposizione degli elementi che nel PC è orizzontale, nel dispositivo mobile diventa verticale.

Creare un sito responsive: rendi accessibili tutti i contenuti principali

Creare un sito responsive rendi accessibili tutti i contenuti principali

È importante che le informazioni presenti sul tuo sito non siano nascoste o coperte da altri elementi, quando viene visualizzato da mobile.

Il visitatore si aspetta di trovare gli stessi contenuti sia nel PC, sia nello smartphone.

Perciò non trasformare completamente i contenuti da una versione all’altra.

Creare un sito responsive: non rinunciare completamente alla grafica

La grafica del tuo sito dovrà adattarsi al dispositivo da cui viene visualizzato.

Pensa quindi a impostare una maggiore quantità elementi decorativi per apparecchi con grandi schermi, come PC o Smart TV, mentre per gli schermi più piccoli riduci tutto al minimo.

Inoltre, evita particolari effetti grafici, JavaScript o (ancora peggio!) Flash.

Sono sistemi che non funzionerebbero o rallenterebbero tantissimo il caricamento della pagina su smartphone o tablet.

Cerca quindi di risparmiare risorse per caricare il tuo sito più velocemente.

E così eviterai anche di riempire la pagina di elementi inutili che potrebbero infastidire il visitatore.

Meglio mantenere un layout più pulito e ordinato.

Tutto questo, però, senza rinunciare a elementi fondamentali che contraddistinguono il tuo brand, come logo e colori.

Creare un sito responsive: il sito deve essere facile da usare

Assicurati che tutti gli elementi che permettono di navigare nel tuo sito (menu o link nel footer) siano facilmente utilizzabili.

È molto fastidioso trovare un elenco di link troppo vicini tra loro, nel quale non si riesce a toccare quello giusto.

Come creare un sito responsive con WordPress

Passiamo alla pratica! Ora che sai quali sono gli elementi fondamentali di un sito responsive, vediamo come realizzarlo.

Scegli un tema responsive

creare un sito responsive - temi responsive Themeforest

Se ancora non hai un sito e stai partendo con il tuo progetto, puoi scegliere un tema WordPress responsive.

Assicurati che sia specificato che il tema sia responsive, così hai la certezza che le caratteristiche che ti ho illustrato sopra saranno tutte presenti.

Puoi trovare tantissimi temi responsive su Themeforest.

Prova la demo su dispositivi diversi e scegli quello che più ti soddisfa.

Se non hai la possibilità di testare vari dispositivi, puoi anche simulare un dispositivo mobile usando il tuo PC.

Apri Google Chrome e naviga sul sito da testare.

Fai click col tasto destro del mouse su un punto qualsiasi della pagina e vai su Ispeziona, poi seleziona l’icona Toggle device toolbar.

Avrai una simulazione di come il tuo sito appare su vari dispositivi, che potrai perfino selezionare dall’elenco.

La scelta del giusto tema per creare un sito responsive non deve essere frettolosa.

Prenditi il tempo che ti serve, perché il tema giusto potrà farti risparmiare molto tempo (e denaro!) in futuro.

Come creare un sito responsive se parti da un sito non responsive

Come creare un sito responsive se parti da un sito non responsive

Prima di tutto, una domanda.

Hai già un sito web, ma è responsive oppure no?

Puoi guardare dal tuo smartphone, certo, ma per sapere se è veramente responsive, puoi usare il tool di Google Mobile-Friendly Test.

Se ci sono degli elementi che creano problemi, verranno elencati nel report generato.

Così saprai esattamente dove intervenire.

Trovi un rapporto sull’usabilità dei tuoi siti su dispositivi mobili anche sulla Google Search Console, alla voce Traffico di ricerca > Usabilità sui dispositivi mobili.

Se hai già un sito web, ma non è responsive, hai due opzioni: rifare tutto da capo, installando un nuovo tema, oppure utilizzare degli strumenti che “responsivizzano” (licenza poetica) quello che hai già.

Cambia tema

Se preferisci cambiare tema WordPress e creare un sito responsive rinnovando completamente quello che hai già, ricordati di scegliere un tema compatibile con le funzionalità che hai già installato.

Verifica perciò che i plugin siano compatibili con il nuovo tema.

In più, fai attenzione a widget o shortcode proprietari del vecchio tema: non funzioneranno più se cambierai template.

Usa un plugin per rendere il tuo sito responsive

Usa un plugin per rendere il tuo sito responsive

La seconda scelta è quella di sfruttare dei plugin che rendono responsive pagine che in realtà non lo sono.

Infatti, alcuni plugin possono venirti in aiuto se hai scelto un tema non responsive e non hai intenzione di cambiarlo.

Non c’è bisogno di creare un sito responsive da zero, se ci sono gli strumenti per risolvere i problemi.

Ad esempio, WPtouch è un utilissimo plugin che ti permette di creare una versione mobile del tuo sito, senza modificare quello che hai già.

La versione mobile non avrà alcun impatto negativo sulla tua SEO, anzi, piacerà molto a Google!

Tutto questo lavoro può essere fatto utilizzando un editor visuale che non richiede alcun inserimento di codici, né competenze particolari.

Con la versione Pro, puoi usare uno dei temi messi a disposizione dagli sviluppatori.

Se ti rendi conto che solamente alcuni elementi del tuo sito sono visualizzati in modo sbagliato nei dispositivi mobili, puoi usare dei plugin specifici per correggere questi errori.

Uno strumento interessante è, ad esempio, Responsive Lightbox & Gallery.

Le tue immagini, le gallery e i video saranno visibili in maniera perfettamente compatibile con tutti i dispositivi.

Uno dei principali elementi che devi assolutamente reimpostare se vuoi creare un sito responsive è il menu.

Il plugin Responsive Menu ti può aiutare a creare tantissimi tipi di menu responsive, che possono essere personalizzati anche senza particolari conoscenze tecniche.

Esistono poi altri plugin che permettono di rendere responsive tabelle, tab, slider e tanti altri elementi di un sito web.

Creare un sito responsive anche se parti da un sito non responsive non è quindi impossibile, e non perderai tutto il lavoro già fatto.

Creare un sito responsive usando HTML e CSS

Creare un sito responsive usando HTML e CSS

Questa parte è un po’ più tecnica.

Se conosci un po’ di HTML e CSS, e hai bisogno di aggiustare alcuni elementi usando il codice, segui queste istruzioni.

Per comunicare alla tua pagina come si deve comportare in caso di determinate dimensioni del monitor, è necessario usare la viewport e le media query.

Non spaventarti, ora ti spiego cosa significa!

La viewport è un’istruzione che si inserisce nella head del codice HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Con questa stringa, stiamo comunicando alla nostra pagina che:

  • width=device-width – la larghezza della pagina deve essere uguale alla larghezza del dispositivo;
  • initial-scale=1.0 – il livello di zoom al caricamento della pagina è pari a 1.

Se il tuo tema non è responsive, probabilmente questa stringa non sarà presente. Vai nel file header.php e se manca, copia e incolla il codice prima del tag di chiusura </head>.

Nel codice CSS, invece, usiamo le media query:

@media screen and (max-width: 480px) {
/* codice CSS per il dispositivo mobile */
}

Questo codice, aggiunto al file style.css, dà delle istruzioni sull’aspetto dei vari elementi se il dispositivo ha una larghezza massima (max-width) di 480 pixel.

Se il sito verrà aperto con un dispositivo con una larghezza minore di 480 pixel, verrà visualizzato con queste impostazioni.

Nota: questi valori saranno applicati anche se ridimensioni la finestra del browser!

Conclusione

Spero con questo articolo di averti convinto innanzitutto di quanto sia importante creare un sito responsive, ma anche di averti dato degli elementi sufficienti per poter farlo con WordPress nella maniera più semplice possibile.

Se hai un nuovo progetto in mente, parti sempre con un tema responsive.

Ma se devi sistemare un sito già esistente, hai visto che ci sono diversi modi per farlo.

Devi sistemare un sito esistente o crearne uno nuovo?

Quali sono le maggiori difficoltà che hai incontrato?

Raccontaci nei commenti la tua esperienza e, se hai dei suggerimenti, condividili con noi.

Guide correlate:

Immagine di Andrea Di Rocco autore articoli SOS WP
Andrea Di Rocco Fondatore di SOS WP™
La mia passione per WordPress mi ha portato negli ultimi 10 anni a voler aiutare sempre più persone a creare blog e siti web in WordPress in completa autonomia. Spero che troverai utili le oltre 700 guide su WordPress e sulla SEO che ho pubblicato su questo blog. Se ne hai voglia ti invito a leggere la mia storia, cliccando sul pulsante qui sotto.
43Commenti
Lascia un commento
  1. Immagine avatar per Salvatore Casivaghi
    Salvatore Casivaghi

    Ciao, io utilizzo il page builder wpbakery, dovrebbe essere facile dal settaggio responsive. Non dovrei avere problemi di codice, giusto?

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      No, non dovresti avere problemi per attivare una corretta modalità responsive del layout.

  2. Immagine avatar per Claudio
    Claudio

    Ciao Andrea,

    sono alle prime armi e sto creando un piccolo e-commerce utilizzando Elementor come costruttore e il tema Astra come base. Ho notato che da un po’ di tempo, quando visualizzo il sito dal telefono, durante lo scorrimento mi scivola a destra e sinistra (oltre i margini dello schermo). Ho provato a verificare le grandezze dei contenuti, header, footer ma nessuno di essi sembra avere contenuti grandi da creare l’errore. C’è qualcosa che mi sfugge? Posso fare qualcosa per evitare questo (terribile) difetto?
    Premetto che non ho (ancora) dimestichezza con il linguaggio CSS. Per ora mi arrangio totalmente grazie al “drag&drop”

    Grazie per l’aiuto!

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Claudio, dovresti contattare la nostra assistenza WordPress da questo link https://sos-wp.it/assistenza-wordpress/. Dovremmo infatti verificare direttamente quale è il problema.

  3. Immagine avatar per Manuel
    Manuel

    Buongiorno, ho appena messo il mio sito online è purtroppo mi sono reso conto che la modalità responsive fa riferimento al tema (OceanWP) e non a Elementor. C’è un modo per dire al sito di utilizzare le impostazioni di Elementor?
    Grazie

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Manuel, hai personalizzato la versione mobile della pagina attivando la modalità responsive di Elementor?

  4. Immagine avatar per Marta
    Marta

    Ciao,
    Oggi sto riscontrando un problema finora mai accaduto: pubblicando un articolo questo appare sul sito se aperto da PC, ma non se lo apro da cellulare (test fatto con 3 cellulari diversi). Come è possibile?
    Ho provato a pulire cache, rimettere in bozza e ripubblicare ma nulla. Grazie

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Marta, hai fatto qualche modifica importante di recente? Ad esempio, l’installazione di un nuovo tema/plugin o qualche aggiornamento. Prova a disattivare i plugin e vedi se il problema scompare, poi riattivali uno per volta finché non si ripresenta, potrebbe essere proprio un plugin a causarlo. Facci sapere se riesci a risolvere, restiamo a disposizione!

  5. Immagine avatar per Alessia
    Alessia

    Ciao, nella versione desktop del mio sito ho creato 4 colonne che nella versione mobile vengono visualizzate una sopra l’altra. C’è un modo per poterle mettere vicine? (Utilizzo OceanWP ed Elementor). Grazie!

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Alessia, mettendole vicine non rischi di compromettere la loro corretta visualizzazione?

    2. Immagine avatar per Alessia
      Alessia

      No, ho già fatto una prova modificando i margini. Mi potete aiutare?

    3. Immagine avatar per Alessia
      Alessia

      Ho risolto. Nelle impostazioni del layout dovevo impostare una determinata percentuale per la larghezza della colonna. Grazie lo stesso.

  6. Immagine avatar per Antonio
    Antonio

    Ciao Andrea,
    Uso il Plugin “WP Mobile Menu” per rendere il menu responsive. Solo che mi fa questo tipo di problema e non so come risolverlo.

    Se visualizzo il sito da aspetto > icona mobile (il menu lo vedo ben responsive) lo stesso se lo faccio dal chrome. Mentre se lo faccio dall’iphone visualizzo il logo e il menu tagliato. E’ possibile una soluzione? Grazie mille

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Antonio, che tema stai utilizzando?

    2. Immagine avatar per Antonio
      Antonio

      Utilizzo il Tema Astra

    3. Immagine avatar per SOS WP Team
      SOS WP Team

      Come mai usi il plugin? Astra dovrebbe già consentirti di gestire il menu su mobile: https://wpastra.com/docs/mobile-header-with-astra/. Ti consiglierei quindi di testare direttamente le funzionalità del tema. In caso, dacci il dominio e diamo una occhiata anche noi.

  7. Immagine avatar per andrea
    andrea

    Ciao, ho un sito e-commerce: utilizzo tema OceanWP e Woocommerce.
    Nella pagina “Il mio account – i miei download”, i download scaricabili non vengono visualizzati bene da mobile. Ossia da cellulare mi tocca scorrere col dito.
    E’ possibile una soluzione?
    Grazie

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Andrea, puoi girarci il link del tuo sito?

    2. Immagine avatar per andrea
      andrea
    3. Immagine avatar per SOS WP Team
      SOS WP Team

      Vediamo errore.

  8. Immagine avatar per grazia mele
    grazia mele

    Ciao Andrea,
    purtroppo aggiungendo la riga al foglio di stile @ media screen and (max-width: 480px) {
    /* codice CSS per il dispositivo mobile */
    }

    non mi cambia niente.
    Come posso risolvere? Grazie

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Grazia, hai inserito le modifiche al CSS che vuoi apportare su mobile? Devi inserirle all’interno della Media Query, leggi in merito la nostra guida generale sul CSS: https://sos-wp.it/guida-css/. Un saluto!

  9. Immagine avatar per Andrea
    Andrea

    Salve Andrea, avrei bisogno del tuo aiuto…
    Sto costruendo un sito web con WordPress + Elementor ma ho un piccolo problema e dubbio.
    Il sito responsive mobile lo volevo realizzare leggermente diverso rispetto alla versione Desktop e Tablet.
    Stesso dominio, stesso tutto tranne delle immagini e grafiche…insomma vorrei cambiare in alcuni punti la struttura.
    E qui arriva il punto.
    Se creo dei blocchi differenti e quindi nuovi (con Elementor) per la versione mobile, nascondendo i blocchi che non voglio ci siano su mobile e creandone dei nuovi solo per questo formato, a livello di Seo incorro in qualche problema?
    Google fa fatica a riconoscere/trovare le pagine per Mobile Responsive?

    Grazie intanto e gentilissimo come sempre.

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao, teoricamente no. Importante sarà ottimizzare a livello SEO i blocchi (testo, immagini) che saranno ospitati su mobile.

  10. Immagine avatar per Giacomo Torreggiani
    Giacomo Torreggiani

    Ciao Andrea

    che dimensioni devo impostare nelle varie sezioni in elementor per il mobile? in termini di pixel intendo. (è necessario impostarle pur avendo il tema responsive?)
    inoltre ho ricevuto una mail da google search console che mi dice che la parte mobile ha qualche problema del tipo:
    – Elementi selezionabili troppo vicini tra loro
    – Testo troppo piccolo da leggere
    – Contenuti più grandi rispetto allo schermo
    Guardando dal mio smartphone non vedo elementi troppo vicini e nemmeno il testo troppo piccolo, inoltre ho due immagini che non me le mostra più e non so per quale motivo, ho provato a reimpostarle anche.
    Grazie mile 🙂

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Giacomo, per risponderti dovremmo vedere il sito direttamente, anzi analizzarlo per capire se questi elementi sono veramente importanti o meno, tanto da compromettere la fruibilità da mobile. Un saluto!

  11. Immagine avatar per Luigi
    Luigi

    Ciao Andrea avrei una domanda, mi scuso in anticipo se la sezione non è quella giusta.
    Esiste qualche plugin che trasforma anche da pc il sito in versione mobile? mi spiego meglio, voglio che l’utente quando apre il mio sito lo vede in versione mobile, diciamo non ottimizzato per pc, quindi da portarlo ad aprire il sito da smartphone oppure tablet. Grazie mille

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Luigi, non conosciamo un plugin del genere, pensiamo che in questo caso sia necessario l’intervento di un developer.

  12. Immagine avatar per jlenia scarpelli
    jlenia scarpelli

    Buongiorno,
    il mio sito si adatta al table e al desktop ma non al cellulare. In pratica quando cerco di aggiungere il menu alla versione mobile mi si incasinano le altre versione . Dove sbaglio?

    Buona giornata

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao, che tema stai utilizzando? Un saluto!

  13. Immagine avatar per stefania
    stefania

    Buongiorno, siete sempre molto utili per me spero anche questa volta. Ho realizzato il mio sito con un tema Themeforest (Blobie per l’esattezza) e non ho capito che valori spuntare tra le varie opzioni che mi compaiono nel menù a discesa della sezione apposita di ogni pagina. Devo modificare “riga”? e con che valori per ogni device?
    Grazie!

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Stefania, purtroppo senza entrare nei settings del tema ci è difficile dare delle indicazioni. Hai provato a contattare il supporto del tema, o a consultare la documentazione che dovresti aver scaricato?

  14. Immagine avatar per marianna rovere
    marianna rovere

    Ciao, mi sto lambiccando perché le impostazioni responsive sono tutte a posto, si vede tutto bene, tutto funziona… ma solo da cellulare mi appare l’immagine dell’head di base del tema, anche se l’ho cancellata da ogni gallery.. aiuto ç_ç

    1. Immagine avatar per marianna
      marianna

      Scusate, risolto.

    2. Immagine avatar per SOS WP Team
      SOS WP Team

      Bene, come hai risolto?

  15. Immagine avatar per Giacomo
    Giacomo

    Ciao Andrea, possiedo un sito responsive ma questi codici non erano presenti per questo ho inserito il codice nell’header.php e mi stavo chiedendo come va inserito invece quello per style.css?

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Giacomo, va inserito esattamente come lo vedi scritto, nel file Style.css. Puoi trovare tale file andando su Aspetto>Editor del tema. Un saluto!

  16. Immagine avatar per daniele
    daniele

    Buonasera,
    vorrei realizzare una versione mobile del sito differente nei contenuti e nelle immagini da quella desktop con indirizzo web http://www.m.nomesito.com oppure http://www.nomesito.com/mobile, senza però andare a perdere o a peggiorare il posizionamento SEO. Avevo pensato di creare un sito differente come http://www.m.nomesito.com tutto noindex, e reindirizzare il traffico da mobile verso queste pagine. E’ giusto o perdo il posizionamento acquisito visto il “google mobile first”? Grazie…Cosa mi consigli?

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Non conviene creare un altro sito, la versione mobile serve comunque a offrire traffico al dominio già in uso. Vuoi sia grafica che contenuti diversi per il sito visibile su mobile?

  17. Immagine avatar per Giovanni
    Giovanni

    Sono riuscito ad eliminare l’header del sito di WordPress perché non mi dava opzioni per modificarlo come volevo e adesso ho scaricato mobile menu ,un plugin utile lo sapete usare ?

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Giovanni, sì. Per formazione specifica su come lavorare al meglio con il plugin puoi contattare il nostro reparto servizi, da questo link.

  18. Immagine avatar per Giovanni
    Giovanni

    Salve,possiedo un sito gia responsive e anche facendo il test di google lo conferma ma ho un problema a visualizzare il menù/header ha qualche consiglio grazie .

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Giovanni, ricevi un messaggio particolare in merito all’header? Hai provato a intervenire via CSS?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *