Pubblicato il 04/07/13e aggiornato il

Testare come è visto il blog con diversi browser e con diverse risoluzioni dello schermo.

Visualizzare come viene visto il nostro sito con i diversi browser e con le varie risoluzioni di netbook, notebook, desktop e dispositivi mobili o smartphone.
Quando si decide di cambiare modello al blog o quando si fanno delle modifiche sostanziali dovremo porci il problema non tanto di come lo vediamo noi ma di come lo vedono i visitatori. Chi arriva sul nostro sito lo fa usando sistemi operativi e browser diversi senza contare le risoluzioni dello schermo con cui visualizza le nostre pagine che possono andare da un desktop da 24 pollici a un piccolo smartphone.

E' buona norma monitorare che dispositivi usano i visitatori per ottimizzare il layout del blog almeno per la maggior parte di loro. Il metodo migliore per avere dei dati disaggregati sulle visite è quello di usare Google Analytycs ma qualche idea la possiamo avere anche se siamo utenti Blogger andando su Bacheca >  Statistiche > Pubblico > Visualizzazioni di pagina per browser.

Su Google Analytics possiamo avere anche la risoluzione degli schermi con cui è visto il sito. Andando su Pubblico > Tecnologia > Browser e Sistema Operativo possiamo visualizzare i dati in una tabella o in percentuale. Per il sistema operativo nel caso di questo blog Windows è usato da circa l'85% dei visitatori. Per la risoluzione dello schermo e per i browser la situazione è invece molto più variegata

risoluzione-schermo

browser-visite-blog

I visitatori di questo blog che usano un netbook o un vecchio PC (risoluzione 1024x768) sono al 4 posto con una percentuale solo del 9,2% mentre le prime tre posizioni sono di visitatori che usano uno schermo di buona risoluzione. Riguardo ai browser c'è una forte preminenza di Chrome (47,7%), su Firefox (24,2%) e Internet Explorer (17,4%). Per cercare di contentare tutti dovremo testare come viene visto il blog con differenti risoluzioni e con diversi browser.

Viewlike.us è un tool gratuito che mostra come viene visto il sito con schermi desktop o con dispositivi mobili. Basta incollare l'URL e cliccare su Test

viewlike-testare-diverse-risoluzioni-scehrmo

Ci sono due menù a discesa per scegliere le risoluzioni di netbook, notebook, desktop, iPhone e Galaxy. Considerati i dati della percentuale di visitatori si può decidere eventualmente di accorciare la larghezza del layout. Questa operazione però andrebbe fatta in fase di prima progettazione del sito. Ricordo che per i blog su Blogger c'è anche una versione mobile che si attiva automaticamente.

Browsershots è invece un tool che serve per visualizzare una pagina web con diversi browser e con diversi sistemi operativi. Dopo aver digitato l'URL del nostro sito si lascia la spunta solo ai browser che ci interessano, quindi si clicca su Submit

browsershots-testare-browser

Riceveremo tutta una serie di screenshot relativi al sito in oggetto così come visto dai browser che avevamo selezionato. Rinfrescando la pagina cominceranno a essere visibili e ci daranno una idea piuttosto precisa di come viene visto il nostro sito

browsershots-test

Cliccando su una singola miniatura ci sarà una visualizzazione più precisa a tutta pagina.




2 commenti :

  1. Ciao Ernesto, è possibile inserire qualche CCS che renda il sito adattabile ad ogni risoluzione?

    RispondiElimina
    Risposte
    1. Bisogna usare un modello responsive. Non c'è una regola generale.
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.