Christian Wansart: table, div oder ol für Forenübersicht?

Guten Tag,

ich beschäftige mich zurzeit interessehalber mit verschiedenen Forensystemen und wie diese speziell die Forenübersicht umsetzen – im Standard-Theme natürlich.

Nun ist es traditionell eher eine Tabelle gewesen die genutzt wurde. Als ich damals™ mit dem WoltLab Burning Board anfing war es noch ganz normal Tabellen entsprechend zu nutzen. Das hat sich dort mittlerweile auch geändert, was wohl mit dem Fokus auf mobile Endgeräte und daraus resultierenden „responsive Websites“ zu tun hat.

  • WoltLab Burning Board nutzt mittlerweile unsortierte Listen und ist voll responsive
  • Invision Power Board nutzt ebenfalls unsortierte Listen und ist auch responsive
  • vBulletin nutzt nach wie vor Tabellen, ist aber dennoch responsive. Ich schätze, das wurde über Media-Queries entsprechend gelöst.
  • phpBB3 sind scheinbar auch auf unsortierte Listen umgestiegen und ist damit die erste Open-Source-Software die ich gefunden habe, die das so löst.
  • MyBB nutzt als OSS immer noch Tabellen, ist auch nicht responsive.
  • Simle Machines ebenfalls OSS und auch nicht responsive.

Ich mein, der Trend geht ja doch immer mehr in Richtung Interfaces die auch auf den mobilen Geräten genutzt werden können. Schlimm sind die Seiten, die nicht nur keine responsiven Themes haben, sondern auch noch einen mit irgendeiner tollen Forums-App auf die Nerven gehen. Ich für meinen Teil finde die Lösung über die mit den unsortierten Listen nicht schlecht. Nach dem ich hier im Forum aber kräftig mitlese überlege ich mir zweimal ob ich nun lieber ein div, eine section, eine nav oder was für ein Element auch immer nehme. Zuvor war es einfach: keine Ahnung? Dann nehme ich einfach div.

Nun würde mich eure Meinung zum Thema interessieren? Was meint ihr, ist der richtige Weg? Sind unsortierte Listen die sprachlich besten Elemente, oder machen sich doch sectionoder gar einfache div hier besser?

Freundliche Grüße
Christian

  1. Hallo

    ich beschäftige mich zurzeit interessehalber mit verschiedenen Forensystemen und wie diese speziell die Forenübersicht umsetzen – im Standard-Theme natürlich.

    Ich mein, der Trend geht ja doch immer mehr in Richtung Interfaces die auch auf den mobilen Geräten genutzt werden können.

    Ja, das ist wohl mittlerweile so gut wie überall angekommen.

    Schlimm sind die Seiten, die nicht nur keine responsiven Themes haben, sondern auch noch einen mit irgendeiner tollen Forums-App auf die Nerven gehen.

    Es soll Benutzer geben, die ein Forum oder ein Board gerne mit einer App statt der auf der Website nutzen. Es gibt ja auch Apps, mit denen man als Nutzer mehrere Foren und Boards erreichen kann. Ich selbst nutze solche Apps nicht, aber andere Nutzer haben andere Vorgehensweisen. Ich würde das Angebot von Apps also nicht grundsätzlich verdammen™.

    Ich für meinen Teil finde die Lösung über die mit den unsortierten Listen nicht schlecht.

    Für eine typische Boardübersicht mit ihren X aufgeführten Infos (Datum Eröffnungsposting, Datum letzte Antwort, Autor der letzten Antwort, Anzahl der Zugriffe, was halt so an nützlichem und unnützem aufgeführt wird), ist die Tabelle mMn nachwievor die richtige Wahl. Und auch Tabellen lassen sich responsiv gestalten. @Gunnar Bittersmann hat auf seinen Seiten auch noch ein paar eindrucksvolle Beispiele für die responsive Gestaltung von Tabellen, den Link finde ich aber leider gerade nicht.

    In anderen Fällen ist eine Auflistung wohl am besten in einer Liste aufgehoben.

    Nun würde mich eure Meinung zum Thema interessieren? Was meint ihr, ist der richtige Weg?

    Das kommt auf den Einzelfall an. ;-)

    Sind unsortierte Listen die sprachlich besten Elemente, oder machen sich doch sectionoder gar einfache div hier besser?

    Handelt es sich um eine einfache Auflistung, ist eine Liste die beste Wahl. Die optische Struktur der Auflistungen der Threads in den meisten Boardskripten mit ihren Zusatzinfos zu den einzelnen Threads lässt aber Tabellen als das geeignete Mittel erscheinen. Auch ist die Tatsache einer Auflistung gleichartiger Blöcke in einem Forum oder Board nicht unbedingt das Argument für eine Liste.

    Nimm mal das Beispiel SelfHTML-Forum. In den Übersichten steckt jeder Thread in einem <article>. Der Link zum Eröffnungsposting und alle zu diesem Posting gehörenden Infos und Funktionen stecken wiederum in einem <header>. Ist der Thread geöffnet (in der Übersicht nicht eingeklappt), stecken die Antworten in einer verschachtelten Liste. Hier wird eine geordnete Liste (<ol>) genutzt.

    Mir persönlich leuchtet diese starke Trennung von Eröffnungsposting und Antworten nicht so recht ein. Ich würde das Eröffnungsposting als einziges Element der ersten Listenebene sehen, aber das sind mMn Detailfragen, die Gegenstand einer quasiphilosophischen Diskussion sein dürfen.

    In der Ansicht eines Postings oder aller Postings (hier Nested-View genannt), gehören die einzelnen Postings mMn in ein <article>, denn sie sind solche. In der hiesigen Software ist das auch so gelöst. Auch Boardsysteme mit ihrer linearen Auflistung der Beiträge dürfen das heutzutage so lösen. <div>s als Elemente mit der Funktion, andere Elemente in einem Block zu gruppieren, sind manchmal die richtige Wahl. Wenn sich aber andere Elemente besser eignen, weil sie besser zum konkreten Fall passen, sollen sie auch statt der „nichtssagenden“ Elemente benutzt werden.

    Das gilt auch für die von dir angesprochenen Listen. Die <article>-Elemente sind einfach passender als die Elemente einer Liste. Sie sagen mehr, sind konkreter als die Listen und mMn schon deshalb die bessere Wahl. Man könnte nun die Übersicht der Threads in einer Liste, deren Listenpunkte jeweils <article>s enthalten, notieren, wie es hier zu sehen ist …

    <ol>
     <li><article><!-- Struktur eines Threads --></article></li>
     <li><article><!-- Struktur eines Threads --></article></li>
     <li><article><!-- Struktur eines Threads --></article></li>
    </ol>
    

    … aber – man soll es nicht für möglich halten – man kann es auch übertreiben. ;-)

    Tschö, Auge

    --
    Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
    Wolfgang Schneidewind *prust*
    1. Guten Abend Auge,

      Es soll Benutzer geben, die ein Forum oder ein Board gerne mit einer App statt der auf der Website nutzen. Es gibt ja auch Apps, mit denen man als Nutzer mehrere Foren und Boards erreichen kann. Ich selbst nutze solche Apps nicht, aber andere Nutzer haben andere Vorgehensweisen. Ich würde das Angebot von Apps also nicht grundsätzlich verdammen™.

      Ja, da hast du wohl ein Argument. Ich bin kein großer Fan für jede Webseite eine App zu nutzen, wenn die Webseite genauso gut funktioniert, aber klar.

      Für eine typische Boardübersicht mit ihren X aufgeführten Infos (Datum Eröffnungsposting, Datum letzte Antwort, Autor der letzten Antwort, Anzahl der Zugriffe, was halt so an nützlichem und unnützem aufgeführt wird), ist die Tabelle mMn nachwievor die richtige Wahl. Und auch Tabellen lassen sich responsiv gestalten. @Gunnar Bittersmann hat auf seinen Seiten auch noch ein paar eindrucksvolle Beispiele für die responsive Gestaltung von Tabellen, den Link finde ich aber leider gerade nicht.

      Dankeschön für den Link, ich schaue in mir mal an.

      Handelt es sich um eine einfache Auflistung, ist eine Liste die beste Wahl. Die optische Struktur der Auflistungen der Threads in den meisten Boardskripten mit ihren Zusatzinfos zu den einzelnen Threads lässt aber Tabellen als das geeignete Mittel erscheinen. Auch ist die Tatsache einer Auflistung gleichartiger Blöcke in einem Forum oder Board nicht unbedingt das Argument für eine Liste.

      Und das ist genau das, was für mich bisher nicht so offensichtlich war. Für mich waren Listen lediglich für textuelle Aufzählungen da. Dann fing es langsam an, dass die Listen für Navigationen genutzt wurden, was für mich sehr befremdlich war. Mir war es absolut schleierhaft, warum ich ein Element nehmen soll, das standardmäßig einen Punkt vor jedem Element anzeigt, welches ich dann abstelle, anstatt einfach div zu verwenden.

      Speziell die Information, die Gunnar Bittersmann über Twitter bekam (ich habe den Link gerade nicht), dass Screenreader über Listen tabben können, machen dann doch mehr Sinn, die Listen dafür zu nutzen.

      Das gilt auch für die von dir angesprochenen Listen. Die <article>-Elemente sind einfach passender als die Elemente einer Liste. Sie sagen mehr, sind konkreter als die Listen und mMn schon deshalb die bessere Wahl. Man könnte nun die Übersicht der Threads in einer Liste, deren Listenpunkte jeweils <article>s enthalten, notieren, wie es hier zu sehen ist …

      <ol>
       <li><article><!-- Struktur eines Threads --></article></li>
       <li><article><!-- Struktur eines Threads --></article></li>
       <li><article><!-- Struktur eines Threads --></article></li>
      </ol>
      

      … aber – man soll es nicht für möglich halten – man kann es auch übertreiben. ;-)

      Dankeschön für deine Einsicht. Sehr interessant!

      Freundliche Grüße
      Christzian

      1. Hej Christian,

        Und das ist genau das, was für mich bisher nicht so offensichtlich war. Für mich waren Listen lediglich für textuelle Aufzählungen da. Dann fing es langsam an, dass die Listen für Navigationen genutzt wurden, was für mich sehr befremdlich war. Mir war es absolut schleierhaft, warum ich ein Element nehmen soll, das standardmäßig einen Punkt vor jedem Element anzeigt, welches ich dann abstelle, anstatt einfach div zu verwenden.

        Weil dem div die Info "ich habe mehrere logisch zusammengehörende Kinder" fehlt.

        Speziell die Information, die Gunnar Bittersmann über Twitter bekam (ich habe den Link gerade nicht), dass Screenreader über Listen tabben können, machen dann doch mehr Sinn, die Listen dafür zu nutzen.

        War hier im Forum. ;-)

        Marc

    2. @@Auge

      Und auch Tabellen lassen sich responsiv gestalten. @Gunnar Bittersmann hat auf seinen Seiten auch noch ein paar eindrucksvolle Beispiele für die responsive Gestaltung von Tabellen, den Link finde ich aber leider gerade nicht.

      Du spielst vermutlich auf diese Tabelle an, die IIRC auch Grundlage des verlinkten Artikels im Wiki war.

      Und eigentlich gar nicht dafür gedacht, für immer und ewig als Beispiel für eine responsive Tabelle herhalten zu müssen. Jetzt kann ich sie nicht löschen, obwohl der Inhalt nicht aktuell ist.

      Ich sollte sie aber mal mit den aktuellen Todos füllen. Davon gibt es einige: etliche Übersetzungen sind momentan nicht mehr verfügbar, weil das englische Original wesentlichen Änderungen unterworfen wurde.

      LLAP 🖖

      --
      “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
      Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
      1. Hallo

        Und auch Tabellen lassen sich responsiv gestalten. @Gunnar Bittersmann hat auf seinen Seiten auch noch ein paar eindrucksvolle Beispiele für die responsive Gestaltung von Tabellen, den Link finde ich aber leider gerade nicht.

        Du spielst vermutlich auf diese Tabelle an, die IIRC auch Grundlage des verlinkten Artikels im Wiki war.

        Ja und ja. Mir war aber, als dass da noch mehr gewesen wäre. Mehr als dieses und dein Zebrabeispiel, an das ich mich auch noch erinnere.

        Und eigentlich gar nicht dafür gedacht, für immer und ewig als Beispiel für eine responsive Tabelle herhalten zu müssen. Jetzt kann ich sie nicht löschen, obwohl der Inhalt nicht aktuell ist.

        Warum nicht, wenn es dein sein muss? Wenn es um das konkrete Beispiel geht, dafür gibt es ja eine Entsprechung im Wiki.

        Tschö, Auge

        --
        Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
        Wolfgang Schneidewind *prust*
        1. @@Auge

          Du spielst vermutlich auf diese Tabelle an, die IIRC auch Grundlage des verlinkten Artikels im Wiki war.

          Ja und ja. Mir war aber, als dass da noch mehr gewesen wäre.

          Ich hatte in einem Posting hier im Forum mal ausführlicher erklärt, welche Überlegungen alles in dieser Tabelle stecken. Das floss wohl alles in den Artikel ein.

          Mehr als dieses und dein Zebrabeispiel, an das ich mich auch noch erinnere.

          Zebrastreifen?

          Und eigentlich gar nicht dafür gedacht, für immer und ewig als Beispiel für eine responsive Tabelle herhalten zu müssen. Jetzt kann ich sie nicht löschen, obwohl der Inhalt nicht aktuell ist.

          Warum nicht, wenn es dein sein muss?

          Weil ich diese Tabelle schon unzählige Male als Beispiel für eine responsive Tabelle hier im Forum verlinkt habe. Und wenn auf der Seite statt einer Tabelle nur ein Textabsatz „Nichts in Arbeit – Sommerferien“ stünde, würden all diese Links nichts mehr taugen.

          Wenn es um das konkrete Beispiel geht, dafür gibt es ja eine Entsprechung im Wiki.

          Vielleicht sollte ich die Seite trotz dann unpassendem URI als Bespielseite erhalten und meine Todos woanders pflegen?

          LLAP 🖖

          --
          “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
          Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
          1. Hallo

            Mehr als dieses und dein Zebrabeispiel, an das ich mich auch noch erinnere.

            Zebrastreifen?

            Ja. Wie gesagt, mich deuchte, da gäbe es noch mehr als diese zwei Seiten. Ich kann mich auch geirrt haben.

            Jetzt kann ich [die Seite mit der Tabelle] nicht löschen, obwohl der Inhalt nicht aktuell ist.

            Warum nicht, wenn es dein sein muss?

            Weil ich diese Tabelle schon unzählige Male … verlinkt habe. Und wenn auf der Seite statt einer Tabelle nur ein Textabsatz „Nichts in Arbeit – Sommerferien“ stünde, würden all diese Links nichts mehr taugen.

            Ja, das wohl.

            Tschö, Auge

            --
            Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
            Wolfgang Schneidewind *prust*
          2. Hallo Gunnar Bittersmann,

            Vielleicht sollte ich die Seite trotz dann unpassendem URI als Bespielseite erhalten und meine Todos woanders pflegen?

            Oder einen Link oder eine Weiterleitung zum Wikiartikel einrichten?

            Bis demnächst
            Matthias

            --
            Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.