In ottica responsive

Sembra impossibile ma, seppure a distanza di oramai diverso tempo da quando le statistiche ci dicono che la navigazione da cellulare ha ampiamente superato quella da desktop, ci ritroviamo ancora a dover fare i conti con una percentuale altissima di siti web non ottimizzati in questo senso.

Ricordiamo ai più che per sito web responsive intendiamo un layout che sia in grado di adattarsi a qualsiasi dispositivo a prescindere dalla risoluzione dello schermo.

Il buon Google dice la sua e circa un anno e mezzo fa mette sul piatto la questione come fattore di ranking facendo quindi apparire la scritta mobile friendly nei risultati della serp. In parole povere, quando facciamo una ricerca dal telefono, Big G ci avvisa se la pagina che andremo ad aprire è ottimizzata o no. E siccome stiamo parlando di Google ci viene messo a disposizione anche un tool che possiamo trovare online digitando test per la compatibilità con dispositivi mobili e che ci permette di testare le nostre pagine. Si stima che ad aprile 2014 il 90% dei siti web del nostro paese siano da rifare.

Ma quali sono le migliori soluzioni per creare un sito web responsive a distanza di qualche anno da quando abbiamo iniziato a lavorare in questa direzione? Di fondo sono rimaste le stesse con qualche novità dal punto di vista della compatibilità con alcuni browser; non dimentichiamo infatti che, anche aggiornatissimi browser come internet di Android, faticano a leggere regole di CSS3 banali come ad esempio il border-radius.

1 – La prima soluzione utile è jQuery Mobile che mi sento caldamente di sconsigliare data la pesantezza delle tonnellate di script da fare eseguire ad ogni richiesta e che non farebbero affatto piacere a page speed, il tool di Google per misurare la velocità del vostro sito.

2 – Bootstrap 3 e la sua griglia fluida, divenuto ormai uno strumento di default soprattutto nella realizzazione di temi per cms come WordPress che siano questi custom o premium. Il framework è velocissimo da installare; un po’ meno immediato imparare a usarlo non tanto per la gestione predefinita ma per la personalizzazione ma niente che una buona dose di ore di studio non possa risolvere.

3 – Le media queries css, ovvero quelle regole nel nostro foglio di stile che ci permettono di intercettare la risoluzione del monitor e al loro interno poter gestire/riscrivere la formattazione del sito; questa soluzione è ovviamente anche il cardine su cui Bootstrap basa la gestione della sua griglia fluida e leggere il suo CSS permette di farsi più di un’idea su come ragionare nella progettazione.

Soffermiamoci sulle media queries css e cerchiamo di capire quale sia il modo migliore di utilizzarle. Esiste una scuola di pensiero che vuole sia molto più semplice scrivere prima il sito mobile ma non ho mai trovato un reale riscontro nella messa in opera che mi possa far pensare che questa soluzione sia poi cosi immediata. Tenendo presente che il sito desktop è quello strutturalmente più complesso preferisco partire dall’alto e ragionare in termini, per il mio modus operandi, più logici.

Dobbiamo tenere anche presente che, mentre per lo smartphone andremo a gestire tutti gli elementi o quasi disposti in verticale, per il tablet la questione cambia di progetto in progetto.

Boostrap ci insegna che non dobbiamo necessariamente fare nel css prima il desktop poi il tablet e infine il mobile ma possiamo aprire e chiudere qualsivoglia volte vogliamo le nostre queries. Questa soluzione è decisamente performante perché rende visivamente più semplice a noi designer ricordare dove ho fatto cosa.

In aiuto arrivano e arriveranno regole su regole nuove come ad esempio il modulo Flex Box di cui magari parleremo in altri articoli. Attributi e valori di HTML e CSS saranno sempre più indirizzati verso strutture fluide e non possiamo assolutamente smettere di imparare.

E voi state già ragionando in ottica responsive?