Cross-Browser-Testing – browserübergreifende Website-Optimierung
Als Webdesigner oder -entwickler wollen Sie, dass Ihre Website möglichst auf allen Browsern und Geräten gleichermaßen gut dargestellt wird. Um dies zu gewährleisten, sollten Sie Wert darauf legen, dass die eingebundenen Inhalte – insbesondere Stylesheets wie CSS und Skript-Codes wie JavaScript – die sogenannte Cross-Browser-Fähigkeit besitzen. Vereinfacht gesagt: Alle Elemente müssen so programmiert werden, dass sie unabhängig vom verwendeten Browser möglichst die gleiche Ausgabe erzeugen.
Mit Cross-Browser-Testing den Überblick behalten
Wenn Sie auf browserübergreifende Tests verzichten, ist Ihre Website in der Regel nur für wenige Browser optimiert. In anderen Browsern können unschöne Darstellungsfehler auftreten. Die Kompatibilitätsprobleme entstehen vor allem dadurch, dass Browser den an sich standardisierten Code gelegentlich individuell interpretieren. Sind Sie als Webdesigner zu sehr auf die Arbeit mit einem bestimmten Browser fokussiert, geraten die anderen Webbrowser schnell aus dem Blickfeld. Sie sollten allerdings nicht an Ihre eigenen Vorlieben, sondern an die der potenziellen Besucher Ihrer Website denken. Ihre Mühe bei der Gestaltung Ihrer Website wird nämlich nicht belohnt, wenn die Inhalte in den von den Nutzern verwendeten Browsern fehlerhaft dargestellt werden.
Die Optimierung der Website für möglichst viele Browser spielt auch im Responsive Webdesign eine große Rolle. Hier müssen auch die gängigen Browser auf mobilen Betriebssystemen wie Android mit berücksichtigt werden. Cross-Browser-Optimierung ist nicht selten eine mühsame Angelegenheit, da die Funktionalität der Elemente oftmals nur durch das sture Ausprobieren auf den gängigen Browsern überprüft werden kann. In der Praxis sind die Probleme vor allem:
- Internet Explorer, von dem noch veraltete Versionen im Umlauf sind, die man aber nur mit Mühe (über eine Virtuelle Maschine) oder gar nicht auf einem Rechner installieren kann;
- Safari, der für Windows- und Linux-Nutzer nicht testbar ist;
- die Vielzahl an teilweise veralteten Mobil-Browsern, die fast alle die gleiche technische Basis haben, aber im Detail voneinander abweichen.
Da die verschiedensten Versionen der Browser in der Regel nicht installiert und griffbereit sind, gibt es gibt es diverse Cross-Browser-Testing-Tools. Diese im Internet angebotenen Dienste stellen Ihnen ein Browser-Paket inklusive der notwendigen Hardware-Ressourcen für ausgedehnte Testläufe zur Verfügung.
So funktionieren Cross-Browser-Testing-Tools
Mit vielen Diensten zum Testen der Browserkompatibilität der Website-Elemente simulieren Sie deren Darstellung nicht nur auf der neuesten Version des jeweiligen Browsers. Auch ältere Varianten, die beispielsweise häufig noch auf Business-Computern zur Verwendung kommen, lassen sich mit vielen Tools einer Überprüfung unterziehen. Lösungsansätze, Umfang und Preis der Tools unterscheiden sich dabei deutlich.
Zur Veranschaulichung ein Beispiel: Wollen Sie beispielsweise nur eine Intranet-Anwendung für kleinere Unternehmen optimieren, können Sie davon ausgehen, dass nur wenig Abweichung hinsichtlich Browser und Browserversion herrscht. Hier sind Ihnen Tools behilflich, einige Versionen der gewünschten Browser auf Ihrem System zu installieren. Anschließend erstellen Sie mithilfe von Screenshot-Anwendungen automatische Schnappschüsse der ausgelieferten Website-Darstellungen.
Schwebt Ihnen die Optimierung einer Internetseite vor, die eine Vielzahl von Usern erreichen soll, ist die Zahl verschiedener Browser zu groß für ein eigenes Testsystem – zumal Sie außerdem verschiedene Betriebssysteme benötigen. An dieser Stelle punkten webbasierte Tools, die auf Basis von Screenshot-Programmen funktionieren. Diese Tools fertigen Schnappschüsse Ihrer Website in festgelegten oder selbst gewählten Browsern an. In den meisten Fällen sehen Sie bei dieser Methode allerdings nur HTML- und CSS-Fehler, während Webapplikationen, die in Ihre Website eingebunden sind, bei der Überprüfung ignoriert werden. Damit Sie jedoch auch solche Elemente einem Check unterziehen können, gibt es außerdem Cross-Browser-Testing-Tools, die Ihnen den Remote-Zugriff auf den zu testenden Browser ermöglichen. Hiermit lassen Sie sich Ihre Homepage im gewünschten Browser anzeigen, ohne diesen installieren zu müssen, und sind dabei ebenso wenig auf die ansonsten erforderlichen Hardware-Ressourcen angewiesen.
Die besten Tools zum Cross-Browser-Testing
Zu überprüfen, ob die Elemente Ihres Webprojektes auf allen Geräten und bei der Verwendung verschiedener Webbrowser korrekt ausgeführt bzw. angezeigt werden, ist heute wichtiger denn je. Sie kommen hiermit nicht nur den Ansprüchen der User nach, sondern sammeln auch wertvolle Punkte bei der Bewertung durch Suchmaschinen. Damit Sie schneller herausfinden können, welche Cross-Browser-Testing-Tools die benötigten Überprüfungsmethoden bieten, stellen wir Ihnen einige der besten Tools vor.
CrossBrowserTesting
Beim webbasierten Dienst CrossBrowserTesting ist der Name Programm: Für einen ausführlichen Browser-Check Ihrer Website stehen hier über 900 verschiedene Webbrowser-Varianten und mehr als 40 verschiedene Betriebssysteme zur Verfügung. Im Live-Test-Modus wählen Sie Ihre gewünschte Kombination aus System und Browser aus und checken Ihre Website auf fehlerhafte AJAX-, Flash-, HTML- oder JavaScript-Elemente. Über automatisch angefertigte Screenshots vergleichen Sie außerdem auf einfache Weise, ob das Layout in allen Browsern ansprechend präsentiert wird. Dabei ist es egal, ob Ihre Website bereits online ist oder sich noch in der Entwicklungsphase befindet. Überdies laufen die Tests auf echten physischen Geräten, nicht auf Emulatoren. CrossBrowserTesting können Sie eine Woche lang kostenfrei nutzen. Im Anschluss entscheiden Sie sich für eines der Pakete und erhalten je nach Wahl eine begrenzte Anzahl von Minuten automatisierter Live-Tests, gleichzeitig ausgeführter Checks sowie möglicher Nutzer.
BrowserStack
Mit dem Online-Tool BrowserStack überprüfen Sie die Funktionalität Ihrer Website in über 700 Browsern. Für die meisten Tests stellt der Anbieter physische Geräte zur Verfügung – für Android-Tests auch Emulatoren, etwa um bei automatisierten Tests mit dem Framework Selenium. Sie haben sofortigen Zugang zu allen Browsern und unbegrenzt Zeit, Ihre Wunsch-Set-ups zu testen. Dabei werden Sie von leistungsstarken Skripts unterstützt, die in Echtzeit nach Fehlern suchen und diese beheben. Auch mit BrowserStack können Sie Ihre Website checken lassen, wenn sich diese noch in der Entwicklung befindet. Screenshots zur Analyse des Webdesigns müssen Sie mit der Anwendung manuell generieren, dabei können Sie Auflösungen von 800 x 600 bis zu 2048 x 1536 Pixeln definieren. Nach Ablauf der Testphase können Sie zwischen drei Monatspaketen wählen, wobei das Einstiegspaket keine automatisierten Tests beinhaltet.
Spoon Browser Sandbox
Spoon Browser Sandbox ist ein weiterer Dienst, der virtualisierte Browser anbietet. Allerdings läuft das Tool nur über Ihren eigenen PC. Insofern Ihre Ressourcen es zulassen, nutzen Sie mit der Browser-Sandbox diverse Versionen gängiger Webbrowser wie Chrome, Firefox, Internet Explorer oder Safari, ohne diese auf Ihrem Computer installieren zu müssen. Dank der Browser-Emulatoren ist es dabei egal, welches Betriebssystem Sie verwenden – so können Sie auch Browser testen, die eigentlich nicht (mehr) kompatibel sind. In der kostenfreien Variante des Tools betreiben Sie nur einen einzigen virtuellen Browser, durch den Abschluss eines kostenpflichtigen Monatsabonnements simulieren Sie jedoch eine unbegrenzte Anzahl von Browsern gleichzeitig. Zusätzlich haben Sie Zugriff auf die Online-Sandbox-Tools, die Sie bei der Analyse Ihrer Website unterstützen, z. B. in Form von Screenshots oder speicherbaren Test-Logs.