Dimensioni del testo

Al momento di decidere la grandezza del testo da inserire in una pagina web, occorre tenere conto anche dei seguenti fattori:

  • dimensione in pollici del monitor che lo visualizzerà;
  • “definizione” del monitor che lo visualizzerà;
  • interpretazione delle informazioni relative alla formattazione del testo da parte del browser che lo visualizzerà;
  • la leggibilità in caso di stampa del testo.

Esempio delle più comuni dimensioni del testo in rete:

Arial, normale, 8 pt;
Arial, normale, 10 pt;
Arial, normale, 12 pt;
Arial, normale, 14 pt;
Arial, normale, 18 pt;
Arial, normale, 24 pt;
Arial, normale, 36 pt.

Se si prova a visualizzare questo semplice prospetto su un monitor più grande o più piccolo, e/o impostato su una risoluzione maggiore o minore, ci si renderà conto immediatamente di come la leggibilità e il comfort nella lettura possano cambiare anche in maniera considerevole.

Non tutti dispongono di un monitor più grande di 17 pollici (molti arrivano a 15), e non tutti utilizzano “risoluzioni” elevate (800×600 è lo standard oggi più comune).

E’ importante notare come non solo il testo molto piccolo può risultare inaccessibile; anche quello molto grande può creare problemi! (Non solo a soggetti affetti da anomalie nel campo visivo e/o da abbagliamento).

Evitate di “obbligare” senza possibilità di scappatoia le dimensioni del testo attraverso i fogli stile; l’utilizzatore deve sempre avere la possibilità di personalizzare la dimensione del testo attraverso i normali strumenti messi a disposizione dal browser.

Leggete anche i consigli a proposito delle immagini.

Indicazioni.

  • non inserire testo di dimensioni inferiori a 14 e superiori a 24 pt;
  • le dimensioni dei caratteri devono comunque sempre essere “relative”; ovvero personalizzabili. Il navigatore deve sempre poter decidere quanto grande far apparire il testo sullo schermo.
  • progettare le pagine Web impostando la dimensione «più grande» dei caratteri da parte del browser (in IE: Visualizza|Carattere|Molto grande); così si avrà la certezza quasi matematica di non fare pasticci…

Tipi di carattere

I problemi di accessibilità legati ai tipi di carattere sono due:

  • leggibilità;
  • interpretazione e visualizzazione da parte del browser.

I tipi di carattere dal tratto semplice, sono di norma più leggibili e meno affaticanti. I più comuni sono: Arial, Times New Roman e Courier New; l’Arial, a mio parere, è in assoluto il più leggibile.

Il rischio nell’utilizzo di tipi di caratteri non comuni è che il browser utilizzato dal navigatore non li riconosca e interpreti il da farsi a modo suo; se tutto funziona a dovere, utilizzando il “carattere predefinito”. In casi particolari, ad es. quando un occidentale tenta di caricare una pagina web di un sito scritto in giapponese, può addirittura venir richiesta l’installazione di componenti aggiuntivi (cosa non semplice per la maggioranza dei navigatori).

L’utilizzo da parte del browser di un tipo di carattere diverso da quello previsto, può comportare l’alterazione grafica del contenuto della pagina, con ripercussioni anche gravi sul piano funzionale, percettivo ed estetico.

Indicazioni.

Utilizzare tipi di carattere comuni e di facile lettura.

Attributi del testo

Qual è il rapporto tra gli attributi più comuni del testo (grassetto, corsivo e sottolineato) e l’accessibilità? Molto dipende dal tipo di carattere utilizzato; gli effetti di affastellamento ed eccessiva distorsione, tanto per citare i problemi più comuni, possono variare anche in maniera considerevole in base al tipo di carattere scelto.

Indicazioni.

  • utilizzare il grassetto nei titoli, per brevi parti significative di testo e in caso di tipi di carattere dal tratto sottile. Molte righe di grassetto consecutive possono affaticare la vista: utilizzare perciò il grassetto solo dove veramente necessario;
  • utilizzare il corsivo solo nei titoli e nelle citazioni. Molte righe consecutive di corsivo possono affaticare la vista;
  • evitare il sottolineato:
    • i browser lo utilizzano generalmente come marcatore dei collegamenti ipertestuali (link); si rischia pertanto l’erronea interpretazione dell’attributo;
    • la sottolineatura interferisce con la forma stessa di alcuni caratteri (g, j, p, q e y);
  • evitare l’uso simultaneo degli attributi. Più il tratto è ricco e complesso, meno è leggibile.

Allineamento del testo

L’allineamento del testo a sinistra di norma aiuta la leggibilità, soprattutto quando le righe sono numerose.

La “giustificazione” del testo, oltre ad essere poco utilizzata nella rete, comporta problemi d accessibilità. La diversa distanza tra le parole può confondere ed affaticare la vista.

L’allineamento al centro, utilizzabile per i titoli e per brevissimi elementi significativi del testo, se distribuito su più righe, dovrebbe essere gestito in modo che queste abbiano una lunghezza analoga tra loro. Righe di diversa lunghezza, se allineate al centro, affaticano la vista.

L’allineamento a destra, utilizzabile per brevissimi e significativi elementi del testo, se distribuito su più righe, dovrebbe essere gestito in modo che queste abbiano una lunghezza analoga. Righe di diversa lunghezza, se allineate a destra, affaticano la vista.

Indicazioni.

Allineare il testo normale a sinistra; in caso di testo allineato a destra o al centro, contenerne la lunghezza complessiva e distribuirlo in maniera uniforme tra le eventuali diverse righe.

Organizzazione/distribuzione del testo

L’organizzazione del testo in capitoli, paragrafi e relativi titoli e sottotitoli, con diversa dimensione e colori dei caratteri, aiuta la leggibilità e l’orientamento all’interno della pagina. A tal fine, la suddivisione del testo in paragrafi è da preferirsi all’interruzione di riga.

Un lungo testo suddiviso in paragrafi non più estesi di una decina di righe, risulta facilmente leggibile; inoltre ci si orienta meglio e si recuperano più agevolmente le informazioni al suo interno.

Anche l’interlinea, cioè la distanza tra le diverse righe di un paragrafo, è un elemento da tenere in considerazione. Righe troppo ravvicinate o troppo distanziate, perdono in accessibilità. La troppa distanza può creare problemi nell’andare a capo, le righe in parte sovrapposte possono pregiudicare la comprensione di alcuni caratteri quali: b, d, f, g, h, j, l, p, q, t, y.

Indicazioni.

  • presentare il testo in modo logico, badando alla diversificazione ed enfatizzazione dei titoli rispetto al corpo del testo e suddividere quest’ultimo in paragrafi lunghi non più di una decina di righe;
  • non avvicinare o allontanare eccessivamente le righe di testo tra loro, modificando l’interlinea; le impostazioni predefinite sono generalmente ottimali.

Contrasto testo-sfondo

Il contrasto testo-sfondo, unitamente alle dimensioni del testo, rappresenta spesso la chiave di volta dell’accessibilità a livello visivo del web. Più e prima di qualsiasi altra considerazione sul tema, verificate la compatibilità del contrasto tra i principali colori utilizzabili in rete nella tabella che segue.

Sottolineo nuovamente come i dati esposti scaturiscono dall’esperienza personale, diretta e derivata dall’osservazione di terzi.

Legenda:

  • nella prima riga di ogni cella la sigla del colore di sfondo;
  • nella seconda riga di ogni cella la sigla del colore del testo;
  • nella terza riga di ogni cella, la compatibilità (Sì, NI, NO);
Sì = accettabile;
NI = sconsigliato;
NO = da non utilizzare.

Elenco dei colori:

A   bianco;
B   rosso;
B2  rosa antico (solo sfondo);
C   giallo;
C2  giallino (solo sfondo);
D   verde limone;
D2  verdino (solo sfondo);
E   azzurro;
E2  celeste (solo sfondo);
F   blu chiaro;
G   fucsia;
G2  rosa (solo sfondo);
H   bordeaux;
I   verde oliva;
J   verde;
K   verde acqua;
L   blu scuro;
L2  glicine (solo sfondo);
M   viola;
N   grigio chiaro;
O   grigio scuro;
P   nero.
(nelle caselle "AA", "BB". "CC"... il contrasto è nullo)
A
A
NO		 A
B
NO		 A
C
NO		 A
D
NO		 A
E
NO		 A
F
NI		 A
G
NO		 A
H
Sì		 A
I
NI		 A
J
Sì		 A
K
NI		 A
L
Sì		 A
M
Sì		 A
N
NO		 A
O
NO		 A
P
Sì
B
A
NO		 B
B
NO		 B
C
NO		 B
D
NO		 B
E
NO		 B
F
NO		 B
G
NO		 B
H
NO		 B
I
NO		 B
J
NO		 B
K
NO		 B
L
NO		 B
M
NO		 B
N
NO		 B
O
NO		 B
P
NO
B2
A
NO		 B2
B
NO		 B2
C
NO		 B2
D
NO		 B2
E
NO		 B2
F
NI		 B2
G
NO		 B2
H
NI		 B2
I
NO		 B2
J
NO		 B2
K
NO		 B2
L
NI		 B2
M
NI		 B2
N
NO		 B2
O
NO		 B2
P
NI
C
A
NO		 C
B
NO		 C
C
NO		 C
D
NO		 C
E
NO		 C
F
NO		 C
G
NO		 C
H
NI		 C
I
NO		 C
J
NO		 C
K
NO		 C
L
NI		 C
M
NI		 C
N
NO		 C
O
NO		 C
P
NI
C2
A
NO		 C2
B
NO		 C2
C
NO		 C2
D
NO		 C2
E
NO		 C2
F
NI		 C2
G
NO		 C2
H
Sì		 C2
I
NI		 C2
J
NI		 C2
K
NI		 C2
L
Sì		 C2
M
Sì		 C2
N
NO		 C2
O
NI		 C2
P
Sì
D
A
NO		 D
B
NO		 D
C
NO		 D
D
NO		 D
E
NO		 D
F
NO		 D
G
NO		 D
H
NI		 D
I
NO		 D
J
NO		 D
K
NO		 D
L
NI		 D
M
NI		 D
N
NO		 D
O
NO		 D
P
NI
D2
A
NO		 D2
B
NO		 D2
C
NO		 D2
D
NO		 D2
E
NO		 D2
F
NI		 D2
G
NI		 D2
H
Sì		 D2
I
NO		 D2
J
NO		 D2
K
NO		 D2
L
Sì		 D2
M
Sì		 D2
N
NO		 D2
O
NO		 D2
P
Sì
E
A
NO		 E
B
NO		 E
C
NO		 E
D
NO		 E
E
NO		 E
F
NO		 E
G
NO		 E
H
NI		 E
I
NO		 E
J
NO		 E
K
NO		 E
L
NI		 E
M
NI		 E
N
NO		 E
O
NO		 E
P
NI
E2
A
NO		 E2
B
NO		 E2
C
NO		 E2
D
NO		 E2
E
NO		 E2
F
NO		 E2
G
NO		 E2
H
Sì		 E2
I
NO		 E2
J
NO		 E2
K
NO		 E2
L
Sì		 E2
M
Sì		 E2
N
NO		 E2
O
NO		 E2
P
Sì
F
A
NI		 F
B
NO		 F
C
NO		 F
D
NO		 F
E
NO		 F
F
NO		 F
G
NO		 F
H
NO		 F
I
NO		 F
J
NO		 F
K
NO		 F
L
NO		 F
M
NO		 F
N
NO		 F
O
NO		 F
P
NO
G
A
NI		 G
B
NO		 G
C
NO		 G
D
NO		 G
E
NO		 G
F
NO		 G
G
NO		 G
H
NO		 G
I
NO		 G
J
NO		 G
K
NO		 G
L
NO		 G
M
NO		 G
N
NO		 G
O
NO		 G
P
NO
G2
A
NO		 G2
B
NO		 G2
C
NO		 G2
D
NO		 G2
E
NO		 G2
F
NO		 G2
G
NO		 G2
H
NI		 G2
I
NO		 G2
J
NO		 G2
K
NO		 G2
L
NI		 G2
M
NI		 G2
N
NO		 G2
O
NO		 G2
P
NI
H
A
SI		 H
B
NO		 H
C
Sì		 H
D
NI		 H
E
SI		 H
F
NO		 H
G
NI		 H
H
NO		 H
I
NO		 H
J
NO		 H
K
NO		 H
L
NO		 H
M
NO		 H
N
NI		 H
O
NO		 H
P
NO
I
A
NI		 I
B
NO		 I
C
NO		 I
D
NO		 I
E
NI		 I
F
NO		 I
G
NO		 I
H
NO		 I
I
NO		 I
J
NO		 I
K
NO		 I
L
NO		 I
M
NO		 I
N
NO		 I
O
NO		 I
P
NO
J
A
Sì		 J
B
NO		 J
C
NI		 J
D
NO		 J
E
NI		 J
F
NO		 J
G
NO		 J
H
NO		 J
I
NO		 J
J
NO		 J
K
NO		 J
L
NO		 J
M
NO		 J
N
NO		 J
O
NO		 J
P
NO
K
A
Sì		 K
B
NO		 K
C
NI		 K
D
NO		 K
E
NO		 K
F
NO		 K
G
NO		 K
H
NO		 K
I
NO		 K
J
NO		 K
K
NO		 K
L
NO		 K
M
NO		 K
N
NO		 K
O
NO		 K
P
NO
L
A
Sì		 L
B
NO		 L
C
Sì		 L
D
NI		 L
E
NI		 L
F
NO		 L
G
NO		 L
H
NO		 L
I
NO		 L
J
NO		 L
K
NO		 L
L
NO		 L
M
NO		 L
N
NO		 L
O
NO		 L
P
NO
L2
A
NO		 L2
B
NO		 L2
C
NO		 L2
D
NO		 L2
E
NO		 L2
F
NO		 L2
G
NO		 L2
H
NI		 L2
I
NO		 L2
J
NO		 L2
K
NO		 L2
L
NI		 L2
M
NI		 L2
N
NO		 L2
O
NO		 L2
P
NI
M
A
Sì		 M
B
NO		 M
C
 Sì		 M
D
 NI		 M
E
 NI		 M
F
NO		 M
G
NO		 M
H
NO		 M
I
NO		 M
J
NO		 M
K
NO		 M
L
NO		 M
M
NO		 M
N
NO		 M
O
NO		 M
P
NO
N
A
NO		 N
B
NO		 N
C
NO		 N
D
NO		 N
E
NO		 N
F
NO		 N
G
NO		 N
H
NI		 N
I
NO		 N
J
NO		 N
K
NO		 N
L
NI		 N
M
NI		 N
N
NO		 N
O
NO		 N
P
NI
O
A
NI		 O
B
NO		 O
C
NI		 O
D
NO		 O
E
NI		 O
F
NO		 O
G
NO		 O
H
NO		 O
I
NO		 O
J
NO		 O
K
NO		 O
L
NO		 O
M
NO		 O
N
NO		 O
O
NO		 O
P
NO
P
A
Sì		 P
B
NO		 P
C
Sì		 P
D
NI		 P
E
Sì		 P
F
NO		 P
G
NO		 P
H
NO		 P
I
NO		 P
J
NO		 P
K
NO		 P
L
NO		 P
M
NO		 P
N
NI		 P
O
NO		 P
P
NO

I parametri di compatibilità esposti nella tabella sono evidentemente indicativi, alcuni ipovedenti potrebbero preferire per esempio combinazioni a bassissimo contrasto per ridurre l’abbagliamento; in linea di massima credo che oltre il 95% dei navigatori sottoscriverebbe questa tabella.

La tabella prende in considerazione sfondi e caratteri a tinta unita; le immagini di sfondo e i caratteri del testo variamente colorati sono al 99,9% inaccessibili e, comunque, non confortevoli.

Indicazioni.

  • il rosso e il verde sono i colori più problematici per i daltonici;
  • le tonalità accese e il bianco sono poco riposanti e possono provocare abbagliamento;
  • le tonalità medie, soprattutto se combinate tra loro, sono a basso contrasto;
  • preferire sfondi chiari e tenui con testo decisamente scuro, ovvero sfondo decisamente scuro con testo chiaro, magari non troppo sgargiante;
  • il basso contrasto tra testo e sfondo dalle tonalità medie, normalmente sconsigliato (“NI”), può essere aumentato mettendo il testo in grassetto.

Il testo nella pagina

Nelle pagine web il testo non dovrebbe mai essere a stretto contatto con altri elementi quali: margini della finestra, immagini, tabelle, frame, ecc.

Anche l’eccessiva frammentazione – testo suddiviso in più parti, posizionate in zone diverse della pagina e magari distanti fra loro – pregiudica l’accessibilità.

Indicazioni.

Lasciare almeno 10-15 pixel di distanza tra il testo e gli altri elementi della pagina, margini della finestra compresi.

Frame, barre dei link, tabelle, form…

I frame, le barre dei link, le tabelle, le linee di separazione orizzontali e gli altri elementi grafici non sono per principio causa di inaccessibilità per gli ipovedenti (fate comunque riferimento anche ai principi di accessibilità per i non vedenti…); se terrete conto dei suggerimenti dati fin qui, le vostre pagine non dovrebbero avere particolari problemi.

Per quanto riguarda i form, è indispensabile che siano chiari (come leggibilità e contenuti) e facili da compilare:

  • il modulo dev’essere adeguatamente separato ed evidenziato rispetto ad eventuali altre parti testuali contenute nella pagina;
  • i campi devono essere adeguatamente separati tra loro (con interruzioni di paragrafo), in modo che sia chiaro cosa e dove si andrà a compilare;
  • le etichette dei campi devono essere brevi, ma esplicative e, in generale, seguire le stesse regole di accessibilità viste a proposito del testo;
  • la parte attiva dei campi (caselle di testo pulsanti, ecc.), devono seguire le stesse regole di accessibilità viste a proposito del testo e degli altri elementi grafici.

Leggete anche: Il testo nella pagina e Organizzazione della pagina.

Indicazioni.

  • troppi frame possono generare confusione nella pagina;
  • non esagerare con le barre dei link e le tabelle;
  • lasciare almeno 10-15 pixel di distanza tra il testo e gli altri elementi della pagina e tra gli elementi stessi;
  • l’aspetto grafico dei form deve seguire le stesse regole di accessibilità previste per il testo e gli altri elementi grafici.

Le immagini

Anche le immagini non sono un tabù (fare comunque riferimento ai principi di accessibilità per i non vedenti…). Quelle statiche non danno particolari problemi; quelle in movimento, intermittenti o cangianti, magari in successione rapida, affaticano la visione.

In conseguenza di quanto detto fin qui, è importante sottolineare come le immagini non dovrebbero essere utilizzate come sfondo della pagina: non devono fare da sfondo al testo e quest’ultimo non deve esservi a ridosso.

Le immagini dovrebbero essere dimensionate in modo da essere interamente visibili all’interno di una schermata ad una risoluzione video relativamente bassa (800 x 600); quindi non più alte di 300 e non più larghe di 700-750 pixel.

La descrizione testuale delle immagini (attributo Alt), raccomandata per l’accessibilità dei non vedenti, è utile per la generalità dei navigatori.

Molto spesso le immagini vengono utilizzate anche per presentare contenuti testuali; ad es. per: strumenti di navigazione (barre, menù, pulsanti), intestazioni, pagine di “benvenuto”, ecc. In questi casi, oltre al problema del contrasto, c’è quello dei bordi sfumati, delle ombreggiature e dei vari altri artifici escogitati dai grafici “creativi”… Il problema si ripropone ulteriormente ingigantito per le “mappe immagine” (leggete anche I link).

Indicazioni.

  • non utilizzare immagini come sfondo della pagina;
  • evitare le immagini dinamiche;
  • non sovrapporre testo alle immagini;
  • distanziare di almeno 10-15 pixel il testo e gli altri elementi dalle immagini;
  • inserire la descrizione testuale delle immagini, (attributo Alt);
  • dimensionare le immagini in modo che siano interamente visibili nella schermata;
  • i contenuti testuali delle immagini devono sempre essere chiari e leggibili.

I link

Gli elementi caratteristici e fondanti di una pagina web (spesso più dei contenuti…), sono i collegamenti ipertestuali (link), elementi testuali e/o grafici “attivi”, che permettono all’utente della rete di “navigare” in essa (verso altre pagine) e/o accedere a qualche tipo di servizio.

Link testuali

I link testuali vengono generalmente rappresentati così:

testo blu sottolineato per i link da visitare;
testo viola sottolineato per i link già visitati.

In questo modo, ancor prima di passarci sopra col mouse e veder comparire l’immancabile “manina”… il navigatore sa che quella scritta nasconde qualcosa.

Le impostazioni classiche e predefinite appena descritte non sono più una certezza; spesso la sottolineatura viene eliminata e i colori modificati. Sopratutto quando la pagina contiene molti link, la sottolineatura viene omessa, salvo farla riapparire al passaggio del mouse.

Mantenere la convenzione consolidata aiuta non poco il navigatore a raccapezzarsi in pagine sempre più complesse e prive di punti di riferimento. I colori convenzionalmente utilizzati per la marcatura dei link sono talvolta a medio-basso contrasto rispetto allo sfondo; per questo si consiglia l’utilizzo del grassetto o di tonalità solo leggermente diverse per gli sfondi più scuri, come indicato di seguito:

testo blu grassettato e sottolineato per i link da visitare;
testo viola grassettato e sottolineato per i link già visitati;
testo azzurro grassettato e sottolineato per i link da visitare;
testo lilla grassettato e sottolineato per i link già visitati.

Link non testuali

Com’è noto, anche le immagini possono essere “lincate” (pulsanti, disegni, foto…). La comparsa della manina al passaggio del mouse, in questo caso potrebbe non essere sufficiente ai fini della percezione visiva. Ecco perché è necessario inserire il bordo all’immagine in questione, magari ispessendolo leggermente. Così si otterrà lo stesso effetto visto a proposito del testo: il bordo risulterà di colore blu chiaro se il link non è stato visitato e viola nel caso contrario.

Nel caso delle immagini “mappate”, dove ciascun settore implementa un link diverso, sarebbe bene lasciare un po’ di spazio tra un settore e l’altro, in modo che il puntatore del mouse possa cambiare aspetto e permettere di capire quale link si sta attivando; e poi, comunque, va inserita la descrizione testuale del link.

Gli “effetti di attivazione”

Si tratta di “eventi” che si verificano al passaggio del puntatore del mouse sopra un link: cambiamento del colore, tipo di carattere e dimensione del testo, del colore di sfondo o comparsa di immagini e oggetti vari in corrispondenza del link. Tutte queste possibilità possono essere variamente combinate e sommate tra loro.

In linea di principio questi effetti rendono il contenuto Web tanto più instabile, quanto più gli effetti risultano vistosi, soprattutto sotto il profilo della dimensione degli elementi trattati (un elemento che cambia dimensione in modo significativo, sposta anche gli elementi circostanti).

Visto che si tratta di eventi che si verificano al passaggio del mouse, è evidente che le modifiche possono essere frequenti e ripetute, comportando una sorta di comportamento spasmodico dello schermo (abbagliamento, perdita di contesto, stress percettivo).

Indicazioni.

  • se possibile, cercare di mantenere la convenzione circa la marcatura dei link testuali, usando il grassetto per aumentare il contrasto (fare riferimento a Contrasto testo-sfondo);
  • nelle immagini usate come collegamento ipertestuale inserire il bordo e ispessirlo leggermente, onde ottenere un effetto analogo a quello dei link testuali;
  • nelle “mappe immagine” separare i settori con collegamenti attivi in modo che il puntatore del mouse possa cambiare aspetto.
  • inserire sempre la descrizione testuale dei link;
  • nelle “mappe immagine” i contenuti testuali devono sempre essere chiari e leggibili;
  • se non indispensabili, evitare gli “effetti di attivazione” dei link o comunque contenerli alla sola modifica del colore del testo.

Organizzazione della pagina e del sito

Si sono già affrontate le questioni legate alla distribuzione del testo nella pagina e alla distanza tra questo e gli elementi grafici e le immagini. A questo punto bisogna capire come organizzare e dove posizionare tutti questi “ingredienti”.

Sono da evitare in primo luogo le pagine troppo lunghe, perché potenzialmente più “pesanti” e comunque meno gestibili. Se necessario implementare un adeguato sistema di navigazione all’interno della pagina. In generale, è meglio suddividere i contenuti su più pagine con una pagina indice, il tutto collegato in maniera appropriata.

Non esagerare con gli elementi grafici: troppa grafica (frame compresi), finisce col confondere e disturbare, invece di enfatizzare ed abbellire.

La barra di navigazione laterale, presente sotto diverse forme nella maggioranza dei siti, toglie una porzione a volte considerevole di spazio utilizzabile; le barre dei link posizionate all’inizio e alla fine della pagina sono da preferire.

Non è indispensabile che da ogni pagina si possano raggiungere tutte le altre sezioni del sito. Meglio strutturare un sistema di pagine indice (magari “annidate”) e sottopagine di contenuti; in questo modo la navigazione tra una sezione e l’altra del sito sarà assegnata alle pagine indice/sottoindice ed il tutto risulterà più “leggero”, accessibile e fruibile.

Evitare la comparsa della barra di scorrimento orizzontale nella finestra del browser (consultare i capitoli successivi); questo è uno dei problemi più frequenti e fastidiosi, conseguenti soprattutto alla non prevista possibilità di adattamento degli elementi grafici alla risoluzione dello schermo.

Ogni pagina dovrebbe contenere un titolo, visualizzato anche nella “barra del titolo” del browser.

La parte superiore della pagina dovrebbe contenere:

  • il logo o testo che identifichi il “proprietario” del sito;
  • il titolo o l’argomento trattato nella pagina;
  • una barra dei link, il più possibile contenuta, che permetta la navigazione verso le eventuali altre sezioni del sito;
  • un indice interno alla pagina stessa (quando necessario).

Queste informazioni devono essere quanto più chiare, leggibili e pulite; il navigatore deve prima farsi un’idea di cosa l’aspetta, solo dopo può essere stupito con gli effetti speciali…

Un’altra malsana abitudine dei webmaster è quella di riproporre a fondo pagina gli stessi link di navigazione inseriti in testa, magari con caratteri ancora più piccoli e quindi meno leggibili… Perché non inserire un bel torna “all’inizio” ed evitare inutili ridondanze?

La home page di un sito dovrebbe contenere solo i dati salienti del proprietario, una frase di benvenuto, un breve spazio dal contenuto accattivante rispetto ai temi trattati e un indice generale dei contenuti che rimanda agli eventuali indici di sezione contenuti in altrettante pagine.

Gli indici di sezione dovrebbero permettere di navigare tra le varie sezioni del sito e presentare l’elenco dei contenuti della sezione in oggetto.

Al livello successivo, i contenuti veri e propri, con il link che permette di tornare all’indice di sezione. Naturalmente nei grandi siti ci possono essere ulteriori passaggi intermedi.

Perché allora non assemblare il tutto in una pagina con più frame?

Perché o i link sarebbero così piccoli da essere illeggibili o la schermata sarebbe composta per buona parte da barre di scorrimento all’interno dei frame, a scapito della leggibilità del contenuto…

Un’altra cosa da evitare, ma che scaturisce da quanto detto fin qui, è l’eccessiva commistione di contenuti diversi nella stessa pagina. Inserire nella stessa pagina molte informazioni testuali, molte immagini, molta grafica e magari qualche form, impedisce a chi è interessato ad uno solo di questi elementi di gestirlo in modo funzionale. Salvare una pagina così composta sul disco fisso significa occupare spazio inutilmente. I moduli, il testo e gli altri possibili elementi, dovrebbero avere uno spazio in cui possano essere prevalenti, in modo da poter essere gestiti in modo ottimale dai navigatori interessati.

Indicazioni.

Le pagine di un sito web devono essere chiare e semplici da gestire. Devono rispondere ad una logica di navigazione ben precisa in tutto il sito. Devono essere ben contestualizzate e caratterizzate rispetto ai contenuti e non devono essere di dimensioni spropositate (una pagina che supera i 100 Kb, non è di certo leggera…).