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!

Immagine 13 450x262 Pattern per una buona interfaccia per le tabelle

share small Pattern per una buona interfaccia per le tabelle
Avatar of Lauryn Laura Gargiulo, web designer freelance e socia IWA Italy. Autrice di "Come diventare web-coso" e "Consigli di webdesign base", moglie dal dicembre 2010 e madre dal dicembre 2012. Portfolio personale: Lauryn.it Altri blog su cui scrivo: Myplaceintheworld.it, Laurynlabs.it

13 Comments

  • marco cavicchioli

    14 aprile 2010, 07:46

    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?

  • Avatar of Lauryn

    Lauryn

    14 aprile 2010, 08:03

    @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?

  • marco cavicchioli

    14 aprile 2010, 08:15

    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).

  • Avatar of Lauryn

    Lauryn

    14 aprile 2010, 08:28

    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 ;)

  • marco cavicchioli

    14 aprile 2010, 08:52

    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?

  • Avatar of Lauryn

    Lauryn

    14 aprile 2010, 08:57

    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 :D

  • marco cavicchioli

    14 aprile 2010, 09:01

    sì, era proprio quello che intendevo… una “tabellina” ogni tanto non può fare certo poi così tanto male!

  • alfredo

    14 aprile 2010, 22:04

    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.

  • Laura

    14 aprile 2010, 22:57

    ..è come attrezzare le strade con gli abbeveratoi perchè ci sono ancora delle persone che si muovono a cavallo…

  • Avatar of Marco

    Marco Olivetti

    15 aprile 2010, 02:28

    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.
    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? :D (che poi anche il 5% dei loro visitatori è più di tutti i nostri siti messi assieme).

    C’è chi deve (twitter, google, pa..) e chi non gliene frega niente (apple, noi altri..).

  • Avatar of Marco

    Marco Olivetti

    15 aprile 2010, 02:31

    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

  • Avatar of Lauryn

    Lauryn

    15 aprile 2010, 07:40

    @Laura: è l’esempio più calzante che ho sentito finora ahahahah

  • marco cavicchioli

    15 aprile 2010, 14:34

    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%….

Add Comment Register



Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>