Siti responsive e veloci. Google li ama e vi premia.

A partire dal 21 Aprile 2105 Google favorirà, nei risultati di ricerca, i siti responsive o mobile friendly. Ovvero quei siti che sanno adattare i propri contenuti alla navigazione da dispositivi mobile quali smartphone, tablet e cellulari in genere. Google premierà quindi i siti che sapranno fornire ai propri utenti un’esperienza di navigazione adeguata anche ai dispositivi mobile in quanto secondo le ultime ricerche (Fonte Nielsen 2015) le abitudini di navigazione degli utenti della rete si stanno evolvendo dalla navigazione da desktop a quella da dispositivi mobile secondo caratteristiche che la stessa Google illustra nel suo sito dedicato alla navigazione responsive: Make Your Website Work Across Multiple Devices.

Quali sono le caratteristiche principali dei siti responsive?

Nessuna navigazione orizzontale. Durante la navigazione del vostro sito da un dispositivo mobile non dovrà apparire la fastidiosa barra orizzontale in fondo alla finestra del browser per visualizzare tutti i contenuti della vostra pagina. L’utente dovrà essere in grado di leggere, con un carattere di adeguate dimensioni, tutti i contenuti della vostra home page e delle pagine interne scrollando la pagina solo in verticale senza doversi spostare orizzontalmente. Le vostre sidebar, se presenti, si dovranno leggere dopo o prima dei contenuti. I vostri menu, se disposti orizzontalmente, dovranno essere visualizzati in verticale da una apposita icona o visualizzati su una o più righe.

Contenuti veloci da caricare. La navigazione su reti mobile sia essa su reti 3G, 4G o LTE è meno veloce e performante di una classica connessione domestica in ADSL. I contenuti (immagini, filmati, gallerie) dovranno essere leggeri da scaricare. Via pertanto, almeno nella navigazione mobile, immagini di sfondo o gallerie con immagini di grandi dimensioni. E non solo. Il vostro server dovrà essere in grado di mostrare velocemente i contenuti.
Link distanziati tra loro. Per facilitare la navigazione ed evitare tocchi/click fortuiti o indesiderati i link dovranno essere ben distanti tra di loro.

Dimensione del testo. Sempre nella navigazione mobile gli utenti non dovranno ingrandire i testi di una pagina per poterli leggere. Il contenuto testuale e non del vostro sito dovrà adattarsi automaticamente alla larghezza del dispositivo dello schermo dell’utente. Sia che abbia un tablet o uno smartphone.

Nessun contenuto in formato Flash: i contenuti in Flash non sono leggibili dalla maggior parte dei sistemi operativi per smartphone e sono pesanti da scaricare.

Non è difficile, esistono diversi metodi. Eccone alcuni:

Il metodo più semplice ma anche il più empirico e meno preciso nei risultati è di navigare il vostro sito da uno smartphone o da un tablet. Se i testi sono di piccole dimensioni e dovete ingrandire la schermata per poterli leggere, se i link sono troppo vicini tra di loro o se per visualizzare i contenuti dovete scrollare orizzontalmente lo schermo, il vostro sito non è sicuramente adatto alla navigazione sui cellulari. Il risultato che otterrete non sarà comunque esaustivo poiché il test andrebbe ripetuto su diversi sistemi operativi per smartphone, Android, Apple, Windows, BlackBerry, su diverse tipologie di dispositivi quali smartphone e tablet e con varie risoluzioni dello schermo.

Un metodo migliore e certificato dalla stessa Google per verificare la compatibilità del vostro sito, senza però poter effettuare delle prove di navigazione, lo trovate sulla pagina Test di compatibilità con dispositivi mobili. Basta inserire l’indirizzo del nostro sito nel campo “Inserisci l’URL di una Pagina WEB” e cliccare sul bottone azzurro ANALIZZA.  Al termine del test sarà visualizzata una pagina di risultati. Rammentate di effettuare il test su diverse pagine del sito.

Un ulteriore metodo di verifica che permette questa volta di simulare la navigazione del vostro sito su diversi modelli di cellulari lo fornisce il browser Chrome con Chrome DevTool. Come funziona?

1. Aprite con il browser Chrome il vostro sito e premete il tasto F12 della tastiera. Se non lo avete potete installarlo da questo link.
2. Dalla finestra che si aprirà cliccate sull’icona del telefonino che si trova a fianco alla lente di ingrandimento nella parte superiore della finestra che si è aperta.  (fig 1)
3. Nella sezione superiore a fianco della dicitura DEVICE scegliete  la marca o il tipo di smartphone sul quale volete effettuare il test. Nella finestra del browser verrà simulata la navigazione sul vostro sito per il modello di smartphone o tablet che avete selezionato. Eseguite i test sui modelli più diffusi sul mercato, iPhone, iPad, Samsung Galaxy, Galaxy Tab, Google Nexus.

Nota: nell’analisi della compatibilità di navigazione da mobile non prendete in considerazione unicamente la vostra Home Page ma anche le altre pagine del vostro sito quali quelle dei prodotti, delle categorie, gli articoli, la pagina chi siamo, quella dei contatti. Se se il vostro sito ha un e-commerce simulate anche la navigazione che un vostro utente dovrà effettuare per scegliere ed acquistare un vostro prodotto: ricerca e scelta del prodotto ed eventuale personalizzazione, inserimento nel carrello,  checkout con registrazione e pagamento.

Non solo responsive

Non di solo responsive si vince. Sempre con l’obiettivo di offrire una migliore esperienza di navigazione Google ha annunciato che sempre dal 21 Aprile modificherà il suo algoritmo prediligendo nei risultati di ricerca quei siti che forniranno i contenuti velocemente. Fate un test su questa pagina. Per verificare quanto il vostro sito sia pronto per queste modifiche, sempre Google mette a disposizione una pagina di test dal nome PageSpeed Insights. Inserite l’indirizzo del vostro sito e verificate i risultati.

Sempre il sito di Google sopra menzionato, in caso il vostro sito non abbia superato il test di compatibilità, fornisce diverse soluzioni e strumenti di ulteriore verifica. Soluzioni che non sono comunque nella maggior parte dei casi alla portata di utenti poco “smanettoni”. Le soluzioni indicate vi serviranno comunque per fornire allo sviluppatore che ha realizzato il vostro sito le indicazioni su quali aree intervenire. E dopo l’intervento di aggiornamento di poter verificare personalmente se il risultato è stato raggiunto.

Le soluzioni come accennavo sono diverse e dipendono principalmente con quale strumento (CMS) è realizzato il vostro sito.

Se il vostro sito è realizzato con WordPress o con altri CMS quali Joomla o Drupal avete due frecce al vostro arco.

1. Utilizzare un plugin per adattare i vostri contenuti al mobile. E’ la soluzione più veloce ed a buon mercato ma non è sicuramente quella definitiva in quanto di norma questi plugin stravolgono completamente l’aspetto grafico del vostro sito. Può però essere una soluzione tampone per adattare velocemente i contenuti del vostro sito alla navigazione mobile in attesa di rinnovare la veste grafica e renderlo realmente responsive.
2. Cambiare il tema o aspetto grafico del vostro sito con uno più moderno che si adatti alla navigazione mobile è la soluzione che risolve tutti i problemi. Forse è arrivato il momento di aggiornare l’aspetto del vostro sito ad uno più moderno. Nella scelta dei nuovi temi o template effettuate dei test sui tool forniti da Google. Verificate anche quanto il tema sia adattabile ai vostri attuali contenuti. Pagine, gallerie, immagini, form di contatto etc.

In tutti i casi eseguite prima dei test in locale o su di un sito di sviluppo e quando sarete soddisfatti del risultato mettete tutto on line.

Mentre per ottenere un sito responsive è sufficiente intervenire in una sola direzione, i fattori che influenzano la velocità di risposta sono diversi e non sempre di rapida soluzione. Eccone alcuni che potrebbero rendere il vostro sito lento da caricare:

• Tempo di risposta del server troppo lungo.
• Pagina troppo pesante da caricare o con troppi contenuti.
• Immagini non ottimizzate e quindi troppo pesanti da caricare.
• Codice del sito non ottimizzato

Per verificare la velocità di caricamento delle pagine del vostro sito oltre al già menzionato PageSpeed Insights esistono diversi siti che vi forniranno le risposte oltre ad alcune indicazioni su come porvi rimedio. Indicazioni che potrete passare al vostro sviluppatore. Ecco alcuni servizi on line per verificare la velocità del vostro sito: GTMetrix.com. Pingdom.com e Webpagetest.org

Intervenire in quest’ordine:
Ridurre il peso delle immagini. Una pagina secondo Google non dovrebbe pesare più di 100 Kb. Codice ed immagini incluse. Basta però inserire un’immagine poco più grande della media ed ecco che i 100 KB sono allegramente superati. Come fare? Ottimizzate le vostre immagini in modo che siano le più leggere possibili e ricaricatele sul sito.

Ottimizzate il codice del vostro sito utilizzando un componente che gestisca la cache. Su questo articolo, scritto da Philip Blomsterberg di Intripid, trovate i risultati di un test approfondito per i principali componenti di Cache per WordPress.  E se non ne siete capaci fatelo installare dal vostro sviluppatore.

Aggiornate ed ottimizzate i componenti del vostro sito. Il CMS che utilizzate sia esso Joomla, WordPress o Drupal deve sempre essere aggiornato all’ultima versione disponibile. Ottimizzate anche periodicamente il database del vostro sito.

Utilizzate il minor numero di componenti o plugin possibili. Se avete un sito costruito con WordPress di norma bastano pochi plugin:  Aksimet per filtrare i commenti spam, un buon plugin per le descrizioni dei contenuti e per generare le sitemap ed un plugin di cache. Il resto è generalmente superfluo. Backup ed ottimizzazione del database ad esempio possono tranquillamente essere effettuati con altri strumenti senza appesantire inutilmente la vostra installazione di WordPress o di Joomla.

… e se i risultati non sono ancora all’altezza delle vostre aspettative non resta che cambiare il vostro piano di Hosting. Non è immaginabile pretendere prestazioni sorprendenti pagando 50/100 € l’anno.

Nella realizzazione dei siti dei miei clienti, pur mantenendo un aspetto gradevole, riesco comunque a realizzare e tenere aggiornati i siti con aggiornamenti costanti che tengano conto sia della parte tecnica che di quella legale come ad esempio in materia di Acquisizione di Informativa in materia di Cookies.

Ecco alcuni esempi di siti realizzati per i miei clienti già pronti per il responsive design e per l’informativa sui cookies che potete verificare voi stessi:

• Romantiquariato.it :  https://www.romantiquariato.it/
• Giusymessina.com: https://www.giusymessina.com/
• Sala di Posa a Roma: https://saladiposaroma.it/
• Interprete traduttrice: https://www.interpretetraduttrice.it/