4
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

    2 Comments

  1. Grace

    Ciao Michele,
    grazie per questo post. Sto cercando, da autodidatta, di rendere il mio sito visibile dai dispositivi mobili, ma le dritte soluzioni che ho trovato finora non mi hanno consentito di ottenere buoni risultati. Ho inserito un meta tag, come suggeriscono gli sviluppatori di google, ma non tutti gli elementi delle pagine vengono ridimensionati: le foto e le immagini restano uguali, posizionate al centro, vari elementi vengono accorpati in modo approssimativo e neppure la dimensione complessiva della pagina viene scalata. La soluzione che suggerisci tu sembra più efficace, ma vorrei avere qualche chiarimento, se possibile, perché non so se ho capito tutto nel modo giusto: bisogna creare due versioni per ogni pagina del sito (foglio di stile = pagina del sito?), caricarle entrambe, riportando nel codice di entrambe le due stringhe che suggerisci?
    E vanno posizionate in un punto specifico del codice di ogni pagina?
    Inoltre, progettando le pagine destinate alla visualizzazione tramite dispositivo mobile, bisogna ridimensionare tutte le foto e le immagini che non stiano entro i 480 pixel? mi sa di sì, vero?
    Grazie mille per l’aiuto che vorrai darmi :-)
    Grace

Lascia un tuo parere!

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