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.png"
    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.

11
Lascia una recensione

Please Login to comment
3 Comment authors
FrancescocamuEmanuele Recent comment authors
  Subscribe  
più nuovi più vecchi più votati
Notificami
Emanuele
Ospite

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

camu
Admin

@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… Leggi il resto »

Emanuele
Ospite

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

Emanuele
Ospite

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

camu
Admin

@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

Francesco
Ospite

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… Leggi il resto »

camu
Admin

@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,… Leggi il resto »

Francesco
Ospite

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,… Leggi il resto »

camu
Admin

@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… Leggi il resto »

Francesco
Ospite

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… Leggi il resto »

Francesco
Ospite

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… Leggi il resto »