Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Frank Puscher 10. März 2010

Adobe Browserlab – eingefrorener Code

Die Webdesigner der ersten Stunde haben sich noch einen Spaß daraus gemacht, die technischen Schwächen der einzelnen Browser gezielt auszunutzen, um Seitenentwürfe zu machen, die so eigentlich gar nicht möglich waren. Spätestens seit dem Markteintritt Microsofts Mitte der 1990er Jahre gehört das Cross-Browser-Testing zur festen Arbeitsroutine ambitionierter Seitengestalter. Kein Browser stellt Seiten so dar, wie der andere, die Betriebssysteme nutzen unterschiedliche Farbpaletten und letztlich gibt es jede Menge Bildschirme unterschiedlichster Auflösung auf dem Markt.

Das hat sich auch bis heute nicht geändert. Im Gegenteil. Mit dem iPhone ist ein neuer, sehr spezieller Client hinzu gekommen und nicht jeder will für das iPhone eine Browserweiche bauen und eigene Seiten pflegen. Auch die Netbooks mit ihren kleinen Bildschirmen beeinflussen die Seitendarstellung und eventuell auch deren Usability erheblich.

Acht Browser in einem

Die Vielfalt der möglichen Browser/Betriebssystem/PlugIn/Auflösungs-Kombinationen ist so groß geworden, dass es selbst größeren Agenturen kaum gelingt, ein gut ausgestattetes Testzentrum zu pflegen. In der Regel begnügt man sich mit einem Windows-PC und einem Mac, den Browsern Firefox, Safari und InternetExplorer und bei letzterem neben den aktuellen Versionen vor allem die Nummer 6, die sich als größter Hemmschuh des universellen Designs erwiesen hat.

Wer es nicht selbst machen will, nutzt Onlinedienste. Browsershots ist der bekannteste. In diesem offenen und kostenlosen Projekt werden Screenshots von Nutzern gemacht, die eben mit einer bestimmten Rechnerkonfiguration unterwegs sind. Das ergibt eine wahnsinnige Vielfalt möglicher Kombinationen. Leider dauert es recht lange, bis die Screens zur Verfügung stehen. Im praktischen Arbeitsalltag ist dieser Zeitverlust ein Problem.

Neben einer Reihe kostenpflichtiger Dienste bietet vor allem Adobe eine interessante Lösung an. Browserlab ist ebenfalls ein Online-basierter Screenshot-Service. Noch firmiert er als Beta-Version und steht kostenlos zur Verfügung. Man munkelt, er könnte fest mit den Anwendungen der heraufdämmernden Creative-Suite-5-Kollektion verknüpft werden.

Anzeige

Der Adobe-Dienst funktioniert schnell und fast fehlerlos. Im Test verweigerte er allerdings zweimal die Aktualisierung eines IE-Screenshots. Zu kritisieren ist, dass bislang nur 12 Browser-Plattform-Kombinationen zur Verfügung stehen. Es fehlen die Betriebssysteme Linux, Windows Vista und Windows 7. Außerdem fehlt die Möglichkeit, die Auflösung des Browserfensters zu limitieren.

Browserlab in der Praxis

Allerdings bietet Browserlab eine Reihe gut durchdachter Komfortfunktionen, die den Dienst recht nahtlos in den Gestaltungsablauf integrieren. Das beginnt mit dem One-Klick-Test.

Die Arbeit mit Browserlab startet nämlich mit dem Aufbau eines Browsersets. Das ist eine Auswahl an Browser-System-Kombinationen nach eigenem Gusto. Das kann von Kunde zu Kunde variieren.

Ist die Auswahl getroffen, so genügt die Eingabe der URL, um die jeweilige Seite zu testen. Die Browsersets bleiben im Account gespeichert und sind sofort nach dem LogIn abrufbar.

Browserlab überzeugt nicht nur in Puncto Schnelligkeit, sondern auch, was das Interface der Online-Anwendung angeht. Sie ist als Flash-Applikation realisiert und bietet neben einer sehr einfachen, transparenten Menüführung vor allem eine Handvoll Keyboard-Shortcuts für das schnelle Arbeiten.

Die Grundansicht der Screenshots ist eine Einzelansicht. Per Drop-Down-Menü wählt der Nutzer zwischen den verschiedenen Browsern und sieht bereits im offenen Menü, ob der Screenshot vorliegt oder nicht.

Drückt der Nutzer die „2“ präsentiert Browserlab eine Doppelfensteransicht für den direkten Vergleich zum Beispiel zwischen einem Referenzbrowser und den anderen Kandidaten.


Wenn Sie „Shift“ gedrückt halten, erscheint ein Geistermauszeiger, der exakt im zweiten Bild an der gleichen Stelle positioniert wird, wie der Originalmauszeiger im ersten

Scrollt der Nutzer nun das rechte von beiden Fenstern, so wird das linke mitgezogen. Zieht er die Maus über den Bildschirm und drückt dabei die Shift-Taste, erscheint über dem anderen Screenshot ein Geistermauszeiger. Damit lässt sich trefflich die absolute Positionierung bestimmter Elemente überprüfen. Und auch die Bildschirmlupe arbeitet für beide Ansichten simultan.

Wer es ganz genau haben will, dem sei die Taste „3“ angeraten. Sie öffnet den dritten Ansichtsmodus nämlich die „Zwiebelschichten“.


In der Zwiebelschichten-Ansicht erkennt man selbst feinste Unterschiede in der Darstellung

Animateure kennen das, ein Zustand wird halbtransparent über einen anderen gelegt, um die Unterschiede der beiden zu identifizieren. Ein Schieberegler im Kopf der Seite bestimmt die Deckkraft des oberen Screenshots und so erkennt der Designer selbst feinste Differenzen.

In der Zwiebelschichten-Ansicht erkennt man selbst feinste Unterschiede in der Darstellung.

Links zum Artikel

(mm), ™, (sl)

Frank Puscher

Autor der Fachbücher "Leitfaden Web-Usability", "Flash MX-Das Kochbuch" und "Die Tricks der Internet Künstler". Frank Puscher ist nicht nur ein angesehener Autor, der für zahlreiche Fachzeitschriften tätig ist, er ist auch als Schulungsleiter und Berater erfolgreich.

4 Kommentare

  1. Wirklich sehr interessant. Hoffe da wird mehr drauf. :)

  2. Benutze Browserlab schon lange und bin echt begeistert.

    Onion Skin (Zwiebelschicht-Ansicht) ist einfach Klasse.
    Außerdem kann auch ein Lineal eingeblendet werden. Wurde im Artikel leider nicht erwähnt, ist jedoch manchmal sehr nützlich.

    Gruß Marcus

  3. Nette Idee,

    leider scheint die IE6-Ansicht nicht korrekt zu sein.
    Mein nativer IE6 unter Windows XP, stellt es komplett anders dar.

    Schade!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.