web design (mar'15) Tecniche di buona progettazione di pagine web Antonio Lioy < [email protected] > 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 (2012-2015) J.1 web design (mar'15) 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 dp = sqrt ( wp2 + hp2 ) PPI = dp / di 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 (2012-2015) J.2 web design (mar'15) Font minori alcuni font monospace: 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 Leggibilità del testo (I) contrasto 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 (2012-2015) J.3 web design (mar'15) 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 (2012-2015) J.4 web design (mar'15) 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 (2012-2015) J.5 web design (mar'15) 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 (tramite @media) 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 (2012-2015) J.6 web design (mar'15) 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 */ @media print { body { font-size : 12pt; } . . . } /* per schermo */ @media screen { body { font-size : 100%; } . . . } © A.Lioy - Politecnico di Torino (2012-2015) J.7 web design (mar'15) 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 (2012-2015) J.8 web design (mar'15) 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 (2012-2015) J.9 web design (mar'15) 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 (2012-2015) J.10 web design (mar'15) 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 http://www.ficml.org/jemimap/style/color/wheel.html © A.Lioy - Politecnico di Torino (2012-2015) J.11 web design (mar'15) 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: http://en.wikipedia.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.lighthouse.org/print_leg.htm teoria dei colori e contrasto www.artyfactory.com/color_theory/color_theory.htm www.lighthouse.org/color_contrast.htm suggerimenti per la qualità dei siti web http://www.w3.org/QA/Tips/ © A.Lioy - Politecnico di Torino (2012-2015) J.12