Kommentare 22

Webseiten Cross-Browsertests: Ein kleiner Überblick praktischer Tools und Tipps

Die Anzahl verschiedener Internet-Browser und Geräte wächst ständig, so dass es einem als Webdesigner und Entwickler schon etwas schwindelig werden kann, denn ein neues Webseiten-Projekt soll ja in allen Browsern funktionieren und natürlich auch gut aussehen.

Da hilft es eigentlich nur jede Menge Tests durchzuführen, denn die Unterschiede in den Browser-Ansichten können doch enorm sein und irgendein Browser muss natürlich auch immer aus der Reihe tanzen und den Code anders darstellen, als alle anderen (meist ist dies dann natürlich unser Freund Internet Explorer…). Damit du dir die Arbeit beim Testen deines neuen Webprojekts in den unterschiedlichen Browsern etwas erleichtern kannst, habe ich hier im Artikel einige praktische Tools, Tipps und eigene Erfahrungen zusammengestellt.

Hilfreiche Online-Tools fürs Cross-Browsertests

Es gibt einige kostenlose Online-Tools und besonders, um eine Webseite schnell in älteren Internet Explorer Versionen oder in nur wenigen verschiedenen Browser-Versionen zu testen, können diese Tools schon sehr hilfreich sein. Für Internet Explorer Tests gibt es z.B. den IENetRenderer. Hier kannst du Webseitenansichten im IE 5.5 bis 9 testen.

Webseiten Cross Browser Tests

Internet Explorer Ansichten online im IE NEtRenderer testen.

Ein extra Browser, den du dir kostenlos auf den eigenen Computer installieren kannst ist außerdem der IETester. So kannst du deine Webprojekte auch offline in den unterschiedlichen Internet Explorer Versionen testen.

Eines der umfangreichsten, kostenlosen Browsertest Online-Tools ist wohl Browsershots.

Webseiten Cross Browser Tests

Die Browser-Auswahl bei Browsershots

Brosershots bietet wirklich jede Menge Browser-Ansichten zu Auswahl und wenn man nur wenige zum Test auswählt, klappt der Test auch recht gut. Bei mehreren Browsern dauert der Test meiner Erfahrung nach allerdings sehr lange oder bricht ab und zu auch komplett ab. Ich bin mir nicht sicher, ob andere diese Erfahrung teilen können, über Feedback würde ich mich daher sehr freuen.

Für wirklich umfangreiche Tests gibt es einige Profianbieter, die allerdings in den meisten Fällen kostenpflichtig sind. Einer der größten Profianbieter ist Cross-Browsertesting. Ein großer Vorteil ist, dass der Anbieter auch Tests für mobile Geräte mit anbietet.

Professionelle Cross-Browsertesting Angebote mit kostenlosen Optionen sind außerdem Adobe Browser Labs (derzeit noch bis April 2012 kostenlos in der Beta-Phase) oder Saucelabs (bietet ein kostenlose Account-Version mit 200 freien Minuten Testzeit im Monat).

Ein noch recht neues, ebenfalls praktisches Angebot (derzeit noch in der öffentlichen Beta-Phase und daher komplett kostenlos) ist FWP Screenshots. Ich teste das Tool seit ein paar Wochen und bin derzeit mit dem Angebot sehr zufrieden. Man kann die eigenen Tests speichern und bei Bedarf einen Test schnell wiederholen. Außerdem gibt es eine praktische Überlagerungsoption, um zwei Browser-Ansichten direkt miteinander vergleichen zu können.

Webseiten Cross Browser Tests

Die Browser-Vergleichsansicht von FWP Screenshots.

Webseiten Cross Browser Tests

Gespeicherte Tests können schnell wiederholt werden.

Webseiten möglichst live testen

Mit Hilfe dieser praktischen Cross-Browsertesting Tools kannst du dir die Arbeit also schon ganz schön erleichtern, auch wenn die Tools einen Live-Test natürlich nicht ganz ersetzen können. Daher habe ich immer möglichst viele Browser auf einem Test-Computer installiert. Außerdem versuche ich immer, die Programmierung schon während der Entwicklung in regelmäßigen Abständen zu überprüfen. Wenn man an einem responsive Webdesign arbeitet ist es ebenfalls sehr hilfreich, so viele Live-Tests auf verschiedenen Geräten wie möglich zu machen.

Ich habe mir inzwischen angewöhnt, ein Design erst einmal komplett in der Standardansicht fertig zu programmieren, bevor ich mich an die Anpassungen des responsive Webdesigns mit Hilfe von CSS3 Media Queries mache. Um das responsive Design dann zu testen, kannst du z.B. das kostenlose Online-Tool Screenfly nutzen. So kannst du dir deine Webseite schnell und übersichtlich in verschiedenen Größen anzeigen lassen.

Webseiten Cross Browser Tests

Screenify ist sehr praktisch, um die Styles in den CSS3 Media Queries zu testen.

Um die Webseite aber wirklich zu überprüfen und so auch die Anzeige und Funktion von Formularen, Buttons, Navigationselementen oder Images testen zu können, solltest du deine Webseite aber zusätzlich unbedingt auf so vielen Geräten wie möglich anschauen und ausprobieren.

Natürlich kann nicht jeder die unterschiedlichsten mobilen Geräte fürs Testen zur Verfügung haben. Eventuell kann man auch Kollegen oder Bekannte bitten, sich die Seite einmal anzuschauen und über eventuelle Fehler zu berichten. Zusätzlich dazu habe ich mich z.B. auch schon des öfteren in einen Apple-Store oder in ein anderes Computergeschäft aufgemacht, um mir eine neue Webseite selbst auf möglichst vielen verschiedenen Geräten anschauen zu können.

Wie testet du deine neuen Webseiten-Projekte? Kennst du weitere praktische Tools und Angebote, um die Programmierung in verschiedenen Browsern oder auf verschiedenen Geräten möglichst gut zu testen? Über deine Erfahrungen und weitere Tipps freue ich mich sehr!

Tipps zum Weiterlesen

22 Kommentare

  1. Diese Tools sind für uns einfach unerlässlich. Gerade weil es so viel Browser gibt, sind die Tests unumgänglich. Es soll ja welche geben, die mit alten Browser durchs Netz stampfen :-)

    Kreative Grüße
    Frank

    • Ja, das stimmt, ich wünschte man könnte diese alten Browser einfach komplett abschaffen… Ich denke zwar, dass es auf einer Webseite immer sehr auf die Zielgruppe ankommt, wie viele Besucher veraltete Browser nutzen (hier bei Elmastudio sind dies wirklich zum Glück nur sehr wenige :-) )

      Generell ist es aber eben doch wichtig, die grundlegenden Funktionen einer Webseite Browser-kompatibel zu lösen. Auf so schöne Dinge wie abgerundete Ecken etc. müssen die User älterer Browser aber dann doch verzichten :-)

      Viele Grüße,
      Ellen

  2. In den letzten Wochen hatte ich Projekte, in denen ich immer wieder auf dieses blöde Problem der unterschiedlichen Darstellung gestoßen bin. Programmieren tue ich auf meinem Macbook in Safari/Firefox, d.h. nicht nur der IE unterscheidet sich oft, sondern auch der selbe Browser in Windows.

    Ich musste mich immer an andere Rechner setzen wo die ganzen verschiedenen Browser drauf waren und Kollegen nerven, doch mal schnell auf die und die Seite zu gehen :-P Nervig ^^

    Ich werde deine Vorschläge mal ausprobieren und bin optimistisch, dass ich damit wieder ein wenig Arbeit habe ;-) Guter Artikel!

  3. Hallo Ellen. Danke für die Tipps. Allerdings sind so jquery-Effekte und/oder versteckte Elemente nicht wirklich zu testen. Darum verlassen wir uns eigentlich fast nur auf virtualisierte Live-Tests auf den entsprechenden Systemen. Klar, alle Systeme kann man nicht testen, aber ein Großteil der User-Systeme sollten sich so schon abfangen lassen. VM-Ware sei dank… :)

    • @Pascal, @Stefan,

      ja, das stimmt natürlich: Auch wenn es etwas mühselig ist, kommt man trotz Browsertesting-Tools ums Live-Testen möglichst vieler Browser/Geräte nicht ganz herum. Dennoch kann man sich doch schon während der Entwicklung ordentlich Arbeit sparen, wenn man hin und wieder einen Test-Durchlauf macht. So kann man zumindest “Fehler” im CSS leicht beheben :-)

      Viele Grüße,
      Ellen

    • Wenn man die Ansicht im IE nur schnell testen möchte, ist IE NetRenderer eigentlich wirklich ganz gut zu gebrauchen. So muss man kein extra Programm o.ä. öffnen. Anfreunden werde ich mich mit dem IE allerdings wohl dennoch nicht ;-)

      Viele Grüße,
      Ellen

      • Anfreunden können sich damit die wenigsten, der Traum von dem einen Browser für alle bleibt wohl ein Traum :)

        Zum Glück kann man den IE6 in vielen Fällen von der Testliste streichen, abgesehen der Kunde zahlt einen schönen Aufschlag ;)

        LG Sascha

  4. Das Problem gab es schon immer, und wird es wohl auch immer geben. Umso besser, wenn man mal erfährt, wie andere das so machen.

    @Pascal: Da ich eigentlich auch Mac-User bin, kam für mich beim Umstieg von Windows damals auch das große Erwachen. Dass es minmale Unterschiede in der Darstellung eines Dokuments geben kann, OK. Dass aber zum Teil algorithmische Unterschiede im selben Browser auf einer anderen Plattform vorhanden zu sein scheinen, ist schon verwunderlich.

    Auf jeden Fall Danke für die ausführliche Übersicht. Das macht doch einiges enfacher. Vor allem das Problem der verschiedenen IE-Installationen ist mit den oben genannten Test-Tools nicht mehr ganz so dramatisch.

    Die Probleme bei einer großen auswahl an Browser in Browsershots hatte ich übrigens auch. Da hilft wohl nur gezieltes Testen :-(

    • Hallo Marco,

      komisch, früher hatte ich dieses Problem bei Browsershots nicht. Wahrscheinlich ist die Plattform einfach zu sehr überlastet. Ich bin daher auf FWP-Screenshots umgestiegen. Meiner Ansicht nach derzeit wirklich ein Tipp, ich bin mir allerdings nicht sicher, ob es dort immer eine kostenlose Option geben wird, da es augenblicklich noch die Beta-Version ist.

      Viele Grüße,
      Ellen

  5. Hallo,

    mir fällt das Testen auch immer sehr schwer und ist ziemlich nervig. Ich teste gerade auch FWP screenshots und bin sehr zufrieden. Habe vorher viel mit browsershorts gearbeitet, fand es aber zu mühselig und langwierig. Außerdem bekomme ich beim anderen Tool noch paar extras.

    Besten Gruß
    Roland

  6. Toller Artikel, danke dafür.

    Mit den Tools lassen sich bequem Webseiten mit aktuellen und früheren Browserversionen testen.
    Aktuelle Versionen sind ja nicht so schwierig, bei vergangenen Versionen sieht das schon ein wenig anders aus.

  7. Vielen dank für die Zusammenfassung toller testing tools. ich habe schlechte Erfahrung mit IE-Tester gemacht. Ich habe anhand des Toos eine Seite für IE angepasst aber es rendert in versch. IE versionen nicht 100% richtig. Am ende gab’s Ärger. Also mein Vorschlag an alle: testet nicht nur mit IE-Tester. Browserlab von Adobe finde ich cool. Zum live testen werde ich andere Tools probieren,die du hier vorgestellt hast. Danke für die Artikel

  8. Pingback: Ältere Internet Explorer in einem responsive, mobile-first Webdesign unterstützen (ohne JavaScript) | Elmastudio

  9. Pingback: Cross-Plattform-Testen | Das Blog zur Zwickauer OOSE-Vorlesung

  10. Der Beitrag könnte ein Update vertragen :)

    FWP Screenshots scheint es nicht mehr zu geben. Webseite ist nicht erreichbar. Das Adobe Browserlab wurde in 2013 ebenfalls abgeschaltet.

    Hat jemand seit Veröffentlichung des Artikels in 2011 neue empfehlenswerte Browser-Tools entdeckt?

    - Hans Steup, Berlin

Schreibe eine Antwort