Larghezza fissa, fluida o intelligente?

Per anni gli addetti ai lavori hanno consumato fiumi d’inchiostro (digitale) discutendo se fosse meglio usare un’impaginazione a larghezza fissa o una cosiddetta fluida (o liquida) in grado di adattarsi alla risoluzione su cui è visualizzata. Gli uni si appellano alla consistenza dell’aspetto grafico ed alla possibilità di avere più controllo su dove i vari elementi vengono visualizzati, gli altri tirano fuori le tavole dell’accessibilità ed un uso migliore dello spazio a disposizione sullo schermo dell’utente. Intanto il consorzio che si occupa di standardizzare gli strumenti a disposizione di chi sviluppa per il web stava ad ascoltare, e per far contente entrambe le fazioni, ha introdotto da qualche tempo una tecnica nota come media queries. Che di fatto è una via di mezzo, in grado di soddisfare le esigenze di tutti, dando vita ad una nuova categoria: le impaginazioni intelligenti, che cambiano (anche radicalmente) a seconda di una serie di parametri impostati dallo sviluppatore.

Grazie a questo strumento, ad esempio, è possibile implementare una cosa come “se l’utente ha una risoluzione di al massimo 480 pixel, usa questo foglio di stile, altrimenti usa quest’altro”, senza dover usare sporchi barbatrucchi Javascript. Quindi non più un solo stile monolitico (fluido) che cerca di adattarsi a tutte le combinazioni possibili ed immaginabili, ma tante diverse impaginazioni, una per ogni categoria di larghezza dello schermo (telefonini, tablet, portatili e via dicendo). Su questo blog ho iniziato a testare questa tecnica già l’anno scorso, ma solo di recente, con il crescere del numero di browser che la supportano, ho deciso di usarla in modo più pesante e radicale. Per vedere di cosa si tratta, ti basta restringere la finestra del tuo browser il più possibile. Nel mio caso ho impostato le cose supponendo che qualsiasi larghezza inferiore a 780 pixel sia associata ad un dispositivo mobile, attivando dunque il tema corrispondente:

@media screen and (max-width:780px)

Certo, avrei potuto usare uno dei tanti plugin che adattano magicamente il proprio blog ai dispositivi mobili, ed in effetti fino ad un paio d’anni fa l’ho fatto, ma era una “pezza” che non avevo mai digerito, perché:

• spersonalizza il “vestito” del blog, rendendolo di fatto… uno tra tanti, senza nessun tratto distintivo che lo ricolleghi alla versione desktop, o che lo renda riconoscibile a colpo d’occhio
• usa soluzioni lato server per riconoscere i dispositivi mobili, aumentando quindi il carico di lavoro, rallentando i tempi di caricamento della pagina e rimanendo potenzialmente inaffidabile in caso di nuovi dispositivi sul mercato
• non diminuisce il quantitativo di dati da far scaricare (fogli di stile, javascript ed altre diavolerie), che nell’epoca della connessione a pagamento o comunque senza banda larga, non è certo una cosa piacevole
• camu, diciamola tutta, non poteva accontentarsi certo di un plugin scaricato dal primo repository che passa 🙂

Questo per rispondere alla critica che da più parti era stata fatta al tema che ho  lanciato l’anno scorso: di essere poco amichevole su iPhone e soci. Lasciare un commento dovrebbe essere ora più semplice: la dimensione dei caratteri nei campi non richiede più di usare una lente d’ingrandimento per controllare cosa si sta scrivendo. I titoli, inoltre, sono ora facilmente cliccabili, e la navigazione consente di saltare all’articolo successivo o precedente con poco sforzo. Ho dimenticato qualcosa?

Riferimenti

• Uno degli articoli consigliati durante il corso sullo sviluppo mobile