Pattern per una buona interfaccia per le tabelle
Appurato che le tabelle hanno un uso specifico per le quali sono state create, e cioè NON per creare layout, ecco diversi esempi di come formattare le tabelle affinchè l’utente si senta a suo agio nel leggerle e interagire con esse.
Questo articolo, suggerito ieri da Sofia Postai su Facebook, mi è piaciuto molto.
Buona lettura!
Amazon-Box creato da Giuseppe Frattura
L'Autore
Laura Gargiulo, webdesigner freelance. Web architect senior, esperta xhtml, css, usabilità, design, cms, webmarketing e Seo, Wordpress specialist. Membro del progetto di prossima pubblicazione Piperita Lab e dell'IWA Italy Visita il mio sito personale Lauryn.it e contattami pure per un preventivo gratuito.
Add to Google
13 Commenti
a proposito di tabelle usate per l’impaginazione… ho scoperto che l’interfaccia utente di twitter è fatta con una tabella (sic!). ho provato a ricostruirla tableless, e mi sono accorto che deve essere stata una scelta forzata, perchè per ottenere esattamente lo stesso risultato partendo dagli stessi presupposti (ovvero utilizzare solo CSS per settare colori, senza usare immagini) il lavoro da fare risulta troppo complicato.
infatti una soluzione semplice ed elegante in CSS c’è, ma è compatibile solo con i browser di ultima generazione! niente da fare con IE5, ad esempio (che dalle statistiche delle visite del mio sito risulta ancora utilizzato da una fetta non irrilevante di utenti).
la mia domanda è: quando si è costretti a scegliere tra il rispetto degli standard e la corrispondenza ai propri obiettivi perchè dovremmo preferire la prima soluzione alla seconda? la cosa più importante di un layout, a mio parere, e la funzionalità (considerata a 360°), pertanto se uno standard di fatto ci impedisce di ottimizzare la funzionalità esattamente così come l’abbiamo prevista/progettata allora non dobbiamo farci scrupoli a prenderci qualche piccola “licenza” sugli standard stessi!
commenti?
@marco: direi che non ci sono più dubbi sul fatto che i css vanno usati sempre e comunque per i layout.
le tabelle possono essere uno stratagemma per qualcosa di complicato e irrealizzabile.
explorer 5…lo so esiste ancora gente che ce l’ha, ma se stiamo appresso a loro andiamo a scatafascio. già basta explorer 6 con le sue schifezze.
in particolare, cosa risulta talmente complicato del layout di twitter che non si possa fare?
il problema del layout di twitter sono gli angoli arrotondati (che volendo si riescono ad ottenere anche su Explorer) ed il colore del bordo verticale che separa l’area dei contenuti dalla barra verticale di navigazione a destra. per ottenerli con i css, utilizzando solo funzioni riconoscibili da IE5, si è costretti a non poter più controllare le altezze dei contenitori delle aree dei contenuti e della barra di navigazione. la soluzione sarebbe utilizzare il parametro “display”, che però IE5 esegue molto male (soprattutto se si utilizzano le proprietà un pochino più particolari).
bisogna provare per capire bene in cosa consiste il problema…
il fatto è che se hai anche solo un 10% di visitatori che hanno IE5 non può semplicemente “fregartene”! o ti metti a fare 2 template, oppure ricorri a qualche “hack”, come utilizzare la tabella al posto dei div (nel caso di twitter utilizzano un’unica tabella, come se fosse un “hack” per i vecchi browser, e secondo me, fanno benissimo).
sono dubbiosa, se i problemi sono solo quei due non giustifica l’uso delle tabelle, che si usano eventualmente per problemi di impaginazione, e non di grafica…
concordo sul non fregarsene. più che altro mi fa specie che gli utenti twitter abbiano una così alta percentuale di explorer 5.
youtube ha bandito lo sviluppo per explorer 6 da marzo
non sottovalutare i problemi di grafica… il layout visivo è, insieme ai contenuti, la cosa di maggiore impatto sull’utente comune.
osservando il codice (html) del layout di twitter sembra proprio che abbiano utilizzato la tabella come un puro e semplice hack per risolvere un problema di grafica, proprio perchè, a mio parere, hanno privilegiato il risultato ai presupposti tecnici. anche perchè non mi pare ci siano altre tracce di tabelle utilizzate per meri scopi di impaginazione.
per questo prima ponevo la domanda: ha senso rinunciare ad ottenere l’esatto risultato grafico che si è progettato “solo” per rispettare gli standard? il gioco vale la candela?
beh i compromessi sono sempre plausibili. qui non è questione di standard ma di coerenza, leggerezza di codice e accessibilità. ho guardato il codice, e quella tabellina, di una riga e una cella, non crea certo il problema.
sono curiosa solo di andare a fondo e capire perchè l’hanno usata. a tempo perso magari…
ma non andiamo off topic please
sì, era proprio quello che intendevo… una “tabellina” ogni tanto non può fare certo poi così tanto male!
Ma questa è diventata una discussione a 2 …??
Penso che progettare ancora per IE6 e addirittura IE5 sia snervante quanto inutile..
Le tabelle se dobbiamo usarle usiamole appunto per delle cose specifiche e non per i layout.
..è come attrezzare le strade con gli abbeveratoi perchè ci sono ancora delle persone che si muovono a cavallo…
Eppure ancora oggi 2010 molte pa (ed aziende private of course), specialmente le più grandi (ma questo è ovvio per una questione di statistica) sono costrette ad usare le tabelle.
Twitter è come una pa. Grandi numeri, basse percentuali = una fracca di utenti che si collega con computer del 15-18.
Poi è anche questione di business. Basta prendere Apple e fare un esempio molto banale.
(che poi anche il 5% dei loro visitatori è più di tutti i nostri siti messi assieme).
Hanno venduto non so quanti milioni di iphone, in safari mobile il sito apple è tra i preferiti. Hanno fatto percaso una versione mobile? Naaa, non gliene è fregato niente di tagliare fuori quanto, il 5-10% dei visitatori?
C’è chi deve (twitter, google, pa..) e chi non gliene frega niente (apple, noi altri..).
Ovviamente l’esempio relativo ad Apple non riguarda l’uso delle tabelle ma il tagliare fuori fasce di utenza che usano browser vecchi/particolari/ecc
@Laura: è l’esempio più calzante che ho sentito finora ahahahah
se ho un 10% di visitatori che hanno ancora IE5 perchè dovrei semplicemente ignorarli (e, probabilmente, perderli)? cosa ci guadagno? se fosse l’1% pazienza, ma se sono il 10%….