Layout a due e tre colonne: introduzione

Ci sono due modi per realizzare layout a due o più colonne:

• L’uso del posizionamento, in particolare assoluto e relativo.
• L’uso della proprietà float e dei margini.

In quanto alla scelta della tecnica da usare, c’è da dire che:

• la tendenza attualmente più diffusa è quella che poggia sulla proprietà float (consente una maggiore flessibilità e facilità di codifica);
• l’uso del posizionamento assoluto permette un maggior controllo sulla disposizione e separazione dei contenuti.

Di ogni layout vedremo le due versioni e molte varianti, e affronteremo pro e contro delle due tecniche nello specifico della tipologia.

La disposizione delle sezioni in ordine di codice html

È importante tenere presente, come vedremo in seguito, che l’uso dei float e dei posizionamenti assoluti per layout a due o tre colonne condiziona a monte la codifica del codice HTML. Un buon webdesigner dovrebbe sempre considerare l’accessibilità di un sito e codificarlo di modo che risulti favorito nell’indicizzazione dai motori di ricerca.

Sulla questione dell’accessibilità, ho chiesto un parere a Michele Diodati, mentre ho preso spunto dall’articolo “Progettare un sito gradito ai motori di ricerca” di Francesco de Francesco per quanto riguarda i motori di ricerca. La mia curiosità: Quanto influisce l’ordine del codice HTML in cui è prevista la navigazione dopo i contenuti?

Michele Diodati, del sito Diodati.org e autore della guida “Costruire siti ad elevata accessibilità” mi ha risposto:

…Se sono favorevole oppure no a soluzioni di impaginazione in cui tramite CSS si faccia apparire il menu di navigazione in un posto qualsiasi della pagina, mentre nel codice HTML si trova dopo il testo principale?
Se questa è la tua domanda, la mia idea è che tale soluzione vada adottata con estrema attenzione, perché fa uso quasi inevitabilmente di posizionamenti assoluti, che non si prestano bene ai ridimensionamenti. Un’impaginazione accessibile deve tenere sempre conto, infatti, della possibilità che l’utente ingrandisca il testo e, quando ciò avviene, nei limiti del possibile non devono avvenire sovrapposizioni di contenuti.
Quanto al fatto di mettere i contenuti prima del menu, questa è una richiesta pressante dei non vedenti, che sono veramente infastiditi da pagine fatte da chilometrici elenchi di link, da percorrere prima di arrivare ai contenuti veri e propri. Nè sono aiutati dai link di salto, che odiano visceralmente. Per loro i link di salto sono appunto salti nel buio: non sanno cosa c’è tra il link e il contenuto.
In effetti non siamo ancora riusciti a trovare un sistema veramente valido che metta d’accordo le abitudini dei vedenti (menu di navigazione a nord, contenuti a sud),con le esigenze dei non vedenti (i contenuti prima di tutto).

Francesco de Francesco, nel suo recente articolo apparso nella sezione PRO di HTML.it afferma:

In considerazione del fatto che tutti i motori danno significato alla posizione del testo nell’ambito del file della pagina e alla posizione delle parole nell’ambito del testo, è evidente che differenti impaginazioni, anche per testi uguali, producono risultati diversi in termini di posizione sui risultati.
Vari motori evidenziano come descrizione del sito trovato le prime parti incontrate nel body. Avere il menù nella parte alta, se necessario per l’usabilità del sito, è spesso fattore negativo per il posizionamento.
Un buon schema d’impaginazione può consentire decisi miglioramenti del posizionamento. Le tecniche di sviluppo, inoltre, permettono spesso di superare i vincoli di posizione.

Un’altro problema da affrontare preliminarmente è quello concernente la lunghezza e la larghezza delle colonne. È l’argomento della prossima lezione.