La progettazione di siti web per dispositivi mobili è complicata, dal momento che una versione mobile di un sito potrebbe non essere compatibile con tutti i dispositivi. I progettisti devono essere consapevoli delle migliori pratiche di progettazione per rendere la tua presenza mobile significativa e utile.
C'è un continuo dibattito tra gli sviluppatori Web su quale sia il modo migliore per creare un sito web ottimizzato per dispositivi mobili. Esistono tre metodi principali per lo sviluppo di un sito Web mobile.
Questi sono:
- Web design reattivo.
- Siti web dedicati per dispositivi mobili.
- RESS: la programmazione lato server esegue il rendering di CSS e HTML, a seconda del tipo di dispositivo.
Ogni metodo ha i suoi pro e contro. Uno sviluppatore Web deve essere consapevole di ogni tecnica per implementare quella migliore per la situazione.
3 modi per progettare un sito web mobile
Responsive Web Design (RWD)
RWD si basa su query multimediali CSS3 per allineare il layout di una pagina Web con le dimensioni dell'area di visualizzazione di un dispositivo. Lo stesso codice HTML viene utilizzato per presentare layout di pagine Web diversi per tablet, dispositivi mobili, desktop e altri gadget.
Benefici:
- Il tuo sito web avrà contenuti simili e markup HTML, quindi i visitatori mobili avranno la stessa esperienza, indipendentemente dal tipo di dispositivo che stanno utilizzando.
- Un singolo URL facilita agli utenti il collegamento e la condivisione di contenuti. (Se la pagina web è disponibile in più di un indirizzo URL, gli utenti possono confondersi.)
svantaggi:
Non è possibile ottimizzare separatamente i contenuti mobili. Pertanto, un progettista che utilizza RWD non può personalizzare il contenuto separatamente per gli utenti mobili.
Secondo i dati di gennaio 2013 dell'archivio HTTP, una pagina Web media è di circa 1,3 MB. Tuttavia, la maggior parte dei siti RWD è relativamente più grande. Questa dimensione maggiore riduce le prestazioni dei siti mobili, rendendoli più lenti.
Gli utenti mobili sono più in sintonia con i modelli di progettazione dell'interfaccia utente specifici per dispositivi mobili. Inoltre, gli utenti mobili sono abituati al multi-tasking. A meno che la struttura di navigazione non sia personalizzata per dispositivi specifici, gli utenti possono affrontare problemi quando provano a svolgere più attività contemporaneamente.
Siti mobili dedicati
Questo metodo migliora l'esperienza degli utenti mobili creando un sito Web completamente separato.
Benefici:
- Semplicità di gestione: sono necessarie modifiche separate per i siti mobili e desktop. Le modifiche apportate sono limitate a ciascuna versione rispettiva. Ciò significa che i cambiamenti relativi alla piattaforma mobile non sono accessibili dal desktop.
- Poiché stai sviluppando un sito web specifico per dispositivi mobili, diventa più facile ottimizzarlo e ottimizzarlo specificamente per quel pubblico.
- Il contenuto e la struttura di navigazione possono essere personalizzati per gli utenti mobili.
svantaggi:
La condivisione di una pagina Web tramite social media diventa più difficile, poiché con siti mobili dedicati esistono più URL per le pagine. Quando gli utenti desktop fanno clic sugli URL per dispositivi mobili condivisi sulle piattaforme di social media, potrebbero inavvertitamente ricevere la versione mobile del sito anziché la versione desktop.
Al fine di evitare problemi di contenuto duplicati, lo sviluppatore Web deve utilizzare i meta tag rel = "alternative" e rel = "canonical". Se un utente mobile cerca su Google e fa clic su un URL desktop, l'utente visualizzerà la versione desktop o verrà reindirizzato alla versione mobile della pagina web. Se la versione mobile non esiste, l'utente riceverà un messaggio di errore.
La creazione di un sito Web completamente diverso per gli utenti mobili significa che il sito sarà adattato specificamente per gli utenti mobili. Tuttavia, per raggiungere questo scopo, gli sviluppatori Web devono ritagliare funzionalità e contenuti, che risultano essere un incubo per loro.
Web design reattivo+ Componenti lato server (RESS)
Questo metodo dipende dalla programmazione lato server per fornire HTML e CSS personalizzati per dispositivi diversi. Il codice per gli utenti mobili sarà diverso da quello degli utenti desktop.
L'obiettivo principale di questa implementazione è migliorare le prestazioni del sito web. Questo metodo funziona bene se combinato con un design Web reattivo. Pertanto, questa implementazione può essere definita come Responsive Web Design + componenti lato server (RESS).
Benefici:
- La struttura di navigazione può essere personalizzata per diverse attività eseguite da utenti desktop e mobili.
- Gli sviluppatori possono rimuovere elementi di pagina da HTML e CSS per ottenere la visualizzazione desiderata.
- È possibile rimuovere JavaScript non necessario da HTML, che libera le risorse della CPU, la memoria e la cache dei dispositivi mobili.
svantaggi:
- HTML dinamico aumenta il carico sul server.
- Non è possibile fare affidamento sul rilevamento del dispositivo.
- HTML e CSS sono ottimizzati per le prestazioni mobili. La versione desktop utilizza più richieste HTTP e script Java.
Quale metodo scegliere?
La decisione di progettare un sito ottimizzato per dispositivi mobili dipende dai prodotti che vendi, dal pubblico di destinazione, dall'investimento richiesto, dalla concorrenza, dai tassi di conversione, ecc. Il metodo di progettazione che funziona meglio dipende in gran parte da formati di schermo, sistemi operativi, browser e risoluzioni.
I siti di progettazione Web più reattivi non sono implementati in modo ottimale e, di conseguenza, questi siti richiedono più tempo per essere caricati. Dato che la concorrenza è agguerrita, potresti perdere clienti se il tuo sito ha un rendimento più lento. Un utente passerà semplicemente a un altro sito Web che richiede meno tempo per l'apertura. Sebbene sia possibile creare siti Web con tempi di caricamento più brevi con siti mobili dedicati, esistono anche diversi svantaggi associati a questa implementazione.
RESS offre vantaggi di RWD superando i suoi due principali inconvenienti. Lo svantaggio principale di RESS è che il rilevamento del dispositivo non è affidabile. È necessario testare frequentemente i nuovi dispositivi per garantire che il processo continui a funzionare correttamente.
Esistono servizi come DeviceAtlas, WURFL e altri che possono rilevare nuovi dispositivi. Sarà di grande aiuto aggiornare i nuovi dispositivi nel tuo database.
Il Web design per dispositivi mobili ha successo solo quando un sito Web viene visualizzato correttamente su un dispositivo mobile. Sebbene sia un compito scoraggiante per i progettisti rappresentare tutte le parti essenziali di un sito desktop in una piccola finestra mobile, ogni giorno emergono nuove tecniche per rendere i siti Web mobili migliori, più veloci e più completi.
Foto del sito web mobile tramite Shutterstock
15 commenti ▼
