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