Il trend che vede crescere il numero di visitatori provenienti da dispositivi mobili è in costante crescita pertanto risulta indispensabile l’ottimizzazione di siti web per smartphone e tablet.

Lo stesso Google, tramite il suo strumenti per webmaster, mette a disposizione un utilità che consente di individuare le pagine non “usabili” su dispositivi mobili.

Correggere i problemi di usabilità su dispositivi mobili è importante sotto un punto di vista SEO (ricerca organica sui motori di ricerca) poiché potrebbero non avere una buon posizionamento.

Gli errori si dividono tipicamente in due fasce:

• Contenuti più grandi rispetto allo schermo
  dove per vedere integralmente le pagine non sia necessario lo scorrimento orizzontale.
• Elementi selezionabili troppo vicini tra loro
  verificare che link e pulsanti siano sufficientemente distanti tra loro.

Generalmente gli errori che non permettono di ottenere una buona fluidità nella navigazione sono dovuti a:

• Dimensioni delle immagini
• Dimensioni delle gallerie d’immagini
• Tabelle

Immagini su WordPress

E’ preferibile scegliere un formato compresso come il jpeg anziché il png, che occupa molto più spazio. Scegliete un limite massimo di larghezza, mantenere le proporzioni usando uno dei tanti tool on line (come Jpeg Optimizer o Compressjpeg) oppure un software di fotoediting (come Photoshop) ed effettuate il ridimensionamento.

Gallerie di immagini

Su WordPress è possibile creare facilmente delle gallerie di immagini. In fase di configurazione è importante scegliere il corretto raggruppamento e dimensioni. E’ consigliabile un raggruppamento a coppie e una dimensione da miniatura.

Le tabelle responsive

Per quanto concerne le tabelle vanno gestite tramite css, impostando una classe e configurando i rispettivi valori su un foglio di stile CSS.

Prima del tag <table> scrivete  <div class=”table-responsive”> mentre dopo il tag </table> digitate </div>.

Adesso sul foglio di stile fate copia-incolla del seguente codice:

/* non obbligatorio, stabilisce la larghezza sotto forma di percentuale del div contenente la tabella */
.table-responsive {width: 70%;}

/* non obbligatorio tuttavia fortemente consigliato per impostare lo stile del bordo */
.table-responsive table {border: #ccc solid 1px;}

/* valori riferiti esclusivamente alle celle della tabella, alcuni di essi sono richiesti*/
.table-responsive table td, .table-responsive table th {min-width: 50px; width: 24%; border: #ccc solid 1px; word-break: break-all; text-align: center; padding: 1%;}

/* imposta un valore massimo di larghezza sotto forma di percentuale per le immagini incluse nella tabella; facoltativo */
.table-responsive table td img {max-width: 98%;}

Quanto detto per immagini e tabelle vale per qualsiasi sito web, indipendentemente dal cms utilizzato.