Mobile friendly

Il Mobilegaddon, così è stato soprannominato il nuovo algoritmo di Google lanciato il 21 aprile2015, relativo ai siti mobile friendly.

La classica ansia da serp si rifà sentire in casa di tutti coloro che hanno o gestiscono un sito internet, spesso Google ci mette di fronte a queste migliorie algoritmiche che talvolta stravolgono i risultati di ricerca, con il solito intento, ossia quello di restituire dei risultati ottimizzati ad una user experience ottimale.

Quello che ci accingiamo ad analizzare è appunto relativo ai risultati di ricerca effettuati da mobile, solo quelli, in questi giorni infatti sono apparsi messaggi nei vari forum o community di persone allarmate dal personaggio di turno che prendendo la palla al balzo, millantava che i siti non conformi sarebbero spariti da Google, cosa totalmente falsa.

L’algoritmo analizzarà con il Google bot mobile tutti i siti internet e, a parità di trust farà salire quelli mobile friendly, quelli che restituiranno una navigazione da mobile ottimizzata, senza dover scorrere lo schermo per leggere una frase, senza dover prendere lo stecchino per cliccare su un’icona, insomma è già da novembre 2014 che se ne parla, era stata introdotta proprio in quei giorni la dicitura mobile friendly, proprio per iniziare a differenziare e attirare l’attenzione su questa novità sempre rivolta alla soddisfazione dell’utente e ora è ufficiale che dal giorno 21 aprile il mobile friendly è diventato un vero e proprio fattore di rank, che influirà anche in maniera decisa nel posizionamento, della notizia si è interessato anche IlSole24ore che ha trattato l’argomento.

Come aggiornare il nostro sito alla versione mobile friendly

Per inseguire le dispozioni di Google e non rimanere indietro, dovremmo aggiornarci e adeguarci, anche e soprattutto per soddisfare l’utente che ci cerca e che dovrà navigare il nostro sito, cercando di offrire quante più notizie utili, in modo facile e intuitivo, e visibile da tutti i dispositivi, soprattutto quelli mobile dove in alcuni settori sembrano essere di gran lunga superiori a quelli desktop.

Ci sono anche quì varie scuole di pensiero, proprio qualche giorno fà mi sono imbattuto in una discussione di un cliente che aveva richiesto l’aiuto su una community per adeguare il proprio sito chiedendo le varie modalità di intervento di ognuno per poi decidere a chi affidarsi, e come potete immaginare è uscito fuori di tutto e di più…

Spesso come accade, si tende sempre a orientarsi verso colui che con dei giochi di parole e con il prezzo più basso ci convince di essere il migliore, e noi forse per negligenza forse per incompetenza ci caschiamo, con ripercussioni talvolta devastanti, soprattutto nel nostro settore dove una modifica fatta male può determinare il disastro atomico…

Comunque veniamo a noi, per rendere un tema responsive bisogna andare ad agire su tutti i file .css in modo da regolare il comportamento degli elementi in base alla larghezza della finestra dell’utente, si chiamano media query css, di seguito i suggerimenti da tenere in considerazione:

  • adattare il layout al maggior numero di schermi possibili
  • adattare le dimensioni e il peso delle immagini
  • inserire elementi non indispensabili a scomparsa sui dispositivi mobili
  • realizzare una struttura semplice e intuitiva al touch
  • Definire i breackpoint, ossia delle regole che si generano in base alla grandezza dello schermo, in pratica lo andremo ad istruire dicendogli che se la grandezza è 100 allora mostra questo schema, se la grandezza è 50 allora mostra quest’altro schema… ad ogni breackpoint corrisponde una media query, ad ogni media query vengono descritte le azioni per un solo schermo, es:
 Qui vanno gli stili per il mobile
/* == Media queries (breakpoint) ===== */
/* ———————————–
IPAD PORTRAIT
———————————— */
@media only screen and (min-width: 768px) {
}
/* ———————————–
IPAD LANDSCAPE + NETBOOK
———————————— */
@media only screen and (min-width: 1024px){
/* ———————————–
DESKTOP
———————————— */
@media only screen and (min-width: 1200px){
  • Impostazione del meta tag viewport dove siamo noi a stabilire come dovrà gestirlo istruendolo con questa regola:

<meta name=”viewport” content=”width=device-width, user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0″>

Tenendo conto quindi di queste poche righe di spiegazione dovremmo andare a creare tutta la struttura, considerando prioritario l’aspetto mobile e poi quello desktop, andando a definire le parti essenziali da quelle superflue, e tutte quelle regole che dovranno implementarsi al variare della grandezza dello schermo, unica variabile fondamentale, eseguendo istruzioni tipo questa:

<!– Carica lo slideshow se la finestra è larga più di 768px –>
<script type=”text/javascript”>
 if (document.documentElement.clientWidth >= 768) {
  caricaFlexslider();
}
</script>
<!– Fine caricamento slideshow –>

Altra soluzione, da attuare su cms wordpress o joomla, è quella di scegliere un tema responsive realizzato già con tutte queste caratteristiche implementate .

Ovviamente cambiare un tema è facile da dire e meno da fare, non tanto tecnicamente, quanto proprio nell’andare a sistemare i vari widget nelle posizioni giuste in modo da realizzare un sito quanto più vicino possibile al precedente o alle esigenze di miglioramento del cliente.

Per concludere tengo a precisare che le modalità per rendere il tuo sito mobile friendly sono diverse:

  • c’è la modalità responsive, quella più amata da Google, ma che non genera priorità nella serp rispetto alle altre due, che prevede stessi url e stesso codice html, ma diverso css;
  • la modalità dynamic serving che prevede stessi url ma html diversi, che vengono forniti a seconda della provenienza della richiesta di accesso;
  • terza e ultima modalità è quella di url e html diversi, addirittura possono essere domini, sottodomini o sottocartelle diverse dove con reindirizzamenti ci portano alle pagine esatte, la cosa fondamentale è quella di non dimenticarsi di indicare le correlazioni bidirezionali tra i due siti/sottocartelle/sottodomini, onde evitare la dispersione di rank, facendo intendere a Google la correlazione che c’è tra i due.

Come testare il sito per capire se è mobile friendly

Google stesso ci mette a disposizione alcuni strumenti per verificare se il nostro sito è responsive, o addirittura possiamo testare le singole pagine, potete cliccare per trovare il test di compatibilità con dispositivi mobili, se il risultato è questo vuol dire che siamo in linea, altrimenti dovremmo andare ad agire come descritto.

Test di compatibilità mobile friendly

Un’altra novità proprio di questi giorni, che dimostra anche in questo caso la grande importanza che Google dà al mobile è la modifica, nei risultati di ricerca da mobile,  dell’url che viene sostituita (vedi immagine sotto) con il nome del sito e il persorso del file tramite i breadcrumb, per fornirci con più chiarezza come è strutturato il sito e dove si trova il file restituitoci.

Mobile friendly aggiornamento

Se pensi che questo articolo sia interessante condividilo con i tuoi amici, oppure se hai bisogno di rendere il tuo sito responsive  non esitare

Contattami ora!

approfondimenti

Privacy Policy