Tabellendesign in kleinen Displays
Nach obenDarstellung von Tabellendesigns auf kleinen Bildschirmen
Mobile Geräte wie Mobiltelefone oder PDAs haben ein sehr kleines Display. Mobiltelefone der teureren Klasse haben meistens ein Display von nur 176px mal 208px. Eine einzelne Spalte einer Tabelle würde also nicht in das Display passen. Daher wird die Seite linearisiert, d.h. die Zellen werden untereinander dargestellt. Dies kann zu unübersichtlichen bis gar zu unbrauchbaren Seiten führen, wie dieses Bildschirmfoto eines Mobiltelefons auf der linken Seite zeigt.
Seiten aus Tabellen haben bekanntermaßen einen "aufgeblähten" Code. Dies führt zu langen Ladezeiten, was bei einer teuren und langsamen Verbindung über das Mobilnetz zu unnötigen Wartezeiten und überraschenden Rechnungen führt.
Nach obenWie kommt es zur Unübersichtlichkeit?
Hier wird anhand eines einfachen Beispiels erklärt, weshalb es zu solch einer unübersichtlichen Darstellung kommt.
Wir gehen von einer Tabelle mit zwei Zeilen aus. Die Zeilen enthalten jeweils drei Zellen. In der unteren Zeile steht in jeder der drei Zellen ein Textfeld. Oberhalb jedes Textfeldes steht die dazugehörende Legende, welche sich in der Zelle der ersten Zeile befindet. Das ganze sieht auf einem Computer etwa so aus:
Wenn man diese Seite nun auf einem Mobiltelefon oder PDA öffnet, wird jede Zelle in einer Zeile untereinander dargestellt. In etwa so sieht die Seite dann aus:
Der Besucher versteht den Zusammenhang der einzelnen Texte nicht und weiss nicht, was in das Textfeld gehört. Bei diesem Beispiel soll nochmals unterstrichen werden, dass Tabellen nur für tabellarische Daten verwendet werden sollen. Bei einer tabellarischen Darstellung von Daten würde man trotz linearisierter Darstellung den Inhalt verstehen.
Bei einer semantisch korrekten und gut strukturierten Seite wie diese muss man sich keine grossen Gedanken über die Darstellung auf solchen Geräten machen, da sie in den meisten Fällen verständlich und übersichtlich ist. Wie diese Seite auf einem Mobiltelefon aussieht kann man an der Grafik auf der linken Seite sehen.
OverflooD
Reagieren denn Handys beispielsweise auch auf den Media Descriptor "handheld"? Mich würde interessieren, wie man das passende Stylesheet direkt anwendet, ohne die komplette Seite neu zu verfassen.