Da anni ormai, gli esperti affermano che il traffico verso i siti Web da parte di visitatori su dispositivi mobili è aumentato drasticamente. Per questo motivo, molte aziende hanno iniziato con intelligenza ad adottare una strategia mobile per la loro presenza online, creando esperienze adatte al telefono e ad altri dispositivi mobili.
Una volta trascorso il tempo a imparare a progettare pagine Web per telefoni cellulari e a implementare la tua strategia, dovrai anche assicurarti che i visitatori del tuo sito possano vederli. Ci sono molti modi in cui puoi farlo e alcuni funzionano meglio di altri. Ecco un esempio del metodo che puoi utilizzare per implementare il supporto mobile sui tuoi siti web - insieme a una raccomandazione verso la fine per quale sia il miglior metodo per ottenere questo risultato sul Web di oggi!
Fornire un collegamento ad un'altra versione del sito
Questo è, di gran lunga, il metodo più semplice per gestire gli utenti di telefoni cellulari. Invece di preoccuparti se possono o non possono vedere le tue pagine, inserisci semplicemente un link vicino alla parte superiore della pagina che rimandi a una versione mobile separata del tuo sito. Quindi i lettori possono selezionare autonomamente se vogliono vedere la versione mobile o continuare con la versione "normale".
Il vantaggio di questa soluzione è che è facile da implementare. Richiede la creazione di una versione ottimizzata per dispositivi mobili e quindi l'aggiunta di un collegamento vicino alla parte superiore delle normali pagine del sito.
Gli svantaggi sono:
- Devi mantenere una versione separata del sito per gli utenti mobili. Man mano che il tuo sito diventa più grande, potresti dimenticarti di mantenere la seconda versione e i tuoi siti potrebbero non essere sincronizzati.
- Crei anche una terza versione per tablet? Che ne dici di una quarta versione per i wearable? Questo concetto di versioni specifiche del dispositivo può perdere il controllo molto rapidamente.
- Devi mettere un brutto link nella parte superiore della pagina che i lettori non mobili possono vedere (ed eventualmente cliccare su).
In definitiva, questo approccio è obsoleto ed è improbabile che faccia parte di una moderna strategia mobile. A volte viene usato come soluzione stop-gap mentre si sta sviluppando una soluzione migliore, ma a questo punto è davvero un cerotto a breve termine.
Usa JavaScript
In una variante dell'approccio sopra menzionato, alcuni sviluppatori utilizzano un tipo di script di rilevamento del browser per rilevare se il cliente si trova su un dispositivo mobile e quindi reindirizzare a tale sito mobile separato. Il problema con il rilevamento del browser e i dispositivi mobili è che ci sono migliaia di dispositivi mobili là fuori. Tentare di individuarli tutti con un solo JavaScript può trasformare tutte le tue pagine in un incubo di download, e tu sei ancora soggetto a molti degli stessi inconvenienti dell'approccio sopra menzionato.
Usa CSS @media Handheld
Il comando CSS @media handheld sembra un modo ideale per visualizzare gli stili CSS solo per i dispositivi portatili, come i telefoni cellulari. Questa sembra una soluzione ideale per la visualizzazione di pagine per dispositivi mobili. Scrivi una pagina Web e quindi crei due fogli di stile. Il primo per il tipo di media "schermo" definisce la tua pagina per monitor e schermi di computer. Il secondo per il "palmare" definisce la tua pagina per piccoli dispositivi come quei telefoni cellulari. Sembra facile, ma in realtà non funziona in pratica.
Il più grande vantaggio di questo metodo è che non devi mantenere due versioni del tuo sito web. Basta mantenere quello, e il foglio di stile definisce come dovrebbe apparire - che si sta avvicinando alla soluzione finale che vogliamo.
Un problema con questo metodo è che molti telefoni non supportano il tipo di supporto: visualizzano invece le loro pagine con il tipo di supporto dello schermo. E molti vecchi telefoni cellulari e palmari non supportano affatto il CSS. Alla fine, questo metodo è inaffidabile ed è quindi usato raramente per fornire versioni mobili di un sito web.
Utilizzare PHP, JSP, ASP per rilevare l'agente utente
Questo è un modo molto migliore per reindirizzare gli utenti mobili a una versione mobile del sito Web perché non si basa su un linguaggio di scripting o CSS che il dispositivo mobile non utilizza. Al contrario, utilizza un linguaggio lato server (PHP, ASP, JSP, ColdFusion, ecc.) Per esaminare l'utente-agente e quindi modificare la richiesta HTTP in modo che punti a una pagina mobile se si tratta di un dispositivo mobile.
Un semplice codice PHP per farlo sarebbe simile a questo:
stristr ($ ua, "Windows CE") ostristr ($ ua, "AvantGo") ostristr ($ ua, "Mazingo") ostristr ($ ua, "Mobile") ostristr ($ ua, "T68") ostristr ($ ua, "Syncalot") ostristr ($ ua, "Blazer")) {$ DEVICE_TYPE = "MOBILE";}if (isset ($ DEVICE_TYPE) e $ DEVICE_TYPE == "MOBILE") {$ Location = 'mobile / index.php';intestazione ('Posizione:'. $ posizione);Uscita;}?>
Il problema qui è che ci sono molti altri potenziali user-agent che vengono utilizzati dai dispositivi mobili. Questo script catturerà e reindirizzerà molti di essi ma non tutti in alcun modo. E più sono aggiunti tutto il tempo.
Inoltre, come con le altre soluzioni di cui sopra, dovrai ancora mantenere un sito mobile separato per questi lettori! Questo inconveniente di dover gestire due (o più!) Siti Web è una ragione sufficiente per cercare una soluzione migliore.
Usa WURFL
Se si è ancora determinati a reindirizzare gli utenti mobili su un sito separato, WURFL (Wireless Universal Resource File) è una buona soluzione. Questo è un file XML (e ora un file DB) e varie librerie DBI che contengono non solo dati aggiornati sugli user-agent wireless ma anche le funzionalità e le funzionalità supportate da tali agenti utente.
Per utilizzare WURFL, devi scaricare il file di configurazione XML e quindi scegliere la lingua e implementare l'API sul tuo sito web. Esistono strumenti per l'utilizzo di WURFL con Java, PHP, Perl, Ruby, Python, Net, XSLT e C ++.
Il vantaggio dell'utilizzo di WURFL è che ci sono molte persone che aggiornano e aggiungono continuamente al file di configurazione. Quindi, mentre il file che stai usando è obsoleto quasi prima di averlo scaricato, è probabile che se lo scarichi una volta al mese, avrai tutti i browser mobili che i tuoi lettori utilizzano abitualmente senza i problemi. Lo svantaggio, ovviamente, è che devi continuamente scaricarlo e aggiornarlo, tutto in modo da poter indirizzare gli utenti verso un secondo sito Web e gli svantaggi che crea.
La soluzione migliore è la progettazione reattiva
Quindi, se mantenere siti diversi per dispositivi diversi non è la risposta, che cos'è? Web design reattivo.
La progettazione reattiva è il punto in cui si utilizzano le query multimediali CSS per definire gli stili per i dispositivi di varie larghezze. La progettazione reattiva consente di creare una pagina Web per utenti mobili e non mobili. Quindi non devi preoccuparti di quali contenuti visualizzare sul sito per dispositivi mobili o ricorda di trasferire le ultime modifiche al tuo sito mobile. Inoltre, una volta che hai scritto il CSS, non devi scaricare nulla di nuovo.
Il design reattivo potrebbe non funzionare perfettamente su dispositivi e browser estremamente vecchi (la maggior parte dei quali è in uso molto piccolo oggi e non dovrebbe preoccupare molto per te), ma perché è additivo (aggiungere stili al contenuto, piuttosto che prendere il contenuto di distanza) questi lettori saranno comunque in grado di leggere il tuo sito Web, semplicemente non sembreranno ideali sul loro vecchio dispositivo o browser.
