Bulletproof Web Design: un libro da ninja
Ho letto un interessante libro di Dan Cederholm intitolato Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSS
Il concetto di fondo del libro è questo: okay, hai imparato a usare xhtml e css, hai imparato a validare i tuoi siti e a mettere il marchietto del W3C in basso nelle tue pagine; ora è il momento di fare le cose sul serio, di rendere il sito flessibile, a prova di browser e di utente, e facilmente mantenibile. Come direbbe una nota pubblicità, “take it to the next level“.
Nel resto dell’articolo uno sguardo al contenuto del libro e le mie impressioni.
Ciascuno dei primi otto capitoli del libro affronta un nodo chiave della realizzazione di un sito, proponendo una soluzione “a prova di proiettile”, con esempi concreti e facilmente applicabili. Il nono e ultimo capitolo realizza invece un sito completo applicando i vari consigli forniti.
L’obiettivo principale delle soluzioni proposte è quello di fare in modo che la struttura visiva del sito possa assorbire senza problemi la resa sui vari browser – compresi quelli estremi quali palmari o lettori vocali – o le personalizzazioni dell’utente – ad esempio l’ingrandimento e rimpicciolimento manuale dei caratteri. In aggiunta, quasi tutte le soluzioni cercano di rendere il codice snello, facile, rapido da mantenere.
Dimensione dei font
Si comincia con una dritta sulla definizione della misura del testo. I consigli dell’autore sono due:
- definire una dimensione di riferimento iniziale, e poi definire tutte le altre come percentuale di tale dimensione iniziale;
- per definire questa dimensione di riferimento iniziale, usare preferibilmente una keyword (“small”, “medium”, “large”) piuttosto che i pixel.
Mi trovo ovviamente d’accordo. L’utilizzo della parola chiave “small” significa che il sito andrà incontro all’utente, adattandosi alla sua definizione di small. E il fatto di avere tutti valori relativi significa che posso adattarmi rapidamente a nuovi dispositivi, ad esempio creando un CSS specifico che cambia solo il valore di riferimento iniziale.
Menu di navigazione
L’utilizzo di menu di navigazione realizzato con sole immagini è ancora abbastanza diffuso. Tuttavia, questo ci lascia con l’impossibilità di ingrandire i caratteri, o addirittura di navigare se abbiamo disabilitato le immagini.
L’esempio riportato illustra nel dettaglio come usare invece le liste non ordinate (ul) e delle immagini di sfondo espanse orizzontalmente o verticalmente per avere un risultato ugualmente soddisfacente dal punto di vista visivo ma decisamente più gestibile.
Molto interessante soprattutto il passaggio in cui viene illustrata una tecnica in puro CSS per visualizzare diversamente la tab corrispondente alla sezione del sito attiva (nel caso di un menu di navigazione a tab).
Flessibilità verticale degli elementi
L’autore suggerisce di eliminare gli elementi decorativi dal markup HTML e di applicarli invece come immagini di sfondo di un codice snello e orientato al contenuto. In particolare vengono introdotti alcuni trucchi (che verranno ripresi poi nei successivi capitoli) per garantire una flessibilità verticale degli elementi: fare in modo, insomma, che se ho due righe anzichè una, o il carattere un po’ più grande, la coerenza del layout non vada persa.
Questo viene applicato in particolare agli elementi per i quali di solito si sceglie un’altezza fissa, come header e menu di navigazione.
Float creativo
Per realizzare teaser – ovverosia quegli insiemi di titolo / immagine / descrizione incastrati in una specifica griglia – spesso vengono usate le tabelle. L’autore ci mostra invece come realizzare la stessa cosa con un codice estremamente semplice – interessante l’uso delle Definition Lists (dl) – e con l’utilizzo creativo (termine usato dall’autore) della proprietà float. In questo modo viene realizzato un layout a griglia senza l’utilizzo delle tabelle e quindi più facile anche da mantenere e modificare nel tempo.
Box espandibili
Per adattarsi a layout fluidi e a tutte quelle operazioni che possono determinare la modifica delle dimensioni di un box, in questo capitolo si riprende il concetto della flessibilità verticale già espresso nel capitolo 3, applicando inoltre la tecnica nota come Sliding Doors per applicare delle immagini di sfondo che permettano di avere box con angoli arrotondati. Vengono inoltre illustrate alcune tecniche avanzate per ottenere la stessa flessibilità anche lungo l’asse orizzontale – e permettere quindi al box di espandersi senza problemi sia in altezza che in larghezza.
Niente CSS e niente immagini
Va bene, finora è stato fatto un uso eccellente e abbondante dei CSS; ma facciamo un passo indietro. E’ importante che il markup sia significativo e chiaro, e che stia in piedi anche se vengono disabilitate le immagini o addirittura tutti i fogli di stile. E’ importante che il codice HTML sia rappresentativo del contenuto e che tutte le informazioni stilistiche (compreso il posizionamento degli elementi) venga demandato ai fogli di stile.
Consiglio importante: per tutti quei box che contengono testo e che hanno un’immagine di sfondo, è il caso di specificare sempre anche un colore di sfondo di colore adeguato, in modo che il testo resti leggibile anche se l’immagine di sfondo non è disponibile.
Esistono numerosi strumenti utili per testare velocemente l’aspetto del proprio sito quando viene appunto privato di immagini o CSS. Tra questi, anche la Web Developer Toolbar per Firefox che io stesso uso e vi consiglio.
Spazio alle tabelle
Sappiamo tutti che le tabelle sono state usate e abusate. Prima della diffusione dei CSS, con le tabelle si realizzava il layout intero del sito, così come qualsiasi tipo di allineamento, così come vari altri elementi grafici (es. angoli arrotondati). Risultato: un codice dieci volte più ampio del necessario, e difficile da mantenere. In tutto il libro (vedremo anche nel prossimo capitolo) le tabelle vengono rimosse e sostituite con soluzioni più leggere.
Tuttavia, le tabelle rimangono elementi HTML validi, se usati per dati effettivamente tabellari. In questo capitolo viene illustrato come tramite l’utilizzo di elementi HTML corretti (ammettetelo, usate mai il tag caption?) e di un foglio di stile adeguato, la nostra tabella sarà funzionale, leggera ed esteticamente piacevole.
Layout
Esaurito l’utilizzo positivo per le tabelle nel capitolo precedente, ritorniamo ad eliminarle dal layout. In questo capitolo si illustra una soluzione da manuale per il layout fluido a due o tre colonne, realizzato ovviamente con div e css. In questo modo si ha molto meno codice (nonostante qualche div aggiuntiva, il codice rimane comunque molto più snello rispetto a un sistema di tabelle annidate) e si può inoltre mettere il contenuto principale come primo elemento del markup indipendentemente dalla sua posizione nel layout (questione non indifferente sia per i browser alternativi che per i motori di ricerca).
Viene anche affrontato il problema delle immagini di sfondo che non riempiono tutta la schermata, presentando la tecnica delle faux columns introdotta proprio da Dan Cederholm, nonchè alcune evoluzioni di tale tecnica.
Conclusioni
Il libro, come già detto, è un prezioso strumento per chi già conosce xhtml e css. Oltre ad essere una fonte di tecniche utilissime e che senz’altro vi ritroverete ad applicare continuamente, è scritto con uno stile chiaro e piacevole da leggere. L’autore non nasconde le sue preferenze in termini di tecnologie utilizzate e scelte stilistiche, ma non ne fa mai l’argomento principale: il libro non vuole evangelizzare, bensì illustrare le potenzialità dei CSS e alcune “best practices” dettate dall’esperienza.
Alla fine della lettura avremo fatto un altro passettino nel percorso del vero Ninja del Web Design con i Css. Consigliato.
mario
grazie