Questo sito è accessibile da tutti i browser e gli user agent, ma il design e alcune funzionalità minori dell'interfaccia saranno visibili solo con i browser che rispettano gli standard definiti dal W3C Perché facciamo questa scelta e cosa significa ...

Usabile.it

usabilità, accessibilità e interaction design per il web

Home > info > Com'è costruito Usabile.it

Com'è costruito Usabile.it

[di Maurizio Boscarol]

Questo sito è stato completamente ridisegnato nell'ottobre del 2002. Perché? Per molti motivi. Anzitutto, per aggiornarne la struttura e inserire in home page dello spazio per delle notizie brevi, pur mantenendo il lancio agli ultimi articoli in evidenza. Ma anche per adeguarlo completamente agli standard web definiti dal w3c.

Il sito per la verità era già valido e accessibile al livello AA del WAI dal gennaio 2002. Tuttavia, faceva uso di un design di transizione, che si basava ancora sulle tabelle per il layout e sfruttava solo parzialmente le possibilità offerte dai fogli di stile. Abbiamo così colto l'occasione per fare un deciso passo avanti. Il redesign è per la prima volta anche estetico: questa nuova versione, pur conservando somiglianze di layout con la precedente, è completamente cambiata nel look&feel. E' dunque cambiata anche la comunicazione, perché vorremmo dare finalmente più spazio su Usabile.it a considerazioni che riguardano anche il design, come negli intenti originali dichiarati nel primo articolo pubblicato nel 2000. Il design in cui crediamo, però, è un design che sposa usabilità, accessibilità con le possibilità date dal pieno utilizzo degli standard web.

Così questo sito è ora completamente senza tabelle per il layout, e fa un uso massiccio dei fogli di stile. Risulta accessibile al livello AAA del WAI, almeno per quanto è possibile dirlo attraverso i validatori automatici e l'impegno che ci abbiamo messo. Abbiamo scelto un design fluido, cioè con le colonne che si adattano in larghezza e lunghezza al contenuto e alla dimensione della finestra del browser. In questo modo il sito mantiene le sue caratteristiche a qualunque risoluzione, anche se, naturalmente, se usate una finestra da 160 pixel di larghezza, potreste avere qualche problema di fruizione... si tratta di usare sempre del buon senso!

Compatibilità

La conseguenza di questo redesign è che ora il sito è correttamente visualizzabile da tutti i browser che supportano gli standard web. Il che significa, essenzialmente, da tutti i browser usciti a partire da Explorer 5 in poi. E dunque anche Netscape 6 e 7, Opera 5 e 6, Mozilla e gli altri browser basati sul motore Gecko. La scelta è radicale, perché su browser ancora diffusi come Netscape 4.x, il sito viene servito senza il look&feel, con un layout simile a quello 'completo', ma senza colori e stili. Abbiamo deciso di non supportare i browser che hanno una compatibilità scadente con gli standard web: dunque anche Explorer 3 e 4 e iCab per Mac. Abbiamo così scelto di servire a questi browser la versione pienamente funzionante e accessibile, ma di solo testo.

Alcune funzionalità minori non sono disponibili su browser che non supportano il W3C DOM, in particolare Opera fino alla versione 6. La 7, in uscita in questi giorni, supporterà per la prima volta il Document Object Model, e dunque dovrebbe, nelle intenzioni dei progettisti, essere un browser pienamente compatibile con gli standard, come sono già Explorer, Mozilla e Netscape. Per pienamente, tuttavia, intendiamo 'al netto di alcuni bachi'. Ogni browser ha infatti specifici problemini di interpretazione degli standard, ma abbiamo fatto dei test per garantire il miglior compromesso possibile con tutti i principali browser.

Bachi noti con Explorer 5/Mac riguardano la comparsa della barra orizzontale, che non compare in nessun altro browser e che è ineliminabile: non è un errore del sito, ma del browser, che comunque non compromette la fruizione in nessun modo.

Perché fare tanta fatica e fare scelte radicali? Perché crediamo che sia la strada obbligata per dare qualità al web, innanzitutto. Uno standard condiviso è sempre mancato, e gli sviluppatori si sono sempre dovuti ingeniare a trovare trucchi di visualizzazione per questo o quel browser, usare meccanismi di riconoscimento, creare doppie versioni del design, e così via. Tutto questo portava ad un codice scritto male (e tollerato dai browser), che appesantiva le pagine. Inoltre ogni pagina doveva contenere specifiche istruzioni per il design, solitamente tramite le tabelle. Oggi non è più necessario: il design è gestito interamente da alcuni fogli di stile esterni, che valgono per tutto il sito. Le singole pagine sono così più leggere e il sito dovrebbe caricarsi più rapidamente.

Facilità di modifiche

L'aspetto più interessante è però un altro: usando in maniera massiccia le possibilità dei CSS, abbiamo la possibilità di intervenire per modifiche e aggiornamenti del design in qualunque momento, senza toccare una sola riga dell'HTML. Maggior flessibilità, dunque. Inoltre i documenti HTML (che sono scritti in XHTML 1.0 strict) sono già interoperabili e disponibili per eventuali riutilizzi, perché si fondano sulle specifiche XML. Se a questo aggiungiamo che attraverso i fogli di stile sono possibili effetti di interazione (che possono migliorare l'usabilità del sito) che prima erano disponibili solo attraverso complicati Javascript, ecco che i vantaggi cominciano a superare i rischi costituiti dal fornire una versione solo testo ad alcuni browser

In questa versione del sito, ad esempio, è finalmente possibile ingrandire il testo attraverso i comandi specifici dei browser. Ma è presente, per chi lo trova utile, anche un'apposita funzione in ogni pagina, sotto il titolo 'personalizza' nella colonna grigia a destra. Sono disponibili 3 diverse dimensioni di testo: piccolo, normale e grande. Per di più, queste funzionalità si sommano a quelle del browser. Se per esempio usate explorer e ingrandite i caratteri al massimo, scegliento 'testo grande' nel menu a destra della pagina, il testo si ingrandirà ancora, cosa impossibile utilizzando solo il browser. Speriamo che questa caratteristica, utile soprattutto con Explorer, che offre limitate possibilità di ingrandimento dei testi, sia gradita a ipovedenti e astigmatici. Questa funzione è stata realizzata senza Javascript, e funziona appunto in tutti i browser che supportano il DOM del W3C. Allo stesso modo, fino a poco tempo fa non era possibile ingrandire l'area sensibile attorno ad un link testuale senza usare immagini o javascript che operavano su celle di tabelle. Come potete constatare passando sui menu della colonna a destra, ora questo è possibile attraverso i CSS, e consente di migliorare l'usabilità per coloro che utilizzano il mouse.

Non crediamo che in tempi brevi tutto il web si trasformerà in un web che segue gli standard, ma crediamo che i siti più attenti alla qualità lo faranno, perché i vantaggi di gestione e mantenimento sono notevoli. La dimostrazione ci viene in questi giorni proprio da due siti molto famosi: Lycos e Wired, che hanno convertito il loro design abbandonando le tabelle. Il compito è stato tutt'altro che facile, se teniamo conto della mole di pagine che questi siti hanno in archivio. Ma dimostra che questo passaggio è possibile anche per siti grossi, e non solo per siti di poche pagine e gestiti in maniera personale come questo. Wired usa Vignette come CMS, e se è stato possibile per loro passare ad un codice valido e ad una separazione fra forma e contenuto, lo è davvero per tutti.

L'auspicio è quello di lasciarsi finalmente indietro gli strascichi della guerra dei browser, che costringeva i designer a perdere gran parte del loro tempo a curare la compatibilità con i due browser principali, lasciando inevitabilmente fuori tutti gli altri. Compresi i dispositivi assistivi che vengono usati dai disabili. Uno dei vantaggi principali dell'uso degli standard è che il sito è immediatamente più accessibile delle versioni tradizionali. Per una accessibilità completa, gli standard non bastano: bisogna anche seguire tutte le linee guida WCAG 1.0. Ma anche senza volersi porre l'obiettivo dell'accessibilità, un sito che segua gli standard e che separi il contenuto (strutturato con XHTML 1.0 strict come in questo caso, o con HTML 4.01 transitional) dalla presentazione (con i CSS 2) è immediatamente più orientato all'accessibilità e all'indipendenza dal dispositivo.

Per maggiori informazioni, il sito di riferimento è www.webstandards.org, ovviamente in lingua inglese. Per le specifiche sugli standard, il sito più importante è invece naturalmente www.w3c.org. Usabile.it vi terrà comunque aggiornati, attraverso le notizie in home page, anche delle evoluzioni che riguardano gli standard web.

torna suTorna su

Personalizza:

Torna in cima alla pagina o vai al contenuto.