Progettazione Mobile

In un articolo precedente, abbiamo parlato dello sviluppo di un sito mobile e di tutto quello che c’è da sapere sulla sua costruzione dal backend. Oggi, discuteremo su come progettare un sito web mobile, incluse le terminologie da comprendere per creare un design reattivo.

Non è un segreto che progettare un sito web – mobile o meno – che sarà costantemente visualizzato su più piattaforme non è il compito più semplice al mondo. Tuttavia, avere una comprensione più profonda e attenersi agli standard web vi aiuterà ad essere più vicini ad essere i migliori web designer.

La prima cosa che dovete tenere a mente nella progettazione mobile è che il vostro sito mobile dovrebbe essere progettato in modo che le informazioni che il vostro pubblico vuole non solo è in mostra, ma è sempre facile da raggiungere. In un sito web per dispositivi mobili, lo spazio sullo schermo è limitato. Quindi si vuole essere sicuri che ogni spazio in quello schermo sia pieno di informazioni preziose.

A causa dello spazio limitato dello schermo, non si può avere necessariamente la navigazione completa del sito su ogni pagina. Ciò significa che è necessario assicurarsi che l’architettura delle informazioni del sito sia logica, l’uso della navigazione dovrebbe essere in linea con le esigenze dei visitatori del sito.

Ecco alcuni vantaggi per la progettazione mobile che possono aiutarvi a superare questo dilemma. Guardateli qui sotto:

Norme

Attualmente sono in vigore solo pochi standard per la telefonia mobile. Non è possibile creare contenuti preziosi che possono essere giustamente formattati sulla maggior parte dei telefoni cellulari. Contenuti preziosi come immagini e testi che possono essere visualizzati su un sito web tutto in una volta non è del tutto identico per i telefoni cellulari.

Per creare il layout perfetto per il vostro sito mobile, dovrete passare attraverso una certa quantità di prove ed errori. Si tratta di un processo lungo, ma alla fine ne vale sicuramente la pena. Ricordate, ci sono quasi 3,4 miliardi di telefoni cellulari unici sul mercato di oggi, e continuano a fare nuovi modelli ogni anno. Un buon numero di questi telefoni può essere utilizzato per accedere al web mobile.

Quando state progettando un sito web, assicuratevi di controllare come apparirà sui telefoni cellulari. Vale anche la pena di reclutare contatti con telefoni diversi in modo da poter vedere la differenza nel display per ogni modello.

Design reattivo: Cose da considerare

Quando si crea un sito web reattivo, ricordate che dovrebbe essere progettato per un’ampia gamma di larghezze di schermo. Quando iniziate a pianificare il vostro sito web, assicuratevi di considerare prima la vostra base clienti. Considerate quanto segue:

• Quale percentuale del traffico del vostro sito web proviene da specifici dispositivi mobili? Per esempio, se un gran numero del vostro pubblico utilizza un iPhone, considerate la possibilità di costruire un sito mobile dedicato per questo modello.
• Gli utenti desktop e mobili hanno gli stessi obiettivi? Se i loro obiettivi sono molto diversi tra loro, potrebbe essere una buona idea costruire un sito mobile separato.
• Considerate anche il vostro budget. I siti web reattivi sono più costosi da costruire. Sì, risparmierete denaro nel lungo periodo costruendo un sito web reattivo, ma richiede un investimento iniziale considerevole.
• In quanto tempo ne avete bisogno? Anche in questo caso, i siti web reattivi richiedono più tempo per essere completati. Il design è solo più complicato.
• Avete già un sito web esistente? Se è così, è possibile convertire questo in un sito web reattivo. Oppure, può anche essere ricostruito in uno solo.

Terminologie di design reattivo

Inoltre, ecco tre concetti che è necessario conoscere quando si tratta di una terminologia di progettazione mobile reattiva:

Griglia flessibile

Il design reattivo non è lo stesso dei tipici siti web che sono progettati come un grande, centrato, blocco a larghezza fissa. I siti web reattivi hanno gli elementi della pagina disposti in una griglia di colonne che hanno una spaziatura predefinita. Questi elementi includono l’intestazione, il testo o il corpo, l’immagine principale e altri blocchi delle informazioni visualizzate sul tuo sito web. Ogni elemento di responsive design è proporzionalmente correlato agli altri elementi.

In un sito web reattivo, gli elementi si riorganizzano in relazione tra loro in base a quanto grande o piccolo è lo schermo. A volte, si basa anche sulla qualità dello schermo.

Domande dei media

Si tratta di bit di codice che permettono ad un sito web di chiedere informazioni su se stessi ai dispositivi in uso. La tecnologia di cui disponiamo ora è così intelligente che le richieste dei media sono in grado di farlo, e selezionare automaticamente lo stile del sito web adatto al dispositivo. Chiede informazioni quali le dimensioni della finestra del dispositivo, l’orientamento e la qualità di visualizzazione dello schermo. La media query sceglie da un elenco di stili definiti in un CSS.

Immagini flessibili

Con la griglia flessibile di design reattivo, le immagini sono progettate per muoversi e scalare. Una cosa importante da considerare è la velocità di caricamento del sito web, che consente la disponibilità di immagini di alta qualità per schermi più grandi. Inoltre, le immagini a bassa risoluzione sono disponibili anche per schermi più piccoli.

Ora che avete letto le terminologie, è importante ricordarle e comprenderle appieno. Queste terminologie vi aiuteranno a comunicare meglio con il vostro web designer e web developer.

Ricordate che quando si tratta di pianificare e progettare un sito (mobile o meno), la prima cosa da considerare sono le esigenze del pubblico o dell’utente. Tutto sarà pianificato e progettato in base alle esigenze dell’utente.

La progettazione di un sito mobile va di pari passo con lo sviluppo. Questi due lavorano in tandem in grado di creare la migliore esperienza utente per il vostro pubblico. Ci vuole molto tempo e pazienza per questa operazione.

E’ anche importante passare attraverso la fase di test (fase di prova e di errore), come abbiamo discusso in un precedente articolo, Guida passo-passo alla progettazione UX. Questo vi aiuterà a determinare quali parti del vostro sito funzionano meglio, e quali parti del vostro sito potrebbe vivere senza. Questo processo vi aiuterà anche a determinare quali parti del vostro sito converte il maggior numero di utenti e quali non funzionano per la vostra campagna.

Nel prossimo articolo, vi forniremo una guida passo-passo per costruire un sito web mobile dal punto di vista del cliente.

© Immagine via Steve Johnson