Webdienste zum Testen der Browserdarstellung

Ziel eines Webdesigners sollte es sein, dass die von ihm erstellten Seiten immer korrekt dargestellt werden, unabhängig davon, welcher Browser und welches Betriebssystem vom Betrachter verwendet werden. Die einzige Möglichkeit, diesen Anspruch umzusetzen, bedeutet: testen, testen und noch mal testen. Die konkreten Möglichkeiten für diese Prozedur habe ich im CSS-Buch ab Seite 134 erläutert.

Eine Möglichkeit ist die Nutzung von Webdiensten, die Testsysteme mit verschiedenen Betriebssystem- und Browserversionen betreiben (sog. Cross-Browser-Check). Möchte man seine Website testen, teilt man dem Anbieter die jeweilige URL und die gewünschte Betriebsystem und Browser-Kombination mit. Der Anbieter ruft nun die URL auf dem gewünschten System auf. In der einfachsten Variante erstellt der Anbieter hiervon einen Screenshot, welcher grundsätzlich zur Qualitätssicherung von HTML und CSS herangezogen werden kann. Lediglich die Funktion dynamischer oder mit Events verknüpfter Elemente (z. B. ein Aufklappmenü oder Javascript) lässt sich mit einem Bild natürlich nicht testen, hierfür benötigt man vielmehr einen Livetest. Einige Anbieter stellen deshalb einen direkten Remote-Zugriff auf die Browser zur Verfügung. Während der Remote-Access immer kostenpflichtig ist, gibt es für gelegentliche Screenshots auch kostenlose Alternativen.

Gratisdienste

  • Browsershots: Viele Browser und Optionen auswählbar. Oftmals sehr langsam, da browsershots.org lediglich die Screenshot-Aufträge als Server entgegennimmt und an Clients der Web-Community (VNC) verteilt.
  • IE NetRenderer: Fertigt ausschließlich Screenshots verschiedener Internet Explorer Versionen unter Windows in lediglich einer vorgebenen Größe. Highlight: Übereinandergelegtes Bild vom IE6 und IE7.
  • BrowseThisForMe: Screenshots gängiger Browser werden per E-Mail verschickt.

Kostenpflichtige Dienste

  • BrowseCam: Deckt beinahe alle Testszenarien ab, zusätzlich Remote-Access und Konfiguration eigener virtueller Maschinen.
  • CrossBrowserTesting: Remote-Zugriff mit umfassenden Auswahloptionen.
  • BrowserStack: Bietet Remote-Access-Browsing für diverse Betriebssysteme, Screenshots auch kostenlos.
  • Browsera: Nur Screenshots. Als Highlight lassen sich auch geschützte Bereiche testen (z. B. bei einem Forum).
  • Mogotest: Screenshots können verglichen werden, wobei als Besonderheit Abweichungen vom Referenzbrowser eigenständig erkannt und gemeldet werden.
  • NetMechanic Browser Photo: Ebenfalls nur Screenshots.
  • Browserling: Die gebräuchlichsten Browser können via Remote-Access gesteuert werden. Auch ein Verändern der Bildschirmauflösung ist möglich. Fünf Minuten Sessions sind kostenfrei nutzbar.
  • SauceLabs: Umfangreiche manuelle und automatisierte Testszenarien in der Cloud.
  • BrowseEmAll: Lokales Komplettpaket, dass neben den üblichen Browsern auch die Möglichkeit bietet, den DOM sowie das CSS zu vergleichen (siehe Interview).
  • Litmus: Spezialisiert auf das Testen der Browserdarstellung von E-Mails.
  • Email on Acid: Ebenfalls spezialisiert auf E-Mail-Clients.
  • DeviceAnywhere: Ferngesteuerten Zugang zu echten Handys, die direkt mit einem Mobilfunknetz verbunden sind (siehe Blogpost).

(Letzte Aktualisierung / Überprüfung der Dienste: 29.04.2013)

Fazit

Für semiprofessionelle Projekte sind sicherlich die kostenlosen Cross Browser Testing Angebote ausreichend. Mit etwas Geduld lassen sich so die meisten Probleme bezüglich der Kompatibilität in den Griff bekommen. Wer maximalen Komfort möchte, und bereit ist, relativ tief in die Geldbörse zu greifen, wird an BrowserCam nicht vorbei kommen.

Über Jens Kilgenstein

Ich bin seit über zehn Jahren im Bereich Webdesign tätig und betreue seitdem kleine und große Kunden bei der Konzeption und Umsetzung von Webprojekten. → Zum Profil

, ,

Ebenfalls Lesenswert:

Trackbacks/Pingbacks

  1. Bildschirmauflösungen online testen | CSS einfach erklärt - 21. Dezember 2009

    [...] Bildschirmgröße und nicht den Nettobereich des Browserfensters anzeigt. Auch Besonderheiten der verschiedenen Browserversionen bleiben unberücksichtigt. Für eine grobe Orientierung ist das Online-Tool aber auf jeden Fall [...]

  2. Lokaler Cross-Browser-Test | CSS einfach erklärt - 19. April 2010

    [...] abtesten muss, landet früher oder später bei einem kostenpflichtigen Online-Dienst wie etwa BrowserCam. Aus Anwendersicht überzeugt bei diesen Anbietern nicht nur die Wartungsfreiheit, sondern auch die [...]

  3. Webdesign auf verschiedenen Handys und Smartphones testen | CSS einfach erklärt - 20. August 2010

    [...] zu den PC-Betriebssystemen gibt es auch für die Smartphones zahlreiche Entwicklungsumgebungen und Tools, die eine Simulation [...]

  4. Browser-Martkanteile: Wohin rollt der Zug für Webdesigner? | Webdesign lernen, Homepage erstellen | CSS einfach erklärt - 7. Januar 2013

    [...] der Marktforscher, aus deren Auswertungen man in einem zweiten Schritt die gewünschten Webdienste zum Testen der Browserdarstellung [...]

  5. Opera Browserengine Presto wird WebKit | Webdesign lernen, Homepage erstellen | CSS einfach erklärt - 14. Februar 2013

    [...] nicht mehr berücksichtigt werden müssen. Zwar wird man auch zukünftig auf das konkrete Abtesten der Browserdarstellung nicht verzichten können, die Anpassungen dürften aber deutlich schneller von der Hand gehen. [...]

Hinterlasse eine Antwort