Cross-Browser Tests mit Adobe Browser-Labs

Adobe LogoAdobe 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.

Adobe Browser Labs: Die Features

Adobe Browser LabsEs 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 LabsIhr 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 LabsSehr 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?

Photoshop CS4 für Webdesigner

Themenverwandte Artikel:

Folgende Beiträge könnten dich ebenfalls interessieren.

8 Reaktionen auf diesen Beitrag

  1. Eddy v.G.
    22. Juli 2009, 21:42 Uhr

    Das sieht ja nach einer feinen Sache aus!
    Zur Zeit teste ich die Websites mit dem aktuellen Firefox, dem IE8 und im Department mit dem “elenden” IE6. Andere Möglichkeiten habe ich leider nicht, ausser den bekannten “BrowserCherckern” im Netz. Leider arbeiten die nur mit mit Screenshots, die gerade bei längeren Websites z.B. den Bottom-Bereich nicht erfassen.

    Im Gegensatz DAZU ist/scheint Browser-Labs wirklich Gold wert zu sein!

  2. Moritz Gießmann
    23. Juli 2009, 09:21 Uhr

    Kann nicht viel mehr als Browsershots.org und wird in Zukunft wohl Geld kosten.

  3. Jonas
    23. Juli 2009, 09:40 Uhr

    @Moritz: Vom Umfang her hast du schon recht. Allerdings nervt mich Browsershots nur noch an. Die Performance ist unterste Schublade und dauernd stürzt der Browser ab.
    Wenn Adobe den Service deutlich ausbaut und oben genannte Features einbaut, wäre ich sogar bereit dafür zu zahlen. Kommt natürlich drauf an was. Aber ein immer verfügbarer und vor allem schneller Service wäre mir ein paar Cent wert.

  4. Leo
    23. Juli 2009, 21:27 Uhr

    Browsershots benutze ich schon seit Langem nicht mehr.
    Habe eine Zeit lang IETester u.ä benutzt bis ich auf Xenocode gestoßen bin.
    http://t3n.yeebase.com/xenocode-browser-sandbox-browser-tests-leicht-gemacht-238030/
    Seit dem benutze ich ausschließlich Xenocode und bin relativ zufrieden damit.

  5. Jonas
    24. Juli 2009, 19:08 Uhr

    @Leo Das sieht in der Tat sehr gut aus! Danke für den Tipp! Leider nur für Windows.

  6. Chris
    25. Juli 2009, 09:54 Uhr

    Schlicht und einfach: Haben will!

  7. John
    26. Juli 2009, 18:01 Uhr

    Danke für den Tipp, leider scheint die Anmeldung bereits wieder beendet zu sein. Ich teste meine Webprojekte unter IE6 bis IE8 (Win), Safari 4 (OS X), Safari 3 (Win), Firefox 2 (Win) und 3.5 (OSX).
    (Ich teste also noch oldschool mit eigens installierten Browsern.)

    Für private Projekte werde ich zukünftig nicht mehr für den IE 6 optimieren.

  8. John
    26. Juli 2009, 18:08 Uhr

    ähm, ich habe anfänglich den ersten Teil überflogen. Natürlich ist die Anmeldemöglichkeit bereits vorbei. Sagst du ja. (Kann man seine Kommentare editieren?)

Bitte kommentiere diesen Eintrag!

Dir hat dieser Eintrag gefallen, du hast Fragen, Anregungen oder Kritik? Hier ist Platz dafür. Jeder Kommentar wird ernst genommen und trägt zum Informationsgehalt meiner Seite bei. Also los!