Autore

CSS3 Media Queries nel Responsive Web Design

Nei nostri articoli precedenti scritti intorno all'attualissimo tema del Responsive Web Design (RWD), abbiamo evidenziato come sia oggi diventato imprescindibile, per gli sviluppatori, non tener conto, nell’implementazione di un progetto web che abbia una qualche velleità di successo, della grande quantità di utenti che utilizzano (ed utilizzeranno sempre più in futuro) per la navigazione in Rete dispositivi mobili quali laptop, tablet smartphone.

A supporto di quanto detto in precedenza, vogliamo aggiungere, questa volta, alcuni numeri e statistiche che serviranno a convincere anche coloro che ancora non hanno (superficialmente ed erroneamente) preso in considerazione le grandi opportunità offerte da questo nuovo scenario:

  • oltre il 60% degli utenti ha un’impressione del marchio migliore con una presenza ottimizzata per il Mobile;
  • le connessioni da dispositivi mobili sono, attualmente, circa 1,2 miliardi (più di 1 persona su 7 sul pianeta);
  • il 10% delle email sono aperte da tablet ed il 26% da smartphone;
  • quasi il 60% degli utenti che accedono al web da dispositivi mobili non è disposto ad attendere oltre i 3 secondi per il caricamento delle singole pagine;
  • il 25% delle ricerche sul web è effettuato da dispositivi mobili;
  • la crescita del mondo “mobile” è estremamente più rapida di quanto non è stata 20 anni fa la diffusione del PC (circa 8 volte più veloce);
  • il 90% dei navigatori utilizza un insieme combinato di device: smartphone, desktop, tablet, smart TV.

Ad oggi, la metodologia che permette ai designer di presentare un sito web in modo differente a seconda della risoluzione del dispositivo di connessione dall’utente (senza prevederne ulteriori versioni dedicate a device mobili) è quella basata sull’utilizzo delle cosiddette "Media Queries", ovvero, dichiarazioni CSS3 che permettono di determinare il tipo di risoluzione con cui l'utente si collega. Una volta, infatti, che il sistema è in grado di riconoscere tale specificità del device di connessione, potrà proporre al visitatore un particolare layout elaborato da un foglio di stile progettato ad hoc per quella risoluzione.

E’ facile comprendere come questo approccio, considerando le statistiche a cui abbiamo fatto sopra accenno, può portare numerosi vantaggi. Consente, infatti, di:

  • migliorare la sua user experience dell’utente; 
  • ridurre la frequenza di rimbalzo (ovvero, la percentuale di visite di una sola pagina compiute senza alcuna interazione);
  • favorire l’aumento del numero medio di pagine viste per singolo utente;
  • aumentare i tempi medi di permanenza sul sito;
  • accrescere le visite al sito da traffico organico (i siti web responsive risultano, infatti, molto graditi anche ai diversi motori di ricerca, Google in primis).

Concludiamo queste riflessioni, confermando che, ad oggi, la compatibilità per il supporto dei CSS3 Media Queries è assicurata su tutti i principali browser sia per desktop (Internet Explorer, Firefox, Google Chrome, Safari, Opera), sia per device di tipo mobile (iOS Safari, Opera Mini, Android Browser, Blackberry Browser, IE Mobile).  

Categoria
Internet & Web Design