Come testare un sito WordPress in diversi browser (i test di Cross Browser sono facili)

Vuoi testare il tuo sito WordPress in diversi browser? Il Cross Browser Testing è estremamente importante quando si cambiano temi di WordPress o si implementa un nuovo design perché ti aiuta ad assicurarti che il tuo sito web abbia un bell'aspetto su tutti i diversi browser, dimensioni dello schermo, sistemi operativi e dispositivi mobili. In questo articolo, ti mostreremo come testare facilmente un sito WordPress in diversi browser.

Che cos'è il Cross Browser Testing?

Cross Browser Testing è un processo di test di siti Web su più browser, sistemi operativi, dimensioni dello schermo e dispositivi mobili per garantire che il tuo sito web funzioni correttamente su tutti i diversi browser Web.

Perché testare un sito WordPress in browser diversi?

Google Chrome è il browser web più popolare al mondo con una quota di mercato del 65% sui computer desktop e del 57% sui dispositivi mobili. Tuttavia, altri browser come Firefox, Microsoft Edge, Safari e Opera sono ancora ampiamente utilizzati da centinaia di milioni di utenti in tutto il mondo.

A causa di una vasta gamma di browser, sistemi operativi e dispositivi, i test cross-browser sono diventati una parte importante della creazione di un sito web. I test cross-browser ti consentono di offrire un'esperienza web coerente a tutti i tuoi utenti su browser, dispositivi e piattaforme diversi.

Mentre tutti i browser più diffusi si comportano bene quasi identico quando eseguono il rendering di pagine Web, usano tutti codice diverso, il che significa che possono gestire elementi del sito web in modo diverso di volta in volta.

In qualità di proprietario di un sito web, ciò significa che il tuo sito Web potrebbe essere diverso da un browser all'altro. Dal momento che questi errori non sono comuni a WordPress e sono visibili a tutti, potresti passare mesi senza conoscere il problema fino a quando qualcuno non lo segnala.

Questo è il motivo per cui è considerata la migliore pratica per testare il tuo sito WordPress su diversi browser su piattaforme multiple e dimensioni dello schermo, così puoi assicurarti che il tuo sito web offra la stessa esperienza utente a tutti i tuoi utenti.

Ora la maggior parte delle persone non ha accesso a un'ampia gamma di dispositivi per testare un sito web. Anche se riesci a prendere in prestito più dispositivi da amici, sarà molto impegnativo passare manualmente avanti e indietro. Fortunatamente ci sono strumenti di test cross browser che possono aiutare ad automatizzare il processo con un solo clic.

Ma prima di condividere l'elenco dei migliori strumenti di test cross-browser per WordPress, è importante sapere quali browser sono popolari tra i tuoi utenti, in modo da poter indirizzare la tua attenzione di conseguenza.

Come trovare i browser utilizzati dai visitatori del tuo sito web?

Considerando il numero di sistemi operativi disponibili, browser e combinazioni di versioni del browser, i test cross-browser possono essere un compito noioso per i proprietari di piccole imprese.

Tuttavia, se conosci i browser più diffusi, i sistemi operativi e i dispositivi utilizzati dai visitatori del tuo sito web, puoi semplificare notevolmente il processo su te stesso. A seconda delle tue statistiche specifiche, potresti riuscire a superare solo alcune delle combinazioni più popolari.

Puoi scoprire quali browser, sistemi operativi e dispositivi sono popolari tra i tuoi utenti utilizzando Google Analytics.

Accedi al tuo account Google Analytics e vai a Pubblico »Tecnologia rapporto. Da qui puoi trovare informazioni su browser, sistema operativo, dimensioni dello schermo, utilizzate dai visitatori del tuo sito web.

Una volta che hai questa lista, puoi concentrarti sulle combinazioni migliori ed evitare il resto.

Se stai appena iniziando un blog o non hai Google Analytics, ti consigliamo di installare immediatamente MonsterInsights per configurare correttamente Google Analytics. Una volta installato, puoi scegliere di attendere qualche settimana per raccogliere i dati o procedere con il test del tuo sito web su tutti i browser.

I migliori strumenti di test di Cross Browser per WordPress

Gli strumenti di verifica dei browser incrociati ti consentono di testare facilmente il tuo sito WordPress su più browser, sistemi operativi e dispositivi. Con pochi clic, puoi testare automaticamente il tuo sito web su diversi browser.

Di seguito è riportato l'elenco dei migliori strumenti di test cross-browser per i siti WordPress:

1. Browser

Browsershots è uno strumento open source che consente di testare il tuo sito Web con diversi browser su diversi sistemi operativi. La parte migliore di questo strumento è che è gratuito. Il lato negativo è che non include Microsoft Edge o Internet Explorer. Inoltre non include il supporto dei dispositivi mobili.

Per utilizzare i Browsershot, inserisci semplicemente l'URL del tuo sito web e poi seleziona i browser che vuoi testare. I browser sono elencati in tre colonne per Linux, Windows e Mac OS.

Dopo aver inviato la richiesta, dovrai attendere un po 'mentre esegue i test e genera uno screenshot. Una volta terminato, sarai in grado di vedere gli screenshot sulla stessa pagina. Ora puoi andare avanti e fare clic su uno screenshot per espanderlo.

Nota: BrowserShots prende screenshot di un sito Web, il che significa che non è un test dal vivo. Potresti non essere in grado di vedere se il tuo sito web funziona come previsto durante i test. Per questo, avrai bisogno di strumenti che eseguano test dal vivo nei browser reali.

2. CrossBrowserTesting

CrossBrowserTesting è uno strumento di test cross-browser di facile utilizzo e molto potente con funzionalità di test in tempo reale e schermate. Questo è lo strumento che usiamo qui su Awesome Motive per testare i nostri siti web come WPBeginner e i nostri premium plugin WordPress.

È un servizio a pagamento, ma offre un account di prova gratuito con 100 minuti per testare il prodotto.

Dopo aver creato il tuo account di prova, vai alla scheda 'Test live' dove puoi selezionare un sistema operativo e un browser. Caricherà l'URL del tuo sito web nel browser effettivo visualizzato dal vivo sul tuo schermo.

Se desideri ottenere rapidamente più acquisizioni di schermate contemporaneamente, fai clic sulla scheda "Screenshot" ed esegui un nuovo test di schermate. Lo strumento CrossBrowserTesting recupera automaticamente gli screenshot sui telefoni Mac, Windows, iPad e Nexus 6P con Chrome, Firefox, Safari, browser Web Microsoft Edge.

Indica anche le differenze di layout sotto ogni schermata che puoi cliccare per confrontare il layout con il layout di base. Puoi anche confrontare diversi layout affiancati o scaricare tutti gli screenshot sul tuo computer.

L'account gratuito è un po 'limitato in termini di browser e combinazioni di sistemi operativi che è possibile eseguire. Tuttavia, copre i browser più diffusi sulle migliori piattaforme mobili e desktop.

Prezzi: Inizia da $ 29 al mese fatturati annualmente.

3. BrowserStack

BrowserStack è uno strumento di pagamento cross-browser e multipiattaforma per applicazioni mobili e siti Web. Offrono anche un account di prova gratuito limitato che ti dà un accesso di 30 minuti per testare la loro piattaforma.

Viene fornito con funzionalità di test dal vivo e screenshot. È possibile selezionare la piattaforma che si desidera testare e quindi selezionare un browser. BrowserStack caricherà l'emulatore virtuale con una finestra del browser effettiva. Puoi semplicemente inserire l'URL che desideri testare per iniziare il test.

I risultati sono piuttosto accurati e la velocità è abbastanza soddisfacente. Tuttavia, dovrai comunque eseguire i test manualmente aprendo ciascun browser.

Prezzi: Inizia da $ 29 / mese fatturati annualmente.

Come analizzare le schermate del test del browser incrociato?

Ora che hai imparato il modo più semplice per testare il tuo sito WordPress in diversi browser, la parte successiva è analizzare i risultati e vedere se c'è qualcosa di rotto che deve essere corretto.

Se stai utilizzando un tema WordPress reattivo con un codice di buona qualità, la maggior parte degli screenshot apparirà più o meno la stessa.

Tuttavia, in alcuni casi, gli elementi del sito Web possono apparire leggermente diversi da un browser all'altro. Se questa differenza è minima e non influisce sull'esperienza, sull'estetica o sulla funzionalità dell'utente, puoi ignorarla.

D'altra parte, se una differenza è troppo evidente, influisce sull'esperienza utente, sembra sgradevole, o impedisce agli utenti di utilizzare il tuo sito web come previsto, quindi ha bisogno della tua attenzione.

Nella maggior parte dei test cross-browser, scoprirai i problemi CSS con il tuo tema. Questo problema può essere risolto utilizzando Inspect Tool per scoprire quali regole CSS devono essere aggiornate. Successivamente, è possibile aggiungere CSS personalizzati per risolvere tali problemi.

Se non riesci a risolvere i problemi, puoi sempre assumere uno sviluppatore WordPress per aiutarti a risolverli.

Speriamo che questo articolo ti abbia aiutato a imparare come testare facilmente un sito WordPress in diversi browser. Potresti anche voler vedere la nostra guida passo-passo per migliorare la velocità e le prestazioni di WordPress.

Se questo articolo ti è piaciuto, ti preghiamo di iscriverti al nostro canale YouTube per le esercitazioni video di WordPress. Puoi anche trovarci su Twitter e Facebook.