9

Come progettare un sito web mobile

86 Flares 86 Flares ×

Avere un sito web mobile è indispensabile per rafforzare la tua presenza nel mondo di smartphone, tablet e altri dispositivi portatili. Grazie a un sito mobile i potenziali clienti possono trovare il tuo brand fuori casa, ma anche in un contesto domestico dove statistiche recenti confermano che i dispositivi mobili sono molto utilizzati.

come progettare sito

Domanda: perché creare un sito web mobile quando puoi progettare e vendere una app? Creare un’app è più complicato: hai bisogno di un bravo sviluppatore, devi creare diverse versioni dell’app per i numerosi dispositivi, devi pubblicare il risultato negli app store online. E devi aggiornarla con nuove funzionalità.

Con un sito web mobile non hai di questi problemi e puoi affidarti a uno dei tanti servizi online.  Ci sono diverse alternative sul mercato che ti permettono di costruire, progettare, personalizzare, aggiornare e gestire un sito mobile.

Ma devi avere una strategia chiara di ciò che vuoi ottenere, e devi focalizzare gli obiettivi da raggiungere. Ti propongo alcuni consigli base per creare un sito web mobile che sia davvero utile:

  • Pensa alla Velocità - Ricorda che gli utenti sono “mobili”. Questo significa che sono persone in movimento, hanno poco tempo per usare il tuo sito web e hanno bisogno di compiere le operazioni rapidamente, senza troppi passaggi.
  • Non Replicare, Adatta - Non replicare la struttura che usi sul tuo sito desktop. Scegli solo gli elementi importanti per i tuoi clienti e il tuo business, e organizzali in modo che siano facilmente accessibili.
  • Vai Oltre gli Smartphone - Gli smartphone non sono l’unico tipo di telefono cellulare. Molte persone possiedono ancora un normale cellulare dotato di connettività WAP o GPRS. Assicurati che il tuo sito sia visualizzabile anche dai cellulari di vecchia generazione.
  • Consolida il tuo Brand - Utilizza gli stessi colori, font, sfondo e logo che usi sul tuo sito web standard. Fai in modo che i tuoi clienti si sentano subito “a casa”, e che riconoscano subito le caratteristiche del tuo brand.
  • Fatti Trovare - Se hai un business con una sede fisica non dimenticare la mappa, l’indirizzo e un pulsante “click-to-call” per chiamarti con un solo gesto.
  • Utilizza Testi Grandi - Sugli schermi dei dispositivi mobili, di solito, le lettere sono troppo piccole. Utilizza un carattere che sia abbastanza grande e definito, in modo che le persone possano leggere facilmente i tuoi testi.
  • Riduci le tue Immagini - Le immagini fanno la differenza su un sito web ma devono caricarsi velocemente, evitare inutili zoom e adattarsi alla dimensione degli schermi mobili.
  • Struttura una Navigazione Facile - Permetti ai clienti di navigare con un semplice gesto. Evita che debbano ricorrere ai controlli del browser, in modo che il tuo sito occupi sempre tutta l’altezza dello schermo.
  • Sii Interattivo - Utilizza i codici QR o una tecnologia simile per indirizzare i clienti verso offerte speciali, buoni sconto e promozioni in modo da incrementare le vendite.
  • Prova Tutto - Controlla i link, apri i menu, rivedi i testi. Assicurarti che il sito risulti perfettamente visibile sia con lo schermo in verticale (portrait), sia in orizzontale (landscape).

Questo articolo è stato scritto da Daniele Bazzano per My Social Web. Diventa anche tu un guest blogger!

Riccardo Esposito

Ciao! Sono Riccardo Esposito e sono un webwriter freelance. Questo significa che scrivo dall'alba al tramonto: creo articoli per blog, testi per pagine web, landing page, headline e call to action.

9 Comments

  1. d’accordo su tutto, un bel elenco che meriterebbe una infografica :) . Dissento solo su “..e puoi affidarti a uno dei tanti servizi online.”. A meno che tu non mi indichi 5 servizi online veramente di elevato livello, ma che al contempo stia sotto come budget di sviluppo e mantenimento rispetto a farselo o farselo fare ;)

  2. Ciao Niguli, grazie per il tuo commento.

    Se parliamo di servizi ad-free, questi sono i principali,
    per ordine di prezzo mensile:

    http://it.mob.is.it – da €2/mese
    http://www.dudamobile.com/ – da circa €7/mese
    http://www.onbile.com/ – da €9/mese
    http://wapple.net/ – da circa €18/mese (più in ottica B2B)
    http://www.fiddlefly.com/ – da circa €30/mese

    La realtà dei fatti poi è che il prezzo non è l’unica variabile
    da considerare, rispetto all’assumere uno sviluppatore.

    C’è il customer support, la possibilità di fare tutti i cambiamenti
    che vuoi quando vuoi tu, l’hosting, ecc.

    Disclaimer: Io collaboro con mob.is.it :-)

  3. Io, sinceramente, non concordo sul fatto di puntare anche sui cellulari di vecchia generazione, per due motivi:
    1. Presto (nel giro di 2 o 3 anni) questi terminali spariranno quasi del tutto.
    2. Adattare un sito a vecchi dispositivi comporta dei costi aggiuntivi che, a mio avviso, possono essere evitati.

    Per il resto sono in linea di massima d’accordo su tutto. Gran bell’articolo, complimenti. :)

  4. Grazie Riccardo per questo articolo di estrema attualità.

    molto utile la lista puntata, quasi una check-list di primo livello!

    Mi permetto di segnalare un articolo per certi versi complementare dove si trovano spunti sul responsive web design e suggerimenti per alcuni strumenti http://www.mediabeta.com/blog/strumenti-per-il-responsive-web-design/

    Ovviamente la lista di strumenti / servizi non è completa…. se volete completarla siete i benvenuti!

    • Grazie Francesco, è una risorsa utile. E apprezzo soprattutto il discorso che ruota intorno al Responsive Web Design Sketch Sheets: fondamentale! Tu non credi?

  5. Ciao Gianluca, grazie anche a te.

    In realtà, i cellualri di vecchia generazione sono ancora parecchio usati nei Paesi emergenti (Africa, ad esempio), quindi è una fetta di mercato che ancora ritengo non sia utile estromettere del tutto. Poi, chiaramente, dipende dal tuo core business.

    Per i costi dell’adattamento, se usi un CMS mobile, in molti casi questo è un aspetto di cui non devi preoccuparti. Mob.is.it, ad esempio, lo fa in automatico :-)

    Diverso è il caso di uno sviluppatore. Lì il discorso diventa molto più complesso e potrebbe non valerne la spesa a seconda del tuo pubblico.

    Ciao!

  6. Da quando ho scoperto un plugin wordpress che permette di scegliere un tema diverso, quando il sito/blog è visualizzato dagli smartphone, ho ragionato anche io sul fatto di adattare la grafica.
    La grafica che utilizzo l’ho creata io e, spontaneamente, ho seguito vari punti che hai suggerito in questo “decalogo” :)
    Ho dato spazio solo ai post – senza barre laterali che nel blog fanno da contorno e invogliano la navigazione e l’esplorazione (ma quando qualcuno visita un blog dal telefono o da un tab, è anche possibile che conosca il tuo sito e sia lì proprio per aggiornarsi un po’, cerca qualcosa di preciso o magari solo gli ultimi aggiornamenti) – e ad una serie di metodi di ricerca ed esplorazione inseriti sotto la lista degli ultimi articoli: lista dei tag, motore di ricerca e archivio per mesi, giusto per dare la possibilità di muoversi un po’ all’interno, ma senza dare troppa importanza alla cosa.
    Ho scelto di riadattare la grafica che ho sul blog, cambiando un po’ le misure e sistemando tutto in funzione di uno schermo meno grande e l’ho sistemato andando a navigare il blog sul mio telefono stesso.
    Il suggerimento legato al “controlla i link, vedi se è tutto ok, naviga il sito per vedere se è comodo” lo trovo quello più giusto, infatti è un’altra di quelle cose che ho fatto spontaneamente per capire l’impatto immediato su chi mi avrebbe visitata da telefonino :)

    In poche parole, trovo i tuoi consigli assolutamente interessanti e mirati, c’è il buon senso dietro e, come sempre, è l’unica cosa cui affidarsi ;)

  7. Ciao Cinzia,
    grazie mille per i complimenti.

    Ho dato un’occhiata al tuo sito e vedo che hai fatto davvero un buon lavoro!

    Mi permetto solo di darti due consigli al volo:
    - allargalo in modo da sfruttare tutta l’ampiezza dello schermo.
    - rendi il menù in cima più fruibile disponendo un link per riga e ingrandendo il carattere.

    Ciao!

  8. Sulla larghezza ho sempre paura di esagerare…
    Io che uso un 16:9 sono comodissima, ma qualcuno che invece ha ancora un monitor con diversa risoluzione potrebbe trovare scomodo usare lo scroll orizzontale, anche se comunque la larghezza da me scelta non va incontro a delle precise misure, ho cercato di fare ad occhio :)
    Il menu in alto è partito così, un po’ nascosto, perché i contenuti del blog sono tutti nei post e non sulle pagine. Ero partita con un semplice CHI SONO, come pagina, in cui c’erano scritte 3 righe su di me e l’indirizzo e-mail ma oggi, con quell’ampia descrizione che contiene i link ai post in cui ho attraversato le varie fasi che racconto, e l’aggiunta della galleria e dello shop, dovrei iniziare a considerare il consiglio che mi hai dato qui in proposito.
    Ci penserò, grazie di essere passato a trovarmi ^_^
    Cinzia

Leave a Reply

Your email address will not be published. Required fields are marked *