In principio era Responsive Design, ora spazio al Mobile First

(martedì 16 ottobre)

Se, dati Auditel alla mano, il presagio era già nell’aria almeno sette anni fa con la “rivoluzione” del Responsive Web Design, nel 2015 Google ha reso noto che, per la prima volta, il numero di ricerche effettuate da dispositivi mobili risultava maggiore di quelle da computer fissi. 

Dal 2017 Google ha avviato l’indicizzazione Mobile-First per i risultati di ricerca.
Finora i sistemi di scansione, indicizzazione e classificazione dei siti da parte di Google erano pensati per la versione desktop del contenuto di una pagina, non considerando così le tendenze attualizzate.

Da circa due anni il traffico internet globale mobile ha superato decisamente quello desktop: moltissimi siti, soprattutto quelli che forniscono notizie/dati in tempo reale, registrano sempre più accessi da mobile, soddisfacendo in questo modo l’utente in mobilità e, in misura sempre decrescente, da desktop.

Si è assistito in una decade al rapido passaggio attraverso due tecniche “antitetiche”: da ‘Responsive Web Design’ a ‘Mobile First Web Design’. Essere mobile first significa progettare e ottimizzare il percorso dell’utente da smartphone, prima che da desktop.

 

Il mercato online risponde a questa tendenza e prende in considerazione la realizzazione di siti web orientati ai dispositivi mobili. La tendenza ora è quella del Mobile First, cioè partire dalla progettazione su mobile per poi pensare alle risoluzioni più alte, quindi attuare un Responsive Design al contrario.
Se la primaria preoccupazione perciò era di progettare siti che fossero mobile friendly curandone il design e la User experience, ciò ha posto questioni anche per chi si occupa di digital marketing, portando in questo modo a pianificare una customer journey invertendo così il polo di partenza (ora unità mobile e non più desktop), partendo dal presupposto che la fetta più grossa dei visitatori del sito/blog/landing page arriverà da un dispositivo mobile.

Se l’imperativo rimane quello del ‘mobile friendly’ (cioè progettare e ottimizzare il percorso dell’utente da smartphone, prima che da desktop, tramite un design responsive in grado di adattarsi alla visualizzazione su dispositivi con schermi ridotti) in alcuni settori lo status quo è viceversa rimasto invariato: la misura più efficace per muoversi in questo senso è di analizzare la situazione che si sta osservando e conseguentemente adottare strategie basate sulle analisi oggettive.

Se l’approccio Mobile First si configura come una scelta strategica specifica, anche i principi cardine nel campo del web design di conseguenza subiscono dei cambiamenti: il dispositivo mobile viene prima di tutto sia per quanto riguarda la configurazione, sia per quanto riguarda l’usabilità e la performance.

Il Mobile First al posto del Desktop First dunque. Vengono prima create pagine ottimizzate per i dispositivi mobili, poi seguono successive estensioni dei siti per desktop.

Fino ad ora, web designer e programmatori si sono occupati per prima cosa della realizzazione di un sito web per il desktop, immaginando una varietà di funzioni, grafici e possibilità creative, pensate per un monitor grande e per una connessione dati veloce; soltanto in una seconda fase seguiva la pianificazione del sito web per i dispositivi mobili, considerati di conseguenza solo come un’appendice al sito principale.

L’approccio Mobile First ribalta questa visione del lavoro e stabilisce altre priorità. Nella progettazione di una strategia vengono definiti innanzitutto quelli che sono gli aspetti centrali della pagina. Ciò vale non solo per contenuti e foto, ma anche per tutte le funzioni importanti e i moduli. In questa fase della progettazione, il pensiero alla base consiste nel concentrarsi sull’essenziale.

approcciare il mobile first

L’approccio Mobile First in sintesi:

Limitato all’essenziale
La programmazione non richiede troppi sforzi
Performance massime su tutti i dispositivi mobili
Accesso veloce alle informazioni
Design adatto allo schermo dello smartphone
Non più immagini grandi e funzioni inutili
Riduzioni del codice sorgente
Pagine programmate direttamente in HTML (JavaScript non viene usato)

Fondamentale è pianificare una soluzione ottimale per questi dispositivi; solo successivamente verranno ottimizzate versioni per desktop e laptop secondo il principio del Progressive Enhancement. Spesso nella realizzazione della strategia ci si avvale delle cosiddette grid, cioè ad una riorganizzazione concettuale basata sulle griglie. Il passo successivo sarà quello della configurazione di una pagina graduabile a seconda delle dimensioni dello schermo, in modo da presentare i contenuti su tutti i dispositivi seguendo i principi del responsive web design (design responsivo).

Con l’approccio Mobile First chi progetta il sito e le sue funzionalità ha già da subito le idee chiare su quali saranno i contenuti primari e secondari del sito, quindi si adopererà per visualizzare gli elementi importanti nel migliore dei modi.

Sostanzialmente cambierà il modo in cui il più importante motore di ricerca, indicizza e attribuisce il ranking alle pagine del tuo sito. Finora la scoperta e l’ordinamento dei risultati di ricerca in serp avveniva sulla base dell’analisi delle pagine lato desktop, scansionate dal crawler di Google e anche l’attribuzione del ranking avveniva sulla base della versione desktop delle pagine del sito.
Ora invece, cambierà la scoperta e il posizionamento delle pagine, utilizzando la versione mobile delle stesse.

Questa tecnica di approccio si basa su tre parametri interdipendenti: design, contenuti e funnel di conversione che comporta la ottimizzazione di percorsi per chi è in mobilità.
Ora, per il design la progettazione del sito implica ora un’approccio mobile da adattare poi al desktop (contrariamente a prima), badando a non inficiare la velocità di caricamento del sito. Diversamente da una risoluzione desktop ricca di immagini e testi, per un sito ‘mobile first’ è necessario tener conto delle ridotte dimensioni dello schermo e conseguentemente un adattamento dei contenuti. Il funnel – “imbuto” – di conversione fa riferimento a una strategia di marketing per tracciare il percorso che porta l’utente da una leads alla generazione di una conversione.

Secondo questo approccio, non si parte, quindi, da un layout e  funzionalità concepiti per il desktop per poi adattarli al mobile; al contrario, si parte ora dal contesto dei dispositivi mobili per concentrarsi al meglio sui contenuti essenziali.

COME PREPARARSI AL MOBILE-FIRST INDEXING

In un mondo in cui gli utenti navigano sempre più proprio tramite un telefono, introdurre ufficialmente il mobile-first index significa che Google utilizzerà la versione mobile della pagina come la principale su cui effettuare la scansione, l’indicizzazione e la classificazione del contenuto. L’obiettivo di tale cambiamento è quello di permettere agli “utenti mobile” di trovare la migliore opzione disponibile in base a ciò che stanno cercando. Google continuerà ad avere un solo indice, ma nella fase di scansione darà priorità principalmente su un’esperienza mobile.
Finora la scoperta e l’ordinamento dei risultati di ricerca in serp avveniva sulla base dell’analisi delle pagine lato desktop, crawlate per mezzo del bot desktop di Google e anche l’attribuzione del ranking avveniva sulla base della versione desktop delle pagine del sito.
Ora invece, cambierà la scoperta e il posizionamento delle pagine, utilizzando la versione mobile delle pagine.

Per tentare di ottenere buoni risultati in tal senso e fornire la migliore esperienza possibile a chi naviga sul web, webmaster e proprietari di siti web dovranno pertanto utilizzare le pagine ottimizzate per mobile, laddove presenti, come principale punto di riferimento per l’indicizzazione sul motore di ricerca. Ciò non vuol dire però che se un sito desktop è più rilevante per una determinata ricerca, lo si vedrà comunque classificato più in basso delle sue alternative mobili.

Fermo restando che oggi, quando si sviluppa il sito web, una landing page o un qualsiasi contenuto visuale, bisognerebbe tener sempre bene a mente il concetto di “mobile-first” , i siti che potrebbero maggiormente essere interessati da questa variazione nell’indexing sono quelli che utilizzano una versione separata per le loro versioni mobili. Parliamo dunque, degli “m-site” o mobile site con separate url. 

Contro possibili allarmismi, vale la pena notare che Google non sta implementando due indici di ricerca separati per desktop e mobile (come si vociferava tempo fa), ma che sta semplicemente passando dall’indicizzazione delle versioni desktop dei contenuti alle versioni mobile. Il cambiamento al momento non influisce sul ranking: ciò che cambia è il modo in cui i contenuti vengono raccolti, non come viene classificato il contenuto. I siti che non dispongono di una versione mobile continueranno ad essere indicizzati in base a quella desktop.

Google presenterà per primi nei risultati di ricerca i contenuti del sito mobile. Se i crawler non troveranno una versione mobile, sarà inserita nella SERP la versione desktop del contenuto. “Se hai solo un sito desktop, continueremo ad indicizzare il tuo sito desktop, anche se stiamo utilizzando un user agent mobile per visualizzare il tuo sito” – si afferma dal blog di Google. In sostanza, se il sito è responsive non ci dovrebbero essere grandi modifiche da programmare. Certamente Google classificherà i contenuti sulla base dei segnali di ranking e della scansione dei siti effettuata da una visualizzazione mobile. Dunque saranno privilegiati in ogni caso contenuti mobile friendly, come avviene da almeno un anno, rispetto a siti desktop che rendono difficile, in termini di User Experience, la navigazione.

Il Mobile First Index avrà rilevanza sul posizionamento dei contenuti e su tanti aspetti del Web Design e della SEO.

 

 

 

 

 

 

 

Per ottimizzare un sito per il Mobile si hanno 3 opzioni:

  1. responsive website (stesso codice, stesso url, set css che adatta il rendering della pagina alla risoluzione dello schermo);
  2. dynamic serving (stesse url, più template html&css che si adattano alla richiesta del device). Questa potrebbe essere una soluzione ideale nello switch al mobile-first indexing in quanto comporta una riduzione del peso di css e script che lato mobile è inutile avere;
  3. sito separato (url differenti, contenuti differenti, link esterni differenti).

Un sito responsive o che implementa il dynamic serving, non comporta particolari problemi. 

Se invece il sito usa un m.site per presentare i contenuti, gli unici implementazione necessaria  per  far comprendere a Google che si tratta dello stesso sito (seppur tecnicamente sono due, facendo perciò pensare a due indici distinti), sono le annotazioni nel codice che devono permettere di segnalare nella pagina desktop la versione mobile, inserendo:

<link rel=”alternate” media=”only screen and (max-width: 640px)”
 href=”http://m.example.com/page-1″>

e, al tempo stesso, di segnalare, nella rispettiva pagina mobile, il legame con quella desktop, mediante il rel “canonical”.

<link rel=”canonical” href=”http://www.example.com/page-1″>

Occhio al fatto che le annotazioni vanno inserite solo nell’html della pagina o nella sitemap.

Questa è “la base” delle implementazioni che un sito con versione separata per il mobile dovrebbe rispettare.