Non sorprende che un recente rapporto dell'agenzia delle Nazioni Unite, il Unione internazionale delle telecomunicazioni , ha previsto che ci saranno più abbonamenti mobili sul pianeta rispetto alle persone entro i prossimi 9 mesi. La "rivoluzione degli smartphone" è decisamente su di noi e, come tale, il web design mobile è esploso negli ultimi anni.
Ciò ha significato che gli sviluppatori web devono fare i conti con la progettazione di siti mobili, se vogliono competere e rendere il loro business a prova di futuro. Tenendo questo a mente, ho trovato alcuni suggerimenti importanti per dare agli sviluppatori un punto di partenza, con alcune cose da tenere a mente prima di procedere.
Un rapido sguardo su quanto i dispositivi mobili siano arrivati dall'introduzione dell'iPad confermeranno che la tecnologia mobile è un settore in rapida evoluzione e in continua evoluzione e per questo motivo è opportuno considerare come si può progettare a prova di futuro.
Ciò significa che tenere il passo con le ultime tendenze è fondamentale se si vuole in qualche modo garantire che il sito sarà redditizio tra qualche anno. Il design reattivo è, naturalmente, di gran moda al momento ed è probabile che questo farà parte del tuo piano.
Anche se è sicuro presumere che la maggior parte dei tuoi visitatori disporrà di smartphone, vale la pena considerare che non tutti lo faranno, e quindi potresti aver bisogno di farlo funzionare nel design. Vale la pena ricercare il pubblico di destinazione nelle fasi di pianificazione, in modo da poter fare i conti con i dispositivi comuni utilizzati e con il comportamento degli utenti.
I visitatori del web mobile non accedono necessariamente ai siti Web mentre sono in viaggio e questo è qualcosa da tenere a mente. Spesso, la navigazione mobile viene eseguita durante l'attesa; sul treno, in macchina o anche sul divano di casa.
Ciò significa che abbattere il progetto in modo che sia troppo semplicistico potrebbe essere controproducente. Se si dispone di un sito bare-bones con molto contenuto in termini di contenuto, questo potrebbe essere scoraggiante per il pubblico in quanto il sito non fornisce molto di reale utilizzo e potrebbe essere considerato nient'altro che un banner pubblicitario di grandi dimensioni.
In questi giorni il cellulare viene utilizzato tanto quanto, se non di più, dal desktop per la navigazione in Internet, quindi tenetelo a mente durante il processo di progettazione e assicuratevi che il vostro sito sia facile da usare, ma ricco di contenuti.
Anche l'ottimizzazione dei siti Web mobili è fondamentale, soprattutto per le pagine di destinazione, poiché rappresentano il punto di accesso al sito Web. Ciò significa che un sito web per dispositivi mobili deve essere ottimizzato tenendo conto dell'utente e del motore di ricerca, per offrire un'esperienza di navigazione semplice, testo chiaro, moduli semplici con un solo clic e meta informazioni pertinenti e tag alt.
Le dimensioni dei file devono essere considerate in termini di peso e deve essere incluso un forte invito all'azione nelle pagine di destinazione. Se devi usare i moduli, tienili il più semplice possibile, con il minor numero possibile di campi di input, in modo che l'utente non diventi frustrato e se ne vada.
Lo stesso vale per le azioni; mantienili semplici e usali solo quando necessario. Anche se potrebbe essere bello avere un sistema di navigazione di fantasia, se è inutilizzabile si aspetta un'alta frequenza di rimbalzo.
Dove i pulsanti devono essere utilizzati, assicurati che superino il "test del pollice", nel senso che dovresti essere in grado di premere comodamente un pulsante usando il pollice, senza colpire altri contenuti che potrebbero portare a una pagina indesiderata.
L'ottimizzazione è qualcosa che deve essere considerato quando si costruisce anche un sito Web reattivo. Ultimamente si è molto dibattuto su come il design reattivo stia rallentando il web e se significhi essenzialmente la scomparsa dei siti responsive. Tuttavia, esistono tecniche di caricamento condizionale che possono contribuire ad accelerare un sito per garantire che i dispositivi non scarichino automaticamente la versione desktop completa del sito ogni volta.
Le risorse CSS e JavaScript dovrebbero essere compresse e c'è un sacco di software open source disponibile per aiutare con questo. Per esempio, UglifyJS può essere usato con JavaScript per comprimere il codice e Bussola può essere utilizzato per creare markup più puliti, così come sprite ed estensioni, senza troppi problemi e senza fatica.
Quando si utilizza la progettazione reattiva, una delle cose fondamentali da definire all'inizio sono la griglia e i punti di interruzione. Ancora una volta, ci sono numerosi strumenti online ciò può aiutarti a definire le colonne e la loro larghezza e grondaie.
Alcuni sviluppatori preferiscono impostare i punti di interruzione in base alla risoluzione, ma questa non è la soluzione migliore perché ci sono così tanti dispositivi mobili sul mercato e le risoluzioni cambiano nel tempo.
Ciò significa che i punti di interruzione dovrebbero essere basati sulla progettazione e sul contenuto, piuttosto che sulla risoluzione. Per testare punti di interruzione e griglie, la finestra del browser può essere utilizzata durante il progetto di design per vedere come si comporta il contenuto quando ridimensionato.
Idealmente dovrebbe scorrere in modo naturale e puoi utilizzare tutti i punti di interruzione necessari per raggiungere questo obiettivo.
Non tutti i sistemi operativi mobili sono creati allo stesso modo, come saprai, quindi vale la pena di guardare le linee guida quando si tratta di costruire per Android e iOS, ad esempio, e i browser che possono essere utilizzati su di essi.
Ricorda che gli utenti navigeranno su una varietà di SO e alcuni saranno versioni precedenti, quindi è utile assicurarsi che il sito Web mobile sia compatibile con le versioni precedenti. Qui è utile esaminare l'analisi per il sito principale, se applicabile, in quanto sarai in grado di vedere su quali dispositivi il tuo pubblico accederà al sito.
Naturalmente, l'analisi dei dati dopo il completamento del sito ti aiuterà anche a fare i cambiamenti necessari e ad imparare per il futuro.
Come ormai sappiamo tutti, il contenuto è re del web e quindi è importante pianificare i moduli di contenuto. Il comportamento dei moduli di contenuto dovrà essere definito al fine di garantire che vengano visualizzati come dovrebbero quando l'utente naviga e agisce.
Ciò significa che è necessario esaminare e definire il modo in cui il contenuto viene visualizzato quando si passa da uno schermo desktop a uno mobile per determinare in che modo i moduli verranno impilati e riordinati.
A questo proposito è spesso più facile riuscire davvero a farlo cadere in fase di progettazione. Fai uno schizzo su come prevedi la visualizzazione dei contenuti e poi studia come ciò può essere realizzato.
Tuttavia, cerca di non rimanere troppo bloccato nel definire tutto. Anche se le tue pagine principali avranno bisogno di wireframes, non necessariamente seguirà ogni singola pagina. Creare un set master per dimensioni e orientamento dello schermo dovrebbe essere davvero sufficiente.
Costruisci un prototipo e verifica accuratamente, assicurandoti che tutti gli aspetti funzionino man mano che procedi. È inoltre consigliabile tenere a mente l'utente durante i test, assicurandosi che la navigazione sia semplice e preferibilmente al massimo di tre livelli. Prova a trovare qualcuno che non abbia una mente tecnologica, ma usi dispositivi diversi, per testare il sito.
Il web design mobile è una sfida necessaria per fare i conti con il designer, al fine di offrire un servizio completo al cliente. Come molte cose nella vita, uno degli aspetti più importanti è la pianificazione in modo da avere una chiara idea di come andare avanti.
Una pianificazione efficace e tenendo a mente l'utente aiuterà a superare la maggior parte degli ostacoli che è probabile incontrare, e test approfonditi raccoglieranno il resto. Pensa in modo reattivo, rapido e semplice, con contenuti utili eccellenti e non puoi sbagliare troppo.
Immagine in primo piano / miniatura, immagine web mobile via Shutterstock.