Markup Webdesign Journal

Einspaltige Layouts sind keine wirklich gute Lösung für das mobile Web, zumindest bei Websites mit großem Umfang an Informationen. An welchen Techniken die Entwickler arbeiten, möchte ich verfolgen und den ein oder anderen Lösungsansatz hier vorstellen und diskutieren.

Summary Thumbnail

Diese Möglichkeit ist eine Erweiterung der normalen Thumbnail Views. Entwickelt wurde diese Technik von Patrick Baudisch in Zusammenarbeit mit Heidi Lam. Die normale Miniaturansicht einer Website der Thumbnail Views auf einem kleinen Display hat den Nachteil, dass der Text in den meisten Fällen fast unlesbar ist. Ohne weiteres Zoomen bleiben die Inhalte so zunächst nicht verwertbar.

Summary Thumbnails lösen dieses Problem, indem die Miniaturansicht der Seite um lesbare Textfragmente erweitert wird. Die Fragmente werden beispielsweise erzeugt, indem Überschriften komprimiert, d.h. gekürzt werden. Man könnte auch sagen, dass die Inhalte verstümmelt werden, aber nur soweit, dass sie interpretierbar bleiben. Im Idealfall also in der Form, dass es möglich ist zu erkennen, was das Thema des betreffenden Abschnitts ist. So ermöglichen es diese Textausschnitte dem Benutzer, die für ihn relevanten Inhalte zu finden um sie dann gezielt auf eine Lesbare Größe zu vergrößern.

Begleitende Studien haben ergeben, dass die Benutzer Inhalte so 41 Prozent schneller fanden mit einer deutlich gesenkten Fehlerrate im Vergleich zu einspaltigen Layouts. Wobei es sehr wahrscheinlich nicht immer zu den gewünschten Ergebnisse durch die Kürzung der Texte zwecks Vergrößerung kommen dürfte. Trotzdem, so zeigen die Ergebnisse der Studie, ist diese Technik eine deutliche Steigerung im Vergleich zu einspaltigen Layouts.

Ausführliche Beschreibung: "Summary Thumbnails: Readable overviews for small screen web browsers" (PDF-Datei)

Collapse-To-Zoom

(Patrick Baudisch in Zusammenarbeit mit Xing Xie) Durch eine Bewegung mit dem Stift des Handhelds ist es möglich, z.B. eine Spalte einer Website zu entfernen, sodass für diese lediglich ein kleiner schmaler Platzhalter verbleibt. Die durch die Collapse-To-Zoom vergrößerte Anzeigefläche des Displays wird dazu genutzt, den verbleibenden Rest der Website zu rendern. So schließt der Benutzer die für ihn unrelevanten Bereiche der Seite aus, vergrößert die verbleibenden Bereiche aus der Miniaturansicht und kann sich auf die Inhalte konzentrieren, die ihn interessieren. Werbeanzeigen lassen sich so bequem entfernen, um schnell Platz auf dem Display zu schaffen.

Ausführliche Beschreibung: "Collapse-to-zoom: Viewing webpages on small screen devices by interactively removing irrelevant content" (PDF-Datei)

Konsequenzen für das Webdesign

Bleibt die Frage, ob man Websites dann wie gehabt für normale Anzeigemedien wie Bildschirme oder Projektionen konzipiert und eine dieser Techniken für den Rest auf kleinen Displays sorgt. Theoretisch könnte dem so sein. Nur wird man mit Rücksicht auf die Leistungsgrenzen der kleinen Geräte nach wie vor darauf angewiesen sein, alternative Versionen zu erstellen. Mit weniger grafischen Elementen, kleineren Bildern etc., um endlos lange Ladezeiten zu verhindern. So lange, bis Geräte mit angemessener Performance auf dem Markt sind.

Punkt 8 der Beschreibung des Algorithmus der Summary Thumbnail lässt erahnen, dass diese Techniken auch Einfluss auf das Markup der Dokumente haben werden, sobald diese auf mobilen Geräten abgerufen werden. So werden z.B. passende Font-Tags eingefügt, um die Schriftgröße in den transformierten Elementen zu erhöhen.