Usability-Tipps - Kapitel "Layout und Technik-Werkzeuge"

“Fast live” Layoutkontrolle mit Browserlab

Die Tage der Vormachtstellung des Internet-Explorers sind zumindest in Europa, speziell Deutschland gezählt. Auch über die Grenzen hinaus hat sich eine Browservielfalt entwickelt, die durch mobile Geräte noch verstärkt wird. Es ist also lange schon nicht mehr genug, seine eigene Website nur durch die „Brille“ seines bevorzugten Browsers und eigenen Betriebssystems zu betrachten, wie auch schon im Artikel zur Browserstabilität vertieft wurde.

Um eine Website in der Tiefe zu überprüfen, werden oft lokal installierten Browser und ggf. auch eigens zu Testzwecken aufgesetzte virtuelle Systeme verwendet. „Echte Livetests“ umfassen dabei nicht nur die Ansicht der Seite(n), sondern neben reinem Klicken auch vor allem die Funktionstest der Kenrprozesse.  Bei nicht zur Verfügung stehenden Systemen aber bleibt meist nur die Kontrolle anhand von Bildschirmfotos einzelner Seiten – oft leider nur der Startseite -, die mit Diensten wie browsershots.org erstellt werden.

Da die Geschwindigkeit und Zuverlässigkeit dieser Dienste aber i. d. R. deutliche Grenzen haben, kann auf diese Weise nur sehr rudimentär und zeitraubend kontrolliert werden, ob die Website auch auf anderen Systemen und in fremden Browsern „schmeckt“. Findet man einen Fehler und muss in mehreren Schritten seine Korrekturen erneut auf diesem Weg kontrollieren, steigt der Zeitaufwand nocheinmal um das Vielfache an. Kein Wunder also, dass man sich (beruhigt durch die geringen Zahlen einzelner exotischer Kombinationen aus der Webanalyse) lieber auf vielvesprechendere Optimierungsmaßnahmen konzentriert. Ein Webdienst von Adobe kann hier ein wenig Abhilfe schaffen – selbst, wenn man sonst keine (installierten, kostenpflichtigen) Produkte des Herstellers einsetzt. Unter browserlab.adobe.com kann jeder, der eine Adobe-ID besitzt (die auch Zugang zu den anderen „CS Live“-Diensten im Web gewährt) seine Website in mehreren Browsern auf Windows- und Mac-Basis testen. Die Registrierung für eine ID ist derzeit bis Ende April 2011 frei möglich; der kostenfreie Zugang zum Browserlab ist limitiert… allerdings für ein volles Jahr. Für einen Test reicht es also problemlos.

Kontrolle in verschiedenen Windows- und OS X – Browsern

Es wäre zwar wünschenswert, dass die Auswahl von Browsern und Systemen noch erweitert wird, denn derzeit reicht das Angebot lange nicht die Tiefe von browsershots.org, aber dafür können mehrere Seiten nacheinander sehr zügig abgerufen werden, so dass man deutlich tiefer kontrollieren und eine Menge Zeit sparen kann.  Dennoch ist die Kontrolle für die bestehenden Browser in der sehr angehehm bedienbaren und an die Desktop-Produkte erinnernde Oberfläche mehr als sinnvoll, wenn man keinen echten Mac und Windows-PC einsetzen kann. Und selbst dann sind die Vergleichsfunktionen eine effiziente Erleichterung, wenn nicht nur Stabilität, sondern möglichst eine identische Darstellung das Ziel sein sollte. Aktuell stehen folgende Kombinationsmöglichkeiten zur Verfügung:

Browserauswahl in Browserlab

Praktisch: Aus dieser Liste lassen sich unter „Browsersätze“ verschiedene Auswahlen speichern, die zu unterschiedlichen Zwecken (z. B. „Schnelltest“, „Tiefentest“ etc.) schnell aktivieren lassen. Ist ein Satz unter „Testen“ aktiviert und wird eine Adresse eingegeben, lädt der Dienst Bildschirmfotos der angeforderten Seite und zeigt diese an. In der Wartezeit sehen Sie, wenn für einen bestimmten Browser bereits eine Darstellung vorliegt, Ein Klick aktiviert die Ansicht der Website anhand des Bildschirmfotos.

„Navigation“ zwischen den Seiten

Da es sich um Grafiken handelt, ist eine echte Navigation durch Klicken nicht möglich… oder besser: eigentlich nicht. Denn wer den Dienst z. B. direkt aus Adobe Weaverslave heraus nutzt, kann durch einen Trick dennoch durch Klick auf einen Link die Seite wechseln. Aber auch ohne diese Erleichterung können Links z. B. schnell aus einer Liveansicht in einem weiteren Tab kopiert werden, wenn Seitenadressen zu komplex sind, um sie schnell selbst in die Adresszeile von Browserlab einzugeben. Die angeforderte Seite wird dann wiederum zügig in der aktuellen Ansicht geladen und die Kontrolle kann fortgesetzt werden. Selbst wenn es sich also nicht „anfühlt“ wie ein echter Browser und logischerweise auch Interaktivität per JavaScript etc. nicht in einen Test einfließen können, ist das deutlich mehr, als andere Dienste derzeit – vor allem in einer vergleichbaren Geschwindigkeit – möglich machen.

Vergleich mehrerer Browser

Dank breiter Bildschirme ist es zudem meistens kein Problem, zwei „Browserfenster“ nebeneinander zu betrachten. Das ermöglicht z. B. mit Hilfe von Linealen oder auch eines parallel in beiden Browsern an der gleichen Position angezeigten Cursors eine sehr genaue Kontrolle der Platzierung und Dimensionen einzelner Elemente.

Geteilte Ansicht mit zwei Browsern

Das geht besonders schnell durch Hotkeys, mit deren Hilfe man zwischen Einzel- und Doppelansicht umschalten, den Cursor einblenden, den Browser wechseln und einige andere hilfreiche Funktionen schnell aktivieren kann. Die Liste der Abkürzungen kann über den Link „Hotkeys“ oben rechts eingeblendet werden. Dort ist auch eine sehr überschaubare Hilfe zu finden.

Ebenfalls per Hotkey – oder über die Auswahlliste „Ansicht“ kann eine Überlagerung zweier Versionen einer Seite gewählt und deren Aussehen gesteuert werden. Wer genau hinsehen will, kann zusätzlich einen Zoomfaktor wählen.

Overlay zweier Browseransichten

Die Kombination dieser Funktionen erlaubt schon heute eine Menge sehr sinnvoller und vor allem schneller Kontrollen, wenn entsprechende „echte“ Systeme nicht zur Verfügung stehen. Wenngleich man sich dabei allein auf das Layout beschränken muss und nicht auch Funktionen testen kann, hat zwar auch Browserlab seine Grenzen, aber sicher kommen im Lauf der Zeit noch ein paar hilfreiche Funktionen hinzu, die den Dienst weiter aufwerten. Da ein ausgiebiger Test ohne Kosten möglich ist, besteht kaum ein Grund, warum Webmaster, die sich mit der Browserstabilität Ihrer Website befassen wollen, nicht darauf zurückgreifen sollten. Oder vielleicht doch? Kennen Sie vergleichbare oder auch bessere Dienste? Kommentare als Ergänzung sind jederzeit willkommen!