C’è stato un tempo in cui la fondamentale preoccupazione degli sviluppatori era quella di realizzare un sito Cross-browser, un sito cioè che potesse essere restituito all’utente finale nel suo aspetto e nelle sue funzionalità in modo omogeneo a prescindere dal browser utilizzato.
Poi è venuto il tempo del Mobile friendly e più in generale dell’esigenza di avere un sito Responsive, navigabile in modo ottimale su qualsiasi dispositivo, a qualsiasi risoluzione.
Oggi entrambi gli aspetti – Cross-browser e Mobile friendly – sono considerati unitariamente degli imprescindibili, e basterà citare qualche dato per capirne implicazioni e complicanze, rivolgendo particolare attenzione ai siti di vendita online che, più di altri tipi di siti web, stanno registrando in questi anni una significativa crescita.
Dai dati resi noti durante il 2015 dall’Osservatore eCommerce B2C, promosso dal Politecnico di Milano e da Netcomm, gli e-Commerce in Italia hanno registrato una crescita del 16% rispetto all’anno precedente, con un valore di 16,6 miliardi di euro e una penetrazione sul mercato corrispondente al 4% con 11,1 milioni di acquirenti abituali. Ancora più significativo è il dato legato al Mobile Commerce, che ha segnato un incremento degli acquisti fatti tramite dispositivi Mobile pari al 64%, per un’incidenza complessiva del 10% sugli acquisti complessivi online, che arriva al 21% se si aggiungono quelli operati tramite Tablet.
Una tendenza decisamente significativa che ricorda a tutti coloro che operano in questo settore quanto sia importante avere un e-commerce perfettamente accessibile da qualsiasi device, e quindi anche da qualsiasi browser e su qualsiasi sistema operativo.
Solo relativamente ai device e alle risoluzioni di monitor e display, il primo problema è costituito dalla proliferazione dei formati attualmente in commercio, e dall’impossibilità di prevedere quelli che verranno introdotti in futuro in base alle scelte dei produttori.
Per dare un’idea di cosa stiamo parlando, trovate qui un elenco non esaustivo di risoluzioni in uso:
DESKTOP: 1920×1200/1080, 1680×1050, 1600×1200, 1440×900, 1400×1050, 1344×840, 1280×1024/800/720/600, 1152×900/870/864, 1024×768
TABLET: 1280×768, 1024×768/600
SMARTPHONE: 1136×640, 960×640/540, 800×480/400, 640×480/360, 480×360/320, 400×240, 320×480/240
Se poi entriamo nel campo dei browser di maggiore diffusione – Firefox, Chrome, Safari, Opera, Internet Explorer/Edge – e delle diverse versioni di questi, sia rispetto ai sistemi operativi, sia rispetto all’aggiornamento delle release, non dovrebbero rimanere dubbi circa l’esigenza di testare i propri siti sul maggior numero di dispositivi/sistemi operativi/browser possibili.
Vediamo quindi di seguito una serie di strumenti utili al testing.
Internet Explorer e Developer Tools
Per quanto, in termini di Cross-browser, Microsoft a partire dalla versione IE10 abbia finalmente deciso di abbandonare quella certa “indipendenza” dagli standard che per anni ha regalato notti insonni agli sviluppatori, ugualmente si rende necessario testare i propri siti su versioni precedenti del programma, in quanto ancora oggi utilizzate da una parte degli utenti web.
A questo scopo vengono utili i Developer Tools messi a disposizione dal browser, accessibili tramite il tasto f12 o dalla voce di menu Ispeziona elemento. Tra le funzionalità del pannello, in parte simili a quelle del plugin FireBug, è presente anche il test delle pagine web con motore di rendering delle versioni precedenti di Internet Explorer, a partire dalla 7.
Internet Explorer su Mac
Lo sviluppo della versione di Internet Explorer per Mac si fermò alla 6 nell’ormai lontano 2005.
Da allora in poi gli utilizzatori di sistemi Mac che volessero testare la resa su Internet Explorer di un sito web, hanno avuto tre possibilità: dotarsi di un PC con sistema Windows, partizionare il disco dedicando una partizione al sistema operativo di casa Microsoft o, più recentemente, virtualizzare il proprio Mac, creando una macchina virtuale su cui installare Windows.
Quest’ultima scelta risulta sicuramente la più pratica e agevole. Grazie a Virtualbox, software gratuito di Oracle, è possibile creare svariate macchine virtuali, avviabili e terminabili come normali applicazioni, il tutto all’interno del proprio Mac OS.
In questo modo è possibile testare sia siti statici che dinamici sviluppati in locale, ad esempio tramite server MAMP, in quest’ultimo caso procedendo ad alcune configurazioni aggiuntive della macchina necessarie per localhost.
Firefox, Chrome, Safari, Opera e sistemi operativi
Un grosso vantaggio dato da questi browser è l’uso dello stesso motore di rendering in tutti i sistemi operativi, con il risultato che una volta testato il proprio sito su Windows, Mac o Linux, si può essere tendenzialmente sicuri che il risultato sia lo stesso sugli altri sistemi operativi in cui opera il browser.
Web Developer Tools
Ogni browser mette a disposizione una serie di strumenti per sviluppatori, spesso installabili separatamente mediante plug-in, di cui non si dovrebbe prescindere.
Nel caso di Firefox, oltre all’immancabile FireBox, utile a monitorare e fare debugging del proprio codice (HTML, CSS, JavaScript), i Web Developer Tools includono funzionalità utili a riprodurre la resa del proprio sito a diverse risoluzioni, precisamente settabili in larghezza/altezza in pixel.
Android, iOS, Windows Phone
Per un test definitivo di resa sui dispositivi Mobile, non potendo disporre se non di alcuni di questi per procedere alle verifiche, è utile servirsi di emulatori specifici.
Android: il simulatore è incluso nel pacchetto gratuito Android SDK. Si rendono necessarie alcune configurazioni.
iOS: il simulatore è presente nella suite gratuita di sviluppo xCode, disponibile solo per Mac OS.
Windows Phone: occorre il Software Development Kit, da accoppiare a Visual studio, dotato di emulatore, disponibile solo per sistemi operativi Windows.
Commenti recenti