Da anni ormai, gli esperti affermano che il traffico verso i siti Web dei visitatori sui dispositivi mobili è aumentato notevolmente. Per questo motivo, molte aziende hanno iniziato ad abbracciare in modo intelligente una strategia mobile per la loro presenza online, creando esperienze adatte al telefono e ad altri dispositivi mobili.
Una volta che hai passato il tempo a imparare come fare progettare pagine web per telefoni cellularie implementando la tua strategia, vorrai anche assicurarti che i visitatori del tuo sito possano vedere quei design. Ci sono molti modi in cui puoi farlo e alcuni funzionano meglio di altri. Ecco uno sguardo al metodo che puoi utilizzare per implementare il supporto mobile sui tuoi siti Web, insieme a una raccomandazione verso la fine su quale sia il metodo migliore per raggiungere questo obiettivo sul Web di oggi.
Fornire un collegamento a 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, metti semplicemente un link da qualche parte vicino alla parte superiore della pagina che punta 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 di creare una versione ottimizzata per dispositivi mobili e quindi di aggiungere un collegamento da qualche parte 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 dimenticare di mantenere quella 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 Indossabili? Questo concetto di versioni specifiche del dispositivo può sfuggire al controllo molto rapidamente.
- Devi mettere un brutto link nella parte superiore della pagina che i lettori non mobili possono vedere (ed eventualmente fare clic).
In definitiva, questo approccio è obsoleto ed è improbabile che faccia parte di una moderna strategia mobile. A volte viene utilizzato come soluzione temporanea mentre viene sviluppata 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 rilevamento del browser script per rilevare se il cliente è su un dispositivo mobile e quindi reindirizzarlo a quel cellulare separato separate luogo. Il problema con browser rilevamento e dispositivi mobili è che ci sono migliaia di dispositivi mobili là fuori. Tentare di rilevarli tutti con un JavaScript potrebbe trasformare tutte le tue pagine in un incubo di download e sei ancora soggetto a molti degli stessi inconvenienti dell'approccio sopra menzionato.
Usa CSS @media Handheld
Il comando CSS @media palmare sembra essere un modo ideale per visualizzare CSS stili solo per dispositivi portatili, come i telefoni cellulari. Questa sembra una soluzione ideale per la visualizzazione di pagine per dispositivi mobili. Si scrive una pagina Web e quindi si creano due fogli di stile. Il primo per il tipo di media "schermo" modella la tua pagina per monitor e schermi di computer. Il secondo per il "portatile" modella la tua pagina per piccoli dispositivi come quei telefoni cellulari. Sembra facile, ma in pratica non funziona.
Il più grande vantaggio di questo metodo è che non devi mantenere due versioni del tuo sito web. Mantieni solo quello, e il foglio di stile definisce come dovrebbe apparire, che in realtà si sta avvicinando alla soluzione finale che desideriamo.
Un problema con questo metodo è che molti telefoni non supportano il tipo di media: visualizzano invece le loro pagine con il tipo di media dello schermo. E molti vecchi telefoni cellulari e palmari non supportano affatto i CSS. Alla fine, questo metodo è inaffidabile e viene quindi utilizzato raramente per fornire versioni mobili di un sito web.
Usa PHP, JSP, ASP per rilevare l'agente utente
Questo è un modo molto migliore per reindirizzare gli utenti mobili a a versione mobile del sito Web perché non si basa su un linguaggio di scripting o CSS che il dispositivo mobile non utilizza. Invece, utilizza un linguaggio lato server (PHP, ASP, JSP, ColdFusion, ecc.) per guardare l'agente utente e quindi modificare il Richiesta HTTP per puntare a una pagina mobile se si tratta di un dispositivo mobile.
Un semplice codice PHP per farlo sarebbe simile a questo:
Il problema qui è che ci sono moltissimi altri potenziali agenti utente utilizzati dai dispositivi mobili. Questo script ne catturerà e reindirizzerà molti, ma non tutti in alcun modo. E ne vengono aggiunti sempre di più.
Inoltre, come con le altre soluzioni di cui sopra, dovrai comunque 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 sei ancora determinato a reindirizzare i tuoi utenti mobili a un sito separato, allora WURFL (Wireless Universal Resource File) è una buona soluzione. Questo è un file XML (e ora un file DB) e varie librerie DBI che non solo contengono dati aggiornati degli agenti utente wireless, ma anche le caratteristiche e le capacità supportate da tali agenti utente.
Per utilizzare WURFL, scarica il file di configurazione XML, quindi scegli la tua lingua e implementa l'API sul tuo sito web. Esistono strumenti per utilizzare WURFL con Java, PHP, Perl, Ruby, Python, Net, XSLTe C++.
Il vantaggio dell'utilizzo di WURFL è che ci sono molte persone che aggiornano e aggiungono continuamente al file di configurazione. Quindi, sebbene il file che stai utilizzando sia obsoleto quasi prima che tu abbia finito di scaricarlo, è probabile che se tu scaricalo una volta al mese circa, avrai tutti i browser mobili che i tuoi lettori usano abitualmente senza i problemi. Il rovescio della medaglia, ovviamente, è che devi scaricarlo e aggiornarlo continuamente, il tutto in modo da poter indirizzare gli utenti a un secondo sito Web e agli svantaggi che crea.
La soluzione migliore è il design reattivo
Quindi, se mantenere siti diversi per dispositivi diversi non è la risposta, qual è? Web design reattivo.
Il design reattivo è dove si utilizzano le query multimediali CSS per definire gli stili per i dispositivi di varie larghezze. Il design reattivo consente di creare una pagina Web per utenti mobili e non mobili. Quindi non devi preoccuparti di quali contenuti visualizzare sul sito mobile o ricordarti 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 è oggi in uso molto poco e non dovrebbe essere una grande preoccupazione per te), ma perché è additivo (aggiungendo stili al contenuto, piuttosto che togliere contenuto) questi lettori saranno ancora in grado di leggere il tuo sito web, semplicemente non sembrerà l'ideale sul loro vecchio dispositivo o browser.