Tabellendesigns auf kleinen Displays

von Philipe Fatio | 0 | 0 Kommentare | 697 Aufrufe

Anzeige Hier werben

Darstellung von Tabellendesigns auf kleinen Bildschirmen

Bild zu Tabellendesigns auf kleinen Displays
Design mit Tabellen

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:

Bild zu Tabellendesigns auf kleinen Displays
Ein einfaches Formular in einer Tabelle auf einem Computer dargestellt.

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:

Bild zu Tabellendesigns auf kleinen Displays
Das anscheinend übersichtliche Formular ist auf einem Mobiltelefon nicht zu verstehen.

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?

Bild zu Tabellendesigns auf kleinen Displays
Design mit semantischem HTML

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.

Über den Autor: Philipe Fatio
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten

Kommentare: Tabellendesigns auf kleinen Displays