Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » How To » Gettare le tabelle fuori dalla finestra

Gettare le tabelle fuori dalla finestra

di Douglas Bowman, traduzione di Gdesign e Chenoa, 16 Settembre 2004

Versione Stampabile

L'articolo (in lingua inglese) proviene da Stopdesign.com ed è stato tradotto e riprodotto per gentile concessione dell'autore.

Douglas Bowman ha scritto questo articolo a fine luglio 2004. Quasi un mese dopo Microsoft ha rinnovato la sua home page. Dunque, alcuni dei riferimenti di questo articolo non sono più reali; nonostante questo, l'articolo mantiene la sua validità perchè spiega quali sono i vantaggi che si ottengono passando da un layout basato su tabelle ad uno basato su CSS.


Guarda mamma, niente tabelle!

Coloro che quest'anno erano al Digital Design World a Seattle mi hanno visto presentare una sessione intitolata "Niente più Tabelle, Tecniche di Layout CSS". Durante la presentazione, abbiamo rivisto l'uso corretto delle tabelle e un insieme di consigli su come aggiungere gli stili con i CSS. Immediatamente siamo passati ai layout senza tabelle, esaminando alcuni esempi e vedendo i due approcci di base (con posizionamento e con float).

A metà della presentazione, annunciai che avremmo convertito un esempio reale fatto di tabelle e gif spaziatrici in un semplice layout CSS. Avrei potuto creare un esempio fittizio da mostrare alla presentazione, ma l'idea poteva sembrare preparata da tempo. Se avessi creato prima il mio esempio sarebbe risultato pulito e ordinato. Si poteva pensare che avessi creato apposta il mio esempio per evitare qualsiasi tipo di problema.

Dunque l'idea di un esempio preparato prima non era buona. Volevo una sfida reale. Cosi scelsi il sito di una piccola società di Seattle supponendo che qualcuno del pubblico la riconoscesse:

Microsoft

Ok, forse più di qualcuno riconobbe l'azienda sapendo che non era tanto piccola. Molta gente visita l'home page di Microsoft ogni giorno. La home page di Microsoft può o non può essere nota come i giganti della ricerca quali Google e Yahoo!. Ma in generale microsoft.com riceve moltissimo traffico, e la gente che visita quel dominio ogni giorno è un numero esprimibile in milioni.

La cosa vergognosa è che il sito web di Microsoft non è ottimizzato come dovrebbe. Non sta al passo con i tempi. Gli utenti scaricano inultimente pagine pesanti e i server sprecano banda supplementare per tenerle su. Con i suoi 40 KB, l'HMTL della home page di Microsoft non è proprio pesantissimo, Ma è pieno di codice inaccessibile, improvvisato, basato su tabelle, pieno di attributi proprietari e con qualche JavaScript poco elegante. Notate che non ho neanche menzionato se il codice è valido o meno. Nonostante abbia il "gusto" di XHTML, Microsoft omette il doctype nella propria home page.

Perchè Microsoft?

È solo un altro modo di attaccare Microsoft?

Francamente ed onestamente.....no.

Non ho scelto Microsoft per saltare sul carro di quelli che la assalgono, o per lanciare critiche ad una società che molte persone nella nostra industria amano odiare. (Non evito le opportunità di mettere in dubbio alcune decisioni che hanno preso, ma evito di giudicare.)

Ammetto che ho scelto intezionalmente un'azienda importante. Fa parte della mia natura andare contro i "big". Ma è anche un esempio che tutti conosciamo. Microsoft.com era (e continua ad essere) il candidato perfetto per una trasformazione in CSS standard.

Ecco perchè....

Motivo n°1

Per l'inefficiente uso di un'abbondanza di tabelle e gif spaziatrici per il layout della pagina. Le pagine sono bloccate in basso, fino a dove non si chiudono le tabelle, e come risultato spesso sono meno accessibili. Microsoft non è la sola ad avere questo problema. La stramaggioranza di siti sul web ancora oggi utilizza diverse tabelle per il layout delle pagine e altre per scopi puramente visuali. Ho scelto Microsoft perchè può servire come esempio ben noto (possibilmente come modello) e come riferimento a quei problemi che molti siti devono ancora risolvere.

Motivo n°2

Perchè la struttura di base della pagina di Microsoft è un modello che milioni di siti web utilizzano per il loro design: Intestazione + 3 colonne + Piè di pagina. In particolare: un'intestazione che occupa tutta la parte superiore della pagina, una colonna sinistra contenente per lo più gli elementi di navigazione, una colonna principale per i contenuti, una colonna destra per il materiale extra e un Piè di pagina che sta sotto le tre colonne ed occupa l'intera larghezza della pagina. Al posto di layout a 3 colonne, molti siti web utilizzano layout a 2 colonne, ovvero una variante della stessa struttura di base con una colonna laterale alla destra o alla sinistra della colonna centrale:

La struttura della home page di Microsoft con evindeziate l'intestazione, le 3 colonne ed il piè di pagina

Motivo n°3

Perchè la home page di Microsoft utilizza i CSS solamente per i caratteri ed il colore. Mi piacerebbe vedere la compagnia che fondamentalmente ha inventato il concetto di fogli di stile in ambiente applicativo appoggiarsi di più ai CSS e meno ai metodi della vecchia scuola.

Motivo n°4

Perchè Microsoft fornisce due differenti versioni della sua home page a seconda del browser che si utilizza. Una versione per Internet Explorer per Windows (v5.5 o superiore). Un'altra versione un pò "ridotta" per tutti gli altri browser (incluso IE per MAC) che omette alcune delle immagini e tutti i loghi dei prodotti. In questa versione mancano alcune delle funzionalità (tipo il menu fly-out) e gli elementi della pagina vengono visualizzati con tecniche differenti. Se avete IE/Win 5.5 o superiore più un altro browser disponibile potete verificare voi stessi. Ad ogni modo qui sotto ci sono alcune differenze marcate in rosso:

Le due differenti versioni dell'home page di Microsoft. A destra quella per IE5.5 o superiore, a sinistra quella per tutti gli altri browser

La versione non IE/Win è notevolmente più anemica della versione completa per IE/Win. Tutti sappiamo che non è necessario che sia così. Vi sarete chiesti come mai il codice funziona in alcuni browser e non in altri. Microsoft utilizza uno JavaScript che rileva il browser e lo indirizza ad un file differente se il browser è IE5.5 o superiore. Invece, Microsoft potrebbe semplicemente fare una versione che funzioni con tutti i browser.

Microsoft però fornisce una versione della sua pagina ai browsers non-IE/Win. Alcuni sviluppatori non fanno neanche questo. La scusa che abbiamo sentito è che IE/Win è IL browser utilizzato dalla MAGGIOR parte delle persone e OCCORRE TROPPO TEMPO per sviluppare per altri browser. Altri sostengono che lo sviluppo per gli altri browser che non siano IE/Win sia TROPPO COSTOSO. Entrambe le motivazioni sono false.

Molti sviluppatori credono a queste falsità perché iniziano a sviluppare per IE e testano le pagine in IE. Successivamente guardano le pagine in un altro browser e si sentono frustrati vedendo ogni genere di presunti "bug" e pensando di doverli riparare.

IE interpreta i CSS in maniera meno esigente rispetto agli altri browser che sono usciti negli ultimi anni (Mozilla, Firefox, Safari, Opera…). Cominciare con IE significa che i pochi problemi con il lavoro di sviluppo saranno rilevati nella fase iniziale. Sviluppare inizialmente con IE e provare ad adattare il risultato ad altri browser causerà alla lunga un aumento di costo e di tempo. Ma c'è un metodo migliore che è più veloce e meno costoso.

Iniziate con i browser più rigorosi e aderenti agli standard, che (quasi) sempre mostrano le pagine così come si presuppone che debbano essere. Ogni cosa funzionerà. Dopo, tornate indietro per creare le poche "patch" per IE. Così lo sviluppo diventerà molto più veloce. Pensare di sviluppare inizialmente per quei browser che non rappresentano la maggior parte del vostro traffico può andare contro ogni logica. Ma il processo è molto più fluido ed efficiente se le vostre pagine non sono dipendenti dal comportamento di IE. Iniziando con IE, comincereste con un codice difettoso che risulterà più difficile da sistemare per ottenere una corretta visualizzazione con gli altri browser più rigidi.

Seguendo questa cammino, abbiamo ancora il Fattore IE con cui confrontarci. In ogni modo avendo più esperienza con il comportamento sbagliato dei CSS in IE, alla fine il Fattore IE risulterà più facile da minimizzare. Questa è la speranza.

Solo i fatti per favore

Durante la seconda metà della presentazione, abbiamo percorso l'intero processo di conversione della pagina di Microsoft basata su tabelle e gif spaziatrici, in una versione basata su CSS, più accessibile, che funziona in tutti i browser. Questa non è una novità. Altri ancora prima di me hanno ricodificato microsoft.com. Molti lettori abituali di questo sito (riferito a Stopdesign.com) da quasi un anno stanno realizzando le loro pagine senza tabelle. Però vediamo che non tutti seguono questa strada, anche se questo campo è stato esplorato tante volte. Da qui, la presentazione al Digital Design World e quest'articolo.

Seguendo la presentazione, abbiamo separato ogni passaggio del processo in piccole parti. Ho evidenziato ciascuno dei principali punti del processo, compresa l'eliminazione delle tabelle, la conversione in codice più semantico e le tecniche CSS usate per riprodurre fedelmente ogni parte del layout dell'home page di Microsoft.

Abbiamo inoltre utilizzato molti strumenti di rappresentazione (schemi, diagrammi e schermate) che hanno contribuito a capire quali sono le tecniche utilizzate in ogni sezione. Abbiamo anche separato il codice conservandolo in archivi separati, in modo da poterlo utilizzare come riferimento in ogni fase del processo.

Uno dei motivi per cui ho scritto quest’articolo è quello di pubblicare i risultati finali della trasformazione di Microsoft.com, che non possono essere ignorati:

  Layout attuale
(IE/Win)
Layout attuale
(altri browser)
Trasformazione
Tabelle utilizzate 40 36 0
Gif spaziatrici 35 76 0
Tag <img> 43 122 6
Immagini di sfondo CSS 1 1 11
Browser supportati 2 I più moderni I più moderni
Dimensione del file HMTL 40 KB 39 KB 15 KB
Riduzione della dimensione del file - 3% 62%

Andare più avanti

I numeri diventano ancor più interessanti quando cominci fare le valutazioni e le proiezioni di Meyer/Davison in stile Espn. Secondo i risultati pubblicati in una pagina ufficiale di Microsoft chiamata "Inside Microsoft", il traffico che Microsoft ha ricevuto nel maggio 2004 è stato di 1.200 milioni di pagine. Durante la presentazione, ho mostrato come far diminuire il codice di una pagina del 62% ovvero di 25 KB. Inoltre ho detto che la previsione di una riduzione di 25 KB per pagina è plausibile se Microsoft utilizzasse seriamente i CSS. Se moltiplichiamo una media di 38.7 milioni di visite al giorno, con un risparmio di 25 KB per pagina si potrebbe ottenere un risparmio giornaliero di larghezza banda di circa 924 GB, ovvero di 329 terabyte all'anno.

Questi numeri dovrebbero essere sufficienti per attirare l'attenzione.

Adesso, consideriamo il fatto che con la trasformazione otteniamo solo una versione che supporta il disegno più avanzato della pagina di Microsoft (quello che attualmente si vede con IE/Win) e che dovrebbe andare bene anche per gli altri browser moderni.

Aziende come la Microsoft possono o no mantenere una sola versione della propria pagina che funzioni con tutti i browser, che si carichi rapidamente e che sia più accessibile a tutti gli utenti e dispositivi. Ad ogni modo, ho pensato che fosse opportuno dimostrare come loro o qualsiasi altra azienda possano creare una sola versione utilizzando un codice più pulito, che funzioni con più browser e che abbia un'accessibilità maggiore. Tutto dimostrato nell'arco di una o due ore......

Punti supplementari

Nota: questo articolo è stato tradotto anche in altre lingue oltre l'italiano. L'elenco aggiornato delle traduzioni disponibili è consultabile su Stopdesign.com.

^Top

Dai un voto a questo articolo:   HITS: 35800 | VOTI: 44 | MEDIA VOTI: 9.0    

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 2