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 man sich die Arbeit beim Testen deines neuen Webprojekts in den unterschiedlichen Browsern etwas erleichtern kannst, haben wir 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.
Ein extra Browser, den man sich kostenlos auf den eigenen Computer installieren kann ist außerdem der IETester. So kannst man die Webprojekte auch offline in den unterschiedlichen Internet Explorer Versionen testen.
Eines der umfangreichsten, kostenlosen Browsertest Online-Tools ist wohl Browsershots.

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 nach unserer Erfahrung nach allerdings sehr lange oder bricht ab und zu auch komplett ab.

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. Wir verwenden das Tool seit ein paar Wochen und sind 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 möglichst live testen

Mit Hilfe dieser praktischen Cross-Browsertesting Tools kann man sich die Arbeit also schon ganz schön erleichtern, auch wenn die Tools einen Live-Test natürlich nicht ganz ersetzen können. Daher haben wirh immer möglichst viele Browser auf einem Test-Computer installiert. Außerdem versuchen wir 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.

Wir haben uns inzwischen angewöhnt, ein Design erst einmal komplett in der Standardansicht fertig zu programmieren, bevor wir uns an die Anpassungen des responsive Webdesigns mit Hilfe von CSS3 Media Queries mache. Um das responsive Design dann zu testen, kannst man z.B. das kostenlose Online-Tool Screenfly nutzen. So kann man eine Webseite schnell und übersichtlich in verschiedenen Größen anzeigen lassen.

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, sollte man 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 haben wir uns 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.

Tipps zum Weiterlesen

• Umfangreicher und ganz aktueller Überblick verschiedenster Services und Angebote für Cross-Browser Tests: Review Of Cross-Browser Testing Tools bei Smashing Magazine
• Interessante Umfrage bei Webdesigntuts+: Readers’ Poll: How Do You Cross-Browser Test?