4 Modi per Controllare se il tuo Sito è Responsive

4 diversi modi per capire se le tue pagine web si vedono e funzionano bene su telefoni cellulari e tablet, più qualche consiglio. Il metodo più affidabile per scoprirlo? Fare il test con uno smartphone Android, un iOS o altri dispositivi mobile reali. Oppure…

4 modi di controllare se il sito è responsive: 1 - Il metodo più sicuro, 2 - Chrome DevTools, 3 - strumenti Google, 4 software gratis e professionali
4 modi di controllare se il sito è responsive: 1 - Il metodo più sicuro, 2 - Chrome DevTools, 3 - strumenti Google, 4 software gratis e professionali
Cosa significa Responsive?

Il design responsivo, o responsive web design (RWD), indica una tecnica di web design per la realizzazione di siti in grado di adattarsi graficamente in modo automatico al dispositivo coi quali vengono visualizzati (computer con diverse risoluzioni, tablet, smartphone, cellulari, web tv), riducendo al minimo la necessità dell’utente di ridimensionare e scorrere i contenuti.

Tratto da Wikipedia

Numero 1

Il metodo più affidabile

Il metodo più affidabile è … molto semplicemente provarlo sul tuo smartphone. La prova su un singolo telefono non dà ovviamente la certezza che le tue pagine web siano ottimizzate su tutti i dispositivi mobili ma è sicuramente un buon punto di partenza.

Per verificare se il tuo sito funziona ed è ben visibile da mobile, apri un browser sul tuo cellulare/tablet e visita la home page del sito. Attendi il caricamento e controlla tutta la pagina accuratamente, scrollando con il dito verso il basso per controllarne tutti gli aspetti.

Aprire una scheda in modalità incognito su Chrome per Android
Per effettuare i controlli è sempre consigliabile utilizzare il browser in modalità anonima, per evitare problemi di caching. Su Chrome per Android per esempio, è possibile aprire una scheda in modalità "incognito" cliccando sulle opzioni in alto a destra, quindi su "Nuova scheda in incognito".

Cosa controllare per sapere se il sito è o NON è Responsive

Mentre scorri con il dito verso il basso, assicurati che:

  • La pagina si carichi in un tempo ragionevole – Chi naviga con il mobile ha sempre molta fretta, se non vedi la pagina entro 3-5 secondi è probabile che l’esperienza utente ne sia fortemente penalizzata.
  • I contenuti della pagina siano completamente visibili e caricati – Nell’esempio 1 in figura la pagina è visibile solo parzialmente e quindi non risulta utilizzabile dal telefono, in questo caso un Nexus 5. Nell’esempio 2 invece, i fogli di stile CSS probabilmente non sono stati caricati o non sono compatibili con il telefono (Blackberry), il layout della pagina risulta sgradevole e dà una pessima impressione al visitatore.
  • Gli elementi interattivi come bottoni, link etc. non siano troppo piccoli o troppo vicini tra loro – Se gli elementi con cui il visitatore interagisce sono troppo piccoli o troppo vicini, potrebbe essere impossibile visualizzarli o cliccarli con il dito o potrebbe essere necessario fare zoom. Queste cose innervosiscono alcuni utenti, soprattutto i meno pratici, che quindi “scappano” dal sito molto rapidamente… L’esempio 3, riporta una pagina caricata su iPhone: è completa ma è tutto troppo ravvicinato!
  • La schermata sia completamente visibile scorrendola con il dito verso il basso, senza necessità di andare verso destra o sinistra – Se i contenuti non sono completamente visibili è possibile che risultino difficilmente leggibili o, peggio ancora, non vengano trovati dagli utenti. L’esempio 4 illustra una pagina non mobile friendly con una tabella HTML: l’utente è costretto a scorrere a destra e sinistra per visualizzare i valori. Questo problema rende difficile avere una visione d’insieme del contenuto e peggiora l’esperienza del visitatore durante la navigazione.
  • Gli elementi con cui l’utente può interagire funzionino tutti correttamente – Clicca su link, bottoni e pulsanti social, espandi i menu, prova le caselle combinate, le checkbox e le form eventualmente presenti in pagina per verificare che il tutto dia i risultati previsti.
Esempio di un sito non-responsive, che si vede solo parzialmente, su Nexus 5
Esempio 1 - In questo esempio di sito non responsive, la pagina è caricata solo parzialmente e parte del contenuto non è visibile.
Un esempio di sito con risorse CSS/JS che non sono state correttamente caricate
Esempio 2 - In questo caso lo smartphone non ha caricato correttamente i fogli di stile della pagina e il layout risulta sgradevole al visitatore.
Esempio di sito non mobile friendly con elementi piccoli su iPhoneX
Esempio 3 - Già a queste dimensioni gli elementi della pagina iniziano a essere troppo piccoli per consentire una navigazione agevole, l'utente fa fatica a interagire con la pagina e potrebbe decidere di andarsene.
Esempio di pagina con scrollbar orizzontale - Lumia 950
La presenza di contenuti più grandi dello schermo costringe l'utente a scorrere la pagina a sinistra e a destra, impedendo una visione generale del contenuto e rischiando che alcune parti non siano mai trovate.

Mi basta provare con un solo telefono?

Tendenzialmente, NO. Controllare solo la home page del sito su un solo telefono non ti da’ assoluta certezza che il sito sia visibile e fruibile da tutti i dispositivi. Certamente, per la maggior parte di noi, non è possibile provare tutti i modelli di smartphone e tablet presenti in commercio, ma è possibile concentrarsi almeno sui più utilizzati. Per fare un buon lavoro dovresti:

  • Ispezionare almeno le pagine del sito più importanti – La home, la pagina dei contatti, il portfolio, la pagina dei preventivi etc.
  • Su diversi modelli di cellulari Android e iOS, con risoluzioni diverse – Per lo meno i più comuni, per verificare che sia compatibile per la maggior parte di essi. Come minimo dovresti controllare su un dispositivo Android ed uno iOS. Puoi trovare i dispositivi mobile e relative risoluzioni più usati in Italia a questo link: I più usati in rete: Tecnologie e dispositivi più utilizzati in Italia

Oppure, puoi optare per uno dei metodi di controllo riportati qui di seguito, sicuramente meno affidabili … ma anche meno costosi in termini di tempo e denaro.

Numero 2

Verificare il sito con Google Chrome DevTools

Un’alternativa un po’ meno sicura ma sicuramente dispendiosa in termini di tempo – e soprattutto, denaro – è provare il sito con Google Chrome DevTools. Chrome DevTools è un’estensione di Chrome pensata per gli sviluppatori software che, tra le mille altre cose, consente anche di emulare alcuni tra i dispositivi mobili più comuni compresi gli ultimi modelli di iPhone. Per aprire Chrome DevTools:

  • Apri una nuova finestra in Google Chrome
  • Premi F12 oppure Control+Shift+I su Windows o Linux per aprire la console, che apparirà in basso (Su Mac, premi Command+Option+I)
  • Premi il pulsante in basso a sinistra con il simbolo di un cellulare per aprire la Device Toolbar. A questo punto la pagina che stai visitando sarà ridimensionata in base al dispositivo selezionato.
  • Puoi cambiare dispositivo o ruotare lo schermo cliccando sui due pulsanti in alto.

A questo punto puoi ispezionare il sito utilizzando i modelli disponibili, per verificare se la pagina è o meno responsive. Il controllo con Google Chrome DevTools non è infallibile perché si tratta di una emulazione: Chrome fa del suo meglio per replicare il comportamento del telefono o del tablet scelto, ma in alcuni rari casi il risultato è … errato. Google lavora costantemente a questo tool, aggiungendo progressivamente i nuovi modelli e rendendolo sempre più aderente al reale comportamento dei dispositivi emulati, quindi rimane comunque la miglior alternativa al controllo con smatphone reali.

Apri Google Chrome, digita l'indirizzo del tuo sito e premi F12 su Windows/Linux o Command+Option+I su Mac per aprire la console di DevTools.
Apri Google Chrome, digita l'indirizzo del tuo sito e premi F12 su Windows/Linux o Command+Option+I su Mac per aprire la console di DevTools.
Clicca sul simbolo del telefono in basso a sinistra per aprire la device toolbar, che simula la navigazione da dispositivi mobili.
Clicca sul simbolo del telefono in basso a sinistra per aprire la device toolbar, che simula la navigazione da dispositivi mobili.
Puoi scegliere diversi modelli di cellulare e tablet o ruotare lo schermo premendo i due pulsanti indicati nell'immagine.
Puoi scegliere diversi modelli di cellulare e tablet o ruotare lo schermo premendo i due pulsanti indicati nell'immagine.
Numero 3

Usare il Test di Ottimizzazione Mobile di Google o PageSpeed Insight

Il Test di Ottimizzazione Mobile di Google, è stato creato appositamente per controllare tutti gli aspetti delle pagine web e verificare se siano o meno fruibili da mobile, in sostituzione del vecchio strumento Google PageSpeed Insight, in realtà ancora vivo e vegeto. E’ bene specificare che entrambi questi tool al momento sono ben lontani dal fornire un risultato veritiero, e dovendo proprio scegliere … meglio optare per il buon vecchio Google PageSpeed Insight.

PageSpeed Insight è al momento lo strumento più affidabile nel controllo di pagine mobile friendly, essendo spesso in grado di interpretare correttamente Javascript e CSS.
PageSpeed Insight è al momento lo strumento più affidabile nel controllo di pagine mobile friendly, essendo spesso in grado di interpretare correttamente Javascript e CSS.

Il Test di Ottimizzazione Mobile è in continuo miglioramento, tuttavia a tratti non funziona come dovrebbe, soprattutto se il sito analizzato utilizza sistemi di caching che minimizzano la dimensione dei file di risorse (Javascript e CSS). Se il sito da controllare invece non usa particolari tecnologie, entrambi gli strumenti danno un risultato abbastanza accurato.

Per contro, lo strumento Test di Ottimizzazione per il Mobile di Google è in continua evoluzione e talvolta... non funziona come dovrebbe.
Per contro, lo strumento Test di Ottimizzazione per il Mobile di Google è in continua evoluzione e talvolta... non funziona come dovrebbe.
Numero 4

Altri strumenti (gratis e non) per controllare se il sito è mobile friendly

L’ultimo modo per scoprire se le pagine funzionano e si vedono bene su mobile, è utilizzare i strumenti online di terze parti (gratuite ed non), che facciano il controllo in modo più o meno professionale.

I più popolari, gratis

Tra i software online gratuiti per controllare se il sito è mobile friendly troviamo:

ResponsiveDesignChecker – Tramite una comoda interfaccia online, permette di simulare rapidamente una vasta gamma di dispositivi tra i quali vari schermi desktop, notebook, tablet e cellulari.

Responsinator – Adotta un approccio un po’ diverso, simulando una serie di modelli comuni (Per lo più di casa Apple) in una singola pagina.

Entrambi i software non simulano perfettamente il dispositivo mobile, ma si limitano ad imitarne le dimensioni dello schermo, ridimensionando opportunamente la finestra.

Professionali, a pagamento

Se i software gratuiti hanno il grande vantaggio di non costare nulla, quelli professionali sono molto più accurati e spesso utilizzano dispositivi reali:

BrowserStack – Il re di categoria, permette di simulare la navigazione su siti web e app su oltre 1200 dispositivi mobile reali e relativi browser.

Browserling – E’ possibile simulare diversi tipi di sistemi operativi mobile, diversi browser e risoluzioni video. Gratuitamente, è possibile simulare la navigazione per 3 minuti al giorno.

Aut.:
Agg.:

Lascia un commento

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

Puoi utilizzare questi tag e attributi nel tuo commento: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Send this to a friend