due chiacchiere

Ad ognuno la sua dimensione

Che questo blog ricorra ad un “pesante” uso di soluzioni fatte in casa, non è più una novità. D’altro canto, sin dal primo giorno in cui ho aperto questa mia piccola casetta sperduta nella rete, l’ho sempre considerata come un laboratorio, dove sperimentare nuove tecniche, mettere alla prova le mie capacità, creare funzionalità che facilitino la vita ai visitatori, nessuno escluso. Come ho già detto in una puntata precedente di questa serie, il “vestito” di questo sito è disponibile in due taglie: medium e large. Per adattarsi alle varie risoluzioni degli utenti. Non ho mai implementato un layout fluido, per tanti motivi che non sto a ripetere (casomai ne parlerò nei commenti, a richiesta). Durante i primi anni di vita, il vestito predefinito era quello medium, perché la risoluzione 1024×768 era ancora molto popolare all’epoca. Chi voleva, premendo un pulsante, poteva passare a quella large.

Poi, quando ho visto nelle mie statistiche, il sorpasso delle risoluzioni larghe sulla 1024×768, ho invertito le cose. Aggiungendo però una funzione che controlla se il vestito è troppo “largo” per lo schermo dell’utente, ricordandogli che può passare all’impaginazione stretta con un semplice click. L’uso di un cookie memorizza la decisione dell’utente (anche se non clicca sul pulsante), che non viene più scocciato in futuro. Se anche tu, come me, non sei un fan dei layout liquidi, puoi provare ad implementare una soluzione simile. La funzione javascript che controlla la risoluzione dello schermo è la seguente:

// Check for user screen resolution
isSizeCookie = readCookie("activeSize");
isSize = (isSizeCookie != null &&
 isSizeCookie != undefined &&
 isSizeCookie != "") ? isSizeCookie : "none";
if ((screen.width <= 1024) && (isSize == "none")) {
 myAlertTag = (isFront)?"li":"p";
 var myContentObj = (document.getElementById) ?
 document.getElementById(myContent) : document.all(myContent);
 myContentObj.innerHTML = '<'+myAlertTag+' class="alert"><' +
 'img src="/wp-content/themes/duechiacchiere/img/icon_alert.webp"
 alt="Attenzione!" width="60" height="60" />'+
 myResolutionAlert+'<'+'/'+myAlertTag+'>' + myContentObj.innerHTML;

 createCookie("activeSize", "style", 15);
}

Basta inserirla da qualche parte tra le intestazioni della pagina, prima del tag </head>. Ovviamente puoi personalizzare le dimensioni “limite” in base alle tue esigenze. E “vestire” l’avviso tramite il foglio di stile associato come meglio ritieni opportuno. Questa è una delle poche cose che, per la natura stessa del “problema”, non può essere risolta anche a livello di server, nel caso l’utente abbia Javascript disabilitato. Ma è anche verosimile, nel 2010, che se un utente ha Javascript disabilitato, non ha necessità di tale avviso, perché probabilmente sta accedendo la pagina con un browser specifico o su un dispositivo mobile di vecchia generazione. Se vuoi vedere questa funzionalità in azione sul mio sito, riduci la risoluzione del tuo schermo a 1024×768, cancella tutti i cookie associati al mio dominio e poi ricarica la pagina.

Commenti

  1. Emanuele ha detto:

    E adesso spiegami perché non ami i layout fluidi. Non sono né pro né contro, sono semplicemente interessato a scoprire le tue motivazioni.
    Ciao,
    Emanuele

  2. camu ha detto:

    @Emanuele: beh, ci sono almeno tre motivi. Innanzitutto perché non hai nessun controllo sull’impaginazione. Passi per un blogghetto di periferia come il mio, ma in siti commerciali che fanno molto affidamento sul mostrare certe cose in certi punti (mai sentito parlare della regola dell’ “above the fold” ? ) per attrarre l’attenzione dei visitatori, serve sapere dove quella cosa sarà mostrata. Pensa, che so, al Corriere della Sera come sarebbe, se fosse “liquido” 🙂 Secondo, con le risoluzioni moderne, in genere panoramiche, e sempre più spesso nel formato 16:9, per leggere una cosa devi spostare la testa a destra e sinistra in continuazione. Studi dimostrano che frasi troppo “larghe” sono più difficili da leggere e fanno perdere il filo quando si va a capo (stesso motivo per cui non si usa il testo giustificato, in rete). Terzo, non vedo i reali vantaggi di avere un layout fluido. Sarebbe come dire che i libri sono inutilizzabili perché non sono fluidi, no?

  3. Emanuele ha detto:

    Hai ripetuto ciò che ho scritto io un anno fa in un paio di articoli quando mi occupai di riscrivere il tema del mio blog. Sono pienamente d’accordo con te, soprattutto sul poter *immaginare/prevedere* dove sarà qualcosa quando l’utente finirà sulle nostre pagine.
    Ciao,
    Emanuele

  4. Emanuele ha detto:

    Tra l’altro mi sembra un momento storico questo: solitamente tendo sempre a fare l’avvocato del diavolo nei commenti ai tuoi post! 😛
    Ciao,
    Emanuele

    1. camu ha detto:

      @emanuele: ricordavo che ne avevi parlato anche tu all’epoca, ed infatti ti feci i complimenti per la rivoluzione, proprio perché condividevo le tue idee sugli “studi” effettuati 🙂 Riguardo al momento storico, sarà di sicuro la Pasqua ad averti reso più buono eheh

  5. Francesco ha detto:

    Ciao a tutti, sento di difendere la causa della fluidità, parto dal mio blog http://opere.4elementi.info che vede WordPress intatto nel core e un template accessibile sviluppato da me.
    Penso che il layout possa definirsi fluido benchè contenga una cornice, in quanto i margini sono definiti in em e l’area senza contenuti è un semplice bordo elastico, tutto si muove proporzionalmente.
    Tutto va al suo posto in una soluzione a due colonne più cornice.
    Se l’utente utilizza uno schermo panoramico troverà (spero) gradevoli i riquadri concentrici, se è ipovedente e la sua è una scelta obbligata ne beneficerà, se non lo è potrà imparare a utilizzare al meglio le opzioni di visualizzazione per omogeneizzare la fruizione dei siti fluidi e non.
    Sono infatti contrario a pensare ad una Accessibilità tutta a carico dei disabili e degli sviluppatori e non dei normodotati e delle case produttrici di browser.

    Con riferimento, Camu, alla frase “Sarebbe come dire che i libri sono inutilizzabili perché non sono fluidi, no?”: sono sicuro che se pubblicassi un e-book in formato Html ne cureresti l’accessibilità.

    Un caro saluto

    Francesco

  6. camu ha detto:

    @Francesco: citi proprio il caso perfetto: gli ipovedenti. I layout fluidi, su schermi “panoramici”, rappresentano un ostacolo non da poco per questa categoria di utenti. Io ho un amico ipovedente, e l’ho visto “all’opera” mentre navigava su Internet, e ciò mi ha permesso di concludere quello che dicevo. Per lui che deve stare a volte a 10 cm dal monitor, per leggere le cose con la lente d’ingrandimento del sistema operativo, scorrere a destra e sinistra diventa quanto mai fastidioso. Ho provato il tuo blog alla risoluzione di 1920×1080 che è il massimo che la mia scheda grafica mi consente, e le frasi diventano lunghissime e non mi sembra facile seguire il filo. Non basta usare qualche em nel foglio di stile per dire di aver fatto un sito accessibile, bisogna metterlo alla prova dei disabili veri, specialmente quelli con problemi alla vista, e sentire cosa ne pensano. Riguardo al libro, io parlo del cartaceo, l’ebook è una questione diversa. E comunque, non mi sembra che Kindle e iPad siano poi così “accessibili” 😉

  7. Francesco ha detto:

    Ciao Camu e tutti!

    Circa gli schermi panoramici: perchè utilizzarli per la navigazione Internet senza utilizzare apposite opzioni di visualizzazione se ciò comporta problemi? Non è possibile delimitare l’area di visualizzazione della pagina web a un rettangolo con proporzioni più regolari?
    La fluidità rimarrebbe la variabile che permette a ogni utente di riempire lo schermo che la sua capacità visiva richiede.

    Non mi sono affidato solo agli em per rendere accessibile il sito, come sai… ho aggiunto pagine per permettere ai meno abili dal punta di vista cognitivo (o semplicemente distratti) di verificare i dati prima dell’invio segnalando le omissioni, ho confrontato l’usabilità per anni con amici ottuagenari, cerco di rispettare i criteri semantici della codifica e passo il vaglio di cinque validatori automatici più la barra del Wat.

    Ti chiedo scusa, ma non riesco a seguire il tuo pensiero circa i libri: sono d’accordo che il libro rimane utilizzabile non essendo fluido, ma se un tascabile potesse assumere il formato enciclopedia quando poggiato sulla scrivania…

    Ulteriore spunto per nuove soluzioni, come tutti i confronti su duechiacchiere.it.

    Saluti

    Francesco

  8. camu ha detto:

    @Francesco: la critica sugli em non era certo rivolta al tuo sito, so bene che hai usato molti altri accorgimenti per il tuo tema. Ma mi capita spesso di sentire la gente proclamare il proprio sito accessibile semplicemente perché ha usato em al posto di px. Riguardo alla tua domanda “Non è possibile delimitare l’area di visualizzazione della pagina web a un rettangolo con proporzioni più regolari?” beh, la risposta è appunto: non usiamo temi fluidi, e l’area di visualizzazione sarà limitata ad un rettangolo di proporzioni più regolari eheh 🙂 Molti ipovedenti hanno schermi grandi, sopra i 21 pollici (così mi dice il mio amico ipovedente) proprio per vedere le cose più grandi. In genere settano la risoluzione a 1024×768, il che di fatto rende nullo lo sforzo di avere un tema fluido 😉 E qui la domanda sorge spontanea: perché tu hai voluto usare un layout liquido? Non è una domanda retorica, è vera e sincera curiosità.

  9. Francesco ha detto:

    Ciao Camu e ciao tutti,

    ho sviluppato un layout fluido pensando che ognuno scelga il suo monitor in base alle esigenze di visione e lettura in termini di dimensioni di caratteri e immagini. Supponendo inoltre che anche le proporzioni siano scelte ad hoc, come dire che si acquista il contenitore per riempirlo tutto o in buona parte.

    Il mio layout nello specifico: con riferimento ai blog http://opere.4elementi.info e http://blog.4elementi.info ho sviluppato i menu su una colonna e i contenuti su un’altra. Tra i contenuti compaiono le immagini, che alle risoluzioni più basse vengono a volte – in parte – coperte dai menu di navigazione. E questo avviene ogni volta che imposto i caratteri alla massima dimensione su risoluzione 800 x 600 (ehm, a volte anche 1024 x 768). Ben venga qui dunque lo schermo panoramico, l’effetto “frittata” che si allarga a dismisura è compensato dalla cornice, il problema delle righe lunghe non si pone se i caratteri sono molto grandi.

    Inoltre sono ancora indeciso se convertire la dimensione delle immagini in em con il Foglio di stile (per renderle elastiche con la dimensione dei caratteri come in http://4elementi.info ) : se così facessi (penso sempre a beneficio degli ipovedenti) il layout fluido sarebbe d’aiuto.

    Aggiungo che mi sono posto il problema dello schermo panoramico nel template per Joomla: vedevo appunto un posizionamento degli oggetti (testo e immagini) per nulla gradevole, però questo si ricomponeva se i caratteri venivano impostati a una dimensione maggiore… se no perchè uno schermo ampio e panoramico?

    Nell’ottica oramai acquisita che “troppa accessibilità fa male” (Camu, sai che sei un riferimento) non vado incontro a chi acquista uno schermo panoramico e non ne utilizza al meglio le opzioni di visualizzazione, come non sento di andare incontro (almeno più di tanto) a chi fa uso di browser senza aggiornamenti la cui casa produttrice ha mantenuto i bugs quando gratuitamente e senza difficoltà può accedere a un’alternativa migliore.

    Un caro saluto dalla Sardegna

    Francesco

  10. Francesco ha detto:

    Ciao,

    rileggendo i miei commenti mi sorge il dubbio di non aver risposto puntualmente alla domanda.

    Con un’impostazione di schermo con la base più ampia il difetto dei miei blog, il menu di navigazione che va dolcemente a lambire l’angolo destro alto dell’immagine alle basse risoluzioni, sarebbe risolto. Motivo per cui il perimetro del mio tema seguirebbe volentieri le proporzioni dello schermo.

    Inoltre è mio metodo ormai partire dall’esistente per affinare le soluzioni.
    Se parto dal presupposto che si acquista uno schermo ampio e panoramico sono portato a pensare che lo si voglia utilizzare in tutta l’estensione: muovo dunque dal layout fluido e cerca nel percorso una soluzione adatta alle varie impostazioni.
    Confido però nell’utente, che voglia usare il monitor con le sue specifiche per adattare la pagina – che in quanto fluida ha tanta voglia di adattarsi – alle sue risorse. Vedo sulla Rete che è possibile, oltre dimensionare i font, impostare una lunghezza massima per le righe.

    Come potete vedere (http://opere.4elementi.info ) sono ancora lontano da un’armonia sugli orizzonti oltre la risoluzione 1024×768, ma conto di arrivarci sulla base dell’approccio alla fluidità totale.

    Circa la chiosa dell’articolo, mi sembra un monito verso le soluzioni intermedie tra fisso e fluido, come dire che una fluidità non totale (o meglio un approccio che non sia al contempo elastico e fluido) può essere peggiore di una soluzione fissa, come nel caso citato di Wikipedia.

  11. Trap ha detto:

    Forse oggi si può fare tutto quello che hai descritto con CSS

    1. camu ha detto:

      Si, oggi tutti questi giri pindarici non sono più necessari grazie al cielo. Con l’avvento di CSS3 anzi molta “logica” è stata (giustamente) spostata da Javascript ai fogli di stile. Il codice dinamico di questo sito si è ridotto a poche righe necessarie giusto a far funzionare il pulsante per tornare in cima alla pagina, e per migliorare l’accessibilità del menu di navigazione.

      1. Trap ha detto:

        E questo l’hai provato?

        1. camu ha detto:

          Si si, quello lo usavo già, il Javascript si prende cura di far apparire – sparire il pulsantino a seconda di quanto sei lontano dalla cima della pagina.

Lascia un commento