Siti responsive: L'importanza della compatibilità con il mobile.

Rendi il tuo sito web responsive è dai maggiore accessibilità ai tuoi utenti.

Come nasce il responsive web design.

In questi ultimi anni l'uso di internet tramite dispositi mobile è cresciuto in modo esponenziale, questo a fatto si che molti web designer si sono dovuti adeguare, studiando il così detto "responsive design", in modo da soddisfare i loro utenti per una migliore esperianza su tutti i dispositivi mobile.
I siti responsive quindi non sono altro che un adeguamento del sito desktop utilizzando dei layout fluidi o a griglie con regole CSS @media. 

Responsività ecco come crearla!

Se hai l'esigenza di adattare il tuo sito web per tutti i dispositivi ti posso consigliare uno degli strumenti migliori che puoi trovare sul web per la creazione di pagine web responsive, il framework HTML, CSS e JAVASCRIPT in oggetto è Bootstrap il più utilizzato a livello professionale dai web designer per creare template responsive, la sua grande forza è nel "Grid System" o sistema a griglia, infatti grazie a delle classi CSS responsive utilizando le media queries al suo interno ci basta veramente poco per adattare un qualsiasi elemento della nostra pagina web per ogni dispositivo.
Ecco un piccolo esempio:

Layout su 2 colonne: In questo esempio ho inserito le classi in modo che il layout sia sempre su 2 colonne per tutti i dispositivi.

 

 

Layout su 4 colonne: in questo esempio ho inserito invece le classi desktop e tablet disposti su 4 colonne mentre tutti i dispositivi mobile su una colonna

 

 

 

Ecco alcuni esempi di media queries

Se non vogliamo utilizzare un framework allora possiamo, con poche righe di css, creare delle regole per ogni dispositivo mobile rendendo il nostro sito responsivo. 

@media screen and (min-width: 480px) { 
body { background: yellow; } 
} 

@media screen and (min-width: 768px) { 
body { background: green; } 
} 

@media screen and (min-width: 1024px) { 
body { background: blue; } 
} 

@media screen and (min-width: 1200px) { 
body { background: gray; 
}  

Utilizzando la media querie "@media screen and (min-width: 480px)" stiamo dicendo al browser che partendo da una larghezza minima di 480px verra applicata la regola  "body { background: yellow; }" questa regola vale per tutti i dispositivi che non superano la larghezza di 768 da quel punto in poi si applicherà la media querie @media screen and (min-width: 768px) che sovrascriverà la regola body { background: green; }. 
La dinamica è molto semplice utilizzando il sistema a cascata Cascading Style Sheets (CSS) andiamo a definire dei breakpoint per i diversi dispositivi e quindi riscrivere le regole di layout dei nostri siti web.

Responsive VS SEO

Il fatto di possedere una versione mobile del tuo sito web è molto importante ai fini del tuo posizionamento, Google ha infatti confermato che questo è un importante fattore di ranking.
Le Statistiche dimostrano come la tendenza a fare ricerche su web tramite il telefono cellulare o il tablet, sia cresciuta considerevolmente, rispetto all'uso del pc negli ultimi anni. Se prima il computer veniva utilizzato per gli usi più disparati come giocare, ascoltare musica, condividere foto, chattare e lavorare...beh, adesso non è più così, o almeno non solo.

Secondo lo studio, le ricerche da desktop sono passate infatti, dal 73% del 2013 al 66% del 2014, mentre le ricerche da smartphone sono passate dal 25% del 2012 al 34% del 2013, fino al 42% nel 2014. Se la tendenza non subirà variazioni sostanziali, le ricerche da mobile supereranno quelle da desktop definitivamente, ed anche nel breve periodo.

Corri ai ripari! Implementa il Responsive

Possedere quindi una versione mobile del tuo sito è diventata una assoluta priorità. Infatti da qualche tempo Google fa comparire una scritta “mobile friendly” quando si effettua una ricerca affianco ai siti compatibili con questa funzione.
Un sito adatto al mobile permetterà agli utenti di non perdere tempo, nel "zoommare" l'immagine o il testo che gli interessa, diventando, un sito scorrevole come la versione di facebook sul cellulare, per intenderci, ovvero, composto da un layout del tipo: titolo, testo, foto, testo.

Inoltre dovrà essere graficamente leggero per ridurre i tempi di caricamento. Gli utenti infatti, nella ricerca di informazioni, tendono sempre a preferire siti più navigabili e leggeri, sia se utilizzano il pc che il telefono, desiderano cioè un un sito che nasce già progettato appositamente per i dispositivi mobili.

Per verificare se il tuo sito è già compatibile con i dispositivi mobili controlla i risultati tramite il test mobile friendly di google con il tool PageSpeed, il quale ti indicherà come il tuo sito gira sui dispositivi mobili.
La funzione principale del tool GTMetrix è quello di valutare la velocità di caricamento del tuo sito e di fornire indicazioni tecniche per migliorarla.
Come ben sai la velocità di caricamento del tuo sito e di navigazione all'interno è importante per far si che l'utente navighi senza intoppi sul tuo sito e non si infastidisca per la lentezza.

Come ho già detto in qualche articolo precedente, l'utente del web non ama perdere tempo. Non farglielo perdere.

VIeni a dare uno sguardo al nostro portfolio di lavori web, tutti siti rigorosamente responsivi al 100%!