Condividi questo articolo
Mobile First

La maggior parte degli utenti che navigano online utilizzano dispositivi mobili come cellulari e tablet. Ecco perché oggi più che mai un blog, come un sito web o un e-commerce deve essere assolutamente responsive.

In modo molto semplice possiamo dire che un sito realizzato con un responsive web design è un sito che modifica autonomamente la grafica al dispositivo dal quale ci si connette, così da semplificare l’utente finale durante la navigazione, consentendo a quest’ultimo di avere una user experience di alto livello permettendogli di visualizzare nel miglior modo possibile il contenuto scritto e fotografico all’interno del sito, senza dover ingrandire i caratteri testuali o muoversi con il dito per rimpiccolire o ingrandire una immagine.

Chi come noi ha iniziato a realizzare i siti web prima dell’avvento del responsive sa bene come improvvisamente (quasi dal giorno alla notte) si è trovato con il proprio sito aziendale o con quelli realizzati per i clienti praticamente a dover, con le dita, ingrandire o ridurre il testo dal display del monitor pena non visualizzare correttamente il contenuto.

Oggi, grazie alle implementazioni e ai nuovi sistemi di programmazione è possibile realizzare un sito web come un e-commerce nella modalità mobile first.

Un esempio? Basta semplicemente navigare nel sito web della nostra web agency Vibobet collegandosi alla homepage cliccando sul link www.webjet.it e navigare nel sito dal pc, dal tablet e dal cellulare.

Come potete vedere la grafica si modifica in automatico in funzione del dispositivo dal quale ci si collega. Ma un vero sito web responsive è anche molto di più.

Provate a fare la stessa operazione da smartphone di marche diverse che hanno la dimensione del display diversa tra loro. Come vedrete i contenuti del sito web si adatteranno alle dimensioni del singolo schermo del cellulare.

Quando si realizza un Sito Web per Dispositivi Mobili, bisogna creare un Sito Reattivo o Adattivo?

siti internet Mobile First

 

Questa è una domanda che molto spesso viene fatta nei forum dedicati alla SEO e al web design ed è la base dalla quale partiamo quando un potenziale cliente si rivolge alla nostra agenzia per realizzare un sito web.

Il 2017 è stato il primo anno nella storia in cui il traffico internet da smartphone e tablet ha superato quello dei dispositivi fissi in tutto il mondo. Forse non sorprende che questa cifra sia aumentata di nuovo nel 2018 e probabilmente continuerà a crescere verso l’alto ancora per qualche anno.

Dal 2018 i motori di ricerca hanno iniziato a indicizzare principalmente le versioni mobili di un sito web e in primis Google penalizza i siti web che non sono compatibili con schermi più piccoli. Di conseguenza, per le aziende è più importante che mai avere un sito web ottimizzato per dispositivi mobili. I due metodi principali di ottimizzazione mobile sono noti come web design reattivo e web design adattivo. Mentre entrambi i metodi hanno lo stesso scopo, le loro implementazioni e risultati possono differire enormemente.

Differenza tra sito Web Reattivo e sito Web Adattivo

Alcuni progetti potrebbero essere più adatti al web design reattivo, mentre altri si adatteranno meglio al web design adattivo. Ma come si confrontano? Fondamentalmente, la differenza tra il web design reattivo e adattivo sta nella fluidità. Se navighiamo il sito web della nostra web agenzia da computer e trasciniamo gli angoli per regolare le dimensioni della finestra, notiamo cosa succede al contenuto della pagina.

Se il testo, le caselle e le immagini si ridimensionano o si spostano in modo fluido mentre diminuiamo le dimensioni della finestra, vuol dire che il design del sito è reattivo. Tuttavia, se nulla cambia fino a raggiungere determinati “punti di salto”, dove tutto si muove improvvisamente insieme, allora il design del sito è adattivo.

Come costruire un Sito Web con un Design Web Reattivo

La nostra agenzia preferisce da sempre realizzare siti web con design reattivo.

Per far ciò andiamo a costruire un layout (lo schema grafico del sito) che si ridimensiona (o aumenta) in modo appropriato in base alla risoluzione del dispositivo attraverso tecniche come query multimediali e programmazione con codice CSS.

Ad esempio, è possibile crearlo in modo che un’immagine su una pagina occupi sempre il 30% della pagina web, indipendentemente dalla larghezza dello schermo, e anche gli altri 70% vengano ridimensionati di conseguenza.

In questo modo siamo sicuri di cogliere tutte le possibilità e di pubblicare una pagina web ottimizzata per ogni singolo dispositivo.

Anche se questo lavoro è lungo ed articolato, perché prevede la realizzazione di tantissimi layout di dimensioni diverse, un fattore importante da tenere a mente è che una volta che un sito web è attivo e funzionante, è molto più facile mantenere un design reattivo che adattivo. Questo perché qualsiasi modifica al contenuto di un sito reattivo deve essere apportata a una sola versione e, se l’implementazione ha avuto esito positivo, le modifiche funzioneranno senza soluzione di continuità in tutte le risoluzioni.

L’aggiornamento di una progettazione adattiva richiede molto più lavoro, poiché è necessario controllare tutte le varie iterazioni del sito per assicurarsi che non si verifichino interruzioni su più layout. Quindi, sebbene all’inizio sia più lavoro, lo sforzo complessivo di una progettazione reattiva è controbilanciato da una minore necessità di manutenzione continua.

Come ottenere il Successo con un Sito Mobile-First

Eccoci arrivati al fattore principale, ossia come essere più visibili e vendere di più online con un sito mobile-first.

Nel marzo 2018 Google ha annunciato di aver iniziato a implementare l’indice mobile-first come predefinito per tutti i nuovi domini. Ciò significa che l’indice di Google è ora principalmente mobile.

Come dicevamo nell’articolo l’ottimizzazione per dispositivi mobili è molto più di un semplice design. È un’intera disciplina progettata per creare siti web da visualizzare su una vasta gamma di dispositivi e risoluzioni dello schermo.

Man mano che l’attenzione di Google si è sempre più concentrata sulle visualizzazioni da dispositivi mobili con il suo indice mobile-first, da qualche anno è diventato quindi fondamentale assicurarsi che tutti i siti siano completamente ottimizzati per la piattaforma mobile.

In caso contrario, è probabile che si perda traffico importante dall’indice di Google mobile-first.

Lo sviluppo su dispositivi mobili richiede una mentalità mobile-first. Un approccio che funziona bene con questa mentalità mobile-first è un approccio top-down. Questo approccio implica una pianificazione estesa nella creazione del sito web nella versione finale. Ogni dettaglio viene accuratamente calcolato e misurato in modo che il il sito mobile non sembri un artefatto appiccicoso di elementi diversi.

Lo sviluppo avviene su una base modulo per modulo con un approccio dall’alto verso il basso che considera tutto l’insieme del progetto dal più piccolo al più grande.

Ecco perché quando si crea un sito web mobile-first bisogna sempre considerare alcuni elementi fondamentali tra i quali

1) Menu Mobili

I menu per dispositivi mobili devono essere intuitivi, tenendo presente il dispositivo più piccolo e non devono corrispondere al 100% alla navigazione sul desktop. Mentre la struttura non cambierà, gli elementi visivi cambieranno e il loro aspetto dipenderà dal tuo dispositivo.

2) Seamless Design

La creazione di un Seamless Design significa creare elementi di design su tutti i dispositivi, indipendentemente dalla piattaforma.

Quando abbiamo elementi di Seamless Design questi non appaiono diversi sulle altre dimensioni dello schermo. Ad esempio, un pulsante rosso sul desktop non verrà visualizzato come pulsante blu su dispositivo mobile, onde evitare confusione all’utente che visualizza il sito web da piattaforme diverse.

3) Andare oltre il Singolo Dispositivo

Quando è stata l’ultima volta che abbiamo visitato un’app mobile, solo per scoprire che il suo processo per completare un’azione era molto più complicato rispetto a farlo dal sito web? Ciò accade quando la supervisione dello sviluppo web mobile si allontana dall’idea originale del sito. Ad esempio se la procedura di pagamento sulla versione mobile del sito è difficile e complicati per gli utenti, possiamo dire addio a quelle conversioni.

4) Semplificare la Navigazione Interna

Una semplice icona che riporta ad esempio alla home page è un ottimo modo per creare un semplice collegamento alla pagina principale del sito. Se non si rende facile ed intuitivo agli utenti il passaggio per tornare alla home page, come andare sulle altre pagine del sito probabilmente abbandoneranno il sito per un altro più semplice e veloce.

Gli utenti di dispositivi mobili non sono programmatori o web designer. Hanno bisogno di aiuto per capire dove sono le cose e le informazioni che cercano.

5) Dimensioni del Testo

Un’altra considerazione in fase di progettazione è la dimensione del testo. Non solo la dimensione del testo degli elementi di navigazione deve essere considerata, ma anche la dimensione del normale contenuto del testo nella pagina è importante.

Senza un testo di qualità a dimensioni leggibili, potremmo perdere i lettori e non essere in grado di comunicare in modo efficace. L’inserimento della giusta dimensione del testo ci permetterà di trattenere i lettori.

Infine i colori. Spesso si guarda più all’estetica che alla praticità e i colori vengono messi in secondo piano.

Il rapporto di contrasto del colore del testo con il fondo è qualcosa a cui bisogna sempre pensare. Quante volte alla luce del sito per la strada o in macchina non riusciamo a leggere cosa c’è scritto in un sito web semplicemente perché il colore del testo mi mescola con gli altri colori, impedendoci la lettura corretta.

Ciò che Google Considera un Dispositivo Mobile

Mobile first design

Un’ultima considerazione lato SEO e quindi fondamentale per far indicizzare un sito web nei motori di ricerca è ciò che raccomanda Google.

Nelle Linee guida per gli sviluppatori Web di Google per i dispositivi mobili viene menzionano quanto segue: “Dispositivi mobili: i dispositivi mobili si riferiscono a smartphone, ad esempio dispositivi con Android, iPhone o Windows Phone. I browser mobili sono simili ai browser desktop in quanto possono eseguire il rendering di un ampio set di specifiche HTML5, sebbene le dimensioni dello schermo siano inferiori e in quasi tutti i casi l’orientamento predefinito sia verticale.

Tablet: consideriamo i tablet come dispositivi della propria classe. Quando ci riferiamo ai dispositivi mobili, generalmente non ci riferiamo ai tablet. I tablet tendono ad avere schermi più grandi, il che significa che, a meno che non offri contenuti ottimizzati per tablet, puoi presumere che gli utenti si aspettino di vedere il tuo sito come apparirebbe su un browser desktop anziché su un browser per smartphone.”

Ecco perché, come dicevamo quando si parla di mobile-first è preferibile perseguire un approccio di design reattivo perché si rivolge a tutti i dispositivi mobili e soddisfa i requisiti di Google per l’ottimizzazione di un sito web per i dispositivi mobili.