{"id":804,"date":"2018-04-19T16:17:47","date_gmt":"2018-04-19T14:17:47","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/web-typography-tabelle\/"},"modified":"2019-08-12T15:38:46","modified_gmt":"2019-08-12T15:38:46","slug":"web-typography-tabelle","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/web-typography-tabelle\/","title":{"rendered":"Web typography: progettare tabelle da leggere non da ammirare"},"content":{"rendered":"
\n

Nota degli editori:<\/strong> Siamo lieti di condividere con voi un estratto dal Capitolo 2 dal nuovo libro di Richard Rutter, Web Typography<\/cite><\/a>.<\/p>\n<\/div>\n

I buoni designer passano molto tempo a sudare sulla tipografia. Agonizzano su caratteri tipografici, iterano su scale di caratteri e applicano meticolosamente lo spazio bianco, tutto al servizio del lettore. Poi arriva una tabella e, con la tentazione di essere creativo, tutte le attenzioni verso il lettore vengono buttate fuori dalla finestra. Eppure le tabelle sono l\u00ec per essere lette, referenziate e usate, non semplicemente guardate.<\/p>\n

\n

Impostate le tabelle come testo da leggere<\/h2>\n

Le tabelle sono disponibili in molte forme. Alcune contengono semplici numeri, altre sono complesse, con un mix di dati numerici e informazioni testuali. Alcune richiedono una lettura riga per riga, altre si possono scorrere verticalmente. Il potenziale uso per le tabelle \u00e8 tanto vario quanto la parola scritta. Possono essere rendiconti finanziari, orari degli autobus, dizionari multilingua, sommari, conversioni numeriche, opzioni di prezzo, comparazioni di caratteristiche, specifiche tecniche e cos\u00ec via.<\/p>\n

Nonostante l’enorme variet\u00e0 in dimensioni, complessit\u00e0, contenuti e scopo delle tabelle, ognuna condivide due semplici principi di progettazione: devono essere leggibili e supportare il senso dei dati contenuti all’interno. Non dovrebbero essere rese pi\u00f9 belle per soddisfare un senso estetico per la sola osservazione. Detto questo, una tabella ben progettata pu\u00f2 ancora essere un bell’oggetto ma con la forma che segue la funzione. Le tabelle non sono immagini di dati: sono cataloghi di dati da esaminare, analizzare, farvi riferimento e consultarli. Una tabella ben progettata consentir\u00e0 di leggere e comprendere le informazioni e riveler\u00e0 i modelli e le correlazioni inerenti ai dati. Come Jan Tschichold, il virtuoso del design tipografico, ha detto in Tipografia asimmetrica<\/cite>1<\/a><\/sup>:<\/p>\n

\n

La materia tabulare non deve pi\u00f9 essere un lavoro piuttosto spiacevole da progettare: al contrario, pu\u00f2 diventare un esercizio davvero affascinante e artistico, in nessun modo meno interessante di qualsiasi altra area.<\/p><\/blockquote>\n<\/div>\n

Laddove possibile, pianificate in anticipo la leggibilit\u00e0 di ogni tabella. Il vostro processo di progettazione dovrebbe essere un’indagine per rendere i dati non impegnativi da leggere, semplici da seguire e facili da estrarre.<\/p>\n

Proprio come non si progetterebbe il corpo del testo con lo scopo di inserire pi\u00f9 parole possibili sullo schermo, cos\u00ec non si dovrebbe trattare la progettazione di una tabella come un esercizio per far stare quanti pi\u00f9 dati possibili in uno spazio. Potreste essere tentati di ridurre le dimensioni del testo della vostra tabella e, se i dati sono interamente numerici, potreste riuscire a farla franca. Il vostro lettore dovrebbe essere ancora in grado di leggere e interpretare comodamente la tabella dalla sua posizione normale, senza bisogno di sporgersi in avanti.<\/p>\n

Non allungate le tabelle<\/h3>\n

Molti designer applicheranno istintivamente una larghezza alle loro tabelle, proprio come farebbero con le immagini, estendendole per riempire la colonna o la pagina di testo. E questo \u00e8 l’appeal dell’impostare le tabelle a tutta larghezza: potete farle sembrare un po’ come delle immagini quando le si osserva da lontano. Tuttavia, mentre una tabella distribuita su tutto lo schermo potrebbe sembrare preferibile da una certa distanza, a un’analisi pi\u00f9 attenta sar\u00e0 pi\u00f9 difficile leggerla, poich\u00e9 i dati saranno inutilmente separati. Per aggiungere al danno la beffa, le tabelle impostate a tutta larghezza sono spesso piene di colori di sfondo e bordi per dare alla tabella l’apparenza di un’immagine, quando ci\u00f2 che realmente richiede il lettore \u00e8 l’aspetto del testo. Per il bene dei vostri lettori, evitate queste tentazioni.<\/p>\n

Potreste considerare di rendere tutte le colonne di larghezza uniforme. Anche questo non fa nulla per la leggibilit\u00e0 dei contenuti. Alcune celle della tabella saranno troppo larghe, lasciando i dati persi e scollegati dai loro vicini. Le altre celle di una tabella saranno troppo strette, posizionando i dati in maniera disagevole. Le colonne della tabella devono essere ridimensionate in base ai dati che contengono. Le colonne di piccoli numeri dovrebbero essere strette e le colonne di paragrafi dovrebbero essere relativamente ampie. Questo sembra un grande sforzo, e per un print designer lo sarebbe, dato che dovrebbe dimensionare manualmente ogni colonna nel software di layout. Fortunatamente, i browser Web sono molto abili quando si tratta di preparare le tabelle e fanno tutto quel duro lavoro al posto vostro. I browser hanno disposto le tabelle automaticamente in base a complessi algoritmi da molto tempo prima che arrivasse CSS<\/abbr>: lasciategli fare il loro mestiere.<\/p>\n

Tenete al minimo gli accessori e il riempimento della tabella<\/h3>\n

Edward Tufte, esperto di statistica e information designer, ha introdotto il concetto di data-ink nel suo classico del 1983, The Visual Display of Quantitative Information<\/cite>. Definisce il data-ink come “il nucleo non cancellabile del grafico”, mentre il non-data-ink \u00e8 l’inchiostro utilizzato nel grafico, non per rappresentare direttamente i dati ma per scale, etichette, riempimenti e bordi. Tufte prosegue definendo il rapporto data-ink come la proporzione di inchiostro utilizzata per presentare i dati effettivi rispetto alla quantit\u00e0 totale di inchiostro utilizzata nell’intero grafico. L’obiettivo \u00e8 quello di progettare un grafico con il pi\u00f9 alto rapporto data-ink possibile (tendente a 1.0) senza eliminare ci\u00f2 che \u00e8 necessario per una comunicazione efficace.<\/p>\n

Dove Tufte parla di grafica, include grafici, diagrammi e tabelle, e dove usa “inchiostro” possiamo pensare ai pixel. In termini di tabelle, sta dicendo che nel design dovremmo rimuovere quasi tutto quello che non \u00e8 n\u00e9 dati n\u00e9 spazio bianco. Riducendo al minimo gli accessori, si massimizzano le informazioni. Questo \u00e8 un primo principio ideale da tenere presente quando si considera il progetto tipografico<\/em> di una tabella.<\/p>\n

Come punto di partenza, evitate qualsiasi bordo o cornice attorno alla tabella. Si tratta di un abbellimento vittoriano che \u00e8 del tutto inutile in quanto l’allineamento del testo modeller\u00e0 sufficientemente bene la tabella.<\/p>\n

Cercate di ottenere una tabella leggibile usando solo allineamento, spaziatura e raggruppamento. Evitate strisce zebrate, tinte e riempimenti e qualsiasi altro sfondo. Questi possono essere superficialmente belli ma di solito sono una distrazione. Servono a distorcere il significato dei dati evidenziando una riga s\u00ec e una no a scapito delle righe adiacenti. Usate i colori solo come un delicato mezzo per guidare gli occhi del vostro lettore, e solo se non potete organizzare i dati per tale scopo. Se scegliete di usare il colore, fatelo solo nella direzione principale della lettura: verso il basso se sono liste, da una parte all’altra altrimenti.<\/p>\n

Quando si tratta di linee e bordi tra righe e colonne, a cui tipograficamente si fa riferimento come a rules<\/dfn>, si applica lo stesso principio: usateli con giudizio e preferibilmente evitateli. Jan Tschichold riassume meravigliosamente questo concetto in Asymmetric Typography<\/cite>:<\/p>\n

\n

Le tabelle non dovrebbero essere impostate perch\u00e9 appaiano come reti con ogni numero racchiuso all’interno. Provate a fare del tutto senza rules. Dovrebbero essere usate solo quando sono strettamente necessarie. Le righe verticali sono necessarie solo quando lo spazio tra le colonne \u00e8 cos\u00ec sottile che potrebbero verificarsi degli errori durante la lettura senza righe. Le tabelle senza le righe verticali sono pi\u00f9 belle. Le righe sottili sono migliori di quelle spesse.<\/p><\/blockquote>\n<\/div>\n

Evitate di usare i bordi delle righe o delle colonne a meno che l’allineamento dei dati, la spaziatura e il raggruppamento non siano sufficienti a guidare l’occhio del lettore. Se avete bisogno di usare le righe a questo scopo, usatele solo in una direzione e utilizzate un colore pi\u00f9 leggero per ridurre l’impatto delle linee: state facendo una distinzione, non costruendo una barricata.<\/p>\n

Allineate a sinistra il testo, a destra i numeri e i titoli con i dati<\/h3>\n

Nello spirito di trattare le tabelle come artefatti da leggere, non centrate il testo all’interno delle tabelle. Allineate il testo della tabella come fareste in qualsiasi altro posto, ossia a sinistra. Dal momento che il testo nelle tabelle finisce in colonne strette, non giustificate nemmeno il testo, lasciandolo sfilacciato, o finirete con dei fiumi che scorrono lungo le tabelle, causando potenzialmente confusione e di sicuro danneggiandone la leggibilit\u00e0. Potete unire con un trattino, comunque, in particolar modo se le colonne della tabella altrimenti avessero uno sfilacciamento pronunciato.<\/p>\n

Allineate a destra i numeri per aiutare il lettore a fare dei confronti di grandezza pi\u00f9 semplici quando scorre lungo le colonne. Per favorire la scansione in questa maniera dovrete avere una precisione consistente nei vostri dati numerici: ossia, usate lo stesso numero di cifre decimali dopo la virgola.<\/p>\n

Per consistenza e facilit\u00e0 di comprensione, abbinate l’allineamento dei titoli all’allineamento dei dati. Allineate a destra i titoli dei dati numerici e allineate a sinistra i titoli delle colonne con il testo. Per esempio:<\/p>\n

<\/p>\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Country<\/th>\nArea<\/th>\nPopulation<\/th>\nGDP<\/abbr><\/th>\nCapital<\/th>\n<\/tr>\n<\/thead>\n
Austria<\/td>\n83,858<\/td>\n8,169,929<\/td>\n339<\/td>\nVienna<\/td>\n<\/tr>\n
Belgium<\/td>\n30,528<\/td>\n11,007,000<\/td>\n410<\/td>\nBrussels<\/td>\n<\/tr>\n
Denmark<\/td>\n43,094<\/td>\n5,564,219<\/td>\n271<\/td>\nCopenhagen<\/td>\n<\/tr>\n
France<\/td>\n547,030<\/td>\n66,104,000<\/td>\n2,181<\/td>\nParis<\/td>\n<\/tr>\n
Germany<\/td>\n357,021<\/td>\n80,716,000<\/td>\n3,032<\/td>\nBerlin<\/td>\n<\/tr>\n
Greece<\/td>\n131,957<\/td>\n11,123,034<\/td>\n176<\/td>\nAthens<\/td>\n<\/tr>\n
Ireland<\/td>\n70,280<\/td>\n4,234,925<\/td>\n255<\/td>\nDublin<\/td>\n<\/tr>\n
Italy<\/td>\n301,230<\/td>\n60,655,464<\/td>\n1,642<\/td>\nRome<\/td>\n<\/tr>\n
Luxembourg<\/td>\n2,586<\/td>\n448,569<\/td>\n51<\/td>\nLuxembourg<\/td>\n<\/tr>\n
Netherlands<\/td>\n41,526<\/td>\n16,902,103<\/td>\n676<\/td>\nAmsterdam<\/td>\n<\/tr>\n
Portugal<\/td>\n91,568<\/td>\n10,409,995<\/td>\n179<\/td>\nLisbon<\/td>\n<\/tr>\n
Spain<\/td>\n504,851<\/td>\n47,059,533<\/td>\n1,075<\/td>\nMadrid<\/td>\n<\/tr>\n
Sweden<\/td>\n449,964<\/td>\n9,090,113<\/td>\n447<\/td>\nStockholm<\/td>\n<\/tr>\n
United Kingdom<\/td>\n244,820<\/td>\n65,110,000<\/td>\n2,727<\/td>\nLondon<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

Allineate al punto decimale<\/h3>\n

Potreste trovarvi nelle condizioni di non aver controllo sulla precisione numerica, o magari i dati con cui state lavorando sono arrotondati allo stesso numero significativo<\/em> piuttosto che aderire alla stessa precisione. In questo caso, semplicemente allineare a destra una colonna di numeri non aiuter\u00e0 il lettore a esaminare la colonna: i numeri piccoli, ad alta precisione a un primo sguardo appariranno come grandi numeri. Al contrario, allineate i numeri al punto decimale. Questo permetter\u00e0 al lettore di confrontare pi\u00f9 rapidamente gli ordini di grandezza tra una variet\u00e0 pi\u00f9 ampia di dati:<\/p>\n

+-------------+\n| Call charge |\n+-------------+\n|     $1.30   |\n|     $2.50   |\n|    $10.80   |\n|   $111.01   |\n|    $85      |\n|    N\/A      |\n|      $.05   |\n|      $.06   |\n+-------------+\n<\/code><\/pre>\n
Allineare al punto decimale era teoricamente possibile usando l’attributo char<\/code> di HTML 4<\/abbr> su un tag <td><\/code>, ma in realt\u00e0 non \u00e8 mai stato supportato. Il modo moderno per allineare i numeri a un punto decimale (o a qualsiasi altro carattere, in realt\u00e0) \u00e8 attraverso un nuovo valore della propriet\u00e0 text-align<\/code>, sebbene al momento in cui scrivo questo langue nel CSS<\/abbr> Text Module Level 42<\/a><\/sup> e il supporto \u00e8 disomogeneo nel migliore dei casi.<\/p>\n
La sintassi del nuovo valore \u00e8 semplice. Includete l’allineamento del carattere (solitamente un punto o una virgola) tra virgolette, seguito da uno spazio e dalla keyword di allineamento desiderato, che ha come default right<\/code> se la omettete. Per esempio, quello che segue centra i dati e li allinea a un punto decimale come nel nostro precedente esempio:<\/p>\n
td <\/span>{<\/span> text-align<\/span>:<\/span> \".\"<\/span> center;<\/span> }<\/span><\/code><\/pre>\n
Specificando diversi caratteri per l’allineamento potete creare il layout di tabelle pi\u00f9 complesse in maniera utile: in questo esempio, allineiamo le cifre a \u2018\u00d7\u2019 e \u2018:\u2019.<\/p>\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Selected display standards<\/caption>\n
Video standard<\/th>\nResolution<\/th>\nPixels<\/th>\nAspect<\/th>\n<\/tr>\n<\/thead>\n
QQVGA<\/abbr><\/td>\n160<\/td>\n\u00d7<\/td>\n120<\/td>\n19k<\/td>\n4<\/td>\n:<\/td>\n3<\/td>\n<\/tr>\n
HQVGA<\/abbr><\/td>\n240<\/td>\n\u00d7<\/td>\n160<\/td>\n38k<\/td>\n3<\/td>\n:<\/td>\n2<\/td>\n<\/tr>\n
QVGA<\/abbr><\/td>\n320<\/td>\n\u00d7<\/td>\n240<\/td>\n76k<\/td>\n4<\/td>\n:<\/td>\n3<\/td>\n<\/tr>\n
WQVGA<\/abbr><\/td>\n480<\/td>\n\u00d7<\/td>\n272<\/td>\n130k<\/td>\n16<\/td>\n:<\/td>\n9<\/td>\n<\/tr>\n
VGA<\/abbr><\/td>\n640<\/td>\n\u00d7<\/td>\n480<\/td>\n307k<\/td>\n4<\/td>\n:<\/td>\n3<\/td>\n<\/tr>\n
SVGA<\/abbr><\/td>\n800<\/td>\n\u00d7<\/td>\n600<\/td>\n480k<\/td>\n4<\/td>\n:<\/td>\n3<\/td>\n<\/tr>\n
XGA<\/abbr><\/td>\n1024<\/td>\n\u00d7<\/td>\n768<\/td>\n786k<\/td>\n4<\/td>\n:<\/td>\n3<\/td>\n<\/tr>\n
HD<\/abbr><\/td>\n1260<\/td>\n\u00d7<\/td>\n768<\/td>\n967k<\/td>\n16<\/td>\n:<\/td>\n9<\/td>\n<\/tr>\n
WXGA<\/abbr><\/td>\n1280<\/td>\n\u00d7<\/td>\n800<\/td>\n1,024k<\/td>\n16<\/td>\n:<\/td>\n10<\/td>\n<\/tr>\n
SXGA<\/abbr><\/td>\n1280<\/td>\n\u00d7<\/td>\n1024<\/td>\n1,310k<\/td>\n5<\/td>\n:<\/td>\n4<\/td>\n<\/tr>\n
UXGA<\/abbr><\/td>\n1600<\/td>\n\u00d7<\/td>\n1200<\/td>\n1,920k<\/td>\n4<\/td>\n:<\/td>\n3<\/td>\n<\/tr>\n
FHD<\/abbr><\/td>\n1920<\/td>\n\u00d7<\/td>\n1080<\/td>\n2,073k<\/td>\n16<\/td>\n:<\/td>\n9<\/td>\n<\/tr>\n
DCI<\/abbr> 2K<\/td>\n2048<\/td>\n\u00d7<\/td>\n1080<\/td>\n2,211k<\/td>\n19<\/td>\n:<\/td>\n10<\/td>\n<\/tr>\n
WQXGA<\/abbr><\/td>\n2560<\/td>\n\u00d7<\/td>\n1600<\/td>\n4,096k<\/td>\n16<\/td>\n:<\/td>\n10<\/td>\n<\/tr>\n
4K UHD<\/abbr><\/td>\n3840<\/td>\n\u00d7<\/td>\n2160<\/td>\n8,294k<\/td>\n16<\/td>\n:<\/td>\n9<\/td>\n<\/tr>\n
8K UHD<\/abbr><\/td>\n7680<\/td>\n\u00d7<\/td>\n4320<\/td>\n33,177k<\/td>\n16<\/td>\n:<\/td>\n9<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Usate numeri lining tabellari nelle tabelle di numeri<\/h3>\n
Molte tabelle, come i bilanci o gli orari, sono costituite per la maggior parte da numeri. In linea generale, il loro scopo \u00e8 di fornire al lettore dei dati numerici, presentandoli o su colonne o su righe e a volte in una matrice di due. Il vostro lettore potrebbe usare la tabella scorrendo lungo le colonne, oppure cercando un data point o facendo dei confronti tra i numeri. Il vostro lettore potrebbe anche dare un senso ai dati semplicemente dando un’occhiata alla colonna o alla riga. \u00c8 molto pi\u00f9 semplice confrontare i numeri se gli uno, le decine e le centinaia sono tutte allineate verticalmente, ossia, tutte le cifre dovrebbero occupare esattamente la stessa larghezza.<\/p>\n
Cifre della stessa larghezza possono per loro natura essere trovate nei font monospace e non c’\u00e8 niente di sbagliato nello scegliere un carattere monospace adatto a presentare una tabella di dati (si veda \u2018Combining typefaces\u2019). Tuttavia, molti font con spazi proporzionali (quelli in cui 1<\/em> \u00e8 pi\u00f9 stretto di 8<\/em> e W<\/em> \u00e8 pi\u00f9 largo di I<\/em>) hanno anche delle serie aggiuntive di cifre che sono monospace. Questi sono chiamati numeri tabellari<\/dfn>. Oltre ad essere di uguale larghezza, i numeri tabellari saranno delicatamente progettati in modo diverso dai numeri proporzionali standard. Ad esempio, un 1<\/em> normalmente avr\u00e0 una barra per la base e uno 0<\/em> (zero) potr\u00e0 essere progettato leggermente pi\u00f9 stretto per adattarsi meglio alla larghezza del numero scelto. I numeri tabulari sono solitamente disponibili nelle varianti vecchio stile e rivestimento. Utilizzate i numeri lining tabulari per fornire al vostro lettore il modo pi\u00f9 efficace per esaminare verticalmente e orizzontalmente le tabelle di dati.<\/p>\n
\"Una<\/p>\n
Confronto tra vari stili numerici.<\/p>\n<\/div>\n
Per specificare i numeri lining tabellari, impostate la propriet\u00e0 font-variant-numeric<\/code> al valore di lining-nums<\/code> e tabular-nums<\/code>:<\/p>\n
table <\/span>{<\/span>\n    font-variant-numeric<\/span>:<\/span> lining-nums tabular-nums;<\/span>\n}<\/span><\/code><\/pre>\n
Le propriet\u00e0 equivalenti per i browser legacy che richiedono font-feature-settings<\/code>, usate il feature tag di OpenType lnum<\/code> e tnum<\/code>.<\/p>\n
Numeri proporzionali<\/h4>\n
Se \u00e8 necessario specificare i numeri proporzionali, impostate la propriet\u00e0 font-variant-numeric<\/code> al valore proportional-nums<\/code>. Per i browser legacy che richiedono font-feature-settings<\/code>, usate il feature tag di OpenType pnum<\/code>.<\/p>\n
Mettete al lavoro lo spazio bianco per raggruppare e separare<\/h3>\n
Dopo aver eliminato righe e riempimenti (bordi e sfondi) dalla tabella, dovrete applicare uno spazio bianco alla tabella in modo che il lettore possa darle un senso. \u00c8 a questo punto che dovreste cancellare dalla vostra mente tutte le visioni di fogli di calcolo e altre griglie cos\u00ec uniformi, e pensare invece in termini di tipografia e semplici principi di raggruppamento gestalt.<\/p>\n
Dovrete principalmente separare i dati in modo che ciascun elemento possa essere individualmente identificato e letto come separato dagli altri. Per avere pi\u00f9 controllo sulla spaziatura, prima riducete la spaziatura tra i bordi:<\/p>\n
table <\/span>{<\/span>\n    border-collapse<\/span>:<\/span> collapse;<\/span>\n}<\/span><\/code><\/pre>\n
Nelle tradizionali tabelle HTML<\/abbr>, le celle adiacenti hanno ognuna i bordi distinti, separati gli uni dagli altri, con la separazione ancora presente anche se i bordi non lo sono. Nel border model collapsed, le celle adiacenti della tabella condividono i bordi. Dal momento che stiamo rimuovendo (quasi) tutti i bordi delle celle e quelli che preserveremo saranno singole linee chiave, il border model collapsed \u00e8 il pi\u00f9 appropriato.<\/p>\n
Ora, applicate il padding alle celle della tabella per separare i dati. Scoprirete che aggiungere una piccola quantit\u00e0 di padding al top della cella \u00e8 un modo utile per fornire una separazione visivamente equilibrata tra le righe sopra e sotto. Per assicurare che tutto si allinei bene, applicate lo stesso padding delle celle dati alle celle di heading. Dal momento che le lunghezze delle righe sono spesso molto corte nelle tabelle, potete ridurre la line height direttamente verso il basso. Nell’esempio seguente, abbiamo rimosso tutta l’interlinea aggiuntiva, ma potreste servirvene di pi\u00f9 in base alla scelta del font e alla quantit\u00e0 di testo nelle celle della tabella.<\/p>\n
td, th <\/span>{<\/span>\n    padding<\/span>:<\/span> 0.125em 0.5em 0.25em 0.5em;<\/span>\n    line-height<\/span>:<\/span> 1;<\/span>\n}<\/span><\/code><\/pre>\n
I principi di raggruppamento gestalt pi\u00f9 utili nelle tabelle sono quelli di prossimit\u00e0 e somiglianza. Spostate i dati correlati pi\u00f9 vicini per essere distinti dagli altri dati: in altre parole, distanziate i gruppi di righe o colonne. Un sottoprodotto del raggruppamento di righe \u00e8 che i dati diventano molto pi\u00f9 facili da analizzare e consultare rispetto a una tabella consistente in una successione di righe indifferenziate. Assicuratevi che i dati di un contenuto o di un significato simili abbiano un aspetto simile a prima vista, cosa che potete fare attraverso l’allineamento, il colore e lo stile dei caratteri.<\/p>\n
Opzioni della tabella<\/h4>\n
Ci occuperemo delle specifiche tipografiche delle didascalie della tabella in \u2018Choosing typefaces for functional text\u2019 ma vale la pena notare ora come usare il markup per le didascalie delle tabelle. Se state scegliendo di mettere la vostra tabella all’interno di un elemento <figure><\/code>, che \u00e8 una cosa perfettamente ragionevole da fare, allora usate un elemento <p><\/code> prima o dopo la tabella. Se la vostra tabella non \u00e8 all’interno di un elemento <figure><\/code>, o se avete pi\u00f9 item nella figure, usate l’elemento opportunamente chiamato <caption><\/code>, fornito da HTML<\/abbr> specificamente per le tabelle. Scrivete sempre il tag <caption><\/code> immediatamente dopo l’apertura del tag <table><\/code> e prima di qualsiasi dato della tabella, cos\u00ec:<\/p>\n
<table>\n    <caption>\n    Imperial to metric conversion factors\n    <p><i>Values are given to three significant figures<\/i><\/p>\n    <\/caption>\n    <thead> \u2026 <\/thead>\n    <tbody> \u2026 <\/tbody>\n<\/table><\/code><\/pre>\n
Potete posizionare la didascalia o sopra o sotto la tabella, usando la propriet\u00e0 caption-side<\/code> e un valore corrispondente a scelta tra top<\/code> o bottom<\/code>.<\/p>\n
caption <\/span>{<\/span> caption-side<\/span>:<\/span> bottom;<\/span> }<\/span><\/code><\/pre>\n
La seguente tabella mostra una didascalia e dimostra i principi Gestalt di raggruppamento separando i dati in righe correlate:<\/p>\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Imperial to metric conversion factors<\/p>\n
Values are given to three significant figures unless exact<\/em><\/p>\n<\/caption>\n
<\/th>\nTo convert<\/th>\ninto<\/th>\nmultiply by<\/th>\n<\/tr>\n<\/thead>\n
Length<\/th>\ninches<\/td>\nmillimetres (mm)<\/td>\n25.4<\/td>\n<\/tr>\n
feet<\/td>\ncentimetres (cm)<\/td>\n30.48<\/td>\n<\/tr>\n
yards<\/td>\nmetres (m)<\/td>\n0.91444<\/td>\n<\/tr>\n
miles<\/td>\nkilometres (km)<\/td>\n1.61<\/td>\n<\/tr>\n
Area<\/th>\nsquare inches<\/td>\nsq. millimetres (mm\u00b2)<\/td>\n645<\/td>\n<\/tr>\n
square feet<\/td>\nsquare metres (m\u00b2)<\/td>\n0.0929<\/td>\n<\/tr>\n
square yards<\/td>\nsquare metres (m\u00b2)<\/td>\n0.836<\/td>\n<\/tr>\n
acres<\/td>\nhectares<\/td>\n2.47<\/td>\n<\/tr>\n
Volume<\/th>\ncubic inches<\/td>\nmillitres (ml)<\/td>\n16.4<\/td>\n<\/tr>\n
cubic feet<\/td>\nlitres<\/td>\n28.3<\/td>\n<\/tr>\n
imperial gallons<\/td>\nlitres<\/td>\n4.55<\/td>\n<\/tr>\n
US<\/abbr> barrels<\/td>\ncubic metres (m\u00b3)<\/td>\n0.159<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Notate che, in questo esempio, i numeri non si allineano al punto decimale. Questo perch\u00e9 lo scopo della tabella \u00e8 che il lettore possa facilmente identificare ed estrarre un fattore moltiplicativo. In questo caso non esiste un caso d’uso ovvio per confrontare le grandezze relative dei fattori, che \u00e8 dove l’allineamento decimale tornerebbe utile.<\/p>\n
Non eccedete con gli stili delle tabelle<\/h3>\n
Lo scrittore-aviatore francese Antoine de Saint-Exup\u00e9ry scrisse3<\/a><\/sup> La perfezione non si ottiene quando non c\u2019\u00e8 pi\u00f9 nulla da aggiungere, bens\u00ec quando non c\u2019\u00e8 pi\u00f9 nulla da togliere<\/q>. Citare de Saint-Exup\u00e9ry pu\u00f2 esser un clich\u00e9 ormai, ma la sua frase \u00e8 perfetta per il design delle tabelle. Non c’\u00e8 bisogno di far apparire una tabella come un foglio di calcolo. Uno spreadsheet \u00e8 un tool di per s\u00e9, una tabella serve a presentare dati e informazioni che possano essere letti. Il software dei fogli di calcolo offre una moltitudine di opzioni per gli stili delle tabelle, che aggiungono la formattazione del testo, i bordi, il riempimento dello sfondo e tutta un’altra serie di abbellimenti. Cos\u00ec si ottengono delle belle immagini ma non si fa nulla per la leggibilit\u00e0 della tabella, quindi non cercate di emulare quegli stili. Le tabelle possono essere belle ma non sono capolavori artistici. Invece di dipingerle e decorarle, progettate tabelle per i vostri lettori.<\/p>\n
\"Tabella<\/p>\n
Una tipica tabella con gli stili di un foglio di calcolo, impostata a tutta larghezza, con bordi, riempimenti e allineamento al centro.<\/p>\n<\/div>\n
\"Miglioramento<\/p>\n
1. Rimuovete stretch e ridimensionate le colonne in base ai dati.<\/p>\n<\/div>\n
\"Miglioramento<\/p>\n
2. Rimuovete riempimenti, linee della griglia, bordi e grassetto.<\/p>\n<\/div>\n
\"Miglioramento<\/p>\n
3. Allineate a sinistra il testo, allineate a destra i numeri e allineate i titoli con i dati.<\/p>\n<\/div>\n
\"Miglioramento<\/p>\n
4. Mettete al lavoro lo spazio bianco per raggruppare e separare.<\/p>\n<\/div>\n
\"Miglioramento<\/p>\n
5. Usate i numeri lining tabella, precisione consistente e rimuovete le ripetizioni.<\/p>\n<\/div>\n
Adattate le tabelle ai piccoli schermi<\/h3>\n
Le tabelle regolarmente richiedono un bel po’ di spazio orizzontale per visualizzare le informazioni che contengono. Anche se progettata e modificata con giudizio, una tabella tipica potrebbe dover essere pi\u00f9 ampia dei 45-75 caratteri che normalmente usiamo per il testo. Per schermi di piccole dimensioni, come i telefoni, la progettazione di tabelle leggibili che funzionano in condizioni cos\u00ec ristrette ci pone una seria sfida. I migliori approcci trattano sempre ogni tabella caso per caso, ma ci\u00f2 non \u00e8 sempre possibile se abbiamo bisogno di assegnare degli stili generali a qualsiasi cosa provenga dal database di un CMS<\/abbr>.<\/p>\n
Un approccio immediato \u00e8 di usare o un font condensato o<\/em> una dimensione leggermente pi\u00f9 piccola (ma non contemporaneamente pi\u00f9 piccola e condensato). In entrambe i casi, la leggibilit\u00e0 deve rimanere di primaria importanza e dovreste esplorare anche altre opzioni.<\/p>\n
Considerate di impostare i titoli in obliquo per risparmiare spazio<\/h4>\n
Un modo per risparmiare spazio orizzontale, particolarmente quando avete piccoli pezzi di dati ma titoli lunghi, \u00e8 di impostare i titoli a un angolo obliquo.<\/p>\n
\"Tabella<\/p>\n
Usare i titoli in obliquo per risparmiare spazio.<\/p>\n<\/div>\n
Per ottenere questo effetto si pu\u00f2 semplicemente usare una semplice traslazione CSS. Dovrete anche posizionare in maniera assoluta i titoli cos\u00ec che la larghezza originale delle colonne non venga conservata e possano stringersi invece attorno ai dati.<\/p>\n
th <\/span>{<\/span>\n    transform-origin<\/span>:<\/span> bottom left;<\/span>\n    position<\/span>:<\/span> absolute;<\/span>\n}<\/span>\nth.degC <\/span>{<\/span>\n    transform<\/span>:<\/span> translate(2.58em,-2em) rotate(-60deg);<\/span>\n}<\/span>\nth.degF <\/span>{<\/span>\n    transform<\/span>:<\/span> translate(5.14em,-2em) rotate(-60deg);<\/span>\n}<\/span><\/code><\/pre>\n
Lasciate che sia il browser a gestire le tabelle con lo scroll orizzontale<\/h4>\n
La soluzione pi\u00f9 semplice per aiutare le tabelle di ogni dimensione e complessit\u00e0 \u00e8 di lasciare che sia il browser a disporre la tabella come meglio pu\u00f2 e rendere la tabella fuori dallo schermo se necessario. Purch\u00e9 poi mettiate il vostro lettore in condizione di scorrere la tabella di lato indipendentemente dal resto del testo, la tabella pu\u00f2 essere messa a fuoco in maniera relativamente semplice.<\/p>\n
\"Una<\/p>\n
Usare una barra di scorrimento per visualizzare la tabella.<\/p>\n<\/div>\n
Per farlo, per prima cosa avvolgete la tabella in un elemento <figure><\/code>:<\/p>\n
<figure class=\"fig-table\">\n<table> \u2026 <\/table>\n<\/figure><\/code><\/pre>\n
Poi applicate le seguenti semplici regole per nascondere la porzione off-screen della tabella e mettere il vostro lettore in condizione di scorrere la tabella senza influenzare il resto del testo:<\/p>\n
.fig-table <\/span>{<\/span>\n    max-width<\/span>:<\/span> 100%;<\/span>\n    overflow-x<\/span>:<\/span> scroll;<\/span>\n}<\/span><\/code><\/pre>\n
\u00c8 importante non impostare una larghezza alla tabella: il browser pu\u00f2 comprimere la tabella finch\u00e9 pu\u00f2 prima di farla defluire fuori dallo schermo. Per preservare la leggibilit\u00e0, fate un buon uso dei non-breaking spaces e di white-space:nowrap<\/code> per limitare la quantit\u00e0 di data wrap nelle celle. \u00c8 meglio avere una tabella leggibile che richiede lo scrolling piuttosto che una illeggibile che non lo richiede.<\/p>\n
Delineate le tabelle semplici come liste<\/h4>\n
Potete tranquillamente linearizzare le tabelle di dati semplici quando lo spazio \u00e8 limitato. Le tabelle che meglio si adattano a questo trattamento sono gli elenchi di dati strutturati, come per esempio un elenco degli impiegati:<\/p>\n
\n\n\n\n\n\n\n
Name<\/th>\nEmail<\/th>\nTitle<\/th>\nPhone<\/th>\n<\/tr>\n<\/thead>\n
Jones, Claire<\/th>\nclaire.jones\u200b@domain.com<\/td>\nManaging Director<\/td>\n01234 567890<\/td>\n<\/tr>\n
Smith, Darren<\/th>\ndarren.smith\u200b@domain.com<\/td>\nHead of Sales<\/td>\n01234 567891<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Quando non c’\u00e8 spazio abbastanza perch\u00e9 la tabella venga mostrata con un certo agio, possiamo impostarle un layout completamente diverso. Questo \u00e8 in generale meno compatto e occupa pi\u00f9 spazio in verticale, ma riesce a far stare la tabella in una viewport molto pi\u00f9 stretta:<\/p>\n
\n\n\n\n\n\n\n
Name:<\/th>\nJones, Claire<\/th>\n<\/tr>\n
Email:<\/td>\nclaire.jones@domain.com<\/td>\n<\/tr>\n
Title:<\/td>\nManaging Director<\/td>\n<\/tr>\n
Phone:<\/td>\n01234 567890<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n\n\n\n
Name:<\/th>\nSmith, Darren<\/th>\n<\/tr>\n
Email:<\/td>\ndarren.smith@domain.com<\/td>\n<\/tr>\n
Title:<\/td>\nHead of Sales<\/td>\n<\/tr>\n
Phone:<\/td>\n01234 567891<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
I due rendering della nostra tabella con l’elenco degli impiegati usano esattamente lo stesso markup, compresi gli elementi HTML convenzionali che ci si aspetterebbe in una tabella. La sola aggiunta dell’attributo data-title<\/code> su ogni cella ci permette di ripetere l’etichetta nella vista dell’elenco, nel caso ne avessimo necessit\u00e0.<\/p>\n
<th data-title=\"Name\">Jones, Claire<\/th>\n<td data-title=\"Email\">claire.jones@domain.com<\/td>\n<td data-title=\"Title\">Managing Director<\/td>\n<td data-title=\"Phone\">01234&nbsp;567890<\/td><\/code><\/pre>\n
Ci sono quattro semplici passi per trasformare una tabella in una lista, usando una media query e CSS (non serve JavaScript).<\/p>\n
    \n
  1. Identificare la larghezza della viewport a cui la tabella comincia a vedersi male.<\/li>\n
  2. Applicare display:block<\/code> a tutti gli elementi relativi alla tabella, cos\u00ec che si allineino verticalmente invece che come tabella.<\/li>\n
  3. Nascondere la riga header e ogni cella vuota.<\/li>\n
  4. Mostrare le etichette per ogni data item (opzionale).<\/li>\n<\/ol>\n
    Dovrete applicare alcuni stili in pi\u00f9 per estetica e leggibilit\u00e0, ma la responsiveness descritta pu\u00f2 essere ottenuta con queste poche righe di codice CSS:<\/p>\n
    @media (max-width: 25em) <\/span>{<\/span>\n  table, caption, tbody, tr, th, td <\/span>{<\/span>\n    display<\/span>:<\/span> block;<\/span>\n    text-align<\/span>:<\/span> left;<\/span>\n  }<\/span>\n  thead, th:empty, td:empty <\/span>{<\/span>\n    display<\/span>:<\/span> none;<\/span>\n    visibility<\/span>:<\/span> hidden;<\/span>\n  }<\/span>\n  th[data-title]:before, td[data-title]:before <\/span>{<\/span>\n    content<\/span>:<\/span> attr(data-title) \": \"<\/span>;<\/span>\n    display<\/span>:<\/span> inline-block;<\/span>\n    width<\/span>:<\/span> 3.5em;<\/span>\n  }<\/span>\n}<\/span><\/code><\/pre>\n
    Questa tecnica \u00e8 stata resa popolare per la prima volta da Aaron Gustafson4<\/a><\/sup>.<\/p>\n
    Rendete le tabelle responsive in base al loro scopo<\/h4>\n
    Ci sono molte tecniche diverse5<\/a><\/sup> a nostra disposizione per rendere responsive le tabelle di dati. Alcune sono semplici metodi CSS<\/abbr>-only (ne abbiamo gi\u00e0 visti due), altre sono complesse, rese possibili da JavaScript. Quando considerate quale tecnica usare, chiedetevi in che modo il vostro lettore user\u00e0 la tabella. In particolare, considerate se il vostro lettore probabilmente confronter\u00e0 le righe o le colonne: questo tipo di tabelle richiede un’attenzione extra dovuta al modo in cui vengono usate.<\/p>\n
    Quando \u00e8 importante essere in grado di confrontare le colonne, un metodo consiste nel nascondere i campi non essenziali e fornire un’opzione per riattivarle. Questa tecnica \u00e8 stata resa popolare da Filament Group6<\/a><\/sup> usando le tabelle finanziarie come esempio:<\/p>\n
    \"Tabella<\/p>\n
    Una tabella ricca di dati visualizzata su un grande schermo.<\/p>\n<\/div>\n
    \"Tabella<\/p>\n
    La stessa tabella con colonne nascoste e opzioni da attivare.<\/p>\n<\/div>\n
    Le tabelle sono un aspetto frequentemente trascurato della lettura, a volte con stili eccessivi, a volte progettato male. La responsiveness \u00e8 un problema particolarmente spinoso in quanto le soluzioni migliori dipendono molto dall’utilit\u00e0 della tabella. Le tabelle possono essere piene di dati, ricche di contenuti e di significati. Date loro l’attenzione che meritano.<\/p>\n
    Volete saperne di pi\u00f9?<\/h2>\n
    Questo estratto da Web Typography<\/cite> vi aiuter\u00e0 a partire. Ordinate la versione integrale<\/a>.<\/p>\n
    \"Cover<\/div>\n
    \n
    Note<\/h1>\n