SeoTrek

Padova

Responsive Web Design: ottimizzazione per i dispositivi Mobile

[11 Ottobre 2016]

[Non sai come adattare il tuo sito ai dispositivi MOBILE?]
Ecco la SOLUZIONE prefertita da GOOGLE + in REGALO il modello di CSS RESPONSIVE WEB DESIGN che puoi già utilizzare!

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, ragazzi... 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?

Beh, questa oltre ad essere la modalità migliore, è 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!

Smartphone screen size

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!

Internet Explorer, questo... guastafeste!

I vari browser differiscono nel loro motore e quindi nel modo che hanno di visualizzare le pagine web.

Best browsers

Queste differenze sono quasi sempre minime, ma vanno comunque considerate da un buon sviluppatore web.

I nostri siti sono sempre testati con i 5 browser principali (Chrome, Firefox, IE, Opera, Safari) in modo che le pagine siano identiche per ogni navigatore.

Ma come detto, queste differenze sono minime, e quindi in quasi tutti i casi abbiamo lo stesso risultato per tutti i browser.

Per tutti... tranne uno! Internet Explorer!

Premetto che al contrario di tanti anticonformisti (che spesso sono contrari a... quasi tutto!) non ho nulla contro Microsoft!

Anzi ritengo che grazie a questa azienda la nostra vita è cambiata in meglio, e senza Windows, Office e altri loro prodotti, molti di noi (soprattutto i non informatici!) non starebbero facendo quello che stanno facendo ora!

Ma sono rimasto molto colpito di come un'azienda leader mondiale come loro abbia un browser come Internet Explorer, così inferiore rispetto agli altri!
Adesso qualcuno di voi farà il figo:

Eh, certo... Io uso Firefox da una vita, perchè IE fa schifo...

Si, certo... Uno che naviga riesce a vedere qualche imperfezione o differenza tra IE e gli altri. Qualche piccola scocciatura e scomodità che gli fa preferire qualche altro browser.
Poi adesso va di moda quello di Google perchè è Google, etc...

Nuotatore

Ma navigando il gap non è proprio così evidente! Diciamo che è come uno che in finale arriva sesto a 20 centesimi dietro a Bolt!
Invece è agli sviluppatori web che risulta imbarazzante la differenza tra IE e gli atri!

Qui Explorer si comporta come il nuotatore con la panza che alle olimpiadi arriva 15 secondi dietro al penultimo nelle batterie di qualificazione!

Molte cose non sono supportate, e molte altre sono visualizzate in maniera totalmente differente! Costringe chi sviluppa a veri e propri artifici e... salti mortali!

C'è da dire... che dalla versione IE 11, in effetti è stato fatto un... drastico salto per colmare questo gap, e con esso molti problemi delle versioni precedenti ora non ci sono più.

Speriamo questa sia la tendenza che terrà Microsoft per il futuro, visto anche l'uso dei CSS sempre più massiccio, in modo da arrivare perlomeno... al livello degli altri!

Per il Responsive Web Design...

... però, almeno fino alla versione 10 di IE, c'è un grosso problema!
Infatti... IE non supporta la sintassi della rules media, per la suddivisione delle regole per dispositivo descritta sopra!

Con un CSS del genere, il browser Internet Explorer riuscirebbe ad interpretare solo il codice in comune (non racchiuso tra le parentesi delle suddivisioni), e quindi ci troveremmo con una pagina html QUASI SENZA STILI, e con solo il testo!

E allora come posso fare? Dico ai miei clienti di non usare IE???

Stai buono, che adesso te lo spiego come ovviare a questa sch... ehm.. scocciatura!

Beh, non viene supportata la sintassi tra parentesi... Quindi dovremmo mettere tutte le regole, solo per IE, senza parentesi!

Nel caso più semplice basterà fare un copia-incolla di tutto il codice previsto per i dispositivi desktop-pc.

E dove lo incolleremo?

Andrà messo all'inizio del file!

Questo perchè gli altri browser lo vedranno, ma poi vedranno anche il codice suddiviso per dispositivo, e considereranno quello, dato che per righe di codice uguali, conta l'ultimo codice letto!

L'unico browser che lo considererà sarà quindi solo IE (dalla versione 10 in giù..)

Detto questo, possiamo completare lo schema del nostro CSS:

/* Regole per IE10 o inferiore: in genere le stesse della suddivisione per desktop-PC */
...

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

...

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

/* Regole CSS in comune */
...
 

Infine... Omaggio della casa!

Un piccolo ma utile regalo, soprattutto se non hai seguito tanto la spiegazione sopra!

Ti do direttamente il layout di CSS già pronto in modalità Responsive Web Design con le suddivisioni per i vari dispositivi, che potrai subito utilizzare per sviluppare la tua pagina web, inserendo le regole CSS opportune!

Inserisci la tua E-mail e riceverai automaticamente il link al file CSS!
I tuoi dati saranno assolutamente protetti, e serviranno solo ad inviarti qualche altra utile news come questa. Ovviamente in ogni momento potrai cancellare i tuoi dati.

 
Scarica il template CSS
  

Se invece 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,

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

 

SeoTrek - Padova Milano Bologna Treviso Venezia Verona Vicenza
via Da Noli, 12, 35138 Padova, Italia
Phone: +39 349.8746643

E-mail: assistenza@seotrek.it - C:F:FRSNDR70R06G224L

Copyright © 2016 - SeoTrek - Padova

Produced by: SeoTrek - Padova

 

Condividi su Facebook
Condividi su Google Plus
Condividi su Linkedin
Condividi su Facebook Condividi su Google Plus Condividi su Linkedin Condividi su WhatsApp
Scrivi! Chiama! Whatsapp!
Chiama! +39 349.8746643          Scrivi! assistenza@seotrek.it
Torna a inizio pagina