Sebbene il numero di siti Web senza ottimizzazione mobile si stia riducendo, ne rimangono alcuni progettati solo per desktop. Sfortunatamente, il precedente servizio web "mobilizer" di Google è stato interrotto. Il successore spirituale del servizio è Google Weblight, progettato per ottimizzare le connessioni lente anziché rivedere i siti per la visualizzazione mobile. Oltre al servizio di Google, ci sono una serie di pratiche e strumenti che dovrebbero essere considerati quando si sviluppa un sito pensando ai dispositivi mobili.
Passi
Parte 1 di 2: Sperimentazione con Google Weblight
Passaggio 1. Analizza come funziona Weblight
Weblight è un algoritmo creato da Google per fornire agli utenti caricamenti di pagina più veloci e leggeri in condizioni di rete scadenti. Ciò significa che Weblight non ha un'interfaccia utente e opera sul backend. Le pagine vengono private dei loro elementi più complessi, fornendo un'esperienza ridotta e leggera, piuttosto che ottimizzata esplicitamente per la piattaforma mobile.
Passaggio 2. Prova le modifiche al sito con Weblight
Sul tuo dispositivo mobile, aggiungi semplicemente l'URL completo del tuo sito alla fine dell'indirizzo weblight (ad esempio se il tuo sito web è "mywebsite.com", inserisci https://googleweblight.com/?lite_url=https://mywebsite.com). La pagina caricherà una versione semplificata ma funzionale di se stessa. Con gli elementi rimossi, alcuni siti potrebbero apparire molto meglio sugli schermi dei dispositivi mobili.
Passaggio 3. Riconosci i limiti
Tieni presente che questo non è uno strumento di conversione esplicito progettato per l'interazione dell'utente. Mentre l'inserimento manuale del sito Web può essere utilizzato in un pizzico, Weblight è progettato per la velocità, non per l'usabilità.
Parte 2 di 2: Progettazione per la compatibilità mobile
Passaggio 1. Tieni a mente i limiti dei dispositivi mobili
I dispositivi mobili condividono alcuni aspetti che li distinguono dalle loro controparti desktop. Queste caratteristiche principali dovrebbero essere le considerazioni principali quando si crea un sito per il consumo mobile.
- Schermi piccoli e verticalità: sebbene le risoluzioni dello schermo sui dispositivi mobili siano in costante miglioramento, le dimensioni e il fattore di forma rimangono un problema per la progettazione del sito. La progettazione di un sito in un layout a colonna singola è la cosa migliore per i telefoni (i tablet possono spesso utilizzare siti desktop senza troppi problemi).
- Interfacce touch: gli elementi della pagina devono essere posizionati con le dimensioni di un dito in mente. Gli elementi che utilizzano il passaggio del mouse devono essere ridotti a icona o riprogettati per il tocco (ad esempio i menu a discesa).
- Velocità dei dati: uno dei grandi vantaggi dei dispositivi mobili è l'utilizzo al di fuori della portata del Wi-Fi, ma le connessioni dati sono in genere più lente e meno affidabili. Le interfacce utente (UI) dovrebbero rimanere semplici e il contenuto dovrebbe essere visibile e accessibile. Troppa confusione ridurrà i tempi di caricamento e renderà difficile la navigazione.
Passaggio 2. Utilizzare un servizio di Content Management System (CMS)
Per coloro che sviluppano con meno risorse, l'utilizzo di un servizio CMS come Wordpress o Squarespace è un'ottima opzione per un design mobile a basso costo e intuitivo. I temi che utilizzano il web design reattivo forniranno il modello più semplice per un sito mobile.
Il responsive web design è una teoria del web design che promuove l'uso di elementi di design fluidi per consentire transizioni fluide di design e usabilità tra piattaforme
Passaggio 3. Testare gli schermi dei dispositivi mobili utilizzando il software desktop
Esistono numerose applicazioni web gratuite che consentono di emulare dispositivi mobili per testare l'estetica e la funzionalità del sito web. L'utilizzo di questi strumenti è facile come selezionare il dispositivo di test desiderato, quindi accedere al sito Web di destinazione per l'anteprima. La maggior parte includerà strumenti per variabili come l'orientamento dello schermo, la densità dei pixel o persino la selezione del browser. Alcuni esempi popolari sono:
- Emulatore modalità dispositivo Chrome
- mobilephoneemulator.com
- screenfly (un sottoinsieme di quirktools)
- mobiletest.me (abbonamento a pagamento)
