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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
La redazione di WebJet.it è formata da un team di esperti SEO e marketer, appassionati di gambling e nicchie competitive. Scriviamo approfondimenti, guide e news di settore, come spunti e strumenti formativi utili per chi ci legge.
5 Strategie di Marketing per Promuovere un Gioco Responsabile
Anche se il gioco d’azzardo è un’attività molto discussa e vietata in diversi paesi, è ancora ben presente a livello globale sotto varie forme tra cui il gioco online, sicuramente la branca più popolare ed apprezzata negli ultimi tempi. L’industria del gioco d’azzardo, un mercato da sempre in forte crescita, sa che nessun business può […]
Migliorare la propria Brand Awareness con Alcuni Trucchi
Creare, far crescere e migliorare la propria Brand Awareness, ossia la consapevolezza del brand, è parte integrante di ogni strategia di marketing di successo. Per coloro che non conoscono questo termine la Brand Awareness rappresenta la familiarità che il pubblico di riferimento ha con un brand e quanto bene lo conosce e riconosce. Ecco perché […]
Più del 60% delle Ricerche su Google porta a Zero Click
Più del 60% delle ricerche su Google porta a Zero Click, ma pochi lo sanno. Per anni, la Search Engine Optimization (o SEO) è stata un fattore fondamentale per il successo digitale per i brand e tutte le attività online. Il semplice concetto che ancor oggi si “nasconde” dietro la SEO, ossia aumentare il ranking […]