Mobile Friendly Test

Verifica se il tuo sito web è pronto per essere visualizzato sui dispositivi mobili: attraverso il nostro mobile browser emulator puoi vedere come appaiono le tue pagine web sul display di uno smartphone di ultima generazione come iPhone, Galaxy o Lumia.
Orientamento
Portrait Landscape
Controllo di sicurezza (CAPTCHA)

← clicca con il mouse all'interno del quadrattino bianco e segui le semplici istruzioni a video.

Esegui il Test →

Creare pagine web compatibili coi dispositivi mobili

Negli ultimi anni abbiamo assistito ad una vertiginosa crescita della cosidetta navigazione mobile cioè alla richiesta di dati e di pagine web attraverso dispositivi come smartphone e tablet. Questo fenomeno, ovviamente, ha "obbligato" gli sviluppatori di siti web a considerare le peculiarità di questi dispositivi, sia in fase di progettazione che di sviluppo, al fine di creare servizi e pagine web fruibili anche in mobilità.

Rinunciare ad offrire una soddisfacente esperienza di navigazione agli utenti che navigano attraverso smartphone e tabet, infatti, significa rinunciare ad una grossa fetta di traffico e quindi rinunciare ad una parte sempre più consistente di utenza. Oggi non c'è scelta: un buon sito web deve poter essere fruibile indifferentemente tramite un normale computer, un tablet o un "telefono intelligente".

Purtroppo raggiungere una reale compatibilità cross-device non è sempre semplice perchè si ha a che fare con una molteplicità di dispositivi (ciascuno dotato di caratteristiche peculiari) e di browser mobili (Safari Mobile, Firefox Mobile, IE Mobile, Android Browser, ecc.) non sempre omogenei tra loro nelle operazioni di rendering delle pagine web.

Ma quali sono gli accorgimenti da seguire per realizzare un sito web fruibile tramite smartphone e tablet? Gli aspetti da considerare in fase di progettazione e sviluppo di interfacce mobili sono sostanzialmente tre:

  • Design Mobile-Friendly
    Le pagine web devono essere dimensionalmente adatte ad essere visualizzate su display più piccoli dei comuni monitor: bisogna, ad esempio, prevedere un'impaginazione differente per i contenuti (difficile fare ricorso ai classici layout su più colonne) e realizzare testi e pulsanti più grandi.
  • Interazione con l'utente
    Fino a qualche tempo fa il principale strumento di interazione tra una pagina web ed un utente era il mouse: attraverso il click, l'utente si poteva spostare tra le pagine del sito ed accedere alle sue funzionalità. Pensando in ottica "mobile" dobbiamo scordarci il mouse e pensare alle varie gestures che l'utente può compiere su uno schermo touch screen, primo fra tutti il tap (il corrispondente del click del mouse). Questa differenza ci obbliga a ripensare la forma delle interfacce ed a gestire in modo differente taluni eventi.
  • Velocità di caricamento
    Altro fattore determinante da tenere nella dovuta considerazione è la velocità di caricamento delle pagine: se fino a ieri pensavamo di poter fare affidamento su processori sempre più performanti e su connessioni mediamente veloci (come le comuni ADSL), oggi dobbiamo pensare che l'hardware degli utenti che navigano attraverso smartphone e tablet è meno potente di quello di un normale computer ed anche le connessioni non sono sempre stabili e veloci come quelle "via cavo".

Tenendo bene a mente queste caratteristiche potremo sviluppare pagine web realmente fruibili ed offrire ai nostri utenti una soddisfacente esperienza di navigazione anche attraverso dispositivi mobili.

Tecniche di web-design di pagine web ottimizzate per dispositivi mobili

Abbiamo detto che uno dei punti fondamentali quando si progettano siti web destinate ad un pubblico "mobile" è, ovviamente, il design delle pagine. Per quanto concerne questo aspetto, i web-designer possono scegliere tra tre diverse metodologie di lavoro:

  • Responsive Design
    E' una tecnica basata sui CSS (più precisamente sulle sull'utilizzo delle media-queries di CSS3) che consente di creare interfacce che si adattano automaticamente alle dimensioni (ed all'orientamento) del display dell'utente: in pratica il web-designer deve definire diverse regole di stile per ciascuna delle risoluzioni possibili. Tutte queste operazioni avvengono lato client senza alcun coinvolgimento del server.
  • Sito Mobile (M-Site)
    Questa tecnica prevede la creazione di un sito web separato (ottimizzato per dispositivi mobili) sul quale "dirottare" automaticamente il traffico mobile identificato mediante l'analisi di alcune caratteristiche come l'user-agent o le dimensioni dello schermo. In questo caso si hanno due siti web con URL differenti.
  • Dynamic Serving
    Questa tecnica (anche detta "responsive design lato-server") prevede che il sito web cambi dinamicamente il suo aspetto adottando un template ottimizzato per dispositivi mobili identificati lato server mediante l'analisi dello user-agent dell'utente. In questo caso la medesima URL viene servita in modo differente attraverso una modifica dinamica di HTML e CSS eseguita server-side.

A differenza di quello che molti dicono, non esiste una tecnica migliore delle altre. La scelta, infatti, dipende dalle caratteristiche peculiari del sito web che si desidera tradurre in mobilità.

Risorse utili per un design mobile-friendly

Di seguito alcune risorse utili dove potete approfondire le tecniche citate in precedenza:


Potenzialità (e limiti) del nostro emulatore di smartphone

Durante la fase di sviluppo di un sito mobile friendly, ovviamente, è necessario effettuare opportuni test al fine di verificare la resa visiva e funzionale del nostro lavoro. La soluzione migliore e quella di visualizzare il sito direttamente all'interno di un dispositivo mobile, ma se per qualche ragione ciò non è possibile, possiamo ovviare facendo ricorso ad un emulatore di smartphone come quello presente in questa pagina.

Il nostro emulatore offre una resa visiva molto fedele sia per i siti sviluppati con la tecnica del responsive design che per gli m-site che per i siti sviluppati con la tecnica del dynamic serving.

Il nostro emulatore, tuttavia, non è in grado di riprodurre un'esperienza completa in quanto non consente di gestire alcune funzionalità dinamiche eventualmente incluse nel sito come, ad esempio, la visualizzazione di contenuti mediante chiamate AJAX.

Alcuni problemi di visualizzazione potrebbero presentarsi qualora il vostro sito web abbia delle limitazioni in merito alla visualizzazione all'interno di frame (l'emulatore si basa su un frame in linea) oppure integri funzioni Javascript che effettuano redirect dell'utente in base a talune variabili d'ambiente. Prima di effettuare il test, quindi, è opportuno disabilitare queste funzioni ove previste.

Come funziona il nostro emulatore di browser mobili?

Il funzionamento del nostro emulatore di browser mobili è davvero molto semplice:

  1. si inserisce la URL del sito web o della pagina che si vuole verificare;
  2. si sceglie l'orientamento del dispositivo (verticale o orizzontale);
  3. si inserisce il codice di verifica.

Dopo aver premuto sul pulsante di conferma si avvia il test che nel giro di pochi secondi restituirà un'anterpima dell'aspetto del nostro sito web su smartphone ed anche un'analisi del codice HTML della pagina al fine di verificare la presenza di alcuni elementi determinanti nel design di pagine web mobile-friendly.

Analisi di compatibilità del sito web su Smartphone

Per ogni aspetto valutato all'interno del test viene indicata una breve spiegazione: eventuali pallini rossi indicano errori gravi a cui è necessario porre rimedio, i pallini arancioni indicano di prestare attenzione (ma non si tratta di errori critici) mentre i pallini verdi indicano che l'elemento è presente ed è stato utilizzato correttamente.


Altri tool interessanti

clicca qui