Come si fanno i siti? Chiedetelo a Wired

Lo scorso 11 ottobre lo storico magazine Wired ha messo online il redesign, l’ennesimo, del proprio sito. È un redesign fondamentale e rivoluzionario. Per la prima volta un sito complesso, molto noto e a intenso traffico utilizza due tecnologie a molti, almeno nella pratica, poco note: l’XHTML e i CSS. Il risultato è sotto gli occhi di tutti. Il sito di Wired è veloce da visualizzare, leggibile, accessibile a utenti disabili, compatibile con i più recenti standard del World Wide Web e pronto per il futuro: un esempio di come si fanno siti.

Lasciamo perdere colori e tutto quello che definiamo solitamente il look & feel del sito. Concentriamoci su quali linguaggi vengono utilizzati e come.

Via le tabelle

Wired per prima cosa ha eliminato la versione tabellare del sito. Il layout delle pagine non viene strutturato in base a tabelle nidificate ma utilizzando i Fogli di stile. Ciò comporta un minore utilizzo di codice HTML, dunque maggiore velocità di scaricamento, e una maggiore leggibilità della pagina stessa. Eliminare le tabelle significa eliminare codice ridondante e lasciare che sia il contenuto del sito, e non il layout, a divenire centrale. Tutto ciò è ancor più importante per coloro che accedono alla rete con sintetizzatori vocali o screen reader.

Benvenuto XHTML

Il secondo e più importante aspetto del redesign di Wired è l’utilizzo di XHTML come linguaggio di marcatura. L’XHTML è il nuovo linguaggio standard per la pubblicazione di pagine Web ed è un’estensione del linguaggio HTML (non più standard). L’XHTML porta l’HTML nella famiglia XML per fargli condividere tutti i benefici di quest’ultima. In particolare su Wired l’XHTML viene utilizzato per la maggiore esportabilità dei documenti verso terminali che non siano browser. Wired ha introdotto infatti una versione compatibile con i PDA (Personal Digital Assistant), i piccoli computerini trasportabili con funzioni di agenda, d’appuntamento e di piccole utilità quotidiane.

CSS Professionali

I CSS in Wired.com non sono utilizzati solamente per la visualizzazione del layout ma anche per la gestione delle varie visualizzazioni. I CSS infatti agiscono solamente con i browser che accettano il parametro @import (“url”) (ossia Explorer dalla 4 in poi e Mozilla e vari cloni, tra cui Netscape 6). Gli altri browser (Nestcape 4.x e anche Lynx) non visualizzeranno la grafica e il layout del sito, mantendo comunque perfetta la leggibilità.

Provate poi a stampare una pagina qualsiasi – non naturalmente la versione stampabile -. Sul foglio uscito dalla vostra stampante troverete solo il testo dell’articolo: niente barre laterali, niente colori, nessun elemento di navigazione. Sempre grazie ai CSS.

Sempre grazie ai CSS, manipolando il DOM, è stata prevista la possibilità di cambiare al volo la grandezza del carattere, una funzione che c’è in ogni browser ma poco utilizzati da utenti poco esperti.

Compatibilità

La compatibilità del sito è su tutte le piattaforme e su tutti i browser. Tuttavia la grafica del “vero” Wired sarà visualizzabile solamente a chi possiede un browser che supporta i maggiori standard (ad oggi Explorer 5, Mozilla, Netscape 6 ecc.), mentre gli altri utenti visualizzeranno una versione grezza aperta da un messaggio che, in linea con il Web Standard Project, incoraggia gli utenti a utilizzare un browser migliore e più aggiornato.

Wired è il primo sito popolare che abbraccia con decisione le nuove tendenze del web design compatibile e accessibile. Il salto non è stato traumatico, è bastato un po’ di progettazione e uno sguardo al futuro, tipico comunque di tutta la storia del magazine. Ora Wired ha un sito più accessibile e più vicino agli standard. Speriamo apra la strada agli altri.

Vuoi provare anche tu?

Su HTML.it troverete molte risorse che spiegano come ottenere un sito simile a Wired. Per prima cosa gli articoli sul layout con i css vi spiegano come eliminare le tabelle dalla vostra progettazione. Da leggere anche la guida ad XHTML e gli articoli sull’accessibilità. Dovrete anche imparare a utilizzare i CSS per la stampa. Per cambiare i fogli di stile al volo e permettere la personalizzazione del carattere rimandiamo al lungo articolo su come Cambiare al volo i fogli di stile