Differenza Tra Responsive e Adaptive: Ecco Come Ottimizzare un Sito per Mobile

Il Mobilegeddon ha segnato la svolta. Ottimizzare un sito per mobile non è più una scelta. O stai dentro, o stai fuori. O rispetti le regole di mobile-friendliness di Google, o vieni estromesso dal magico cerchio del posizionamento sui motori di ricerca.

Anche i meno esperti hanno percepito l’esigenza di aggiornarsi. Qualche webmaster era già a posto con la coscienza. Qualcun’altro ha deciso di investire per ottimizzare il proprio sito proprio nell’ultima ora. Altri, infine, non hanno voluto spenderci troppi soldi. Ed è bene ricordarlo.

Da qualche anno a questa parte, per salire sulla giostra degli algoritmi bisogna pagare. Per adattarsi agli aggiornamenti dell’EdgeRank di Facebook e del PageRank di Google bisogna pagare. Su Facebook, perché altrimenti i tuoi contenuti si eclissano. Su Google, perché altrimenti il tuo sito viene penalizzato. Ma Nicola Zamperini ve ne ha già ampiamente parlato su queste pagine, quindi non insisterò.

Torniamo a come ottimizzare un sito per mobile. Esistono strumenti di monitoraggio come Google AdWords e SEMrush che rilevano i flussi di parole chiave su Google. Due delle keyword maggiormente correlate al Mobilegeddon sono le parole responsive e adaptive. Chiariamolo da subito: no, non sono sinonimi.

DIFFERENZA TRA RESPONSIVE E ADAPTIVE

Un sito responsive si presenta in modo differente in base al dispositivo su cui viene visualizzato. Dipende da griglie flessibili, richiede più codice e prevede strategie di implementazione che permettano al sito di modellarsi volta-per-volta allo schermo del dispositivo. Un sito adaptive prevede l’elaborazione a monte di alcuni template che si adattano al device ospitante (desktop, tablet e smartphone per intenderci).

Senza layout responsive.
Senza metatag viewport.

COSA CAMBIA CON IL DOMINIO

Un sito responsive viene fruito su tablet e smartphone con lo stesso dominio della navigazione da desktop. Le pagine devo adattarsi di volta in volta con fluidità, rendendo il loro caricamento più lento. Un sito adaptive viene fruito su tablet e smartphone con un dominio diverso da quello su desktop. Le pagine si adattano alle dimensioni di uno schermo seguendo regole prestabilite, rendendo il loro caricamento più veloce.

COSA CAMBIA CON L’INDICIZZAZIONE

Un sito responsive poggia sullo stesso dominio, quindi il suo potenziale di indicizzazione resta invariato. Passare da un sito non responsive a uno responsive non implica alcun tipo di penalizzazione. Un sito adaptive poggia su domini differenti e il suo potenziale di indicizzazione riparte da zero. Le parallele attività di SEO copywriting e di link building dovranno ricominciare da capo.

COME RENDERE RESPONSIVE UN SITO

Il primo passo è studiare la user experience. Immagina di dover fruire del tuo sito da mobile. Chiediti quali elementi della navigazione da desktop sarà opportuno rimuovere per facilitare la fruizione del tuo sito da tablet e smartphone. Non essere ingordo né sbrigativo, non ha alcun senso progettare un sito che nella navigazione in mobilità offre gli stessi contenuti della navigazione da dispositivo fisso. Togli tutti le sidebar, i footer e i banner che ritieni superflui. Lascia l’essenziale.

Il secondo passo è intervenire sul codice risolvendo i problemi di visualizzazione del tuo sito. Se il layout del tuo sito non è responsive, nella navigazione da mobile tutti gli elementi della tua pagina saranno ridimensionati e l’utente dovrà zoomare sui contenuti per riuscire a leggerli.  Per ovviare a questo problema, inserisci il seguente codice:

Senza layout responsive.
Con metatag viewport.

Il viewport è un metatag che indica al tuo browser come adattare le dimensioni di una pagina. Senza questo metatag, tablet e smartphone assegnano al metatag viewport una larghezza standard di 1.000 pixel. Aggiungere questo codice, ovviamente, non basta a rendere responsive un sito.

Ipotizziamo che tu disponga di un iPhone. Il metatag viewport indica al tuo browser (Safari) di visualizzare la pagina sulla base dei pixel del dispositivo mobile. Il tuo iPhone  visualizzerà  320 pixel della pagina. Dato che la pagina è stata progettata per essere vista su 1.000 pixel, il tuo iPhone bypasserà lo spiacevole effetto visivo di vedere gli elementi ridimensionati ma avrà il problema di vedere solo una porzione effettiva della pagina, dovendo scorrerla in orizzontale. Una scomodità enorme, dato che sia Google che Facebook ci hanno insegnato a usare il pollice per scorrere le pagine dall’alto verso il basso.

Il terzo passo è ricorrere alla funzionalità media query per intervenire sui CSS. I CSS sono i fogli di stile che regolano il tuo sito. Ricorrere alle media query permetterà al tuo sito di adattarsi in base al dispositivo da cui si naviga. Ogni media query corrisponderà a un dispositivo. Considerando che per la navigazione da desktop non c’è bisogno di CSS particolari, dovrai verosimilmente ricorrere a due media query: smartphone e tablet. Ognuna di queste media query dovrà poi essere divisa tra visualizzazione verticale (prioritaria negli smartphone) e orizzontale (prioritaria nei tablet).

Modificando il codice del tuo sito e intervenendo sui CSS renderai responsive il tuo sito. Non solo avrai indicato a smartphone e tablet la viewport ottimale, ma avrai fatto soprattutto corrispondere la viewport al layout del tuo sito. Mentre navighi in mobilità, il tuo iPhone vedrà 320 pixel di pagina così come il tuo iPad ne vedrà 1.024. La pagina non dovrà essere né zoomata né scrollata in orizzontale, perché si adatterà perfettamente ad ambo gli schermi. Missione compiuta.

 Se vuoi ringraziare o insultare l’autore, interagisci con @FedericoSbandi.

Foto: Syda Productions / Shutterstock.com