Come Fare dei Test per un Sito su Mobile?

Fare dei test su un sito per il mobile è importante per evitare spiacevoli chiamate del cliente che si lamenta che il sito che hai realizzato per lui non è ottimizzato per tutti i dispositivi.

L’esigenza di testare le pagine web sul maggior numero possibile di dispositivi si scontra oggi con la compresenza sul mercato di apparecchi dalle caratteristiche completamente diverse. C’è chi, per navigare, utilizza uno smartphone con uno schermo da 3 pollici, chi invece preferisce un tablet o un laptop, e chi utilizza grandi schermi da 27 o addirittura 30 pollici.

Se, accanto alla varietà dei dispositivi, analizziamo anche la frammentazione dei sistemi operativi, dei browser e perfino le diverse versioni degli stessi browser, possiamo capire come il compito di testare un sito web in modo completo risulti estremamente complesso.

Ma niente paura: un approccio organizzato al testing è possibile. L’utilizzo degli strumenti giusti, in aggiunta a precise scelte tecniche (come ad esempio un buon framework CSS responsive), ci consentono di portare a casa il risultato in modo organizzato.

Ecco perché ho creato questa guida, che si focalizza sull’uso di strumenti gratuiti per effettuare il test delle pagine web su mobile e desktop, in un numero ragionevolmente vasto di dispositivi, sistemi operativi e browser.

Per facilitarti il compito di consultare solo le parti che ritieni più utili ed interessanti, puoi consultare questa guida nell’indice dei contenuti che trovi qui sotto.

Indice della guida

• Test su tutte le versione di Internet Explorer
• Developer tools e versioni di Explorer
• Testare Explorer su Mac e Linux con Virtualbox
• Test sui browser “standard”: Chrome e Firefox
• Test mobile su Android, iOS, Windows Phone
• Soluzione 1: test mobile del sito su più dispositivi
• Soluzione 2: emulatori iOS e Android
• Soluzione 3: strumenti soft
• Screenshot a tappeto con BrowserShots
• Cross Browser Testing
• Browser Serling
• Am I Responsive
• Tu cosa usi?

Test su tutte le versione di Internet Explorer

C’è stato un tempo in cui le varie iterazioni di Internet Explorer rappresentavano un incubo per il web designer che, abituato ad utilizzare browser più standard come Firefox o Chrome, si ritrovava a risolvere bug imprevedibili ed errori dalle origini oscure. L’abitudine di Microsoft di snobbare molti standard funzionali e diffusi ha fatto infuriare non poco gli sviluppatori di mezzo mondo.

Per fortuna le cose, oggi, sono un pò cambiate. Explorer, a partire dalla versione 10 ed ancor di più con la versione 11, è oggi un browser discretamente veloce e dotato di tutti quelli “accessori”, come animazioni css3 ed html5, che consentono di costruire un’esperienza web moderna.

Developer tools e versioni di Explorer

Se possiedi un computer Windows, Explorer ti mette a disposizione i developer tools, raggiungibili con il tasto “f12” oppure con la voce di menu contestuale “ispeziona elemento”. Questo pannello, simile a quello presente in altri browser, o al plugin FireBug, gestisce una funzione addizionale molto interessante, ovvero la possibilità di testare le pagine web utilizzando il motore di rendering delle versioni precedenti di Explorer, fino alla 7.

Questo significa che con Explorer 11, avrai in realtà a disposizione ben 5 browser in 1, e potrai effettuare i tuoi test in modo veloce ed efficiente!

Testare Explorer su Mac e Linux con Virtualbox

Come ottenere queste funzionalità su una piattaforma che non sia Windows? A mio parere la soluzione migliore e più affidabile è la virtualizzazione di Windows nel tuo sistema operativo di fiducia – il tutto è completamente gratuito.

Ecco di cosa avrai bisogno:

• un computer Linux o OSX ed almeno 4 giga di ram
• l’ultimaversione di Virtualbox

• una connessione internet per scaricare il tutto

Virtualbox è un software gratuito che consente di creare macchine virtuali in grado di far girare sistemi operativi alternativi sulla tua macchina. Poiché la macchina virtuale è “simulata” dal sistema, non è necessaria alcuna partizione addizionale, ed il sistema virtuale può essere avviato o fermato come una normale applicazione. Puoi scaricare Virtualbox qui.

Per scaricare l’immagine di Windows entra nel sito che Microsoft ha creato, modern.ie, interamente dedicato al download di strumenti per il test delle pagine web, incluse macchine virtuali, diagnostica, e servizi di test online (puoi provare anche questi a pagamento, servizio fornito da BrowserStack).

Sul sito troverai tutta una serie di immagini dei sistemi operativi Windows compatibili con Virtualbox. Fai attenzione a scegliere quella più adatta e scarica tutte le parti. Io consiglio di scaricare sempre la versione più recente; in questo modo hai a disposizione più versioni di Internet Explorer grazie alla possibilità di testare i motori di rendering precedenti.

Una volta scaricati e decompressi tutti i file, l’installazione dell’immagine su Virtualbox è questione di un click. A questo punto non ti resta che avviare il programma e goderti il tuo sistema operativo alternativo. Per accedere al desktop, e con esso alla versione desktop di Explorer, è sufficiente cliccare sul quadrato corrispondente.

Avrai quindi la possibilità di avviare l’ultima versione di Internet Explorer ed accedere ad internet, per visualizzare un qualsiasi sito. Nel caso, invece, intendi testare un sito in locale, magari utilizzando un server MAMP, allora sarà necessario effettuare qualche configurazione extra. Questa guida offre le istruzioni necessarie per utilizzare Virtualbox con localhost.

Puoi fidarti di quello che vedi a video? Per esperienza diretta, la macchina virtuale è affidabile al 99%. Ho testato decine di siti ed i risultati sono sempre stati perfetti. Trattandosi, però, di una simulazione, sono propenso a dire che il test su una macchina vera resti comunque l’alternativa migliore. Certo, non è molto comodo avere in casa decide di differenti dispositivi, quindi.. spesso è consigliabile accontentarsi della virtualizzazione!

Test sui browser “standard”: Chrome e Firefox

Browser come Chrome, Firefox, ma anche Safari desktop e Opera utilizzano lo stesso motore di rendering in tutti i sistemi operativi. Questo significa che possiamo essere ragionevolmente sicuri che un sito testato, ad esempio, su Chrome Linux, funzioni in modo analogo sulle corrispondenti versioni in altri sistemi operativi.

Anche in questo caso, come abbiamo visto nel caso di Explorer, se vuoi un ulteriore livello di verifica puoi installare Virtualbox, e scaricare le immagini virtuali che ti servono e fare un test del sito su mobile per verificare gli stessi browser su sistemi operativi differenti.

Ricordo, però, che OSX non è installabile su Virtualbox, in quanto Apple non mette a disposizione un’immagine atta allo scopo. L’unica soluzione legittima rimarrebbe quindi l’utilizzo di un computer Mac reale, su cui visualizzare le pagine, magari entrando di soppiatto in un Apple store ed utilizzando i computer in esposizione..

Test mobile su Android, iOS, Windows Phone

Negli ultimi anni il traffico mobile è cresciuto incessantemente. Nel momento in cui scrivo, un terzo delle pagine web viene aperto utilizzando uno smartphone o un tablet. Diventa quindi essenziale testare tutti i nostri siti su dispositivi mobili, o almeno cercare di emularne le caratteristiche nel modo migliore possibile.

Per quanto riguarda il test mobile, abbiamo tre soluzioni:

• La prima è l’utilizzo di dispositivi reali in accoppiata con un browser desktop
• La seconda prevede l’utilizzo di emulatori specifici
• la terza più “soft” che puoi usare come paracadute nel caso le altre opzioni non siano praticabili.

Soluzione 1: test mobile del sito su più dispositivi

Se hai a disposizione uno o più smartphone e/o tablet, la vita è senza dubbio più semplice. La notizia interessante per chi possiede un Mac ed un device iOS (o il simulatore) è che mediante Safari puoi utilizzare gli strumenti di analisi desktop per effettuare il test del sito mobile.

Questo significa che, accanto ad un test al 100% affidabile, potremmo fare il debug di javascript, CSS ed HTML direttamente dal tuo computer, utilizzano gli strumenti a cui sei più affezionato.

Soluzione 2: emulatori iOS e Android

Apple per iOS e Google per Android mettono a disposizione specifici emulatori. Il simulatore iOS (si, c’è una differenza tra simulatore ed emulatore, ma non chiedermela perché non la conosco) è integrato nella suite di sviluppo xCode, fornita gratuitamente da Apple.

La buona notizia è che il processo di installazione è semplice. Gli strumenti sono accessibili mediante il menu a tendina nel dock, successivamente all’avvio di xCode. La cattiva notizie è che xCode è un’applicazione esclusiva per OSX, e di conseguenza gli utilizzatori di altri sistemi dovranno orientarsi su una delle due soluzioni alternative.

Il simulatore Android fa parte del pacchetto Android SDK, ed anche in questo caso è scaricabile gratuitamente. Una volta scaricato il bundle, sarà necessario effettuare alcune semplici operazioni di configurazione. Puoi trovare istruzioni dettagliate sull’installazione di Android Studio qui.

Per testare su Windows mobile, meno diffuso ma pur sempre un big player, Microsoft mette a disposizione lo specifico Software Development Kit, da accoppiare a Visual studio, dotato di emulatore. Anche in questo caso, però, il pacchetto è esclusivo per utilizzatori di sistema operativo Windows.

Soluzione 3: strumenti soft

Da poco ho scoperto un servizio online che consente di testare siti in remoto: Keynote. Malgrado non sia perfetto, e faccia uso di strumenti di simulazione un pò approssimativi, risulta comunque un’idea interessante.

Un’altra soluzione molto “alla buona” per i tuoi test di un sito per il mobile è quella di ridimensionare la finestra del browser fino al minimo consentito (generalmente attorno ai 400 pixel) ed osservare cosa succede.

Per rendere il risultato maggiormente affidabile puoi anche modificare lo user agent del browser (Safari è dotato di questa funzione, per gli altri browser sarà necessario scaricare un’estensione adatta) ed utilizzare browser con un motore di rendering webkit, che ad oggi rappresenta circa il 90% dei browser mobile in circolazione.

Questa soluzione ha il vantaggio di essere molto rapida e ti evita di dover lasciare la consueta postazione di lavoro; è quindi indicata per test e verifiche veloci, ma rimane un pò approssimativa e non affidabile al 100%.

Screenshot a tappeto con BrowserShots

Un’ultima soluzione, che ti consente di effettuare un test “a tappeto” e renderizzare il risultato di svariate decine di combinazioni browser e sistema operativo, è il sito BrowserShots.

Questo sito, il cui servizio è offerto gratuitamente, ti permette di inserire un url a tuo piacimento e, dopo un periodi di attesa di qualche minuto, riceverai in cambio tutti gli screenshot.

Altri tool per testare siti su più browser e per controllare il responsive design

a cura di Fabio Sarcona

Se i tool e i servizi segnalati qui sopra non ti sono bastati, Fabio Sarcona ha selezionato per te altre risorse preziose. Dacci un’occhiata qui sotto.

Cross Browser Testing

Link: https://crossbrowsertesting.com

Vuoi testare la compatibilità del tuo sito web con diversi browser e OS con un solo click? Cross Browser Testing è il tool che stavi cercando. Ti basterà scegliere il browser (sono disponibili oltre 750 versioni), inserire l’URL del sito da testare e il software restituirà un’interfaccia grafica che andrà a simulare il browser da te scelto.

Inoltre potrai testare anche il tuo sito web in versione mobile. Sono presenti diverse interfacce che simulano dispositivi come Iphone o Android per una fase di test davvero completa e semplice.