Supporto volontario e collaborativo per Joomla!® in italiano

Il pathway non usabile di Joomla in modalità mobile e le segnalazioni di Google

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
Codice

Da qualche tempo Google invia, attraverso il suo webmaster tool, un messaggio a tutti i siti che non rispettano le regole di utilizzabilità per dispositivi mobili. Tale messaggio è stato inoltrato anche al sito Joomla.it che utilizza Joomla! 3. Nello specifico Google fa presente che un numero ingente di pagine contiene degli elementi troppo vicini tra loro che non consentono un adeguato tocco. Vediamo come risolvere...

messaggio google problema tocco mobile




Per capire meglio di che tipo di errori si tratta effettuiamo un’analisi con Google SpeedPage Insight.

Il risultato dell’esperienza utente è 98/100 e appare chiaro, come possiamo vedere nello screen sottostante, che il problema risiede nel modulo Pathway:

pagine mobile segnalate come non usabili per Google
Vediamo insieme come risolvere in pochi minuti questa problematica e raggiungere i 100/100 del test.

Apriamo il file css del template. Nel caso in cui stessimo usando Protostar apriamo il file templates.css presente nella cartella Templates/protostar/css/.

Cerchiamo la media query che contiene @media (max-width: 480px) { } (se non è presente allora creiamola) e  aggiungiamo al suo interno (tra le parentesi graffe) il seguente codice :

  li {
            line-height: 24px;
            margin-bottom: 14px;
            }
            .breadcrumb> li {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            text-shadow: 0 1px 0 #fff;
            line-height: 28px;
            }
 

Cosa abbiamo fatto:

abbiamo cercato/creato la media query dedicata alle risoluzioni che vanno da 0 a 480px, quindi abbiamo aumentato l’interlinea a tutte le liste, in particolare a quelle del breadcrumb. Nel caso del template Protostar, il test di Google, suggeriva di sistemare anche il modulo di login che presenta una tocco difficoltoso tra la checkbox e gli altri elementi. Per fixare anche questa problematica abbiamo aumentato di 20 pixel il margine inferiore del contenitore “form-login-remember” aggiungendo questa porzione di codice alla media query cercata poco fa:

 
            #form-login-remember {
                        margin-bottom: 20px;
            }
 

 

In conclusione

Potrebbe accadere che lo Speed test evidenzi delle problematiche simili riguardo elementi che non sono stati descritti nella nostra guida, tuttavia la procedura è la medesima:

- posizionarsi nella media query per mobile (@media (max-width: 480px))

- aumentare il margin o il padding agli elementi che risultano troppo attaccati tra loro, oppure aumentare il line-height o l’height degli elementi che non hanno un'adeguata altezza atta a consentire un tocco più agevole.

Attendere poi qualche giorno (o settimana) che lo spider automatico di Google torni ad analizzare le pagine del vostro sito, questo il grafico attuale che indica come le pagine segnalate siano ora in via di risoluzione grazie alle modifiche effettuate:
pagine mobile segnalate come non usabili per Google

Si consiglia inoltre di verificare, sempre da "strumenti per webmaster" di Google, come vengono viste effettivamente le pagine dal motore di ricerca. Andare dal menu "Scansione-->Visualizza come Google" e lanciare "Recupera e visualizza" su tutte le tipologie di dispositivi. Se viene segnalato che alcune risorse non sono disponibile e che quindi non è possibile per Google visualizzare la pagina è consigliato togliere dal robots.txt i riferimenti alle cartelle template e media e tutte le altre cartelle che vengono viste come bloccate per reperire le informazioni per visualizzare correttamente la pagina.
Modificare inoltre le eventuali posizioni banner per farle sparire a basse risoluzioni e far apparire invece a basse risoluzioni posizioni banner con specifici banner più piccoli ed adatti ai dispositivi mobili.


CommentaCommenta questo articolo sul forum

Ho scritto e condiviso questo articolo su Joomla.it, fallo anche tu. Invia ora un nuovo articolo!
Gaetano Miccio
Alcune informazioni su di me:


Ho anche scritto:
         ✔ diventa autore su Joomla.it

Ultima versione di Joomla!®

downloadVer. 3.6.5 Stabile Italiana
Data di rilascio:14 Dicembre 2016
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: