T04
Principi di grafica e layout
dott. Nicola Piccinotti
dott.ssa Silvia Fiamberti
Tutor: Marinella Molinari
Selezionare un sito esistente di buon impatto grafico e costruito
professionalmente e individuare:
•
Layout. il sito segue un layout fluido o fisso? Si adatta a più risoluzioni?
Cambia il suo aspetto su diversi monitor e su diversi browser?
•
Uso del colore: il sito usa colori per individuare sezioni? Esiste un tentativo
di comunicare attraverso i colori un messaggio specifico? La palette
utilizzata rispetta le armonie di colori? Se si a quale schema corrisponde?
•
Testi: quali font sono stati utilizzati? Quale dimensione, colori sono stati
utilizzati? Il testo è diviso in paragrafi?
•
Immagini: le immagini eventualmente presenti sono rilevanti, interessanti,
attraenti? Rispettano complessivamente i requisiti di qualità e
posizionamento nella pagina?
Corsista: Nicolino Rainone
Maggio 2012
Principi di grafica e layout
Per questo esercizio ho scelto uno dei siti che visito quasi quotidianamente, sia
per il mio interesse per le scienze, sia per la sua utilità in ambito professionale.
Il sito non presenta grosse qualità grafiche perché evidentemente la scelta
editoriale è ricaduta piuttosto sui contenuti.
Ho cercato di sopperire a queste carenze (ai fini dell’esercizio) approfondendo il
lato tecnico del layout e della formattazione attraverso i fogli di stile.
http://www.lescienze.it
LAYOUT
Il blocco contenitore della
homepage del sito Le Scienze
contiene, nella parte alta, i quattro
elementi principali:
Principi di grafica e layout
I’header, con il logo molto evidente
per grandezza e colore.
A differenza della rivista cartacea,
nella quale il logo è sempre bianco,
qui è rosso.
L’utente potrebbe dubitare, nei
primi attimi, che questo sia
veramente il sito della rivista.
La barra di navigazione principale.
L’unico menu di navigazione del sito
è orizzontale.
Il blocco di contenuti principali,
rappresentati dagli articoli scientifici
più recenti e da altri contenuti
secondari nella parte bassa.
Una sidebar con il login, il campo di
ricerca, i social link ed altro.
LAYOUT
Il layout della homepage del sito è
un classico, nella sua forma a 3
colonne.
Il container della pagina ha una
larghezza di 990px, leggermente
superiore a quella largamente
consigliata di 960px.
990px
670px
Principi di grafica e layout
325px
300px
La suddivisione dello spazio interno
è dettata, nella prima parte della
pagina, dalla presenza dell’articolo
principale, e quindi a due colonne
con la sidebar.
La colonna dell’articolo misura
670px che, in rapporto alla
larghezza della sidebar di 300px,
sfiora il valore ideale del rapporto
aureo (990 / 670 = 1,48).
Successivamente il layout diventa a
tre colonne, con le colonne degli
articoli larghe 325px.
LAYOUT
Il layout della homepage è
del tipo fisso, impostato per
la risoluzione dello schermo
a 1024x768.
Principi di grafica e layout
Il layout è gestito da un
foglio di stile (CSS) che
declina la posizione, la
grandezza e l’aspetto dei
vari elementi presenti.
Definizione della dimensione dei blocchi nel foglio di stile (CSS):
Larghezza container: #container { margin: 0 auto; text-align: left; width: 990px; background-color:#FFF }
Larghezza header: #page-header { width: 990px; float:left; margin: 0 auto 30px; text-align: left; width: 990px }
Larghezza colonna principale: #tertiary { width:670px; float:left }
Larghezza sidebar: #sidebar { float:right; width: 300px; margin-left:20px }
Larghezza colonne secondarie: #apertura .odd, #apertura .even { width:325px; float:left }
LAYOUT
Anche le pagine interne
hanno un layout fisso,
suddiviso in tre colonne, ma
la dimensione delle colonne
cambia, per lasciare ampio
spazio al testo dell’articolo.
Principi di grafica e layout
190px
465px
300px
I contenuti del sito sono
costituiti quasi
esclusivamente da testi e
foto, per cui anche un layout
fluido nella colonna centrale
sarebbe stato funzionale,
anzi, forse avrebbe
migliorato la leggibilità dei
testi alle risoluzioni più
elevate di 1024, non
costringendo l’utente a
scorrere la pagina.
LAYOUT
Principi di grafica e layout
Il footer della pagina riporta l’elenco completo degli argomenti nei quali sono classificati
gli articoli.
Sulla destra vengono ripetuti i contenuti principali della sidebar: il campo di ricerca, i
social link e il collegamento alla pagina degli abbonamenti.
A fondo pagina vengono riportate le informazioni legali del sito.
ASPETTO NEI DIVERSI BROWSER
Principi di grafica e layout
La homepage del sito «Le Scienze» in Internet Explorer 9 a 1920 x 1080
ASPETTO NEI DIVERSI BROWSER
Principi di grafica e layout
La homepage del sito «Le Scienze» in Google Chrome a 1920 x 1080
ASPETTO NEI DIVERSI BROWSER
Principi di grafica e layout
La homepage del sito «Le Scienze» in Opera 12 a 1920 x 1080
ASPETTO NEI DIVERSI BROWSER
Principi di grafica e layout
La homepage del sito «Le Scienze» in Mozilla Firefox 11 a 1920 x 1080
ASPETTO NEI DIVERSI BROWSER
Principi di grafica e layout
La homepage del sito «Le Scienze» in Maxthon 3 a 1920 x 1080
ASPETTO NEI DIVERSI BROWSER
Principi di grafica e layout
Prova di solidità della struttura HTML del sito commutando la modalità di rendering in
«modalità compatibilità» in Maxthon 3 (che utilizza il motore WebKit di Safari e Chrome).
Questa modalità viene utilizzata per i siti adattati alle vecchie versioni di Internet Explorer,
notoriamente fuori standard W3C.
Modalità normale su Maxthon
Modalità compatibilità IE su Maxthon
Come si vede nei particolari la struttura supera ampiamente il test, risultando,
quindi, pienamente compatibile con le versioni più datate di Internet Explorer.
VALIDAZIONE CODICE HTML
Principi di grafica e layout
Prova di validazione html con il validatore W3C. Il sito genera 5 errori, tutti
nell’intestazione (header) della pagina html. Credo non siano gravi errori ma potrebbero
essere corretti per avere la piena valutazione positiva da parte del Consorzio W3.
USO DEL COLORE
E’ ben evidente che la priorità del sito Le Scienze è il testo, la grafica è minimalista e
orientata al branding. L’unico tocco di colore, oltre al logo, è dato indirettamente dalle
miniature delle foto che accompagnano i riferimenti agli articoli e, negli articoli stessi, le
immagini a tutta colonna.
I colori dominanti, pertanto, sono il rosso del logo, il nero del testo e il bianco dello
sfondo.
Principi di grafica e layout
Il rosso del logo è utilizzato per segnalare il testo cliccabile nei titoli degli articoli con la
proprietà «mouseover» del CSS, ma è utilizzato anche per alcuni rimandi (es.
«Animazione: Le antenne di SKA) e per link interni al testo ma in maniera invertita (il testo
è normalmente rosso e diventa nero al passaggio del mouse).
Anche il menu principale sottostà alla stessa regola di stile, con testo nero che diventa
rosso al passaggio del mouse.
USO DEL COLORE
Dal punto di vista grafico, quindi, si può dire che il sito Le Scienze non ha grosse pretese
comunicative, come dire… si bada alla sostanza, non all’apparenza.
Principi di grafica e layout
D’altro canto è indubbio che una particolare attenzione alla grafica potrebbe non solo
rendere più accattivante la navigazione nel sito ma anche aumentare l’efficienza
dell’interfaccia, come dimostra il sito del National Geographic.
FORMATTAZIONE DEL TESTO
Principi di grafica e layout
Come risaputo i browser visualizzano solamente i font
installati nel proprio computer, per cui è perfettamente
inutile impostare tipi strani e poco diffusi di carattere per
il testo di una pagina web.
Secondo le statistiche i font più utilizzati (perché più
diffusi sui PC) nelle pagine web sui diversi sistemi
operativi sono quelli nel seguente elenco:
“But what are the most popular fonts? In today’s
Infographic we take a look at the most popular fonts
by operating system. This will be a great resource for
deciding on fall-back fonts in your CSS”
Fonte: http://www.testking.com/techking/infographics/fontularity-most-popular-fonts-by-operating-system-infographic/
FORMATTAZIONE DEL TESTO
Nel sito esaminato i font utilizzati nella homepage sono i seguenti:
OptimaBold, Arial, sans-serif - 30px
Arial, Helvetica, sans-serif - 16px
OptimaBold, Arial, sans-serif - 18px
Principi di grafica e layout
Arial, Helvetica, sans-serif - 13px
Nelle pagine degli articoli:
OptimaBold, Arial, sans-serif - 30px
OptimaBold, Arial, sans-serif - 16px
Arial, Helvetica, sans-serif - 14px
FORMATTAZIONE DEL TESTO
E’ evidente, quindi, che i font utilizzati come prima alternativa nel foglio di stile delle
pagine sono solo due:
OptimaBold: per i titoli e il sommario dell’articolo nella pagina di di questo
Arial: per i sommari degli articoli nella homepage, per il testo dell’articolo
l’Arial per il testo è una scelta dettata dalla larga diffusione del font e quindi sulla sicurezza
di visualizzare il testo con l’aspetto voluto.
Principi di grafica e layout
Più discutibile è l’utilizzo del font OptimaBold che, come mostra la classifica dei font più
diffusi già vista, non si può dire che sia tra quelli ideali per un testo presentato sul web.
Per quanto riguarda i colori la scelta è tra le più diffuse ed efficaci: il testo nero sullo
sfondo bianco, che costituisce l’abbinamento ottimale per non affaticare la lettura.
FORMATTAZIONE DEL TESTO
Riguardo la scelta del font OptimaBold si può dire che il webmaster ha risolto (almeno in teoria) il
problema della scarsa diffusione del font sfruttando le potenzialità del CSS.
In particolare, sbirciando nel foglio di stile, si nota come sia stata utilizzata la regola appartenente alle
@-rules (http://css.html.it/guide/lezione/25/le-rules/) del CSS che permette di importare nella pagina
caratteri non presenti nel PC dell’utente.
In pratica il font utilizzato è caricato nella directory del sito sul server e attraverso le suddette regole
viene importato in sede di visualizzazione della pagina.
Principi di grafica e layout
Purtroppo anche in questo caso il comportamento dei vari browser non è uniforme e, come si capisce
dalla tabella, ogni browser riesce ad importare un tipo specifico di formato di file di carattere:
Fonte: http://css.html.it/guide/lezione/4742/font-personalizzati-con-font-face/
FORMATTAZIONE DEL TESTO
Con la tecnica descritta il webmaster salva sul server del sito i file del font da utilizzare in diversi
formati (.eot, .woff, .ttf, .svg), in modo da poterli utilizzare nei diversi browser, e include il font con la
seguente regola scritta nel foglio di stile (http://www.lescienze.it/static/css/style.css):
@font-face {
font-family: 'OptimaBold';
src: url('http://www.lescienze.it/static/css/fonts/optima-bold-webfont.eot');
Principi di grafica e layout
src: url('http://www.lescienze.it/static/css/fonts/optima-bold-webfont.eot?#iefix')
format('embedded-opentype'), url('http://www.lescienze.it/static/css/fonts/optima-boldwebfont.woff') format('woff'), url('http://www.lescienze.it/static/css/fonts/optima-boldwebfont.ttf') format('truetype'), url('http://www.lescienze.it/static/css/fonts/optima-boldwebfont.svg#OptimaBold') format('svg');
font-weight: normal; font-style: normal;
}
Malgrado questo «trucco», il supporto del font nei vari browser (ormai se ne contano più di dieci) non
è affatto garantito, soprattutto nelle versioni più vecchie di questi, e l'utilità effettiva poco più che
nulla (http://css.html.it/guide/lezione/25/le-rules/).
LE IMMAGINI
Un sito di informazione e divulgazione scientifica come quello di Le Scienze non può non avere come
elemento di primaria importanza le immagini.
Gli articoli sono quasi sempre accompagnati da belle immagini inserite nel testo, incorniciate da
questo o a piena larghezza della colonna centrale.
Principi di grafica e layout
C’è da dire, però, che tutte le immagini sono a bassa
risoluzione, con un formato max di 460 x 307 px, e
soprattutto non sono disponibili a risoluzione più
elevata (probabilmente per questioni di costi di
licenza).
CONCLUSIONI
Il sito esaminato utilizza un layout fisso a tre colonne, sia per la homepage sia per le pagine interne,
non utilizza la vecchia struttura tabellare per posizionare gli elementi ma i fogli di stile (CSS), e quindi
risponde alle ultime direttive W3C.
La fattura del codice HTML è solida e quasi del tutto esente da errori (validazione W3C), il sito è
leggero e quindi veloce non avendo «fronzoli» grafici e pesanti javascript.
Nelle ultime versioni dei browser più diffusi il sito non fa una piega, mostrandosi sempre con lo stesso
aspetto e funzionalità.
I font principali utilizzati sono solo due. Discutibile l’utilizzo del font OptimaBold per i titoli.
Principi di grafica e layout
La grafica è povera e limitata a pochissimi elementi, non funzionali alla navigazione.
Pertanto, da quanto evidenziato, si potrebbe concludere che, anche se il sito è ben fatto sotto il
profilo del codice e funzionale per il layout, risulta ampiamente obsoleto e antiquato riguardo
l’impostazione grafica (probabilmente pensato in tempi di minor diffusione della banda larga) e
quindi, indirettamente, riguardo l’usabilità.