7
shares
Fb
TW
P
G+
Pin to Pinterest
+
Cos'è?

Il tuo sito è pronto per accogliere i visitatori che accedono da un cellulare o pad? Secondo una ricerca di Kelsey Group, nel 2013 oltre il 35% delle ricerche verranno effettuate da dispositivi mobile. La crescita di questi mezzi è esponenziale, e ogni buon webmaster deve adattarsi per ottimizzare l’esperienza dei visitatori su schermi piccoli.

Una volta la tendenza dei monitor per computer era quella di diventare sempre più grandi: dalla risoluzione di 800*600 si è passati alla 1024*768, poi è arrivato il widescreen. Ma il trend si è ribaltato con il primo iPhone e la risoluzione, ormai comune per navigare, di 480 pixel orizzontali.

Le normali regole di layout non si applicano più quando i numeri scendono a questo livello, ed è necessario riprogettare completamente la struttura di un sito per ottimizzare l’esperienza di navigazione. Purtroppo questo va a scontrarsi con il layout classico di un sito web, progettato per ottenere conversioni da un computer normale.

La soluzione può essere quella dei fogli di stile liquidi, che si adattano alla dimensione del dispositivo di visualizzazione. In realtà, queste soluzioni scalano malissimo: non è raro vedere elementi grafici che si compenetrano in un layout liquido. In più, con questo sistema non si possono fare radicali cambiamenti allo stile da una risoluzione all’altra.

analytics-seo-img

Media queries: la soluzione a tutti i problemi mobile

La soluzione sono le media queries. In parole povere, è una tecnica che permette di caricare due fogli di stile diversi a seconda della risoluzione del dispositivo di visualizzazione.

Se decidete di utilizzare media queries, nel vostro codice HTML dovrete inserire qualcosa del genere:

<link rel=”stylesheet” href=”small.css” media=”only screen and (max-width: 480px)” />

<link rel=”stylesheet” href=”big.css” media=”only screen and (min-width:481px)” />

Analizziamo le linee di codice. Come vedete sono molto simili, e si differenziano solo in alcuni parametri. Link, rel e href li conosciamo bene, ma è nell’attributo media che avviene la magia. La prima linea di codice entra in gioco quando lo schermo (screen) che visualizza la pagina ha una risoluzione inferiore a 480 pixel orizzontali (max-width: 480px). Il che equivale a dire tutti gli smartphone. Verrà caricato quindi il foglio di stile small.css, che voi avrete ottimizzato per un accesso dal cellulare.

Appena la risoluzione sale a 481 pixel, la prima linea di codice smette di funzionare. Al suo posto entra la seconda linea, per la quale l’attributo media queries specifica una risoluzione minima di 481 pixel. Con una risoluzione pari o maggiore verrà caricato il foglio di stile big.css, che è quello utilizzato normalmente sul vostro sito.

Come ottimizzare un layout per il mobile

A questo punto non vi resta che creare un nuovo CSS per i visitatori mobile. Questo significa fare il doppio del lavoro in fase di progettazione, ma gli sforzi verranno ampiamente ricompensati. Anche oggi i siti con un codice ottimizzato per gli smartphone sono pochissimi, quindi questo è un ottimo modo per distinguervi dalla massa. Un utente iPhone si ricorderà sicuramente di voi.

Ora resta la domanda: come si ottimizza un sito internet per gli schermi piccoli?

Togliendo tutto quello che non è contenuto principale. La dimensione del monitor non permette di visualizzare più elementi contemporaneamente, quindi bisogna scegliere cosa lasciare e cosa togliere. Sappiamo bene che, anche da un punto di vista SEO, il contenuto è la cosa più importante. È quindi logico rimuovere tutto il resto: via il menu, via l’header, barra di navigazione ridotta ai minimi termini.

Un utente che visualizza il vostro sito dovrà essere immediatamente in grado di di leggere quello che avete scritto senza zoom o scroll vari. Applicando questa semplice tecnica, il vostro sito sarà pronto ad entrare nel futuro della navigazione web.

Ottieni contenuti spettacolari sulla tua email!

Ricevi contenuti utili per la tua attività direttamente sulla tua email!
Nome
Email

Lascia un commento

Ottieni Contenuti Extra!

Ricevi consigli, contenuti e strumenti che ti possono tornare utili per la tua attività!
Nome
Email
Anche io odio lo SPAM! ;-)
Leggi articolo precedente:
8 step per organizzare una campagna di marketing sui social media

Creare il feed RSS del proprio account G+
Google+: creare il feed RSS del profilo

Chiudi