SeoTrek

Padova

Torna alle News

Responsive Web Design: ottimizzazione per i dispositivi Mobile

Name: SeoTrek - Padova
Address: via Da Noli, 12, Padova, 35138, IT
Telephone: +39 3498746643

[Non sai come adattare il tuo sito ai dispositivi MOBILE?]
Ecco la SOLUZIONE prefertita da GOOGLE!

Hai aperto la pagina del tuo sito col cellulare e ti sei accorto che a momenti non vedi nemmeno le immagini?
Eh... non maledirti! C'è perfino chi non ci ha mai pensato, e non ha mai visto il proprio sito su uno smartphone!

Ma come? Al giorno d'oggi? Dove nell'ultimo anno il numero di smartphone venduti ha superato di 12 volte i PC venduti???

Mobile VS Desktop

Dai... Non sapere che il tuo sito verrà visto più probabilmente con un dispositivo mobile piuttosto che con un pc, è un reato penale, punibile con la gogna!

Pensa che da novembre 2014 Google ha iniziato ad "etichettare" i siti mobile-friendly all'interno di alcuni risultati delle ricerche effettuate tramite smartphone.

Ed è noto da tempo che la compatibilità mobile è un fattore fondamentale per il ranking, e lo sarà sempre di più!

Vabbè, ormai il danno è fatto... Come rimediare?

L'obiettivo è quello di creare una "versione" del sito che in tutti i dispositivi mobile sia:

1. Visibile chiaramente, in ogni sua parte (testo, immagini..)

2. Usabile: sia facilitata ogni azione, dalla scrittura di form ai pulsanti

3. Accessibile: si riesca ad accedervi agevolmente anche con connessioni internet deboli

Tre punti tutti necessari, non puoi trascurarne nemmeno uno!
I motivi sono evidenti a chiunque (giusto???...), e quindi non mi dilungo.
Io ne aggiungerei un quarto:

4. Preservare l'ottimizzazione per la SEO e per il posizionamento nei motori di ricerca

Come fare?

Ci sono sostanzialmente tre vie di ottimizzazione per i dispositivi mobile, come indica anche la guida sviluppatori di Google:

1. URL separati

Già il titolo fa storcere un po' il naso...
In pratica si prevedono due o più pagine HTML (e CSS) diverse, una per ogni tipologia di dispositivo.

La publicazione avverrebbe quindi con URL diversi, come ad esempio www.miosito.it e m.miosito.it: vengono aggiunti opportuni tag link nelle pagine dove viene specificato il loro "target" di dispositivo, e vengono impostati i reindirizzamenti (html o javascript).

Non tanto altro da dire, se non che questa modalità è scomoda e la più soggetta a errori di testo e di pagina, avendo due codici diversi, e poi è il modo di ottimizzazione per mobile che Google... predilige meno!

Quindi, senza ombra di dubbio... pollice verso! ...E voltiamo pagina!

2. Pubblicazione dinamica

Anche in questo caso ci sono due pagine html (e css) diverse per lo stesso url, ed è il server, tramite opportuna configurazione, che gestisce le richieste a seconda del dispositivo che richiede la pagina.

Oltre alle consuete... scomodità per avere due codici differenti, qui c'è una difficoltà maggiore per lo sviluppatore a causa della gestione lato server. Inoltre bisogna prevedere opportuni artifici per permettere ai googlebot di scansionare correttamente la pagina anche per gli smartphone e simili.

Anche qui Google fa le smorfie, e allora... niente, passiamo oltre!

3. Responsive Web Design

In questa configurazione c'è un unico codice HTML, ed è il codice CSS che si preoccupa di modificare il rendering delle pagine sui vari dispositivi dove viene richiesto.
I robot di Google rilevano automaticamente questo tipo di configurazione. Non c'è bisogno quindi di impostazioni aggiuntive.

Responsive Web Design

Questa è nettamente la modalità che Google predilige!
Gli sviluppatori che scrivono e pubblicano le pagine hanno il compito estremamente facilitato: si devono solo occupare del testo inserito.

Bene! Abbiamo trovato la modalità di ottimizzazione del nostro sito per il mobile: il Responsive Web Design!

Come lo implementiamo?

Oltre ad essere la modalità migliore, questa è sicuramente anche la più semplice tra le tre. Vediamo perchè...

HTML

La parte HTML è unica per tutte le configurazioni!

Questo, se non l'hai ancora focalizzato, è un enorme vantaggio! Permette infatti, una volta impostato il CSS in maniera Responsive Web Design in fase di sviluppo, di non preoccuparsi più dell'adattamento del sito a mobile!

Chi deve pubblicare nuove pagine ha il compito semplificato al massimo, potendosi occupare solamente di quello che scrive!

L'unica cosa da fare nella pagina HTML, è inserire all'interno del tag <head> la seguente stringa:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Poi tutto il resto verrà impostato nel file CSS!

CSS

Un file CSS ordinario è un insieme di regole che determinano la struttura e il layout delle pagine html.

La sintassi e le regole per gestire le pagine si imparano facilmente e permettono di avere... un potere straordinario per costruire quello che vogliamo a seconda delle esigenze!
Se non conosci il CSS... provalo e vedrai!!

Detto questo, vediamo come impostarlo per il Responsive Web Design.

In sostanza dobbiamo suddividerlo in più parti, una per ogni tipologia di dispositivo che vogliamo impostare.
Alla fine metteremo le regole in comune per tutte le tipologie, cioè quelle che non cambiano da un dispositivo all'altro.
Riassumendo:

/* Regole CSS per dispositivo 1 (Es: smartphone, etc...) */

		   ...

		   

		   ...

		   

		   /* Regole CSS per dispositivo N (Es: desktop...) */

		   ...

		   

		   /* Regole CSS in comune */

		   ...

Come si fa a suddividere questi gruppi di regole?
Beh, il codice è molto semplice: le regole vanno inserite all'interno della rules media, con la seguente sintassi:

@media only screen and (min-width: 481px) and (max-width: 768px) {

		   ...

		   }

Il significato è facilmente interpretabile:

only screen specifica solo per gli schermi. Altre modalità sono ad esempio print, TV, oppure all per tutte le modalità.
min-width e max-width danno la dimensione del dispositivo. I valori specificati sopra, ad esempio, sono tipici dei tablet. Può essere specificata anche solo una dimensione.

Si possono specificare anche altri parametri, ma nel nostro caso non servono.
In caso per questi ti rimando alla letteratura in rete.

Quali sono i range di pixel per i vari dispositivi?

Ci sono varie suddivisioni, scegli quella che vuoi.
Riporto una delle tante, da wikipedia:

320 pixel: cellulari con schermi piccoli, con orientamento verticale (portrait)

480 pixel: cellulari con schermi piccoli, con orientamento orizzontale (landscape)

600 pixel: tablet di piccole dimensioni, come Kindle di Amazon (600x800) e Nook di Barnes&Noble (600x1024), ad orientamento verticale

768 pixel: tablet più grandi, come l'iPad (768x1024), con orientamento verticale

1024 pixel: computer desktop, fissi o portatili e tablet come l'iPad (1024x768), con orientamento orizzontale

1200 pixel: PC con schermi larghi, tipicamente fissi ma anche alcuni portatili

Queste tipologie si possono ricondurre a quattro principali:

mobile: per cellulari

narrow: per tablet

normal: computer fisso o portatile

wide: schermi di grandi dimensioni

All'interno delle varie zone specificheremo le regole inerenti al dispositivo.
Ad esempio negli smartphone ingrandiremo il carattere di testo, sposteremo (o nasconderemo..) i banner delle collonne laterali. Nei pc e desktop imposteremo una determinata larghezza di layout o metteremo un top menu orizzantale, etc...

Le regole CSS in comune non necessitano di essere incluse in nessun tipo di sintassi a parentesi, e vanno messe alla fine.

I vari dispositivi rileveranno automaticamente dal CSS le proprie rules che definiranno la struttura della pagina.
La stessa pagina sul tuo smartphone potrà essere totalmente diversa se vista sul tuo portatile.

Provando e sperimentando riuscirai facilmente ad ottenere architetture molto varie e adattate a qualsiasi esigenza!

Non mi dilungo su regole e metodologie CSS varie. La rete è piena di tutorial per questo..
L'unico suggerimento che mi sento di dare è di usare per i dispositivi mobile le dimensioni in percentuale anzichè in pixel.

Questo perchè gli smartphone al giorno d'oggi come sappiamo hanno dimensioni spesso diverse tra loro (generalmente dai 3.5 pollici ai 6), e quindi specificando in maniera rigida le dimensioni in pixel, i layout si vedrebbero spesso in maniera non corretta!

Se vuoi saperne di più o ti interessa sviluppare il tuo sito in modalità Responsive Web Design, fortemente orientato al SEO e al posizionamento nei motori di ricerca,

Contattaci

E se ti è piaciuto l'articolo di questa pagina, Condividila sui social!