Layout a tabelle senza tabelle

In passato mi sono occupato anche di grafica web, e ho realizzato alcuni siti anche abbastanza carini, ma sempre con tecniche di vecchia scuola: layout a tabelle, css solo per font, colori e simili, tante immaginine ritagliate (angoli, separatori ecc.)... tutte cose ormai messe giustamente al bando in favore di xhtml strict, markup semantico, layout basati su css e uso corretto delle immagini. I vantaggi sono evidenti per tutti, anche per me che adesso, da "programmatore puro", non devo più districarmi in mezzo alle tabelle annidate per inserire i controlli server.

Anche se di web design non mi occupo più, mi piace tenermi aggiornato e così ho studiato le tecniche attuali. Come "cavie" ho usato MeshCMS e il mio sito, che fino a pochi giorni fa aveva un layout a tabelle. Non ne potevo più di far parte della "vecchia scuola", e allo stesso tempo non avevo voglia di usare uno dei tantissimi layout disponibili liberamente sul web: dopotutto è il mio sito, non fa niente se non è il più bello del mondo, ma almeno l'ho fatto io da capo a piedi.

Ritornare a usare i programmi di grafica è stato un trauma. Tra l'altro, sono anche allergico alla pirateria, quindi non posso usare Photoshop, né tantomeno Fireworks, che ho usato in azienda in passato ed è veramente comodo. Così, il mio arsenale è ridotto a Micrografx Picture Publisher 10 (70 euro originale, stupendo, peccato non esista più!) e Inkscape. In più, niente Dreamweaver, ma questo proprio non è grave: usando XHTML e css in modo corretto, si lavora di lusso con gli editor testuali (per la cronaca, uso jEdit). Quando poi voglio scrivere del codice XHTML in maniera visuale, XMLmind XML editor Personal Edition è davvero comodo.

La parte difficile: mettere le cose al loro posto.

Layout a due o tre colonne? Dunque, ne vorrei due, ma in alcune pagine tre. Layout fisso o fluido? Fisso, grazie, ma che si allarghi quando necessario. Ne ho visti tanti di siti, specialmente blog, con una colonna di testo stretta, molto confortevole da leggere, ma col testo che esce da un lato, per esempio quando si inserisce un pezzo di codice o un indirizzo troppo lungo. Non mi importa nulla di Internet Explorer 5 e Netscape 4, mi basta supportare IE 6 e 7, Firefox e magari Opera. Safari? Non sono un fan di Apple, specialmente ora che hanno smesso di supportare Java. Comunque, alla fine ho deciso di testare su Firefox in Linux, IE6/7/Firefox in Windows. Ah, e su Opera Mini, adorata bestiola da tasca che mi fa spesso compagnia nei miei viaggi in treno, e che offre un'interessante "opinione" sui siti, dovendoli riadattare a uno schermo molto piccolo: su questi dispositivi la qualità dell'html conta molto, e la maggior parte della grafica va a farsi benedire. Inoltre, poter consultare una pagina web sul cellulare è talmente comodo che sono convinto che presto lo faranno in molti, e tanti siti dovranno essere sottoposti a un restyling forzato per essere compatibili con questi dispositivi. Per esempio, è inutile tentare di controllare il conto BancoPosta, mentre si riesce facilmente a consultare l'orario dei treni (ma poi non si può comprare il biglietto...)

L'inizio è stato molto incoraggiante: un po' di A List Apart, qualche articolo in giro e tanti esempi mi hanno portato a scegliere alcune soluzioni da provare. In fondo, con poche righe di CSS si riesce a sistemare il tutto in un attimo: colonne ai lati, contenuto principale al centro, intestazione e pié di pagina. Tutto ok? Macché! Apro IE6 ed è il caos. IE6 ha una sua visione del mondo, e non c'è modo di mandarlo in pensione, per ora: bisogna tenerlo presente per forza. Iniziano i trucchi: righe di CSS incomprensibili, copiate qua e là e che rimettono le cose a posto. Ma tutto questo non era iniziato per "ripulire" il codice? Va be', l'HTML è abbastanza pulito, c'è solo qualche DIV di troppo, ma è sempre meglio dei soliti tierretiddì. Il CSS non mi piace molto, speravo di poterlo tenere più pulito, ma tant'è, avanti così.

Resta il problema del testo troppo largo: il layout fisso è troppo fisso, quello fluido è troppo fluido: su un monitor da 1600 pixel (che io non ho) è di fatto inusabile. Ma perché non ridimensionano la finestra del browser? Mah! Come al solito la colpa è di Internet Explorer, in tutte le sue versioni, perché manca il supporto di min-width e min-height. Magari ci sono altri hack per simularli, ma io non li conosco, e poi li trovo alquanto indigesti. Ah, e non riesco a nascondere la colonna di destra quando non contiene nulla. Cosa faccio, creo due CSS diversi?

Nostalgia?

A questo punto mi viene da pensare che con una tabella sarebbe stato tutto più semplice: una riga sopra per l'intestazione, una a due o tre colonne per il contenuto e, infine, una per il pié di pagina. Cinque celle e passa la paura. Posso togliere l'ultima colonna se non mi serve, e tutta la tabella mi si allarga da sola se il contenuto non ci sta. Che faccio, cedo? Dai, in fondo è una tabella sola, non farà tanto danno. Prometto che non ne userò altre, come ho fatto in passato, per i vari box. Ma no, dai, ci sono tanti siti splendidi in giro che riescono a fare a meno delle tabelle, e poi dovrei anche ricominciare con quelle odiose immagini trasparenti tipo 200x1 per fissare le larghezze e le altezze minime. L'HTML tornerebbe a essere illeggibile.

Armistizio

Ho deciso, l'HTML non si tocca, ma la tabella ce la metto lo stesso. Del resto è l'unica che riesca a tenere le cose al loro posto in tutti i browser, e sarà ancora così per un bel po' di tempo, visto che IE7 non ha portato tutti i cambiamenti sperati. Come faccio? Chiedo aiuto a JavaScript, anzi, a jQuery, che mi rende tutto più semplice. Da quando ho scoperto questo coltellino svizzero del web, non riesco più a farne a meno, a tal punto che sto cercando di usarlo anche sul server.

Qualcuno dirà che non si fa layout con JavaScript, che serve ad altro. Io allora dico che non si fa neanche con i CSS, finché questo non sarà possibile in maniera corretta su tutti i browser. Lo so che la colpa è tutta di Microsoft, ma io vivo nel mondo reale e devo accettare la sua esistenza, anche se sto bene attento a non finanziarla.

Layout dinamico

Insomma, ho deciso di procedere così: ripulisco il mio HTML da ogni orpello, compresi quei famosi DIV non strettamente necessari, e mi preoccupo solo di indicare, con ID o classi, che cosa ogni elemento di primo livello rappresenta (titolo, descrizione, contenuto, menu di navigazione, pié di pagina eccetera).

A questo punto, creo un file CSS, diciamo main.css, e ci metto dentro tutte le definizioni di stile, ma non di layout. Un po' come il caro vecchio CSS 1, insomma. Ciò che ottengo è una pagina in cui il testo usa i font che voglio io, i link hanno il colore che ho scelto, e così via.

Ora arriva il layout: mi servono due file, layout.js e layout.css. Nel primo, uso jQuery per creare dinamicamente una tabella e per spostare i vari elementi della pagina nella cella giusta. Ne approfitto per creare le colonne laterali solo se ho davvero qualcosa da metterci: usando un CMS, è facile che le pagine siano molto diverse tra loro. Nel secondo, il CSS, metto gli stili che riguardano solo questi elementi creati dinamicamente. In cinque minuti il gioco è fatto, il mio layout usa una tabella, ma nel codice HTML non c'è. Anzi, potenzialmente l'HTML può essere più pulito di quello di molti siti che usano i CSS per i layout.

Naturalmente, ogni soluzione ha i suoi inconvenienti, e questa non è da meno. A parte il fatto di usare JavaScript per creare il layout, c'è il problema che ho bisogno di aspettare che l'HTML sia stato caricato tutto prima di poter creare la tabella, quindi in alcuni casi si fa in tempo a vedere la pagina così come è realmente, prima che tutto venga trasferito nelle celle di destinazione. Comunque, a questo si può ovviare: basta nascondere la pagina e mostrare un'immagine che indichi che il caricamento è in corso, in fondo anche con un modem 56k si tratta al massimo di qualche secondo, anche perché, grazie a jQuery, non ho bisogno di aspettare che siano caricate tutte le immagini: basta che sia pronto l'HTML. Di fatto, con una normale ADSL l'animazione di attesa non si vede quasi mai.

Altro svantaggio: chi non usa JavaScript vede la pagina senza layout. È così grave questo? Non credo, anche perché tutto il contenuto risulta perfettamente leggibile. Tra l'altro, ho deciso di applicare il layout solo su schermi più larghi di 800 pixel, così chi usa un monitor piccolo difficilmente dovrà fare scrolling anche in senso orizzontale. In questa categoria, ovviamente, rientrano anche i cellulari e i palmari, che così non devono combattere con la tabella di layout.

Conclusioni

Sono molto soddisfatto della soluzione che ho trovato per il mio sito, e desidero condividerla nel caso qualcuno la trovi adatta alle sue necessità. Mi resta ancora molto da fare: la grafica innanzitutto, poi devo migliorare ulteriormente l'HTML e riorganizzare il JavaScript, magari per renderlo più flessibile e riutilizzabile.

Per ora non ho preparato del codice di esempio, i più curiosi possono guardare quello di queste pagine. Quando avrò pubblicato il layout definitivo, preparerò anche dei file di esempio da scaricare. 

fabio

6-giu-2008 23.09

ciao, interessante pagina.... vorrei alcune delucidazioni riguardo l'html, se hai msn il mio contatto รจ Fa.Co9@hotmail.it grazie ciao

Luciano

8-giu-2008 15.57

Ciao Fabio,

mi dispiace ma non uso MSN, poi usare la pagina dei contatti per mandarmi una mail.

I commenti sono chiusi.

Cerca