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

Principi di grafica e layout Il blocco contenitore della homepage del sito Le Scienze contiene, nella parte alta, i quattro elementi principali: 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.

Principi di grafica e 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. 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. 990px 670px 300px 325px

Principi di grafica e layout Il layout della homepage è del tipo fisso, impostato per la risoluzione dello schermo a 1024x768. 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 }

Principi di grafica e 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. 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. 190px 465px 300px

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.

Principi di grafica e layout ASPETTO NEI DIVERSI BROWSER La homepage del sito «Le Scienze» in Internet Explorer 9 a 1920 x 1080

Principi di grafica e layout ASPETTO NEI DIVERSI BROWSER La homepage del sito «Le Scienze» in Google Chrome a 1920 x 1080

Principi di grafica e layout ASPETTO NEI DIVERSI BROWSER La homepage del sito «Le Scienze» in Opera 12 a 1920 x 1080

Principi di grafica e layout ASPETTO NEI DIVERSI BROWSER La homepage del sito «Le Scienze» in Mozilla Firefox 11 a 1920 x 1080

Principi di grafica e layout ASPETTO NEI DIVERSI BROWSER La homepage del sito «Le Scienze» in Maxthon 3 a 1920 x 1080

Principi di grafica e layout ASPETTO NEI DIVERSI BROWSER 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.

Principi di grafica e layout VALIDAZIONE CODICE HTML 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.

Principi di grafica e layout 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. 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.

Principi di grafica e layout 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. 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.

Principi di grafica e layout FORMATTAZIONE DEL TESTO 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/

Principi di grafica e layout 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 Arial, Helvetica, sans-serif - 13px Nelle pagine degli articoli: OptimaBold, Arial, sans-serif - 30px OptimaBold, Arial, sans-serif - 16px Arial, Helvetica, sans-serif - 14px

Principi di grafica e layout 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. 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.

Principi di grafica e layout 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. 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/

Principi di grafica e layout 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'); 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-bold-webfont.woff') format('woff'), url('http://www.lescienze.it/static/css/fonts/optima-bold-webfont.ttf') format('truetype'), url('http://www.lescienze.it/static/css/fonts/optima-bold-webfont.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/).

Principi di grafica e layout 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. 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).

Principi di grafica e layout 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. 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à.