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. ha scritto:

    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 scritto:

    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…).

    Risposte al commento di Francesco

    1. camu
      ha scritto:

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

      Risposte al commento di camu

      1. Francesco
        ha scritto:

        @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 scritto:

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

  3. CyberAngel
    ha scritto:

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

    Risposte al commento di CyberAngel

    1. camu
      ha scritto:

      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!

      Risposte al commento di camu

      1. CyberAngel
        ha scritto:

        @camu: Felice di essere d’aiuto.

Rispondi a camu

Torna in cima alla pagina