Cross-Browser-Testing: Wie Ihre Website überall funktioniert

Stellen Sie sich vor, Sie verteilen einen gedruckten Flyer an hundert Leute und stellen fest, dass bei einigen die Tinte verschmiert ist, das Logo die falsche Farbe hat und ein ganzer Absatz fehlt. Das würden Sie von einer Druckerei niemals akzeptieren. Doch genau das kann im Internet passieren. Dieselbe Website, in verschiedenen Browsern geöffnet, kann für verschiedene Besucher stillschweigend anders aussehen und sich anders verhalten, und die meisten Website-Betreiber bemerken dies nie, weil sie selbst immer nur einen Browser verwenden.

Genau dieses Problem löst das Cross-Browser-Testing. In diesem Leitfaden erfahren Sie, was ein Browser eigentlich ist, warum dieselbe Website von einem zum nächsten unterschiedlich gerendert werden kann, welche Browser es sich lohnt zu überprüfen und wie Sie eine einfache, wiederholbare Routine aufbauen, die dafür sorgt, dass Ihre Website überall funktioniert, ohne dass Sie zu einem technischen Experten werden. Das Ziel ist klar: Jeder Besucher, in jedem Browser, bekommt eine Website, die einfach funktioniert.

Was ein Browser eigentlich ist

Ein Browser ist das Programm, das Menschen verwenden, um Websites zu öffnen. Sie lesen dies gerade in einem. Es gibt mehrere beliebte Browser, und hinter den bekannten Namen stecken verschiedene zugrunde liegende Engines, die Softwareteile, die den Code Ihrer Website nehmen und ihn in die Seite umwandeln, die eine Person sieht. Da diese Engines von verschiedenen Teams entwickelt werden, interpretieren sie dieselben Anweisungen manchmal auf leicht unterschiedliche Weise.

Meistens sind die Unterschiede unsichtbar. Das Web hat Standards, und die großen Browser sind sich größtenteils einig, wie Dinge aussehen sollten. Aber "größtenteils" ist das entscheidende Wort. Ein neuer visueller Effekt, eine ungewöhnliche Schriftart, ein ausgefallenes Layout oder eine interaktive Funktion kann in einem Browser wunderschön unterstützt werden und in einem anderen ignoriert oder verstümmelt werden. Cross-Browser-Testing bedeutet einfach, Ihre Website in mehreren verschiedenen Browsern zu öffnen, um sicherzustellen, dass sie in allen zusammenhält.

Warum Sie das Problem nicht bemerken

Hier liegt die Falle. Sie haben Ihre Website in Ihrem Lieblingsbrowser erstellt, überprüfen sie in diesem Browser, und sie sieht perfekt aus. Soweit Sie feststellen können, ist also alles in Ordnung. Aber Ihre Besucher sind über alle möglichen Browser verteilt. Einige verwenden den Standardbrowser, der mit ihrem Telefon oder Computer geliefert wurde, einige haben bewusst einen anderen gewählt, und einige sind bei der Arbeit an ältere Versionen gebunden. Jeder von ihnen könnte eine leicht andere Version Ihrer Website sehen, und der einzige Weg, dies herauszufinden, ist, durch ihre Augen zu sehen.

Welche Browser sollten Sie tatsächlich testen?

Sie können nicht jeden existierenden Browser testen, und das müssen Sie auch nicht. Eine Handvoll Browser macht die überwiegende Mehrheit des gesamten Webverkehrs aus. Wenn Sie diese gut abdecken, haben Sie sich um fast alle gekümmert. Die vernünftige Liste sind die wichtigsten Mainstream-Browser plus der Standardbrowser auf jedem wichtigen Betriebssystem, denn diese Standardbrowser werden von den meisten Menschen benutzt, ohne dass sie darüber nachdenken.

Denken Sie vor allem daran, dass Browser auch auf Telefonen existieren, nicht nur auf Computern. Die mobile Version eines Browsers kann sich anders verhalten als sein Desktop-Pendant. Hier überschneidet sich das Cross-Browser-Testing mit der Überprüfung Ihrer Website auf echten mobilen Geräten, denn ein Telefon bündelt Bildschirmgröße, Betriebssystem und Browser auf einmal. Testen Sie die gängigen Kombinationen, und der Rest fügt sich meistens ein.

Sie können anhand Ihrer Analysedaten überprüfen, wer Ihre Website tatsächlich besucht. Diese zeigen in der Regel die Browser und Geräte an, die die Nutzer verwenden. Wenn kaum jemand über einen bestimmten Browser auf Ihre Website zugreift, können Sie diesen Browser weniger priorisieren. Wenn überraschend viele Nutzer diesen Browser verwenden, schenken Sie ihm mehr Aufmerksamkeit. Lassen Sie Ihr reales Publikum und nicht Vermutungen bestimmen, wo Sie Ihre Testzeit investieren.

Was zwischen Browsern schieflaufen kann

Die wichtigen Unterschiede fallen in einige Kategorien. Die erste ist das Layout: Abstände, Ausrichtung und die Anordnung von Elementen können sich subtil verschieben, sodass ein ordentliches Raster in einem Browser in einem anderen leicht schief wird. Normalerweise ist dies kosmetisch, aber gelegentlich drängt es etwas Wichtiges aus dem Bildschirm oder führt dazu, dass zwei Elemente überlappen.

Die zweite Kategorie sind Funktionen. Eine moderne visuelle Aufwertung, eine Animation oder ein interaktives Widget funktionieren möglicherweise in einem älteren oder weniger gebräuchlichen Browser einfach nicht. Die dritte Kategorie sind Schriftarten und Farben, die mit kleinen, aber wahrnehmbaren Unterschieden dargestellt werden können. Und die vierte, die Sie tatsächlich Geld kostet, ist eine fehlerhafte Funktionalität: ein Formular, das in einem Browser abgeschickt wird, aber in einem anderen stillschweigend fehlschlägt, oder ein Checkout-Button, der nichts bewirkt. Kosmetische Fehler sind ärgerlich; fehlerhafte Funktionen kosten Kunden, weshalb End-to-End-Checks in jedem gründlichen Website-Gesundheitscheck enthalten sein sollten.

Der Funktionstest ist am wichtigsten

Wenn Sie nur Zeit für eine Sache haben, testen Sie, ob die Leute die Kernaufgabe in jedem Browser erledigen können, der Ihnen wichtig ist. Was auch immer Ihre Website tun soll, durchlaufen Sie diese ganze Reise in jedem Browser, als wären Sie ein brandneuer Besucher. Eine Website, die leicht daneben aussieht, aber funktioniert, ist ärgerlich. Eine Website, die perfekt aussieht, aber keine Zahlung entgegennehmen kann, ist eine Katastrophe. Priorisieren Sie immer die Dinge, die die Rechnungen bezahlen.

Tools, die dies erleichtern

Jeden Browser manuell zu testen, klingt mühsam, und wenn Sie ein Dutzend Browser installieren müssten, wäre es das auch. Glücklicherweise müssen Sie das nicht. Es gibt Online-Dienste, mit denen Sie Ihre Website in Dutzenden von Browser- und Gerätekombinationen aus einem einzigen Fenster laden können, sodass Sie schnell zwischen ihnen wechseln und Unterschiede erkennen können. Einige sind für den geringen Gebrauch kostenlos, was für die meisten kleinen Websites ausreicht.

Für einen schnellen Check installieren Sie einfach zwei oder drei der wichtigsten Browser auf Ihrem eigenen Computer und klicken Sie Ihre Website in jedem einzelnen durch. Das dauert nur wenige Minuten und behebt die meisten Probleme. Heben Sie die aufwändigeren Online-Tools für große Launches oder Neugestaltungen auf, bei denen Sie eine breite Abdeckung wünschen, bevor Sie Änderungen der Öffentlichkeit zugänglich machen. Eine solche vorsichtige Einführung passt gut zur Verwendung einer Staging-Site, einer privaten Kopie, auf der Sie frei testen können, bevor etwas live geht.

Von Anfang an auf Kompatibilität setzen

Der beste Weg, beim Cross-Browser-Testing zu gewinnen, ist, weniger davon zu brauchen. Eine Website, die auf stabilen, weit verbreiteten Grundlagen aufbaut und sich anmutig anpasst, wenn ein Browser etwas Ausgefallenes nicht kann, wird die meisten Tests ohne Drama bestehen. Diese Idee, flexibel zu bauen und sich gut zu verschlechtern, ist eng mit dem responsiven Webdesign verbunden, das abdeckt, wie sich eine Website an verschiedene Bildschirme und Bedingungen anpasst.

Es hilft auch, sich bei wesentlichen Dingen nicht zu stark auf die allerneuesten visuellen Tricks zu verlassen. Nutzen Sie diese, um Besucher zu begeistern, deren Browser sie unterstützen, aber lassen Sie niemals eine Kernfunktion von einer Funktion abhängen, die ältere oder weniger gängige Browser nicht verarbeiten können. Eine Schaltfläche sollte immer noch anklickbar sein, auch wenn ihre ausgefallene Hover-Animation nicht angezeigt wird. Bauen Sie die wichtigen Dinge so, dass sie für alle funktionieren, und betrachten Sie die Verzierungen als Bonus.

Machen Sie das Testen zur Gewohnheit, nicht zum einmaligen Ereignis

Wie das Überprüfen Ihrer Website auf Telefonen ist auch das Cross-Browser-Testing keine einmalige Start-Aufgabe, die Sie einmal erledigen und vergessen. Jedes Mal, wenn Sie eine Funktion hinzufügen, Ihr Thema ändern oder ein neues Tool installieren, besteht die Möglichkeit eines browserspezifischen Fehlers. Browser aktualisieren sich ständig selbst und ändern gelegentlich, wie sie etwas behandeln, auf das Sie sich verlassen haben.

Integrieren Sie also eine schnelle Cross-Browser-Überprüfung in Ihre Routine. Jedes Mal, wenn Sie eine bedeutsame Änderung vornehmen, öffnen Sie die betroffene Seite in einem zweiten Browser, bevor Sie weitermachen. Überprüfen Sie regelmäßig Ihre wichtigsten Seiten in Ihrem ausgewählten Browser-Set. Dies passt nahtlos in einen Website-Wartungsplan und gehört auf jede gute Wartungs-Checkliste. Die Kosten für eine Fünf-Minuten-Überprüfung sind trivial im Vergleich zu den Kosten eines defekten Checkouts, von dem Sie nichts wussten.

Das große Ganze im Blick behalten

Kompatibilität, wie auch Geschwindigkeit, kann im Laufe der Zeit nachlassen, wenn sich das Web weiterentwickelt und Ihre Website wächst. Eine Funktion, die vor zwei Jahren flächendeckend funktionierte, kann sich nach Browser-Updates anders verhalten, und neue Inhalte können neue Eigenheiten einführen. Wenn Sie Cross-Browser-Tests als Teil der Leistungsüberwachung Ihrer Website im Laufe der Zeit betrachten, bleibt das Erlebnis für alle konsistent, nicht nur am Tag des Starts.

Ein einfacher Arbeitsablauf, den Sie tatsächlich befolgen können

Theorie ist leicht zu nicken und schwer umzusetzen, daher hier ein konkreter Weg, Cross-Browser-Tests in die Praxis umzusetzen, ohne dass sie Ihre Woche auffressen. Beginnen Sie damit, zwei oder drei der wichtigsten Browser auf Ihrem eigenen Computer zu installieren. Das kostet nichts und dauert nur wenige Minuten, und es gibt Ihnen sofort die Möglichkeit, Ihre Website nebeneinander zu vergleichen, anstatt einer einzigen Ansicht zu vertrauen.

Wenn Sie mit dem Erstellen oder Ändern einer Seite fertig sind, öffnen Sie sie in Ihrem primären Browser und schauen Sie sie sich sorgfältig an. Öffnen Sie dann dieselbe Seite in einem zweiten Browser und vergleichen Sie sie gezielt, Element für Element: den Header, die Navigation, die Bilder, die Schaltflächen, die Abstände. Unterschiede fallen normalerweise sofort auf, wenn Sie zwei Versionen nebeneinander legen. Alles, was in einem Browser falsch aussieht, aber im anderen richtig ist, ist Ihr Hinweis, dass etwas Aufmerksamkeit benötigt.

Wiederholen Sie als Nächstes den wichtigsten Check, das Ausführen Ihrer Kernaufgabe, in jedem Browser, denn dort verbergen sich die kostspieligen Fehler. Machen Sie dann einen schnellen Durchlauf auf einem Telefon, indem Sie die Seite im Standardbrowser Ihres Telefons öffnen, um alles Mobile-Spezifische zu erkennen. Dieser gesamte Zyklus dauert für eine typische Seite nur wenige Minuten und behebt die überwiegende Mehrheit der realen Probleme. Die Disziplin besteht nicht darin, etwas Heldenhaftes zu tun; sie besteht darin, diesen kleinen Zyklus konsequent durchzuführen, anstatt ihn zu überspringen, weil die Seite an einer Stelle "gut aussah".

Für größere Momente, wie eine Neugestaltung oder eine wichtige Funktion, skalieren Sie den Loop hoch. Verwenden Sie einen Online-Testdienst, um Ihre Website in vielen Browser- und Gerätekombinationen gleichzeitig zu laden, arbeiten Sie eine längere Liste von Seiten durch und achten Sie besonders auf interaktive Elemente. Indem Sie den größeren Aufwand für Änderungen mit höherem Risiko reservieren, bleibt Ihre Routine nachhaltig, sodass Sie beim Testen nicht ausbrennen und es dann ganz aufgeben.

Barrierefreiheit und Hilfsmittel nicht vergessen

Cross-Browser-Testing konzentriert sich in der Regel auf visuelle Browser, aber einige Ihrer Besucher verwenden zusätzliche Tools, wie Screenreader, die Seiten vorlesen, oder Browsereinstellungen, die Text vergrößern oder den Kontrast erhöhen. Diese interagieren auch mit Browsern, und eine Website, die sie ignoriert, schließt echte Menschen aus. Wenn Sie testen, nehmen Sie sich einen Moment Zeit, um Ihre Textgröße zu erhöhen oder die Seite stark zu zoomen, und überprüfen Sie, ob alles noch funktioniert. Eine Website, die einen 200-prozentigen Zoom überlebt, ist in der Regel eine Website, die alle gut behandelt.

Das ist nicht nur Freundlichkeit; es ist gutes Geschäft. Besucher auszuschließen, sei es durch eine Browser-Eigenart oder ein Versäumnis bei der Barrierefreiheit, bedeutet, potenzielle Kunden abzuweisen, aus Gründen, die sie Ihnen nie erklären werden. Sie gehen einfach. Umfangreiche Tests, über Browser und Bedingungen hinweg, öffnen stillschweigend die Tür, damit mehr Menschen hindurchgehen können.

Zusammenfassend

Cross-Browser-Testing hat den Ruf, fummelig und technisch zu sein, aber die praktische Version ist beides nicht. Installieren Sie zwei oder drei wichtige Browser, klicken Sie Ihre wichtigsten Seiten und Ihre Kernaufgabe in jedem durch und achten Sie besonders auf alles, was eine Transaktion stören kann. Greifen Sie auf Online-Tools zurück, wenn Sie eine breite Abdeckung benötigen, und machen Sie einen leichten Check zu einem Teil Ihrer regulären Routine statt zu einer einmaligen Hektik.

Tun Sie das, und das Problem mit dem verschmierten Flyer verschwindet. Wer auch immer Ihre Website besucht, auf welchem Browser auch immer, auf einem Telefon oder Laptop, erhält eine Website, die zusammenhält und es ihm ermöglicht, das zu tun, wofür er gekommen ist. Wenn das Hantieren mit Browsern nicht das ist, womit Sie Ihre Zeit verbringen möchten, können Sie jederzeit Hilfe in Anspruch nehmen und die Cross-Browser-Seite jemand anderem überlassen.

Häufig gestellte Fragen

Referenzen

1. Mozilla Developer Network. „Cross Browser Testing.“ developer.mozilla.org.
2. StatCounter. „Browser Market Share Worldwide.“ gs.statcounter.com.
3. Baymard Institute. "Checkout Usability Research." baymard.com.