Listen statt HTML-Tabellen – Handy und PDA profitieren davon

Montag, 20 Juli 2009 17:48 MET

Thema:
Webgestaltung  
Stichworte:
,  
 
Screenshot: Ausschnitt aus Beispielseite
Listen statt HTML-Tabellen – Handy und PDA profitieren davon [hyperkontext | Weblog]

Zwei Beispiele, wie so manche HTML-Tabelle zu einer einfachen Liste werden kann. Eine dargestellte Tabelle macht nur dann Sinn, wenn die Spalten der Reihen zueinander in Bezug stehen oder zu vergleichen wären.

In Zeiten der mobilen Webnutzung wird sinnvolle und semantische Aufbereitung auch für Otto Normal im Handy-Display spürbar.

So manche Tabellen sollten Listen sein

Spätestens seit der immer größeren Verbreitung der mobilen Webnutzung wird sinnvolle und semantische Aufbereitung auch bei Otto Normal spürbar. Wenn beispielsweise endlos breite und lange HTML-Tabellen auf einem kleinen Handy-Display abgesucht werden sollen, wirft auch mal die geübteste – mit Adleraugen und flinken, schlanken Fingern ausgestattete – Benutzerin fluchend das Handtuch.

Tabellen sind mehrdimensionale Listen, habe ich als allgemeine Definition so im Hinterkopf und jede Datenbank ist wohl das Abbild davon. Visuell haben wir uns über Jahrhunderte daran gewöhnt, diese Tafeln (der Ursprung des Wortes Tabelle) zu betrachten.

In Zeiten der digitalen Verarbeitung müssen wir aber sehr genau zwischen der Verwertbarkeit für Programme und der Darstellungsform unterscheiden.

Problem erkannt? Erst wenn Karli Manager eines hat

Beide hier gezeigten Praxisbeispiele stammen aus Intranets und sind leider fast Alltag.

Im ersten Fall ärgerten und beschwerten sich die Leute vom Service seit einem Jahr über die mühsame Bedienung auf dem PDA (Personal Digital Assistant), über welchen sie von außen täglich zigmal auf Datenblätter zugreifen müssen.

Das Problem wurde aber überhaupt erst zur Kenntnis genommen, als sich einer der etwas technik-affineren Karlis auf einer spontanen Präsentation blamiert hatte und via Handy seine Erfolge zeigen wollte.

Beispiel 1: Link-Liste zu Datenblättern

Das kurioseste – obgleich ein oft gesehenes – Beispiel einer dargestellten Tabelle ist eine eindimensionale Liste, die mit einer HTML-Tabelle (Reihen und Spalten) umgesetzt wird.

Das ist etwa so, als ob wir in ein Tabellen­kalkulations­programm unsere Einkaufsliste eintragen und nicht für jeden Punkt eine neue Datenzeile beginnen, sondern in der selben Datenreihe mehrere Spalten für die Einträge verwenden, obwohl diese gar nicht miteinander in Beziehung stehen. Bloß um unseren großen Bildschirm aufzufüllen.

Vorgeschichte

Im vorliegenden Fall geht es um eine Link-Liste von über 200 Einträgen, unterteilt in Untergruppen, die jeweils zu Datenblättern führen.

Früher wurden die Datenblätter – gezielt nach Einsatz – ausgedruckt, später als PDF (Portable Document Format) auf dem Laptop gespeichert und von Service-Leuten beim Einsatz verwendet.

Das Problem war natürlich, dass manchmal ein überraschend benötigtes Datenblatt gerade nicht gespeichert war. Aber vor allem auch, dass Mitarbeiter oft alte Versionen hatten, obwohl bereits eine aktualisierte im Intranet vorhanden war.

Daher setzte sich der Online-Zugriff von außen auf diesen Bereich des Intranets durch, damit immer alle (aktualisierten) Daten vorhanden sind. Mittlerweile wurden auch die Geräte der Mitarbeiterinnen kleiner (PDA, Handy) und der Zugriff auf ungetaggte PDFs auf kleinem Display kann da auch schon mühsam werden.

Es wurde umgebaut und die Datenblätter sind jetzt als HTML-Seite abrufbar. Ich verliere mich jetzt nicht in Einzelheiten und konzentriere mich auf die vorgeschaltete Link-Liste zu diesen Datensätzen.

Diese Link-Liste existierte nämlich weiter unbekümmert im 98er Stil:

  • Eine HTML-Tabelle mit vier Spalten.
  • Untergruppen wurden mit einer Zwischenzeile angezeigt, die sich über alle Spalten erstreckten.
  • In jeder Zelle befand sich ein Link.
  • Bis die Tabelle komplett gerendert und angezeigt wurde vergingen, je nach Browser, jedesmal rund drei bis vier Sekunden.

Umsetzung: Ungeordnete Listen

> Demoseite Beispiel 1

  1. HTML (HyperText Markup Language)
    1. Von der Bedeutung war klar: Hier werden Listen eingesetzt. Mehr gibt es da nicht zu diskutieren.
    2. Untergruppen als Überschrift anzeigen, die sichtbar auch direkt angesprungen werden können.
    3. Danach folgt eine einfache, ungeordnete Liste der jeweiligen Untergruppe.
  2. CSS (Cascading Style Sheets)
    • Auf Wunsch wurde die sichtbare Tabellenform beibehalten. Die Reihen passen sich nun aber der Breite des Bildschirmes an.
    • Für Handy-Displays brauchen die Links eine große und auffällige Klickfläche.

Beispiel 2: Eine Dokumentenliste

Wir sagen doch meist Dokumentenliste. Genau das ist es auch. Eine sortierte Liste (nach Titel, Aktualisierung, et cetera) von Dokumenten. Bei der Darstellung brauchen Komponenten der Dokumente kaum direkt vergleichbar sein.

Warum wird dafür dann eine HTML-Tabelle verwendet?

Dass solche Auflistungen meist trotzdem in Tabellen gepfercht werden, ist Gedankenlosigkeit oder mangelndes Verständnis von Semantik und die Fixierung auf das visuelle Erscheinungsbild.

Vorgeschichte

In diesem Beispiel geht es um die Auflistung von Dokumenten mit zusätzlichen Informationen. Kurzbeschreibung, Datum der letzten Aktualisierung und Verknüpfungen zu den verfügbaren Formaten.

Ursprünglich wurde das in einer Tabelle mit rund 50 Zeilen aufbereitet, die ihrerseits jeweils vier Spalten hatte und eine Zelle davon eine weitere Tabelle enthielt. Es gab eine spürbare Verzögerung bis die Tabelle überhaupt gezeigt wurde. Diese gefühlte lange Ladezeit ist auch ein psychologischer Faktor!

In unserem Fall wollten Mitarbeiter auch vermehrt über mobile Geräte auf diese Liste zugreifen. Durch die Detail­informationen zum jeweiligen Dokument, die in einer Zeile (sichtbar also horizontal) angeordnet waren, wurde die Tabelle auf einem Handy-Display kaum mehr sinnvoll nutzbar.

Umsetzung: Liste mit Definitionsliste kombiniert

> Demoseite Beispiel 2

Wenn wir die Detailinformationen zu den Dokumenten gedanklich einmal weglassen, dann ergibt sich eine ungeordnete HTML-Liste als Ausgangspunkt. Innerhalb eines Listenpunktes können wir dann die zusätzlichen Informationen unterbringen.

In diesem Fall kombinieren wir die ungeordnete Liste mit einer Definitionsliste. Als HTML sieht das so aus:

<ul>
 <li>
   <dl>
    <dt></dt>
     <dd></dd>
    <dt></dt>
     <dd></dd>
     <dd></dd>
   </dl>
 </li>
… nächster Listenpunkt
</ul>

Diese Darstellung hat meiner Ansicht nach folgende Vorteile:

  1. Da die einzelnen Punkte keinen Bezug zueinander haben oder nicht verglichen werden müssen, entspricht die HTML-Liste auch mehr der Bedeutung.

  2. Wir haben bei der sichtbaren Darstellung nun mehr Flexibilität.

    Durch die Listendarstellung können die weiteren Infos untereinander positioniert sein, auf breiteren Displays aber mit Hilfe von CSS auch nebeneinander angereiht sein. Diese Flexibilität ist mit einer HTML-Tabelle nicht möglich.

    Gleichzeitig wurde die sogenannte Dokumentenliste nun auch in der HTML-Umsetzung eine solche und damit auch für Programme als Liste erkennbar.

    Nachsatz: Dass die Liste teilweise auf große Word- und ungetaggte PDF-Dokumente verweist und diese für mobile Geräte dann auch schwer nutzbar sind, ist eine andere Geschichte.

  3. Eine HTML-Tabelle stellt der Browser erst nach dem Schließen des End-Tags dar und das kann bei langen, verschachtelten Tabellen – womöglich noch mit eingefügten Bildern, die keine Maßangaben haben – einige Sekunden dauern. Bei oftmaliger Benutzung ist das äußerst nervend!

    Die Listendarstellung hingegen wirkt sich schon bei einigen Dutzend Einträgen spürbar auf die Geschwindigkeit der Browseranzeige aus, da jeder gerenderte Listenpunkt bereits dargestellt wird, obwohl das Rendering der gesamten Liste noch nicht beendet ist.

Wann dargestellte Tabellen Sinn machen

Zum Schluss sei noch einmal betont, dass es natürlich komplexe Zusammenhänge gibt, die nur als Tabelle sinnvoll dargestellt werden können. Ich möchte nicht den Eindruck erwecken, dass ich hier gegen Daten­tabellen schreibe. Ich plädiere lediglich für richtig eingesetzte Mittel zur digitalen Aufbereitung.

Eine dargestellte Tabelle macht dann Sinn, wenn die Spalten der Reihen zueinander in Bezug stehen oder zu vergleichen wären. Also etwa Produkte einer Kategorie, die von einander abweichende Eigenschaften aufweisen. Hierzu ist eine Tabelle geeignet, weil wir die Werte einer Eigenschaft zueinander vergleichbar machen – nicht nur in der visuellen Darstellung.

Trotz gefinkelter Methoden auf neueren mobilen Displays, Tabellenteile zu fokussieren, bleibt die Anzeige einer komplexen Datenstruktur auf einem kleinen Bildschirm nach wie vor problematisch.

Abschnitt 1 von 1

Verweise zum Thema

Externe Verweise dieses Artikels wurden zuletzt am 20. Juli 2009 auf Relevanz geprüft.

Datum:
veröffentlicht am 20 Juli 2009, 17:48 MET.
Artikel:
Listen statt HTML-Tabellen – Handy und PDA profitieren davon [hyperkontext | Weblog]
Kurz-URL:
http://hyperkontext.at/s/215
Thema:
Webgestaltung 
Stichworte:
,  
Dieser Eintrag kann nicht mehr kommentiert werden.

Mögliche themenverwandte Artikel aus dem Weblog

Blättern (chronologisch)

« neuerer Artikel
Urlaub 2.0 in Österreich: Mit Weblogs im Gespräch bleiben
älterer Artikel »
Juni 2009 im Kontext