Ricordi Internet intorno al 1997? Le pagine sono state progettate per monitor CRT a bassa risoluzione e modem lenti. Il testo dominava il Web e occasionalmente immagini JPEG e GIF decoravano le pagine qua e là. La maggior parte delle volte non le vedevamo, poiché disattivare le immagini era un modo sicuro per ottenere un po’ di velocità extra da un modem dial-up. Più di un decennio dopo, l’intero panorama di Internet è cambiato. Internet a banda larga tramite connessioni via cavo e DSL è lo standard nel mondo sviluppato e le pagine Web possono utilizzare elementi più complessi – tonnellate di immagini, effetti di trasparenza e persino video – per fornire contenuti. Possiamo persino riprodurre in streaming interi film da Internet sui nostri computer senza aspettare che i file vengano scaricati!
Per quanto enorme sia stato il passaggio a monitor con risoluzione più elevata, velocità della banda larga e opzioni grafiche fantasiose, una seconda tendenza ha avuto un impatto notevole sul World Wide Web così come esiste oggi. Poiché la tecnologia telefonica è diventata più avanzata e meno costosa, gli smartphone sono diventati parte integrante dell’esperienza Internet. I dispositivi mobili rappresentano una porta d’accesso fondamentale al Web per milioni e milioni di utenti che non possiedono un PC. In India, ad esempio, l’utilizzo del popolare browser Web Opera Mini è cresciuto del 300% tra marzo 2010 e marzo 2011. In molte parti del mondo la finestra su Internet non si trova su un monitor da 23 pollici. È sullo schermo del telefono da 3 pollici. Anche i telefoni economici “stupidi” senza touch screen o hardware potente possono navigare sul Web.
Accedere al sito Web mobile. Poiché la popolarità dell’utilizzo di Internet mobile è andata di pari passo con quella dei servizi Internet ad alta velocità e dell’hardware dei computer più potente, gli sviluppatori di contenuti online si trovano ad affrontare una sfida unica. I siti Web progettati per monitor di grandi dimensioni, computer veloci e Internet veloce si basano fortemente su grafica e programmazione all’avanguardia che non sempre funzionano sugli schermi più piccoli e sulle reti più lente dei dispositivi mobili. La soluzione sta nei siti Web mobili: pagine specificatamente progettate per funzionare su dispositivi più piccoli e fornire contenuti importanti riducendo al contempo la grafica che rallenta il caricamento della pagina. Sebbene i siti Web mobili siano intenzionalmente più semplici dei siti completi, ciò non significa che siano facili da creare. I siti Web mobili richiedono ancora attenzione al design e alla tecnologia, e le rigide limitazioni dell’hardware mobile non rendono le cose più facili.
Perché i siti Web mobili necessitano di considerazioni di progettazione speciali
Il passaggio da un browser desktop a uno mobile non significa solo ridurre lo schermo. Si tratta di eliminare il rumore. Quando progetti un sito Web mobile, non stai semplicemente rimpicciolendo le cose. Stai ripensando a ciò che conta.
Gli utenti desktop si aspettano un tocco visivo. Hanno la larghezza di banda e il numero di pixel per gestirlo. Utenti mobili? Non così tanto. Un utente con una connessione 3G in una zona rurale non sta aspettando il caricamento di un’immagine hero. Vogliono il testo. Vogliono i dati. Se imponi un’esperienza di livello desktop su un dispositivo mobile, non sei innovativo. Sei un ostacolo.
Ciò crea un problema specifico per gli sviluppatori. Come si bilancia la necessità di contenuti ricchi con la realtà di risorse limitate?
I vincoli principali del web design mobile:
- Lo spazio sullo schermo è scarso. Uno schermo da 3 pollici non può visualizzare lo stesso layout di un monitor da 23 pollici. La navigazione deve essere intuitiva, non tentacolare.
- La potenza dell’hardware varia notevolmente. Anche se gli smartphone sono diventati più potenti, esistono ancora i telefoni base. Il codice che funziona senza problemi su un iPhone potrebbe bloccarsi su un dispositivo Android entry-level o un feature phone.
- L’instabilità della rete è la norma, non l’eccezione. A differenza della connessione a banda larga stabile a casa, le reti mobili fluttuano. Le risorse pesanti uccidono i tempi di caricamento.
È una passeggiata sul filo del rasoio. Hai tagliato troppo e il sito sembra rotto. Tieni troppo, e si carica come se fosse di nuovo il 1998.
“I siti Web per dispositivi mobili sono intenzionalmente più semplici dei siti completi, ciò non significa che siano facili da creare.”
Non si tratta
Screen Real Estate detta il design
Si tratta di pollici quadrati. O meglio, la loro mancanza.
Anche gli schermi più grandi degli smartphone, quelli che superano i quattro pollici (10,2 cm) di diagonale, sembrano francobolli accanto a un monitor desktop. I numeri di risoluzione potrebbero aumentare, ma la fisica non mente. Un numero elevato di pixel su un display minuscolo non è ancora in grado di mostrare in modo leggibile un sito Web completo. Finisci per pizzicare per ingrandire, combattendo layout a più colonne che trasformano la navigazione in un gioco di colpisci la talpa.
Un buon web design mobile non significa rimpicciolire un sito desktop. Si tratta di ricominciare da capo con layout a colonna singola.
Ciò significa condensare tutto in un flusso verticale. Riorganizzare i collegamenti di navigazione. Togli la spazzatura decorativa. Restringi la colonna principale per adattarla alla larghezza effettiva del telefono. La maggior parte dei monitor sono rettangoli larghi. Telefoni? Sono strisce alte. Certo, puoi ruotare il dispositivo in modalità orizzontale, ma l’esperienza predefinita è verticale. Progetta prima la striscia stretta.
Poi c’è il problema del metodo di input.
I browser desktop si basano sul mouse. Passa il mouse sopra un menu e viene visualizzato un menu a discesa. Provalo con un pollice. Non funziona. Il Web design mobile richiede di ripensare questi “stati di passaggio del mouse”. I menu devono essere toccati, non spostati con il mouse. I pulsanti devono essere abbastanza grandi da contenere un dito, non un cursore preciso. Se il tuo sito fa affidamento sugli effetti al passaggio del mouse, è già danneggiato sui dispositivi mobili.
L’incubo della frammentazione dei dispositivi
Costruire per il desktop è già abbastanza difficile. Hai Internet Explorer che si scatena, Firefox che fa il suo dovere e Chrome che mangia tutta la RAM. Ma mobile? È una bestia completamente diversa.
La varietà dell’hardware è sconcertante. Da un lato ci sono i telefoni “stupidi” con schermi piccoli e a bassa risoluzione e browser semplici. Dall’altro, hai smartphone con display touch nitidi e ad alta risoluzione e potenti processori.
Una taglia unica non va bene per tutti. A volte sono necessarie interfacce separate.
Guarda Facebook. Non si limita a fornire lo stesso HTML a tutti. Rileva quale dispositivo stai utilizzando. Se utilizzi un iPhone o Android, ottieni un’esperienza su misura ottimizzata per quello specifico schermo e funzionalità del browser. Se utilizzi un feature phone, ottieni una versione più leggera.
Un sito mobile non è sufficiente. Devi progettare per il dispositivo, non solo per il browser.
Questa logica di rilevamento è il ponte tra l’utente e l’interfaccia giusta. È la tecnologia che rende possibile il design.
Più intelligente, non più semplice
Semplificare l’interfaccia non significa sminuire l’esperienza. In effetti, il mobile può essere più potente del desktop per attività specifiche.
Gli smartphone hanno un hardware che manca ai PC. Fotocamere. GPS. Accelerometri.
I codici QR sono un esempio perfetto. Punta la fotocamera su un codice e verrà immediatamente avviato un sito Web o scaricata un’app. Nessun URL di digitazione. Nessuna ricerca. Basta scansionare e partire.
Le mappe si collegano ai dati GPS per darti indicazioni in tempo reale o consigli sui ristoranti in base alla tua posizione esatta. Questo non è solo “un sito web più piccolo”. È un’utilità diversa.
La creazione di un sito mobile efficiente richiede un uso intelligente di questa tecnologia di backend. Non si tratta solo di CSS e HTML. Si tratta di sfruttare il dispositivo stesso. Design e tecnologia sono due facce della stessa medaglia. Non puoi averne uno senza l’altro.
Diamo un’occhiata più da vicino a come avviene questo rilevamento. Come fa Facebook a sapere che stai utilizzando un iPhone e non un vecchio Nokia?
Al servizio dell’esperienza mobile: rilevamento, sottodomini e scelta dell’utente
Vedi le linee pulite e il testo leggibile. Sembra semplice. Sotto il cofano c’è un pasticcio di ingegneria intelligente. Il web design moderno si basa su Fogli di stile a cascata o CSS. Questo codice determina i caratteri, i colori, i margini e la larghezza della pagina. Il contenuto risiede in un database o in file HTML. I CSS decidono come appare il contenuto.
Ogni modifica al design menzionata in precedenza avviene qui. Per rendere veloce un sito mobile, sostituisci un’immagine di sfondo pesante con un colore a tinta unita. Ciò consente di risparmiare larghezza di banda. Rende il caricamento della pagina più veloce.
Costruire il sito è il primo passo. Convincere le persone a usarlo è il secondo passo. Non esiste un unico modo giusto per realizzare un sito mobile. Esistono diverse opzioni.
Il metodo più semplice è un collegamento. Lo metti sul sito completo. Dice “Visualizza sito mobile”. Spesso gli sviluppatori utilizzano un sottodominio come “m.website.com”. Questo è facile da analizzare. “Website.com” passa alla versione desktop. “m.website.com” va alla versione mobile. Alcuni siti utilizzano “i.website.com” a causa dell’iPhone. Il codice funziona allo stesso modo.
Alcuni utenti devono digitare manualmente “m.website.com”. La maggior parte dei siti automatizza questo processo.
Come i siti web mobili rilevano il tuo dispositivo
Altre tecniche sono più complesse. Molti siti rilevano automaticamente il tuo tipo di dispositivo. Decidono quale file CSS servire in base al tuo hardware.
Ciò avviene interrogando il dispositivo. Il server controlla fattori identificativi come la larghezza dello schermo in pixel. Legge la stringa dell’agente utente. Questa stringa dichiara quale browser sta caricando la pagina.
Le media query sono righe di codice CSS. Fanno riferimento alla stringa dell’agente utente. Selezionano fattori identificativi specifici. Se l’agente utente si identifica come un browser mobile con uno schermo stretto, il server carica la pagina mobile.
Questo metodo ha dei difetti. Alcuni browser consentono di falsificare l’agente utente. I nuovi browser rilasciano costantemente nuove stringhe. I server generalmente inviano il sito giusto al dispositivo giusto. Ma non è perfetto.
Questo sistema di identificazione si collega ad un’altra opzione. Dai all’utente una scelta. Vai su IMDB.com su un telefono. Carica automaticamente il sito mobile. Ti verrà inoltre richiesto di scaricare un’app mobile. L’app offre più funzionalità.
Vantaggi e svantaggi dei browser mobili
I siti mobili di solito funzionano meglio dei siti completi sugli smartphone. Sono fatti su misura per i piccoli schermi. La soluzione “taglia unica” funziona raramente.
Ma “meglio” è relativo. I siti mobili offrono un’esperienza limitata. Tengono conto delle limitazioni del dispositivo. La navigazione spesso scompare. Lo spazio sullo schermo non è sufficiente per mantenere i menu sempre visibili.
Interagire con un sito è la parte più difficile della navigazione mobile. Lo scorrimento di un modulo di input richiede tempo. Selezionare i campi è noioso. Digitare su un telefono è più lento che su un computer. Touch screen e tastiere software peggiorano la situazione.
I browser dei telefoni possono memorizzare i cookie. Ricordano le password come fanno i browser desktop. Questo aiuta. I browser con equivalenti desktop come Firefox per Android e Opera Mobile possono sincronizzare i dati. Trasferisci i dati salvati dal tuo computer. Ciò semplifica la navigazione su entrambe le piattaforme.
Anche i telefoni hanno dei trucchi. Pizzica per ingrandire il testo ingrandisce. Tocca per ingrandire adatta un paragrafo alla larghezza dello schermo.
Perché Flash Video non funziona sui dispositivi mobili
I video Flash entrano in ogni discussione sulla navigazione mobile. È impegnativo per i processori. Prosciuga la durata della batteria. È migliorato nel corso degli anni. Funziona su molti dispositivi.
Non funziona su nessun dispositivo Apple.
Apple blocca i video Flash su iOS. Supportano invece i video HTML5. YouTube utilizza video HTML5. Anche molti altri siti lo fanno.
Puoi incorporare video Flash nelle pagine Web mobili. Va contro i principi del design mobile. La semplicità è il punto di forza dei siti mobili. Si caricano rapidamente perché utilizzano testo e immagini di piccole dimensioni. Flash lo rompe.
Mettere Flash sul tuo sito limita gli utenti iPhone. Non possono interagire con la pagina. Perdi una fetta enorme del tuo pubblico.
Shopping mobile: è davvero più sicuro di quello desktop?
Ecco una svolta. Il tuo telefono potrebbe essere il posto più sicuro dove riporre la tua carta di credito.
La maggior parte dei virus Web prendono di mira Windows. Non funzionano su iOS o Android. Sei essenzialmente invisibile a un’enorme quantità di malware semplicemente perché non sei su un PC. I telefoni moderni supportano la crittografia HTTPS e SSL proprio come fa il tuo laptop.
Ma non essere arrogante.
Devi ancora guardare la barra degli URL. Cerca l’icona del lucchetto. Attenersi a siti affidabili. Se un sito appare losco su un desktop, appare losco su un telefono. Solo più piccolo. Il panorama delle minacce cambia, ma il principio rimane. Fare attenzione è meglio che dispiaciuto.
Spiegazione del design della pagina mobile
Che cos’è il design di una pagina mobile?
Non è solo un sito web rimpicciolito. È un’ottimizzazione specifica per touch screen e finestre strette. Pensa in piccolo. Più semplice. Nessun disordine.
I siti desktop si basano sul passaggio del mouse e su clic precisi. Il cellulare si basa sui pollici. Questo cambia tutto. I pulsanti diventano più grandi. I menu vengono nascosti. Il contenuto ha la priorità. Se stai cercando di leggere un paragrafo denso su uno schermo da 6 pollici, stai combattendo contro il dispositivo. Un buon design mobile ferma questo conflitto prima che inizi.
Siti web mobili e siti tradizionali
Le persone confondono continuamente questi termini. Separiamoli.
Un sito Web standard è creato per i desktop. Tastiere. Topi. Grandi monitor. Presuppone che tu abbia larghezza di banda e pazienza.
Un sito web mobile è realizzato per smartphone e tablet. Elimina il grasso. Le funzionalità che non funzionano sui touchscreen vengono tagliate. Le immagini si comprimono. Gli script si alleggeriscono.
La differenza conta.
Perché? Perché i siti mobili si caricano più velocemente. Usano meno dati. Questa non è solo una comodità per gli utenti Apple a Manhattan. È una necessità per le persone nei paesi in via di sviluppo dove Internet ad alta velocità è un lusso, non un’utilità. Se il tuo sito è pesante, non possono caricarlo. Periodo.
Perché il design mobile è importante
Si tratta di attrito.
La navigazione sul desktop è efficiente. La navigazione mobile è comoda. Hai Internet in tasca. Ma digitare su uno schermo di vetro è noioso.
Un buon design mobile fa sparire quella noia. Rispetta il tuo tempo. Rispetta il tuo piano dati. Rispetta il fatto che probabilmente stai camminando mentre lo usi.
Anche qui la pubblicità funziona. Ma i pop-up giganti? No. Questi sono comunque vietati dalla maggior parte dei browser mobili. Google AdSense è perfetto. Piccolo. Non invadente. Pertinente.
Il Web mobile non è una versione minore del Web desktop. È un animale diverso. Trattalo in questo modo.
