Con il numero di utenti che navigano sui siti web sui loro dispositivi mobili che supera il numero di navigatori desktop, non c'è da stupirsi che gli imprenditori stiano cercando (come dovrebbero) di adattare i propri siti alla navigazione cellulare. Gli attuali sviluppatori di siti web stanno costruendo siti reattivi fin dall'inizio.
Cos'è esattamente un "sito reattivo"?
Un sito web reattivo è un sito che risponde e si adatta dinamicamente alle diverse risoluzioni dello schermo del monitor del computer e dei dispositivi mobili. Se si riducono le dimensioni della finestra del browser web, il nostro blog cambia forma insieme alla riduzione o all'espansione delle dimensioni del browser. Queste regolazioni automatiche sono rese possibili grazie alla tecnologia CSS3 che permette ai browser web di identificare da quale dispositivo un utente sta navigando e di modificare automaticamente il sito web attualmente visualizzato in base alle proporzioni e alla risoluzione del dispositivo.
E i Mobile Ready Sites o le Apps?
Partiamo dalla fine - Un'applicazione non è una valida alternativa per un sito reattivo, mentre un sito pronto per il mobile potrebbe essere un sostituto adeguato per un sito reattivo in caso di complessità tecnica o di un'esperienza utente intricata.
Building a mobile application is typically an expensive endeavor that not every business can afford. The application will not appear in Google or other search engines’ search results, and chances are usually pretty slim that a visitor to your website will download the application (and return to use it later on).
I siti web pronti per l'uso mobile sono rilevanti per i siti complicati la cui navigazione e l'utilizzo sul desktop sono molto diversi dal modo in cui il sito viene utilizzato sui dispositivi cellulari. Ad esempio, i siti di confronto dei prezzi con molte categorie e filtri offrono di solito agli utenti di dispositivi mobili versioni diverse, più snelle e semplici dei loro siti.
Parliamo di pixel
When building a landing page or website, we need to consider these dimensions in our code, but design should be done based on viewports:
Mobile: da 320px a 480px
Compresse: da 481px a 980px
Desktop: Da 801px a 1200px
Desktop a schermo intero: Da 1201px a 1920px
Inoltre, dobbiamo anche ricordare che sui dispositivi mobili, alcune sezioni dello schermo sono spesso nascoste dietro la barra degli strumenti del browser o i pulsanti nella parte inferiore del browser.
Clicca qui per saperne di più sulla corretta costruzione di pagine reattive utilizzando i viewport.
Credito: developers.google.com
6 Migliori pratiche per creare un sito vincente e di facile utilizzo
Considerando il punto di vista dell'utente
Per cominciare, faremmo bene a tenere in primo piano il fatto che gli utenti mobili si trovano in una "modalità" diversa rispetto alle persone che navigano sul web su un computer. Oltre alla nostra attenzione che, per tutti noi, si deteriora con il passare del tempo, la gente di solito si impegna a navigare sul cellulare in condizioni abbastanza stressanti: al lavoro, a piedi, in conversazione telefonica, in autobus, ecc. Il tempo a disposizione di questi utenti è limitato e quindi cercheranno di ottenere risposte in tempi brevi. Oggi, quando un gran numero di utenti di Internet inizia la ricerca di prodotti o servizi di cui ha bisogno su dispositivi mobili, è di vitale importanza personalizzare il sito web in base alle loro esigenze e ai loro comportamenti, rendendo le informazioni che cercano rapidamente e prontamente disponibili. Qui sotto troverete un'infografica che riassume le ultime tendenze del mcommerce (commercio mobile) e fornisce anche previsioni per il futuro.
Infografica da parte di Invesp
Immagini
Non tutte le immagini che si vedono bene sul desktop sono belle anche sul cellulare. Assicuratevi che le immagini siano scalabili e non vengano tagliate sui dispositivi mobili. Se volete mantenere un design distinto tra desktop e mobile, ma la vostra immagine è troppo dettagliata, considerate la possibilità di scambiare l'immagine.
Testo
I visitatori mobili del vostro sito web non hanno la stessa pazienza o il tempo di leggere grandi blocchi di testo, come ci si potrebbe aspettare da loro quando si visualizza il sito su un browser desktop. I testi per cellulari devono essere concisi e i messaggi devono essere abbreviati. Se la vostra homepage standard contiene una descrizione di tre frasi della vostra azienda o dei vostri prodotti, provate a ridurla a una frase e mezza per cellulari. Inoltre, oltre a sforzarsi di fare in modo che l'attenzione degli utenti non vaghi, causando la chiusura del vostro sito, è importante che la vostra pagina web abbia un bell'aspetto. Visto che lo schermo di un cellulare è sostanzialmente più piccolo, non sovraccaricate i visitatori del vostro sito con testi non necessari.
Navigazione
Creare una barra di navigazione chiara e semplice. Se il vostro sito desktop ha molte pagine nel menu, è molto probabile che non vogliate visualizzare tutte queste pagine nel menu di navigazione mobile. Nel caso di un sito di grandi dimensioni con decine o centinaia di pagine e prodotti, si consiglia di aggiungere un'opzione di ricerca facile da usare.
Il vostro sito è troppo lungo? Potete accorciarlo e separarlo con una serie di sezioni del vostro sito mobile, in più potete rendere la vostra barra di navigazione "appiccicosa" in modo che si muova su e giù con la pagina (sempre visibile).
Chiamata all'azione
In ambienti mobili si dovrebbe provare ad attenersi ad una sola chiamata ad un'azione che si desidera che il "vostro utente" esegua. Evitate di cercare di convincere un utente a iscriversi alla newsletter, comprare un prodotto, lasciare un feedback e condividere il vostro prodotto su Facebook, tutto in una volta. Capite qual è l'azione principale che volete che i vostri utenti eseguano, e concentratevi solo su quell'azione. Per esempio, sul sito mobile di MailChimp, quell'azione è la registrazione gratuita al loro servizio. Questo è l'unico pulsante presentato agli utenti, insieme a testi brevi e succinti.
Aggiunte al sito mobile
Uno dei vantaggi del cellulare è che permette di aggiungere funzioni che aiutano i visitatori del vostro sito web a contattarvi o a raggiungere facilmente il vostro negozio o i vostri uffici.
Aggiungendo il tag "tel:" a qualsiasi numero di telefono del vostro sito, gli utenti potranno chiamare la vostra azienda con un semplice click. Inoltre, è possibile aggiungere un'icona galleggiante del telefono che servirà anche come opzione di composizione rapida.
Un altro esempio è quello di ottenere indicazioni telefoniche per raggiungere il vostro luogo di lavoro. Aggiungendo un'icona Waze al tuo sito, una volta cliccato, aprirai l'applicazione Waze con la tua azienda come destinazione.
Un terzo esempio, è quello di aggiungere un'icona di condivisione (inclusa la condivisione su Whatsapp) alla fine di ogni articolo o post sul tuo sito web.
In sintesi, ogni progetto di sviluppo di un sito web deve tenere conto della reattività e dell'aspetto del sito sui computer (con monitor di dimensioni diverse), sui telefoni cellulari (Iphone e dispositivi Android con una varietà di browser mobili) e su vari browser web (desktop). Oltre alla progettazione di un sito web reattivo, è necessario pianificare in anticipo ciò che apparirà sulla versione mobile del sito, le ottimizzazioni di testo, le immagini e le chiamate all'azione.
