due chiacchiere

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

Commenti

  1. Emanuele ha detto:

    Ottimo lavoro. E’ la strada che ho sempre ipotizzato di seguire io ma per mancanza di tempo non ho implementato nulla. Però siccome sono “legato all’esperienza personalizzata” anch’io, come te non ho voluto installare wp-mobile o qualcosa di simile…
    Ciao,
    Emanuele

  2. Francesco ha detto:

    Ottimo spunto di riflessione!
    Io sono ancora elastic-oriented nella convinzione che l’utente scelga con coscienza lo schermo più adatto alla sua condizione (personale e ambientale) e il layout debba essere bravo a riempire tutta la veduta.
    Però dopo le tante volte che “if” (tanto come istruzione che come concetto) mi ha risolto i problemi non posso che essere possibilista.
    Oltretutto ciò che ho approfondito e capito meno è proprio l’adattamento ai dispositivi mobili (per quanto li amo… giro con un telefonino del 2001 e uno del 2006…).

    1. camu ha detto:

      @Francesco: prova a spiegarlo ai grafici, specialmente italiani, che confezionano i siti delle pubbliche amministrazioni 🙂

      1. Francesco ha detto:

        @camu: è un parere troppo modesto.
        E poi, ehm, è bene che io smetta di bussare alle porte del mondo dell’Accessibilità web per pietire di poter dare.
        Htmllista solitario

      2. Francesco ha detto:

        @camu: parere modesto il mio, of course.
        Riletto il commento mi suonava male…

  3. CyberAngel ha detto:

    Adesso si che mandare un commento è user friendly. Come sto facendo ora tramite iPhone. 🙂

    1. camu ha detto:

      Oh finalmente qualcuno ha fatto la prova che desideravo. Inoltre il “peso” medio di un articolo è sceso intorno ai 100k tutto incluso (quindi molto meno con la cache), il che rende il sito veloce anche in 3G!

      1. CyberAngel ha detto:

        @camu: Felice di essere d’aiuto.

Lascia un commento