Man mano che si diventa professionisti o quando il livello della complessità dei progetti si innalza, è fondamentale avere delle linee guida da seguire nello sviluppo di layout CSS dal design complesso. Basandomi sulla mia esperienza e sulle discussioni avute su varie mailing list e forum, ho notato che gli sviluppatori in genere creano da zero nuove linee guida a seconda del progetto da sviluppare. Se da un lato questo porta ad avere nuovi stimoli su cui lavorare, dall'altro comporta un notevole dispendio di tempo per ogni nuovo progetto. Si sente quindi il bisogno di avere almeno qualche punto fermo da cui partire onde evitare ritardi e confusione. Vediamo quali sono questi punti fermi.
Riutilizzo del codice
Quasi tutti i siti, se non tutti, hanno delle caratteristiche comuni: le immagini allineate a destra o a sinistra, un reset degli stili a livello globale, il footer con i credits, i menu di navigazione e via dicendo. Consiglio di memorizzare tutte le regole di stile che definiscono queste caratteristiche comuni, astrarle usando classi o ID generici e riutilizzarle nei nostri progetti. Esempio:
.alignleft {
float: left;
margin: 0 0 0 5px;
}
#credits {
text-align: center;
font-size: 0.8em;
}
Ecco quindi il primo punto fermo: riutilizzo del codice.
Griglie
Quasi sempre lavoriamo con layout in formato PSD che poi andremo a convertire in HTML e CSS. Quando lavoriamo con tali file, è importante cercare di vedere la struttura sottostante al layout, ossia la griglia di base che impagina testi e immagini. Una volta fatto questo, vi consiglio di creare un nuovo file in cui andrete a disegnare tale griglia, usando dei box vuoti al posto degli elementi grafici e dei testi.
Scopriremo così che il nostro nuovo progetto in realtà è basato su una griglia che abbiamo già visto in precedenza in un altro layout. Stabilito questo, la struttura HTML e CSS verrà realizzata in minor tempo, perchè dovremo semplicemente riadattare del codice usato in precedenza. Secondo punto: usare le griglie.
Prototipi
Un prototipo CSS è un layout composto di box vuoti (con sfondi diversi per distinguerli) e senza immagini di sfondo in cui gli unici contenuti effettivi sono di tipo testuale. Questo ci permette di poter astrarre il modello di layout su cui andremo ad operare senza essere distratti dalle immagini. Quindi il posizionamento, il floating, la spaziatura verticale potranno essere gestiti con più precisione. In questo demo potete per esempio vedere il prototipo di un ipotetico layout in stile Facebook. Nessuna immagine: solo testi e box.
Terzo punto: usare i prototipi.