ATTENZIONE!

Questo articolo è stato scritto nel 2016, le informazioni riportate potrebbero essere incomplete o non aggiornate. Per qualsiasi dubbio o chiarimento lascia un commento in fondo all'articolo.

Testare la Visualizzazione dei Siti su diversi dispositivi.

 In Web Design

Quando si progetta un sito si tende a dimenticare che stiamo lavorando dalla nostra postazione e quando valutiamo la resa grafica e la disposizione dei vari elementi spesso ci limitiamo a come li visualizziamo dal nostro schermo. Quello che dovremmo invece tenere sempre a mente è che l’utenza del sito potrebbe usare un dispositivo diverso (schermo, pc, tablet, cellulare) o preferire un browser web piuttosto che un altro.

Questi fattori possono portare a una scorretta visualizzazione degli elementi grafici, spesso e volentieri non trascurabili. Vediamo quindi assieme quali sono le buone norme per limitare al minimo i casi in cui il risultato non è quello che abbiamo programmato.

Codice Pulito

Se stiamo programmando direttamente in codice la prima precauzione da prendere è quella di seguire gli standard del web e non inventarsi escamotage per ottenere un risultato con un codice che non dovrebbe essere utilizzato per quello scopo, se possibile. In questo modo limiteremo al minimo le possibilità che i browser possano compilare in maniera scorretta il codice e quindi dare un risultato inaspettato.

Purtroppo, come ogni programmatore sa, a volte bisogna scendere a compromessi con codici non puramente ortodossi per ottenere quello che si vuole. Se ci troviamo costretti a questa evenienza cerchiamo almeno di evitare questi codici per la struttura generale del sito e, dove possibile, di dare una possibilità alternativa per vecchi browser o di preventivare che una data sezione darà un problema su dispositivi di un certo tipo e sarà quindi nascosta su tali dispositivi.

Quando si usa invece un CMS (come ad esempio WordPress) per realizzare un sito diventa importantissimo acquistare un tema di buona qualità, perchè investire su un buon tema garantisce sicuramente meno problemi e migliori performance.

Testare diverse Risoluzioni e Dispositivi

Il primo importantissimo test per verificare il risultato del proprio lavoro è quello di guardarlo da diversi dispositivi. Testare infatti la visualizzazione su diversi dispositivi a nostra disposizione permette di valutare come l’utente vedrà il sito una volta finito.

Molti vecchi siti non prevedono una struttura responsive, non adattandosi quindi alle dimensioni dello schermo e ottenendo una visualizzazione disastrosa su dispositivi mobili. Non solo la navigazione del sito può risultare compromessa o addirittura impraticabile, i motori di ricerca tendono a penalizzare gravemente questi errori di visualizzazione.

Anche se il modo migliore in assoluto di valutare la visibilità del sito è quello di testarlo effettivamente su diversi dispositivi, non sempre è possibile farlo quindi può venire molto utile provare a visualizzare il proprio lavoro su Screenfly, un utile tool che simula diverse risoluzioni direttamente sul vostro schermo. Purtroppo a volte questo tool può causare problemi rendendo difficile capire se un errore di visualizzazione è dovuto realmente al vostro lavoro o al tool stesso. Tuttavia per il momento non ho mai riscontrato il problema inverso, se il vostro sito viene visualizzato correttamente su Screenfly allora molto probabilmente non darà problemi sul dispositivo testato.

Questa soluzione può andare bene per piccoli progetti ma non per grossi portali, per i quali la fase di testing va fatta necessariamente in misura molto più accurata.

Provare diversi Browser

Uno degli errori di visualizzazione più comune ai siti web è dovuto al fatto di essere sviluppato e testato solo su un Browser Web. Se noi utilizziamo Google Chrome non possiamo controllare il sito solo su questo Browser.

Agli albori di Internet, infatti, i vari browser si davano battaglia utilizzando differenze nell’interpretazione dei codici e, anche se ultimamente si va sempre più verso gli standard del w3c, restano ancora alcune piccole differenze. C’è chi poi potrebbe avere ancora una vecchia versione di internet, non aggiornata e quindi con differenze più marcate.

Il mio consiglio è quello di verificare almeno su Windows e Mac i browser più diffusi, personalmente testo sempre tutte le pagine su Internet Explorer, Google Chrome, Firefox, Opera e Safari.

A volte, tuttavia, non è possibile garantire la stessa visualizzazione ovunque e ci si trova davanti a una scelta. Ovviamente il sito dovrà essere visibile, consultabile e funzionante su ogni dispositivo e da ogni browser, ma se bisogna scegliere su cosa ottimizzare dovendo scegliere a tutti i costi non esiste una risposta assoluta e chiunque provi a darla dice il falso. Alcuni Web Master, per semplicità, lo fanno su Chrome e Firefox perchè considerati i “più performanti”, altri su Internet Explorer perchè è in assoluto il più utilizzato. Entrambe queste scelte sono fondamentalmente sbagliate.

Quando scegliamo cosa ottimizzare dobbiamo pensare all’utenza che ci aspettiamo di avere. Un sito di vendita di abiti avrà un’utenza maggiore da Internet Explorer, mentre un sito di sviluppo web si aspetta un’utenza più orientata a Firefox e Chrome, il fan club della Apple darà precedenza a Safari e così via. Lo stesso ragionamento va effettuato anche tra l’ottimizzazione per il mobile e il fisso, se si possiede un ristorante essere navigabili da mobile è una necessità, un database di codici al contrario avrà una quasi esclusiva utenza da dispositivi con risoluzioni maggiori.

La scelta è dello sviluppatore e può essere affinata studiando i dati di analisi della navigazione con il passare del tempo.

Per concludere, seguendo questi semplici accorgimenti ridurrete al minimo i bug grafici e garantirete un’altissima compatibilità del vostro progetto per ogni tipologia di utente.

 

Davide Gavazzi
Davide Gavazzi, appassionato di SEO, SEM, Social Media Marketing e Web Design. Si occupa di Web dal 2011 creando e gestendo siti, Social, Pubblicità e tutto ciò che riguarda l'Online.
Recommended Posts

Lascia un commento

Contattami

Hai domande? Puoi scrivermi utilizzando il form seguente e sarai ricontattato il prima possibile.

Non leggibile? Cambia testo.

Start typing and press Enter to search