Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 16 di 41
  • livello principiante
Indice lezioni

Layout a due e tre colonne: introduzione

Tecniche di base, codifica, accessibilità.
Tecniche di base, codifica, accessibilità.
Link copiato negli appunti

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.

Ti consigliamo anche