Le tabelle prima tanto usate stanno con il passare degli anni lasciando il posto ai css: negli ultimi anni infatti i web designer usano sempre più spesso i CSS, non solo per formattare testi ma anche per creare e “sistemare” una pagina nel suo complesso.

Creare un sito è un processo che deve seguire determinate fasi:
1. fase di ideazione:
durante la fase di ideazione di un sito si comincia scegliendo il formato della pagina. Per un layout orizzontale si può usare un 1000px per 600px visibile anche su monitor di piccole dimensioni; per uno verticale, tenendo ferma la larghezza 1000px, potete scendere quanto volete, ma è sempre meglio non superare il doppio dell’altezza altrimenti si rende difficoltosa la lettura. Successivamente si imposta una gabbia grafica al cui interno ogni elemento (blocchi di testo, immagini, elementi grafici) ha un proprio spazio.
Si procede a tentativi, utilizzando un software grafico, verificando le proporzioni delle parti in funzione sia dell’estetica sia delle priorità dei messaggi che si devono comunicare, finché non si è del tutto soddisfatti. Lo scopo è quello di realizzare un’anteprima della pagina che può servire anche come proposta per il cliente.

2. Impaginazione :
la fase successiva è quella in cui si deve smontare tutto il disegno della pagina, per poi poterlo ricomporre, perfettamente identico all’originale, in formato html. Si procede quindi al “taglio” delle parti, ovviamente escludendo i blocchi di testo di cui prenderete solo le misure, un software come Photoshop permette tutti i passaggi necessari. Nella pagina html è bene distinguere tutti i componenti unici da quelli che hanno necessità di essere ripetuti nella pagina con lo stesso aspetto e posizione. Esempi dei primi sono: testata, footer, menu ecc. Questi verranno identificati con il tag html “div” e il loro stile sarà associato a un “id”. Come esempi di parti ripetute possiamo pensare a news o annunci con blocchi di testo e immagini oppure semplici paragrafi; questi saranno dei “div” con lo stesso valore del parametro “class” che conterrà lo stile appropriato.

3. scrittura del foglio di stile:
E’ questo il punto in cui i CSS diventano l’elemento chiave che fa risparmiare tempo. A ogni area basterà aggiungere gli attributi position, top e left per farle prendere la sua posizione e gli attributi width e height per gestire lo spazio, tutte misure che possediamo già. Infatti se avete impostato la gabbia con precisione utilizzando i righelli, non avrete difficoltà a ricavare tutte le misure in pixel dei singoli componenti della pagina.
Se il sito è formato tutto da pagine basate sulla stessa griglia basterà un unico foglio di stile esterno, se invece vi sono delle pagine di tipo A e delle pagine di tipo B è meglio creare due fogli di stile separati, invece di farne uno con due o più varianti. E’ molto utile scrivere sempre dei commenti all’interno del foglio di stile, ad esempio che la parte A e la parte B sono state costruite all’interno della parte C, così nel momento in cui dovrete ampliare una di queste vi ricorderete di aumentare anche la C.

Verificate sempre su più browser il risultato, può capitare che su alcuni si vedano dei disallineamenti della vostra gabbia tanto studiata, in questi casi è necessario trovare accorgimenti caso per caso. Dal mio punto di vista di designer di Creativi quadrati, ritengo che i CSS lascino molto più spazio alla creatività e siano concettualmente molto più simili al metodo di lavoro dei grafici.