Le pagine Web ottimizzate per l'utilizzo su dispositivi mobili differiscono da quelle visualizzate su computer desktop e laptop. Questi ultimi sono progettati per schermi di grandi dimensioni e per un clic preciso del mouse, mentre le pagine Web mobili sono dimensionate per schermi più piccoli e per toccare con le dita imprecisi.
- Progettato per schermi più piccoli e tocco impreciso delle dita.
- Progettato per schermi di grandi dimensioni con un clic preciso del mouse.
Dato che la maggior parte delle visite al sito web proviene da dispositivi mobili, i progettisti di siti hanno il compito di fornire versioni che funzionino sia con dispositivi mobili che con computer desktop. L'approccio più comune consiste nell'utilizzare il responsive web design, che fornisce automaticamente la versione corretta in base al dispositivo dell'utente e alle dimensioni dello schermo, come rilevato dal browser.
In ogni caso, le pagine web ottimizzate per i dispositivi mobili sono diverse dalle versioni desktop in diversi modi.
Design della pagina: gli schermi mobili hanno meno spazio
- I display di smartphone e tablet misurano da 4 a 10 pollici in diagonale.
-
I widget di menu comprimibili o espandibili in genere sostituiscono le barre laterali e i menu di intestazione ingombranti.
- Grafica a tutta larghezza con uso giudiziario dello spazio tra il testo.
- La maggior parte dei monitor desktop misura da 19 pollici a 24 pollici in diagonale.
- Link sponsorizzati e banner pubblicitari di grandi dimensioni più comuni.
- Testo più denso con più spazio per la grafica.
La differenza più evidente tra le pagine Web desktop e mobili è la dimensione dello schermo. Mentre la maggior parte dei monitor desktop misura almeno da 19 pollici a 24 pollici in diagonale, i tablet sono comunemente di circa 10 pollici. Gli smartphone sono circa 4 pollici in diagonale. La semplice riduzione dello zoom non converte correttamente una pagina Web in una versione ottimizzata per dispositivi mobili perché rende il testo illeggibile e richiede un passaggio aggiuntivo da parte del visitatore del sito. Inoltre, toccare con precisione piccoli elementi diventa impossibile.
Per risolvere il problema, i designer possono rimuovere le barre laterali e la grafica che non sono strettamente necessarie. Invece, usano una grafica più piccola, aumentano le dimensioni dei caratteri e comprimono il contenuto in widget espandibili. Questa limitazione immobiliare ha guidato un tipo di pensiero completamente diverso tra i web designer.
Inoltre, i widget di menu comprimibili o espandibili in genere sostituiscono le barre laterali e i menu di intestazione ingombranti. Nella loro ricerca per far contare ogni millimetro di spazio sullo schermo, i designer rimuovono lo spazio bianco superfluo, tenendo d'occhio la leggibilità.
Una folla di link sponsorizzati e banner pubblicitari di grandi dimensioni semplicemente non funziona su un telefono o un piccolo tablet. Invece, i piccoli annunci pop-up sono più comuni sulle pagine Web mobili.
I layout con testo avvolto attorno a un elemento grafico non vengono riprodotti bene sui dispositivi mobili. Invece, i designer spesso danno a quei grafici l'intera larghezza dello schermo ed eseguono il testo sotto o sopra. Allo stesso modo, un buon web design suddivide il testo in blocchi per la leggibilità; nessuno vuole leggere solidi muri di testo. Questo diventa ancora più importante sui piccoli schermi. Usare lo spazio bianco con giudizio è fondamentale.
Controlli della pagina: precisione desktop e BLOB mobili
-
Ampie aree di tocco o hotspot per una navigazione più accurata.
- URL diverso: aggiunge la lettera "m." Spesso un'opzione per visualizzare la versione desktop di un sito.
- Le credenziali di accesso hanno spesso uno spazio dedicato, a volte con accessibilità tramite impronta digitale.
- Collegamenti e pulsanti basati sul cursore più precisi.
A differenza di un preciso puntatore del mouse sul desktop, il dito umano è un blob e il tocco richiede grandi obiettivi sullo schermo per i collegamenti ipertestuali. I siti ottimizzati per i dispositivi mobili offrono ampie aree di tocco (o hotspot) per facilitare una navigazione accurata.
Le pagine Web ottimizzate per i dispositivi mobili includono comunemente anche la lettera m nei loro indirizzi; ad esempio, l'indirizzo mobile di Facebook è m.facebook.com. L'URL mobile viene solitamente scelto automaticamente per te quando navighi con un tablet mobile o uno smartphone. In alcuni casi, vedrai un collegamento selezionabile che ti consente di passare alla normale versione desktop della pagina.
I campi di accesso e password pensati per desktop e laptop diventano minuscoli e inutilizzabili su un telefono, quindi gli editori web li ingrandiscono, a volte assegnando loro le proprie pagine per facilità d'uso. L'accesso con un'impronta digitale o un altro account, come Google o Facebook, sta diventando sempre più comune con l'evoluzione delle funzionalità del dispositivo e del servizio.
Perché è importante?
Le pagine Web mobili sono progettate per dispositivi palmari e sono molto diverse dalle pagine create per la lettura desktop. Sebbene di solito sia possibile visualizzare la versione desktop di una pagina Web su un dispositivo mobile e viceversa, sono progettate in modo diverso per semplificare la visualizzazione, la lettura e la navigazione dei contenuti.
