Che fare se il tuo Sito visto da cellulare fa schifo

scrivania con cellulare e tazza di caffè

Bentornato/a sulla rubrica del Fabbro,
Oggi ti parlo di un errore molto comune in cui puoi imbatterti durante la realizzazione del tuo primo sito web.

Purtroppo commettere questo errore è facilissimo e le conseguenze sono disastrose, perciò raccogli tutta la concentrazione che hai e afferra una tazza del tuo caffè preferito.

Qualche tempo fa ti avevo suggerito in questo articolo cosa fare prima di scegliere un tema WordPress per creare il tuo sito.

Nella sezione “Caratteristiche di un buon tema WordPress” c’è un punto specifico su cui vorrei ti soffermassi un attimo:
mobile responsive. Osserva attentamente come si presenta la demo del tema sul tuo cellulare. Molti temi sono bellissimi da vedere su desktop ma lasciano a desiderare su cellulare […]”.

Nota: quando uso il termine desktop intendo lo schermo di pc fissi e pc portatili.

Allo stesso modo, moltissimi siti web sono belli su cellulare e fanno schifo su desktop.

Ma perché? E soprattutto… quali sono le conseguenze?

Perché molti sviluppatori commettono l’errore gravissimo di pensare i siti prima per schermi desktop e poi li adattano a schermi per cellulari!

Come ti avevo accennato, commettere questo errore è facilissimo e la ragione principale è che quando realizziamo un sito lo facciamo al pc.

Prima di presentarti diverse soluzioni a questo problema voglio assicurarmi tu capisca perché è importante correre ai ripari al più presto.

Cosa ci dicono i dati

I risultati di un’indagine dell’Istat ci informano che soltanto l’8% degli italiani non usa lo smartphone per navigare in internet.
Quindi, il 92% degli italiani utilizza lo smartphone per navigare in internet:
9 italiani su 10!

Se hai agganciato il tuo sito ad Analytics come ti avevo suggerito in questa guida, ti sarai accorto da solo che una percentuale altissima di utenti che navigano sul tuo sito lo fanno da smartphone.

schermata tech analytics 4

Questi dati ci dicono che la versione mobile di un sito è (addirittura) più importante di quella desktop, perché viene visitata di più.

Ma non è tutto.

Prepara la moka perché sto per sganciare una bomba.

Rivoluzione in casa Google

5 anni fa Google ha introdotto una modifica radicale agli algoritmi del motore di ricerca.

Nasce così l’algoritmo Mobilegeddon, con l’obiettivo di dare maggiore rilevanza alle versioni mobile dei siti web all’interno delle pagine dei risultati di ricerca.

smartphone lanciato nello spazio

Ma questo era soltanto l’inizio della rivoluzione: Google ha annunciato che l’anno prossimo indicizzerà esclusivamente le versioni mobile dei siti.

Proprio così.

Anche se hai curato al dettaglio la SEO del tuo sito, questo scompare dal motore di ricerca se non è ottimizzato per cellulare.

Questo significa che, se finora non ci avevi mai pensato, è arrivato il momento di rivoluzionare il tuo sito e prestare maggiore attenzione alla versione mobile.

“Va bene Fabbro, ma ho tempo fino all’anno prossimo, giusto?”

Sbagliatissimo.

Questa rivoluzione è già in atto. Se il tuo sito non è ottimizzato per il mobile sta già subendo un calo nel posizionamento sui motori di ricerca.

Ma non è soltanto di questo che devi preoccuparti.

Se il tuo sito non si adatta agli schermi dei cellulari dei tuoi utenti stai fornendo a quest’ultimi una pessima esperienza.

Non ci sei soltanto tu sul web! Se il tuo sito su cellulare fa schifo, non accendo il pc per navigarlo; piuttosto chiudo la scheda e cerco il sito del tuo competitor.

“Ok Fabbro. Ma come faccio a capire se effettivamente il mio sito è ottimizzato per mobile?”

Ottima domanda! Per tua fortuna esistono dei metodi infallibili.

Come capire se il tuo sito è ottimizzato

Se non sai da dove iniziare, ti basta prendere in mano il cellulare!

Collegati al tuo sito e assicurati che:

  • il testo sia leggibile senza dover effettuare lo zoom.
  • Ogni elemento cliccabile, come bottoni e link, abbiano spazi adeguati per essere schiacciati col dito.
  • Non ci sia bisogno di scorrere orizzontalmente il sito per visualizzare i suoi contenuti.

Se il tuo sito non soddisfa uno di questi requisiti, devi correre al riparo al più presto!

Quali sono i vantaggi di avere un sito responsive

sito su desktop tablet e smartphone

Avere un sito ottimizzato per cellulari vuol dire avere un sito mobile responsive.

Come suggerisce il termine inglese, un sito responsive “risponde bene” se navigato da qualsiasi tipo di dispositivo: pc, cellulare, smartwatch, smartTV ecc.

Capisci bene che il vantaggio principale di un sito mobile responsive è la garanzia di offrire un’esperienza di navigazione positiva a qualsiasi utente, a prescindere dal dispositivo che utilizza per navigarlo.

Oggi avere un’attività online non significa avere semplicemente un sito. Per essere presente sul web efficacemente devi tenere in considerazione tutti i dispositivi mobili attraverso cui la tua attività può essere raggiunta.

Solo così aumenterai visibilità e popolarità in internet e sarai in grado di comunicare nel modo giusto.

Come migliorare ulteriormente le prestazioni mobile del tuo sito

 

In realtà, anche se il tuo sito soddisfa tutti i requisiti elencati in precedenza, puoi migliorarne ulteriormente il design.

Se il tuo sito è molto bello su desktop ma lascia un po’ a desiderare su cellulare, stai continuando a fornire una pessima esperienza alla maggior parte dei tuoi visitatori.

Cosa puoi fare per correre ai ripari e rendere più bello il tuo sito WordPress su cellulare?

Se mi leggi molto probabilmente non sei un tecnico informatico e non puoi applicare del codice di programmazione per modificare l’aspetto del tuo sito su cellulare in ogni dettaglio.

Ma don’t panic: hai a tua disposizione un altro metodo infallibile.

bottone don't panic

Collegati a questa guida che ho realizzato tempo fa per aiutarti a scegliere il tema ideale per il tuo sito.

Ma non usare il pc: naviga i temi esclusivamente da cellulare! In questo modo andrai a colpo sicuro e ne individuerai subito uno che fa al caso tuo. Sarai in grado di scartare a priori i temi non ottimizzati per cellulare o quelli brutti.

“Ma Fabbro, il mio sito ha già un tema. Devo rifare il sito da capo?”

No, perché fai sempre in tempo a cambiare tema! Quando cambi il tema del tuo sito i contenuti delle pagine e degli articoli restano lì dove sono adesso. Cambia soltanto l’impostazione grafica del sito.

Ti consiglio comunque di effettuare un backup prima di questa operazione. Così se cambi tema e non sei soddisfatto della sua resa puoi tornare indietro in qualsiasi momento.

Non sai cos’è un backup e come puoi effettuarne uno? Allora leggi prima questo articolo.

Se non hai ancora realizzato un sito web puoi seguire gli stessi consigli, ma è meglio se parti da qui.

Conclusioni (più un piccolo trucchetto)

Ti sembrerà un po’ contro-intuitivo pensare il tuo sito prima per cellulare e poi per pc, ma credimi: oggi è l’unico approccio possibile.

La rivoluzione Google è già iniziata e da questo punto in poi non è possibile tornare indietro.

Nel prossimo futuro sempre più persone accederanno in rete attraverso dispositivi mobile.

Nella sezione precedente dell’articolo ti ho suggerito di navigare i temi WordPress da cellulare per individuare subito i migliori.

Ma cosa succede se trovi un bel tema su cellulare che fa schifo su dekstop? Beh, succede che dovresti scartarlo comunque.

Il miglior tema possibile è quello che non fa cilecca neanche su desktop.

La cosa più comoda sarebbe che tu utilizzassi il tuo pc per visionare sia la versione desktop che quella mobile dei temi WordPress, convieni con me? Altrimenti faresti il doppio della fatica perché dovresti prima individuare una decina di temi che vanno bene su cellulare e poi spostarti sul pc per vedere come sono su desktop.

“Certo, Fabbro, però è impossibile! Come faccio sul mio pc a verificare se il tema funziona bene su cellulare?”

Sarai felice di sapere che esiste un tool che ti permette di farlo.

Collegati a questa pagina e installa “Viewport-resizer” sul tuo browser.

In questo modo sbloccherai la funzione incredibile di poter visualizzare sul tuo pc un’anteprima di come viene visualizzata la pagina su cellulare.

Ti basta cliccare in alto su “Resizer” e scegliere l’icona con il cellulare. La pagina si adatterà automaticamente allo schermo di un cellulare come per magia!

schermata viewport resizer
Clicca l’icona cerchiata in rosso.

Per installare questo utilissimo tool non devi fare altro che schiacciare il tasto sinistro del mouse sul bottone “Click or bookmark” e trascinarlo sulla barra superiore del browser, come indicato nello screenshot in basso.

schermata istruzioni viewport resizer
Trascina quel bottone sulla barra degli indirizzi del tuo browser preferito.

Una volta installato, per utilizzare Viewport Resizer collegati su una qualsiasi pagina e fai click sulla scritta “Resizer” (in alto sul browser, dove hai trascinato il bottone). La pagina si ricaricherà e avrai la possibilità di adattare la schermata ai vari dispositivi.

Se per qualsiasi motivo non riuscissi a installare Viewport-resizer scrivimi nei commenti.

Attenzione però: quando sei soddisfatto di un tema fai comunque la prova del 9 sul tuo cellulare.

Viewport-resizer è uno strumento potentissimo ma niente è più affidabile del tuo cellulare. Se ad esempio il tema si carica velocemente su pc ma è lentissimo su cellulare devi scartarlo, e non puoi effettuare questa verifica su desktop.

E se questo articolo ti è stato utile, iscriviti subito alla mia newsletter perché ne pubblicherò uno alla settimana, tutti i martedì. Ti terrò costantemente aggiornato sugli strumenti migliori per gestire in autonomia il tuo sito e… presto per te diventerà facilissimo usare il martello per spaccare il web!

A martedì prossimo,
Il Fabbro

11 pensieri su “Che fare se il tuo Sito visto da cellulare fa schifo

  1. Vera dice:

    Ciao Manuel!

    Ho letto un libro che mi ha fatto pensare al tuo caffè. Si chiama “finché il caffè è caldo”. È letteratura giapponese, se ti piace il genere te lo consiglio 🙂

    Grazie dell’articolo, vorrei sapere se pensi meglio usare questo tool anche se ho una funzione simile su elementor (so che non lo ami ma per ora non ho tempo di cambiare tema).

    Inoltre ho un problema su tablet, oggetto che non ho in casa ma che qualche utente usa per collegarsi al mio sito. Da tablet il form che ho preparato con active campaign non funziona.

    Hai Suggerimenti o articoli in vista?

    Grazie!!

    Buona giornata ☺️
    Vera

    • Il Fabbro dice:

      Ciao Vera e grazie per aver commentato l’articolo.
      Non conosco il libro che hai menzionato ma me lo procurerò al più presto 😁
      Se utilizzi Elementor non hai bisogno di Viewport Resizer, però ti suggerisco di testare sempre le modifiche che effettui sul sito anche su cellulare.
      Riguardo al modulo AC: è strano che non funzioni esclusivamente su tablet, a meno che:
      1. Il browser che hai sul tablet per qualche motivo strano ha disabilitato javascript;
      2. Il browser è datato e non aggiornato alle ultime versioni.
      Puoi girarmi l’URL del modulo AC incriminato? Altra domanda: cos’è che di preciso non funziona? Quando compili i campi e fai click sul bottone ricevi un errore? Non succede nulla? Carica all’infinito?

            • Il Fabbro dice:

              Sì, il problema è relativo sicuramente ad una versione di iOS obsoleta e non più supportata. Ti suggerisco di fargli compilare il modulo da cellulare. In alternativa puoi farti scrivere i suoi dati via email e inviargli manualmente il link all’ebook.

              • Vera dice:

                Grazie, è stata una premura dell’utente avvisarmi, aveva scaricato da cellulare senza problemi dopo aver provato da tablet, ma temeva ci fosse un problema nel mio form e mi ha voluta coinvolgere.

                Grazie Manuel, sempre prezioso!

                buona giornata!

                Vera

  2. Veronica Forconi dice:

    Grande Fabbro! Articolo utilissimo, hai risposto a tantissimi dubbi che avevo da tempo e direi che alla fine penso che il nostro sito sia ottimizzato ma semplicemente ha un vecchio tema che, nonostante lo aggiornino ogni anno, semplicemente non funziona per il nostro sito e l’e-commerce da cellulare.

    Io per visualizzare mobile da broswer uso “ctrl shif I” (mi pare) faccio male? Nel weekend darò un’occhiata al tool che hai consigliato.

    Altra domanda: come faccio a capire se un sito si carica velocemente? Così da poter fare i test sia da PC che da mobile.

    Grazie mille in anticipo!!

    • Il Fabbro dice:

      Ciao Veronica e grazie per le domande! Se il tema del vostro ecommerce, nonostante gli aggiornamenti, non funziona su cellulare fate sempre in tempo a cambiarlo (anzi dovreste farlo al più presto). Sicuramente per un sito grande (pieno di contenuti) non è un’operazione semplice ma si può fare, si potrebbe ad esempio scaricare il sito su un pc e smanettarci in locale, in totale sicurezza.
      Conosco la funzione dei browser che si attiva con ctrl + shift + i (è solo su Firefox se non erro) però ogni tanto mi da dei problemi, forse perché è ancora in beta e necessita ulteriori migliorie. Tornerò a testarla nei prossimi mesi e ti darò un altro riscontro.
      Per la domanda sulla velocità: esistono degli strumenti online che ti forniscono un’analisi però non mi sembrano molto attendibili. Provando con gli stessi siti su diversi strumenti online ottengo risultati contrastanti, quindi sono un po’ diffidente. Per me il test più attendibile puoi farlo con un cellulare connesso alla rete mobile, perché è il tipo di dispositivo più utilizzato per navigare in internet. Dico rete mobile perché ormai il 4G ce l’abbiamo tutti e lo offrono tutte le compagnie telefoniche in Italia, mentre le reti wi-fi cambiano anche in base al comune in cui si vive (nel paesino in cui vivono i miei c’è ancora l’ADSL 10 mega). Se sul tuo cellulare il sito si carica lentamente allora hai bisogno di effettuare delle modifiche per ottimizzarlo. Ho pubblicato tempo fa questa guida, in cui c’è un paragrafo sulla velocità: https://isartidelweb.it/2021/01/05/i-problemi-piu-letali-di-tutti-i-siti/ . Approfondirò l’argomento nelle prossime settimane e ti avvertirò quando sarà online 😁

      • Veronica+Forconi dice:

        Ctrl-shift-I la uso su chrome, per fare controlli al volo, non avevo idea che potesse dare errori.
        Per il resto farò qualche test come hai consigliato.

        Grazie mille!!!

Lascia un commento

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