Come testare la visualizzazione di un sito con varie risoluzioni e con diversi dispositivi mobili.

Come testare la visualizzazione delle pagine dei nostri siti con i diversi dispositivi (PC, tablet, smarthone, Web, TV, PSP, ecc

Fino a un paio di anni fa la preoccupazione principale degli amministratori di un blog era quello di testare come veniva visualizzato con i diversi browser. Una attenzione particolare veniva riservata a Internet Explorer che spesso mostrava il blog con un aspetto molto diverso da come si vedeva con Firefox o Chrome.  Per molti widget o menù che utilizzavano il javascript dopo averli perfettamente configurati per Chrome e Firefox ci accorgevamo che non funzionavano con IE e questo era causa di forti arrabbiature. Per fortuna con le nuove versioni queste problematiche sono state quasi completamente eliminate inoltre insieme al nuovo OS Windows 10 verrà distribuito il nuovo browser della Microsoft per il momento denominato  Spartan e  IE andrà definitivamente in pensione.  

Adesso le attenzioni riguardo alla visualizzazione si sono invece focalizzate sui dispositivi mobili nel senso che il problema non sono più i browser desktop ma i moltissimi dispositivi mobili con cui sempre più spesso vengono aperte le pagine del nostro sito. Online ci sono diversi tool per testare un determinato sito con un dato dispositivo o con una data risoluzione. In un post precedente ho parlato di Viewlike.us e adesso voglio illustrare un tool alternativo che userò prossimamente. 

Quirktools ci offre una serie di strumenti gratuiti per testare il sito tra i quali  Screenfly che ci consente appunto di testare il comportamento Responsive del nostro sito su smartphone, tablet e altri device. Ricordo che il Responsive Design (o Disegno Responsivo) indica una tecnica di web design in grado di adattarsi automaticamente al dispositivo con cui vengono visualizzate le pagine come computer, tablet, smartphone, cellulari, web TV, PSP ecc. Il Design Responsive è importante anche per una questione di accessibilità visto che non tutti gli utenti hanno una vista d'aquila. 

Per testare il nostro sito su Screenfly si incolla l'URL del dominio e si clicca su Go.

In alto potranno essere scelti i vari device e le varie risoluzioni con cui testare la visualizzazione. Si possono selezionare Netbook da 10 pollici fino Desktop da 24 pollici così come tablet Android o Apple. È anche possibile scegliere tra cellulari di diverse marche oppure testare le varie risoluzioni

 

 

IL CASO PARTICOLARE DI BLOGGER

Come certo saprete la piattaforma Blogger ha nel modello un codice particolare che modifica l'aspetto del blog in funzione del dispositivo con cui viene aperto. Questa funzione deve essere abilitata andando su Bacheca > Modello > Cellulare e cliccando sulla icona della ruota dentata  

Nella finestra successiva si deve mettere la spunta a Sì. Mostra il modello per cellulari nei dispositivi mobili. Nel menù a discesa si sceglie il modello ed è consigliabile optare per Personalizza in modo da mostrare anche nei cellulari un aspetto simile a quello per i desktop

 

Il risultato è che il tool Screenfly darà un risultato diverso da quello reale. Abilitando la versione mobile infatti viene anche modificato l'URL della homepage e di tutte le pagine del blog. All'indirizzo normale del sito sarà aggiunta la stringa ?m=1 e /?m=1 per la homepage. Quindi per testare come si vede per esempio questo mio blog con un iPhone 6 devo incollare il seguente l'URL www.ideepercomputeredinternet.com/?m=1

Questa operazione ci permette di verificare anche la visualizzazione o meno di alcuni particolari widget nei dispositivi mobili che ci interessa testare

 

come per esempio il bottone di WhatsApp su iPhone 6 Plus come mostrato nello screenshot.