Testare come si visualizza un sito o una pagina con i vari modelli di PC, Tablet, Smartphone e Smart TV.

Come testare con il tool gratuito Screenfly come si vede una pagina web di un sito Wordrpess o Blogger con i vari modelli di computer, netbook, notebook, tablet, cellulari e Smart TV.

Mentre nel recente passato gli webmaster di tutto il mondo avevano il problema di armonizzare il layout dei siti se aperti con i diversi browser adesso le cose sono sensibilmente cambiate. Il browser più difficile da supportare per i siti delle varie piattaforme era senza ombra di dubbio Internet Explorer che adesso pur essendo ancora presente su Windows 10 cliccando su Start -> Accessori Windows è stato sostanzialmente abbandonato dalla Microsoft a vantaggio di Microsoft Edge. 

La sfida fondamentale per i possessori di un sito è quindi diventata quella di mostrare un layout efficace e friendly in tutti i dispositivi con cui può essere aperto. La navigazione in internet non si fa più esclusivamente con il computer ma si utilizzano altri dispositivi che diventano sempre più importanti per attrarre traffico.

Si possono usare Temi Responsive per Wordpress e Modelli Responsive per Blogger. Però sia su Wordpress sia su Blogger si possono attivare le versioni mobili dei siti per avere un aspetto più mobile friendly. Su Blogger si va su Modello -> Cellulare -> Ruota dentata. Dopo aver messo la spunta sul Sì per mostrare il modello per cellulari è consigliato scegliere quello Personalizza per poter modificare l'aspetto anche della versione mobile oltre a quella desktop.

COME VERIFICARE LE MODIFICHE INTRODOTTE NELLA VERSIONE MOBILE

La maggior parte se non la totalità degli webmaster ha un cellulare, in molti hanno anche in tablet ma ovviamente non sono in possesso di tutti i modelli dei dispositivi in grado di navigare su internet e di aprire le pagine web. Quindi per testare come si vede un post di un blog con un iPad, un iPhone 7, un Samsung Galaxy 7, un One Plus 3, una  Smart TV o con un dispositivo qualsiasi con una data risoluzione bisogna usare uno strumento online specifico.

Personalmente uso Screenfly di Quirktools che è di uso semplicissimo. Si incolla l'indirizzo della pagina web quindi si va su Go per poi scegliere il dispositivo dai vari menù. Ho pubblicato un video tutorial del semplice utilizza di Screenfly sul mio Canale Youtube

Dal menù si può cliccare sulle icone dei vari dispositivi per scegliere quello che ci interessa

COME PROCEDERE SE ABBIAMO UN BLOG SU BLOGGER

Come certo saprete quando si apre una pagina di un blog su Blogger che abbia la versione mobile abilitata viene fatto un redirect a un nuovo indirizzo che è identico al precedente con l'aggiunta della stringa ?m=1. Quindi quando si testa la visualizzazione del nostro sito su Blogger dobbiamo scegliere prima la Homepage quindi un post qualsiasi a cui aggiungere ?m=1 nell'URL per poi andare su Go.

Direi anzi che Screenfly serve soprattutto per testare la visualizzazione su mobile visto che su desktop le varie pagine possono essere aperte e quindi controllate con i browser che abbiamo installati. In alto si può cliccare sulle icone dello schermo desktop, del tablet, dello smartphone o della Smart TV

Per esempio per testare come si vede una pagina web con un iPhone 6 o 7 Plus si va sulla icona del cellulare e nel menù verticale si sceglie appunto tale dispositivo. Si va poi sulla icona del Refresh per ricaricare la pagina con la risoluzione appropriata.

L'ultima icona è quella del collegamento che permette di copiare l'indirizzo della visualizzazione della pagina web digitata con quel particolare dispositivo. È anche importante selezionare la terz'ultima icona che mostrerà il cursore per scrollare la pagina. Infine l'icona a forma di assi cartesiani serve per visualizzare la pagina digitata con una determinata risoluzione da impostare

In conclusione Screenfly di Quirktools è fondamentale per apportare modifiche nel layout della versione mobile di un sito e per testarne il risultato.