Tecniche di buona progettazione di pagine web

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Tecniche di buona progettazione di pagine web"

Leopoldo Morelli
8 anni fa
Visualizzazioni

1 Tecniche di buona progettazione di pagine web Antonio Lioy < > Politecnico di Torino Dip. Automatica e Informatica Quali font scegliere? non usare mai più di 3 o 4 font diversi per pagina non cambiare il font nel mezzo di una frase (a meno di avere una più che valida ragione...) usare i seguenti tipi di font: sans-serif per testo da visualizzare nel browser serif per la versione di stampa monospace per codice o input da tastiera script e/o fantasy per accentuare l enfasi attenzione a non richiedere un font raro perché aumenta la possibilità che non sia disponibile A.Lioy - Politecnico di Torino ( ) J.1

..) usare i seguenti tipi di font: sans-serif per testo da visualizzare nel browser serif per la versione di stampa monospace per codice o input da tastiera

2 Serif contro Sans-serif i font privi di grazia affaticano meno la vista (che è già molto sollecitata dagli schermi video) inoltre vengono resi meglio sui video (che hanno bassa densità ~100 PPI) invece il testo stampato risulta più gradevole usando font con grazia, che sono resi bene grazie alla migliore qualità di stampa alcuni font sans-serif: Arial, Geneva, Helvetica, Lucida Sans, Trebuchet, Verdana (progettato per il web) alcuni font serif: Garamond, Georgia (progettato per il web), New York, Palatino, Times, Times New Roman Densità delle immagini si misura in DPI (dot-per-inch) per la stampa ed in PPI (pixel-per-inch) per gli schermi video formula per il calcolo dei PPI d p = sqrt ( w p2 + h p2 ) PPI = d p / d i esempi: notebook 15.4" con 1680 x 1050 ha densità 128 PPI notebook 15.4" con 1920 x 1200 ha densità 147 PPI schermo 22" con 1920 x 1080 ha densità 100 PPI Galaxy-S-III (4.8" 1280 x 720) ha densità 306 PPI l occhio umano non distingue dettagli oltre i 300 DPI A.Lioy - Politecnico di Torino ( ) J.2

Trebuchet, Verdana (progettato per il web) alcuni font serif: Garamond, Georgia (progettato per il web), New York, Palatino, Times, Times New Roman Densità delle immagini si misura in DPI

3 alcuni font monospace: Font minori Courier, Courier New, Lucida Console, Monaco alcuni font fantasy: Copperplate, Desdemona, Impact, Kino Impact è quello più presente su Mac, Win e Linux alcuni font cursive: Comic Sans MS, Lucida Handwriting, Zapf Chancery i font fantasy/cursive sono da usarsi con estrema parsimonia e mai per grandi porzioni di testo: sono difficili da leggere spesso non includono i caratteri accentati contrasto Leggibilità del testo (I) testo chiaro su sfondo scuro (es. bianco su blu scuro) è più leggibile... ma esteticamente è più bello testo scuro su sfondo chiaro (es. nero su bianco) combinazioni di colori entra in gioco il contrasto relativo, es. bene nero su grigio chiaro ma male rosso su arancione dimensione dei font font diversi ma di uguale dimensione occupano spazi verticali diversi (es. Verdana occupa 58%, Times New Roman 46%, Flemish Script 28%)... font-size-adjust! A.Lioy - Politecnico di Torino ( ) J.3

includono i caratteri accentati contrasto Leggibilità del testo (I) testo chiaro su sfondo scuro (es. bianco su blu scuro) è più leggibile.

4 Leggibilità del testo (II) spaziatura (tra righe dello stesso paragrafo) lasciare almeno 20-30% per leggibilità spaziatura tra le lettere font monospace o con buona spaziatura aumentano la leggibilità del testo font per schermo, preferire sans-serif in generale, evitare font condensed limitare l uso dello stile italico (es. solo per evidenziare termini speciali) perché meno leggibile Leggibilità del testo (III) solo per la stampa evitare carta lucida (glossy) il riflesso disturba le persone con la vista debole usare ampi margini di rilegatura (o rilegatura a spirale) per permettere di aprire le pagine in modo orizzontale completo per appoggiarvi bene le lenti di ingrandimento distinguere i volumi di una collana cambiando il colore e lo stile della copertina per facilitarne la ricerca tra tanti simili A.Lioy - Politecnico di Torino ( ) J.4

solo per evidenziare termini speciali) perché meno leggibile Leggibilità del testo (III) solo per la stampa evitare carta lucida (glossy) il riflesso disturba le persone con la vista debole usare

5 Pagine web printer-friendly le pagine sono sempre più complesse e meno agevoli da leggere a video (es. pubblicità, menù, intestazioni) e sempre più persone hanno problemi di vista in taluni casi (es. articoli lunghi, how-to, istruzioni dettagliate) è preferibile stampare la pagina per potervi prendere appunti stampare direttamente ciò che compare a video normalmente offre un pessimo risultato è importante cambiare il contenuto ed il formato della pagina quando viene stampata: web-design printer-friendly Regole per pagine printer-friendly (I) colori leggibili, con preferenza per testo nero su sfondo bianco la carta è bianca poche persone hanno una stampante a colori font con grazia (serif) font con dimensione adeguata (consigliato 12pt) sottolineare i link (per evidenziarli, visto che sulla carta non sono cliccabili o evidenziabili in altro modo) ed eventualmente esplicitare la URL rimuovere le immagini non necessarie lasciare quelle essenziali per l articolo accettabile il logo dell azienda A.Lioy - Politecnico di Torino ( ) J.5

importante cambiare il contenuto ed il formato della pagina quando viene stampata: web-design printer-friendly Regole per pagine printer-friendly (I) colori leggibili, con preferenza per testo nero

6 Regole per pagine printer-friendly (II) rimuovere i menù / link per navigare le pagine non servono rimuovere tutta o la maggior parte della pubblicità meglio toglierla tutta, ma se è la nostra principale fonte di guadagno rimuovere JS, Flash e le immagini animate non si stampano e possono creare problemi inserire la URL (permanente) della pagina riferimento all originale e per pubblicizzare il sito inserire una nota di copyright non impedisce la copiatura ma è un avviso legale Implementare pagine printer-friendly definire tre CSS diversi ed includerli in modo condizionale (usando l opzione media ) uno generale (es. H1 in italico, TH centrati) uno con i formati per presentazione a video uno con i formati per la stampa oppure scrivere un unico CSS con sezioni condizionali per i vari media assegnare ID logici e significativi ai vari box del layout (es. advertising, navigation) per nascondere (tramite display: none ) i box inutili per un certo media A.Lioy - Politecnico di Torino ( ) J.6

pubblicizzare il sito inserire una nota di copyright non impedisce la copiatura ma è un avviso legale Implementare pagine printer-friendly definire tre CSS diversi ed includerli in modo condizionale

7 Inclusione condizionale dei CSS <link rel="stylesheet" type="text/css href="base.css > <link rel="stylesheet" type="text/css href="screen.css" media="screen"> <link rel="stylesheet" type="text/css href="print.css" media="print"> CSS con sezioni condizionali /* parte comune a qualunque media */ h1, h2, h3 { font-style : italic } /* per stampa print { body { font-size : 12pt; }... } /* per schermo screen { body { font-size : 100%; }... } A.Lioy - Politecnico di Torino ( ) J.7

css" media="screen"> <link rel="stylesheet" type="text/css href="print.

8 Un esempio di CSS per stampa body { color : black; background : white; font-family : "Times New Roman", Times, serif; font-size : 12pt; } a { text-decoration : underline; color : blue; } #navigation, #advertising, #other { display : none; } Le coordinate di colore colori esprimibili con vari sistemi di coordinate per la percezione umana è utile considerare le coordinate HSL (Hue Saturation Lightness) A.Lioy - Politecnico di Torino ( ) J.8

display : none; } Le coordinate di colore colori esprimibili con vari sistemi di coordinate per la percezione

9 Le coordinate di colore hue = il colore saturation = la quantità di colore presente lightness = la percentuale di luce 0% = nero, 100% = bianco, 50% = colore puro anche usato HSV: V (value) è anche detto brightness (luminosità) 0% = nero, 100% = colore puro (bianco se S=0) Il parametro Hue è quello che determina il colore base il cerchio dei colori in base al parametro Hue, con indicazione dei colori primari, secondari e terziari: A.Lioy - Politecnico di Torino ( ) J.9

100% = colore puro (bianco se S=0) Il parametro Hue è quello che determina il colore base il cerchio dei colori in base

10 Scelta dei colori la maggior differenza percepita è su Hue buon contrasto = colori con Hue distante / opposto differenze di luminosità e saturazione sono molto meno percepibili da persone con deficit visivi attenzione ai colori disponibili nell UA: usare colori standard (es. per nome o valore RGB) evitare le sfumature buona leggibilità di questo testo cattiva leggibilità di questo testo Modelli dei colori modello additivo tipico dei video (nero e si aggiunge luce) colori primari RGB (Red Green Blue) modello sottrativo tipico della stampa (bianco e si sottrae luce) colori primari CMY (Cyan Magenta Yellow) per maggior efficienza CMYK = CMY + black A.Lioy - Politecnico di Torino ( ) J.10

per nome o valore RGB) evitare le sfumature buona leggibilità di questo testo cattiva leggibilità di questo testo Modelli dei colori modello additivo tipico dei video (nero e

11 Gamut intervallo di colori visibile/rappresentabile gamut diverso per ogni dispositivo video/stampa Colori web-safe e web-smart colori web-safe: byte del codice RGB scelti tra 00, 33, 66, 99, cc, ff in totale 6^3 combinazioni = 216 < 256 è l'insieme originale per monitor a 8 bit colori web-smart: byte del codice RGB con cifre identiche (00 ff) in totale 16^3 combinazioni = 4096 è l'insieme esteso per monitor a 16 bit ruota interattiva dei colori web-smart A.Lioy - Politecnico di Torino ( ) J.11

8 bit colori web-smart: byte del codice RGB con cifre identiche (00 ff) in totale 16^3 combinazioni = 4096 è l'insieme esteso per monitor a

12 Uso compatibile dei colori scopo: mostrare i colori in modo consistente su qualunque monitor non solo PC ma anche smart-phone e televisori colori web-safe e web-smart molto utili anche se oggi è frequente avere monitor a 24 bit evitare per quanto possibile i gradienti di colore disponibilità aleatoria e/o resa molto differente evoluzione dei colori nel web: Riferimenti font pagine web printer-friendly leggibilità del testo teoria dei colori e contrasto suggerimenti per la qualità dei siti web A.Lioy - Politecnico di Torino ( ) J.12

org/wiki/web_colors Riferimenti font http://webdesign.about.com/od/fonts/a/aa080204.htm pagine web printer-friendly http://webdesign.about.com/od/printerfriendly/ leggibilità del testo http://www.

Documenti analoghi

Tecniche di buona progettazione di pagine web. Quali font scegliere? Serif contro Sans-serif. A.Lioy - Politecnico di Torino (2012) F.

Tecniche di buona progettazione di pagine web Antonio Lioy < lioy@polito.it > Politecnico di Torino Dip. Automatica e Informatica Quali font scegliere? non usare mai più di 3 o 4 font diversi per pagina