Tabellendesigns auf kleinen Displays
Anzeige Hier werben
Darstellung von Tabellendesigns auf kleinen Bildschirmen
Mobile Geräte wie Mobiltelefone oder PDAs haben sehr kleine Displays. Mobiltelefone der teureren Klasse haben meistens ein Display mit einer Breite um die 200 Pixel. 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 unbrauchbaren Seiten führen, wie dieses Bildschirmfoto eines Mobiltelefons rechts zeigt.
Seiten, die aus Tabellen bestehen, haben bekanntlich 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.
Wie 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.
Wie kann man eine gute Darstellung erzielen?
Bei einer semantisch korrekten und gut strukturierten Seite 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 eine solche Seite auf einem Mobiltelefon aussieht, kann man knapp an der Grafik rechts entnehmen. Um eine solche Darstellung zu erzielen, sollte man auf eine gute Strukturplanung achten.






