5 cose da sapere per fare un sito responsive su WordPress

Il tuo sito è ottimizzato per i dispositivi mobile? Ormai da tempo gli utenti accedono ai siti maggiormente da mobile ed è quindi essenziale avere un sito che sia perfettamente responsive e mobile-friendly. Non solo, Google da anni penalizza i siti non responsive con conseguenze negative sul loro posizionamento. Per questo motivo è importante conoscere alcuni elementi essenziali che andremo a discutere in questo webinar:

1. Cos’è un sito responsive?
2. Come si realizza un sito responsive su WordPress?
3. Quali plugin WordPress è meglio utilizzare per un sito responsive?
4. Quali temi WordPress è meglio utilizzare per un sito responsive?
5. Suggerimenti su come fare un sito responsive con Elementor

In questo webinar abbiamo voluto cambiare il solito format lasciando molto più spazio alle domande di chi ha partecipato in diretta per poter dare un feedback su casi reali con il quale ci si deve confrontare tutti i giorni. Vi chiediamo di darci un feedback qui sotto nei commenti all’articolo per capire come poter migliorare e rendere l’esperienza dei webinar migliore per tutti voi! 🙂

Guarda il webinar

Nel webinar di questo mese andremo a vedere non solo come rendere un sito adatto alla lettura da mobile ma anche quali strumenti, temi e plugin utilizzare per renderla il più possibile efficace. Carmela Maggio, Graphic e Web Designer, ci mostra come lavorare sulla user experience e interface del sito in modo da renderle ottimali per i visitatori che usano dispositivi mobile.

Guarda le slide della presentazione di Carmela Maggio 👇

Come sempre vi chiedo di commentare il webinar, in modo da avere un feedback su come è andato e su come vorreste che fossero i prossimi. Sentitevi liberi di dare suggerimenti e di richiedere gli argomenti futuri che vorreste fossero affrontati. Consiglio di dare uno sguardo anche agli altri nostri webinar e seguirci sul canale YouTube di SiteGround Italia.

Per qualsiasi domanda, non esitate a commentare sotto questo articolo. 🙂

Le vostre domande sui siti responsive su WordPress

Come faccio a sapere se il mio sito è responsive?

Il modo più semplice e veloce, se hai già un sito, è testarlo su un tuo smartphone o tablet. Prova a navigare, guarda come sono visualizzati gli elementi e se è complicato accedere a certe sezioni. In fase di creazione o modifica del sito, fai sempre riferimento all’anteprima WordPress per mobile che ti mostra il ridimensionamento degli elementi in base allo schermo. In alternativa ci sono strumenti extra appositi.

Consiglio di un nostro utente > Per vedere come il sito si comporta in responsività su diversi dispositivi, consiglio di installare Blisk che ti permette di scegliere molti dispositivi e vedere come viene visualizzato il tuo sito.

Meglio una pagina responsive che si adatta al mobile o creare 2 pagine differenti, una creata per desktop e una creata per mobile?

Dipende dal tipo di sito che hai. Nel caso di siti di prodotto, servizio o eCommerce è meglio avere una pagina responsive che si adatta a tutti i dispositivi. Per siti principalmente focalizzati sulla lettura e su contenuti informativi, invece, come siti di giornali e blog, è meglio creare una pagina AMP apposita.

Io uso molto tabelle e immagini e risultano quasi sempre “sballate” da mobile. Quale potrebbe essere il problema? 

Prova a utilizzare la percentuale al posto dei pixel. La trovi con scritto EM al posto di Pixel. È comunque importante sempre verificare proprio il box in cui si inserisce l’immagine. Se il template in quel box prevede una misura specifica, bisogna caricare un’immagine di quella misura in modo che poi si possa riadattare. Se la metti più grande o più piccola non si ridimensiona.

Puoi trovare le dimensioni necessarie all’interno del box, nella documentazione del template o con il tasto destro ispezionando la pagina.

Si può dividere un sito una parte responsive (eCommerce), e un’alta (blog) con pagine dedicate per mobile?

Se il tuo sito è principalmente un eCommerce e poi ha un blog a lato con contenuti informativi legati ai prodotti/servizi, non è consigliabile dividerlo. Se invece hai un blog e poi hai anche una sezione minore dove vendi prodotti e servizi, magari in affiliazione, allora va bene dividerlo.

Ai fini responsive, è meglio incorporare i video o semplicemente linkarli all’interno di un elemento?

È sempre meglio incorporarli anche per una questione di fruizione. Altrimenti dovresti rimandare l’utente su una pagina o applicazione esterna al sito.

Quando impagino con Elementor quali sono le misure in larghezza che devo considerare valide per i tre ambienti desktop/tablet/mobile?

• Desktop: 1920 x 1080px
• Laptop: 1366 x 768px
• Tablet: 1024 x 768px
• Smartphone: 640 x 360px

Quali misure bisogna usare per i loghi? Sia per quelli quadrati, sia per quelli orizzontali. Uso canva pro e uso png come file.

• Quadrato: 150 x 150px
• Rettangolare: 200 x 100px
• Favicon: 16 x 16px oppure 32 x 32px

Avete detto che i dispositivi Android ignorano alcuni font. Vale anche per il mondo Apple?

È una cosa specifica di Android, perché Apple (nella mia esperienza) legge tutti i font. Android in realtà non è che non legge i font ma li sostituisce con quelli predefiniti di Android e questo può essere un problema.

Google Fonts è compatibile con la GDPR?

Google è vago su questo aspetto e potremmo dire che no, non lo è. Per essere sicuro di essere compliant e utilizzare font che non vengono alterati sul sito, invece di scaricare e installare font da Google, guarda i font che sono utilizzati sul tuo template e comparali con quelli presenti su Google Fonts. In questo modo potrai essere sicuro di utilizzare un font adeguato anche per siti responsive senza dover scaricare alcun pacchetto da Google.

Ho notato che quando lavoro sulla parte “responsive” del sito, mentre lo creo vedo tutto normalmente, mentre nella anteprima gli elementi sono disallineati. Come mai?

Andrebbe guardato il caso specifico ma probabilmente hai toccato i pixel. Come dicevamo prima, in questo caso è sempre meglio lavorare sulla percentuale EM. Un altro problema che causa questo tipo di disallineamento sono le opzioni per far “salire o scendere” l’elemento che in anteprima mostrano variazioni maggiori rispetto a quelle visibili in lavorazione. Oppure l’aver modificato le dimensioni di solo uno dei due elementi per aumentarne/ridurne le dimensioni.

Ho creato una pagina con Elementor. Andava tutto bene sia dal desktop che da mobile finché non ho modificato lo spazio tra le immagini. Da allora su mobile ha un altro aspetto. Come mai?

Questo tipo di problemi si verificano se non si pone attenzione alle misure esatte dei box oppure se si inseriscono immagini di misure corrette ma poi si modificano a mano. Ad esempio: se il sito e 1200 e tu hai due immagini che vuoi inserire con spaziatura, devi calcolare la spaziatura e di conseguenza la dimensione delle immagini. Se le metti entrambe a 600 facendo il calcolo 1200 : 2 e poi inserisci una spaziatura anche minima, rischi che si sballa tutto.

Se lavori con Elementor comunque non ti preoccupare, è sempre disponibile la cronologia delle modifiche e puoi tornare indietro alla versione subito antecedente alla modifica.