Ottimizzazione dei siti per smartphone e tablet tramite CSS3

Chi sviluppa frontend per siti Web, da qualche anno a questa parte, ha avuto non pochi grattacapi per supportare correttamente i browser per smartphone e tablet. Sono state escogitate diverse soluzioni per offrire una buona esperienza di navigazione, tra cui la più diffusa è tutt’ora quella di separare il frontend di un sito in due rami distaccati: standard e mobile. Tipicamente, infatti, molti designers hanno sviluppato due versioni separate del frontend, con URL differenti se non addirittura il domain name. Un esempio classico sono i siti con URL “www.example.com/m/contenuto”, oppure “m.example.com/contenuto”, oppure ancora “www.example.com/contenuto?mobile=1”.

Il meccanismo prevede che l’utente, raggiungendo il sito principale, venga redirezionato sul sito mobile se si verificano certe condizioni (User Agent / Risoluzione schermo), e il meccanismo può essere implementato lato server, tramite JavaScript, oppure con una combinazione dei due. Di solito viene piazzato anche un link “Passa alla versione classica del sito”, nel footer di ogni pagina, per lasciare all’utente la possibilità di scegliere il sito principale.

Questo metodo funziona, anche con device datati (senza supporto CSS3), ma ha alcune controindicazioni:

- Si verifica una duplicazione di contenuti che può penalizzare sui motori di ricerca (anche se questo fatto viene mitigato con opportuni accorgimenti che gli esperti di SEO ormai hanno adottato)

- Si crea un doppio branch nel frontend che potrebbe complicare notevolmente l’iter di sviluppo e manutenzione del sito

- Si creano problemi nel momento in cui gli utenti pubblicano link tramite social network da dispositivi mobili (il link sarà quello alla versione mobile, e chi visita i link da PC si ritrova con un frontend totalmente inadatto al tipo di dispositivo usato)

Una nuova tecnica, si sta diffondendo in questi ultimi tempi e che, almeno sulla carta, punta a risolvere tutti questi problemi: il Responsive Design. Sul Responsive Design si potrebbero scrivere interi libri, per cui non andremo a spulciare ogni possibile implicazione, ma daremo soltanto alcuni spunti iniziali da cui poter proseguire con eventuali approfondimenti. Il principio di base nel RD consiste nel fornire un frontend unico, e quindi un unica URL, per tutti i dispositivi, e lasciare che il client, in base a certe condizioni, selezioni automaticamente lo stile adatto per il tipo di display e di controlli.

Un approccio naif al problema potrebbe essere quello di usare una serie di script in JS che, rilevando la risoluzione della finestra e altri parametri utili (orientamento, versione del browser, ecc…),vadano a modificare dinamicamente il DOM, adattando posizione e stili dei vari elementi per la dimensione corrente della finestra / schermo. Questo metodo ha il vantaggio di girare anche su browser abbastanza datati, purchè siano in grado di processare una certa quantità di script in JS. A questo proposito va ricordato come il JS sia abbastanza oneroso da processare, specie su device mobili di una certa data privi di browser aggiornati. Ciò implica che un frontend sviluppato in questo modo sia abbastanza pesante da processare.

Un’altra via è quella di sfruttare alcune delle nuove caratteristiche di CSS3, supportate dai moderni browser come IE9 e IE10 (comprese le versioni per Windows Phone 7.5 e Windows Phone 8), le ultime versioni di Firefox e Opera, e tutti quelli basati su Webkit, come Safari, Chrome e Android Browser: le Media Queries.

Probabilmente conoscete, e magari avete già usato estensivamente, gli stylesheet alternativi in una pagina HTML. Per chi non ne fosse al corrente, ogni pagina HTML può avere associati diversi fogli di stile CSS, in questo modo:

In questo esempio, abbiamo lo stile “default.css” che viene applicato alla pagina quando viene visualizzata a schermo, mentre lo stile “print.css” viene usato per la stampa. Solitamente in stampa vengono eliminati i colori di background, le sidebar, e altri elementi non indispensabili per la fruizione del contenuto principale, per cui alcune regole CSS avranno delle differenze grafiche, e interi “div” potrebbero venire nascosti.