Cross-Browser Tests mit Adobe Browser-Labs

adobe-browser-labs

Adobe hat heute Nacht zum zweiten Mal für eine Stunde die Tore für eine Registrierung beim Projekt Browser Labs geöffnet! Dank Twitter war ich sofort zur Stelle und kann Euch somit zeigen was sich dahinter verbirgt.
Eins ist jetzt schon sicher: Auf eine solche RIA hat so mancher Webdesigner (mich eingeschlossen) lange gewartet.

Modernes Webdesign

Neue Workflows, Techniken und Designideen – inkl. Rapid Prototyping, Responsive Design und Sass.

In unserem Shop kaufen
Signierte DVD, keine Versandkosten

Bei Amazon bestellen
Standard-Version

Adobe Browser Labs: Die Features

Adobe Browser Labs

Es gibt zahlreiche Emulatoren, Websites, Anwendungen und Work-Arounds um die Darstellung einer Website in den verschiedenen Browserumgebungen zu testen. Genau an dieser Stelle setzt auch Adobe Browser Labs an und bietet Euch in Lightroom/Bridge ähnlichem Interface die Möglichkeit Eure Websites in verschiedenen Browsern zu testen. Zusätzlich kann der ausgewählte Browser jedoch auch auf einem bestimmten Betriebssystem simuliert werden. Aktuell bietet Browser Labs folgende Browsersimulationen:

  • Firefox 3.0 (OS X)
  • Firefox 3.0 (Windows XP)
  • Firefox 2.0 (OS X)
  • Firefox 2.0 (Windows XP)
  • Internet Explorer 7.0 (Windows XP)
  • Internet Explorer 6.0 (Windows XP)
  • Safari 3.0 (OS X)

Adobe Browser Labs: Die Ansichten

Adobe Browser Labs

Ihr habt die Wahl eure Seite auf drei verschiedene Wege zu testen. Zunächst wäre hier der "1-up-View". Am oberen Fensterrand gebt Ihr zunächst die URL der Seite ein und wählt anschließend die Browserumgebung. Im Hauptfenster wird nun die Seite so dargestellt wie sie eben auch im zuvor gewählten Browser ausschauen würde.
Der "2-up-View" splittet das Hauptfenster vertikal und ermöglicht so einen direkten Vergleich zweier Browser. Scrollt Ihr die Seite, so scrollen beide Ansichten parallel mit. Leider kann in keiner Ansicht bisher geklickt werden, was Tests bzgl. Interaktionen (noch ?) unmöglich machen. Sollte der Monitor zu klein sein, so kann die Ansicht von 75% bis 200% skaliert werden.
Als letztes steht Euch der Modus "Onion Skin Mode" zur Verfügung. Hier werden ebenfalls zwei Browser-Darstellungen miteinander verglichen, jedoch werden die Seiten semitransparent übereinander ausgerichtet. So werden ungewollte Abweichungen sofort bemerkt. Über einen Transparenz/Opazität-Regler kann die Deckkraft der beiden Ansichten gesteuert werden.

Adobe Browser Labs: Weitere Features

Adobe Browser Labs

Sehr angenehm wird die Steuerung von Browser Labs mittels Hot Keys. Die wichtigsten Funktionen können per Tastatur angesteuert werden wodurch in wenigen Sekunden die Ansicht verändert und beurteilt werden kann.
Solltet Ihr Eure Websites nur in einigen der oben genannten Browsern testen wollen, so können darüber hinaus sogenannte Browser-Sets angelegt werden die nur bestimmte Testumgebungen beinhalten.

Fazit

Adobe Browser Labs überzeugt mich auf ganzer Linie. Neben einem schicken Interface und sehr zügiger Darstellung finde ich das Tool einfach nur saupraktisch. Verbesserungswürdig ist in jedem Fall der Browser-Support. Hier fehlen einige Browser (bsp. Chrome, IE8, Opera) komplett, was aber sicher nicht ewig der Fall sein dürfte.
Fast ebenso wichtig finde ich es, dass der Webdesigner die Seite auch benutzen kann. Eine nicht zerschossene Darstellung ist hier nur die halbe Miete.

Was meint Ihr?

Was haltet Ihr von Adobe Browser Labs? Habt Ihr selbst schon Tests machen können oder wartet Ihr auf die nächste Möglichkeit euch zu registrieren? In welchen Browsern testet Ihr Eure Sites für gewöhnlich?