Erstellen von Cross-Browser-kompatiblen Websites
Veröffentlicht in Leistung von WP Engine
Zuletzt aktualisiert am 30. Mai, 2019
Obwohl die meisten Leute einen einzigen Browser verwenden, haben Sie Dutzende von Optionen für Desktop- und mobile Geräte. Im Idealfall würden Websites unabhängig davon, welchen Browser Sie verwenden, perfekt angezeigt. Dies ist jedoch nicht immer der Fall, weshalb Cross-Browser-Tests ins Spiel kommen.
Mit gründlichen Cross-Browser-Tests können Sie sicherstellen, dass Ihre Website in allen gängigen Optionen perfekt aussieht und sich auch so verhält. Auf diese Weise haben Ihre Besucher eine ebenso großartige Erfahrung, unabhängig davon, ob sie Chrome, Firefox, Opera oder weniger bekannte Optionen wie SeaMonkey verwenden.
In diesem Artikel werden wir etwas mehr über die Bedeutung von browserübergreifenden Tests sprechen. Dann gehen wir einige Schritte durch, um Ihnen beim Erstellen einer Cross-Browser-kompatiblen Website zu helfen. Machen wir uns an die Arbeit!
Warum ist browserübergreifende Kompatibilität wichtig?
Die meisten Menschen verwenden bekannte Browser wie Google Chrome, Safari, Firefox und Opera. Es stehen jedoch viel mehr Optionen zur Verfügung, als Sie sich vorstellen können. Das ist gut für den Verbraucher, aber das Problem für Sie ist, dass jeder Browser anders aufgebaut ist. Das bedeutet, dass Ihre Website in Chrome möglicherweise einwandfrei funktioniert, in Firefox jedoch Probleme auftreten (um nur ein Beispiel zu nennen).
Unserer Erfahrung nach sind die meisten Fehler, die Sie in einem Browser sehen, aber nicht in einem anderen, relativ kleine Probleme. Ein bestimmtes Element Ihrer Website sieht möglicherweise nicht so aus, wie es sollte, oder eine bestimmte Funktion funktioniert möglicherweise nicht richtig. Diese Probleme können zwar geringfügig sein, müssen jedoch behoben werden, wenn Sie allen Besuchern Ihrer Website die gleiche Erfahrung bieten möchten.
Idealerweise sollten Sie Ihre Website von Grund auf browserübergreifend kompatibel gestalten. Auf diese Weise riskieren Sie nicht, die Benutzer eines bestimmten Browsers zu entfremden. In den nächsten Abschnitten zeigen wir Ihnen, wie das geht.
So erstellen Sie eine browserübergreifende kompatible Website
Die Idee, eine browserübergreifende kompatible Website zu erstellen, klingt möglicherweise entmutigend. Ein paar einfache Schritte können jedoch dazu beitragen, dass Ihre Website in den meisten Browsern einwandfrei funktioniert. Lass uns darüber reden, was das sind!
Schritt 1: Legen Sie einen ‚Doctype‘ für Ihre HTML-Dateien fest
Wenn ein Browser Ihre Website lädt, muss er herausfinden, welche HTML-Version Sie verwenden. Dies ist wichtig, da verschiedene HTML-Versionen unterschiedliche Regeln enthalten.
Ein ‚doctype‘ ist eine Anweisung, die: „Hey, das ist die Version von HTML, die wir verwenden werden!“ Auf diese Weise müssen Browser keine Vermutungen anstellen, was die Anzahl der Fehler verringern kann, auf die Ihre Benutzer stoßen.
Glücklicherweise ist dieser Schritt bemerkenswert einfach. Sie müssen lediglich den folgenden Codeausschnitt zu Ihren HTML-Dokumenten hinzufügen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Wie Sie feststellen werden, ist dieses Snippet für Version 4.01 von HTML. Wenn Sie stattdessen HTML5 verwenden möchten, können Sie diesen Code verwenden:
<!DOCTYPE html>
Das Problem ist, dass einige Browser immer noch nicht gut mit HTML5 spielen. Trotz der vielen Verbesserungen kann die Verwendung die browserübergreifende Kompatibilität beeinträchtigen, sodass Sie diese Tatsache neben den Vorteilen abwägen müssen.
Schritt 2: Verwenden Sie die CSS-Reset-Regeln
Normalerweise ist CSS der Hauptschuldige für Browser-Kompatibilitätsfehler. Das liegt daran, dass jeder Browser seine eigenen CSS-Regeln hat. Anders ausgedrückt, das CSS Ihrer Website wird möglicherweise unterschiedlich gerendert, je nachdem, welchen Browser Ihre Besucher verwenden.
Eine Möglichkeit, dieses Problem zu lösen, besteht darin, einen ‚CSS-Reset‘ zu verwenden. Dies sind Sätze von Regeln, die Sie Ihrer Website hinzufügen können, die eine Basis für die Funktionsweise von CSS in allen Browsern festlegen.
Es gibt mehrere Optionen, wenn es um CSS-Resets geht, aber einer unserer Favoriten heißt Normalisieren.css, aufgrund wie umfassend es ist:
Sie können die App herunterladen.CSS-Datei aus der GitHub-Bibliothek und verwenden Sie sie als Ausgangspunkt für das CSS Ihrer Website. Auf diese Weise können Sie die browserübergreifende Kompatibilität auf Ihrer Website maximieren.
Schritt 3: Verwenden Sie browserübergreifende kompatible Bibliotheken und Frameworks
JavaScript-Bibliotheken und breite Frameworks wie Foundation und Bootstrap sind heutzutage unglaublich beliebt. Wenn Sie solche Elemente zum Erstellen Ihrer Website verwenden, können Sie sich viele Kopfschmerzen sparen, indem Sie browserübergreifende Optionen verwenden.
Einige Bibliotheken und Frameworks wurden von Grund auf entwickelt, um mit so vielen Browsern wie möglich zu arbeiten. Im Allgemeinen sind die meisten gängigen Frameworks – einschließlich der beiden gerade erwähnten – so konzipiert, dass sie mit so vielen Browsern wie möglich kompatibel sind.
Nur um sicher zu gehen, sollten Sie jedoch die Dokumentation für jede Bibliothek oder jedes Framework überprüfen, das Sie verwenden möchten. In den meisten Fällen finden Sie Informationen zur browserübergreifenden Kompatibilität recht einfach. Hier finden Sie beispielsweise die Kompatibilitätsseite von Foundation aus der Dokumentation:
Ein wenig Forschung wird Ihnen helfen, eine erstaunliche Erfahrung für alle Ihre Besucher, nicht nur diejenigen, die einen bestimmten Browser verwenden.
Cross-Browser-Tests
Auch wenn Sie sich bemüht haben, eine Cross-Browser-kompatible Website zu erstellen, ist es immer noch eine gute Idee zu überprüfen, ob alles so funktioniert, wie es sollte. Dieser Prozess ist relativ einfach – alles, was Sie tun müssen, ist Ihre Website mit mehreren Browsern zu laden und auf Fehler zu prüfen.
Das Problem ist, dass es viele Browser gibt. Um Ihre Basen abzudecken, empfehlen wir Ihnen, sich je nach Marktanteil auf die fünf besten Optionen zu konzentrieren:
- Google Chrome
- Safari
- Firefox
- UC Browser
- Oper
Möglicherweise stellen Sie fest, dass Microsoft Edge die Liste nicht erstellt hat. Sein Marktanteil ist heutzutage eher gering, aber es ist immer noch eine gute Praxis, sicherzustellen, dass Ihre Website auch damit funktioniert.
Natürlich kann die Installation von fünf oder sechs verschiedenen Browsern auf Ihrem Computer mühsam sein. Aus diesem Grund gibt es viele Dienste, mit denen Sie browserübergreifende Tests online durchführen können. Dies vereinfacht den Prozess erheblich und die damit verbundenen Gebühren sind in der Regel gering.
Verzichten Sie nicht auf Ihr digitales Erlebnis
Nicht alle Besucher Ihrer Website verwenden denselben Browser. Das heißt, wenn Sie sicherstellen möchten, dass jeder Benutzer Ihre Website genießen kann, müssen Sie einige browserübergreifende Tests durchführen.
Denken Sie jedoch daran – auch wenn Ihre Website in allen Browsern perfekt funktioniert, müssen Sie dennoch einen hochwertigen Webhost verwenden, wenn Sie das bestmögliche digitale Erlebnis bieten möchten. Mit WP Engine erhalten Sie erstaunliche Leistung und Zugang zu Support auf Expertenebene, also schauen Sie sich unsere Pläne an!