Test

Webseite in verschiedenen Browsern testen!

Eine Webseite in verschiedenen Browsern testen, ist essentiell, wenn wir ein neues Projekt planen und im Design, CSS und Code wüten. Da ich selbst gerade an einem Portal arbeite, wurde mir abermals bewusst, wie wichtig es ist, das Aussehen in mehreren Browsern zu testen.

Da ich allerdings nur drei Rechner zur Hand habe, nicht unzählige Programme installieren möchte, braucht es eine andere Möglichkeit um die neue Webseite in verschiedenen Browsern zu testen. Abhilfe war gefragt.

In diesem Artikel zeige ich Dir einige Darstellungsfehler, gebe Tipps zur Browserkompatibilität und stelle ein Programm vor, das es uns ermöglicht, einmal unsere Seite aus den Augen aller Internetbrowser zu bestaunen.

Warum wird eine Seite unterschiedlich dargestellt?

Eine ganz eindeutige Antwort kann ich an dieser Stelle leider nicht aus der Tastatur zaubern, da die Gründe ganz verschiedener Natur sind. Auch wenn ich grundsätzlich behaupten kann, dass es an einem Fehler im Code liegt.

Jeder Browser interpretiert den Code einer Seite unterschiedlich und so schluckt der eine kleine Fehlerquellen und der nächste stellt einfach auf stur. Beispielsweise habe ich mich gerade über den Mozilla Firefox geärgert, der über nicht explizit festgelegte Content-Typen stolperte.

Oder sollte ich lieber schreiben, dass ich froh bin, dass ich diesen Browser zum Testen meiner Seite ausprobierte? Hat er mich doch vor nervigen Arbeiten im Nachhinein bewahrt…

Immerhin sah mein aktuelles Projekt enorm zerschossen aus und das, obwohl lediglich  eine Klasse unsauber per CSS beschrieben wurde.

Unter Chrome lief offenkundig alles ganz normal und ich war erschrocken, als ich das Ausmaß erstmalig sah. Vor allem da mir der Fehler einfach nicht einleuchten wollte. Auweia!

Chrome (oben) schluckt den Fehler, Firefox stellt sich quer!

Der Screenshot illustriert das Problem recht schön, denn immerhin ist die komplette Navigation aus dem Contentbereich verschoben, liegt dabei über der Sidebar und ließ sich nicht einmal mehr anklicken. Tja…, blöd gelaufen, da habe ich nicht aufgepasst.

Als ich diese Hürde gekonnt umschifft hatte, testete ich das fertige Projekt noch in anderen Browsern und plötzlich fehlte im Internet Explorer die gesamte Sidebar, Safari zeigte diffuse Fehler und der IE6 stieg komplett aus.

Ich glaube, so viele Fehler habe ich noch nie produziert. Vielleicht liegt es daran, dass es die aufwändigste Seite ist, an der ich jemals gearbeitet habe oder weil ich schlicht und ergreifend dazu neige, unsauber zu arbeiten.

Und plötzlich war die Sidebar weg…, Internet Explorer sei Dank!

Wie sichere ich die Browser-Kompatibilität?

1. Sauber arbeiten – HTML und CSS

Nun, prinzipiell gilt, dass wir möglichst sauber und fehlerfrei arbeiten sollten. Einerseits im HTML-, aber eben auch im CSS-Bereich. Hier können Kleinigkeiten nahezu alles zerreißen. Klar, oder?

Pauschal können wir annehmen, dass durch das CSS die Darstellung einer Seite vom Content getrennt wird, den wir durch den HTML-Code bilden. Idealerweise halten wir uns an diese Trennung, vor allem da das Ganze auf diese Weise viel übersichtlicher wird. Das erleichtert die Fehlersuche!

Um zu überprüfen, ob wir eine saubere Struktur geschrieben haben und fehlerfreien Code bereitstellen, empfiehlt sich ein Blick auf den kostenlosen HTML Validator und das entsprechende Pendant für das CSS.

Hinweis: Der Validator überprüft derzeitig strikt nach HTML5-Norm, hier muss nicht jeder Hinweis übernommen worden. Außerdem sollten wir die Finger von Dingen lassen, die wir nicht verstehen. Validator hin oder her.

2. Eine Zeichencodierung festlegen!

Die Zeichencodierung legt fest, wie der Text auf unserer Webseite dargestellt werden soll und wie die verschiedenen Browser in anzeigen müssen. Das ist allerdings ein recht weitläufiges Thema und ich möchte von daher auf diesen Abschnitt auf selfhhtml.org verweisen.

Die meisten WordPress-Themes machen übrigens von Natur aus alles richtig, hierbei ist es dann wohl eher wichtig, das Wichtige vom Unwichtigen zu trennen und nicht unabsichtlich wichtige Codeinhalte zu löschen.

Hinweis: Viele Browser erkennen die Festlegung der Zeichencodierung nicht mehr, wenn sie zu weit unten im Content festgelegt wird. Es empfiehlt sich also, den Header zu nutzen und den Spaß nicht irgendwo zu verstecken.

3. Die Webseite in verschiedenen Browsern testen!

Anschließend empfiehlt es sich, die Webseite in so vielen Browsern, wie nur möglich zu testen. Jedenfalls auf den geläufigsten.

Ich meine hierbei Chrome, Internet Explorer und den Firefox. Alles andere ist schön und gut, ist aber gelinde gesagt, zu vernachlässigen. Idealerweise decken wir natürlich alle Browser ab, doch mir reicht für die grundlegende Orientierung die Funktionalität in diesen Browsern.

Hinweis: Das hört sich eigentlich recht überschaubar an. Ist es aber gar nicht, denn nahezu alle Browser haben recht viele Versionen, die es zu beachten gilt. Das kann gerade beim Internet Explorer enorm nervig und zeitraubend sein.

Tools: Seite in verschiedenen Browsern testen!

Es gibt sehr viele Tools,  die anbieten, unsere Webseite in verschiedenen Browsern zu testen, aber die braucht es gar nicht.

Ich habe in den letzten Jahren die beste Erfahrung mit Browsershots gemacht und bin immer noch sehr zufrieden. Vor allem deshalb, weil der Funktionsumfang gigantisch ist und nahezu jegliche Möglichkeit oder eben Browserkombi einstellbar ist.

Zur Illustration habe ich einfach mal das Projekt, das uns schon von den obigen Screenshots bekannt ist, durch  das kostenlose Onlinetool gejagt und ein Bild angehängt. Idealerweise probieren wir es allerdings einfach selbst aus.

Ich habe dabei lange nicht das volle Potential ausgeschöpft, doch sieht man recht gut, was das kleine Helferlein so kann, auch wenn hier lediglich eine kleine Auswahl zu sehen ist.

Übrigens müssen wir ein wenig Zeit mitbringen, da Browser Shots eine Weile braucht, um die vielfältigen Einzelbilder aus den jeweiligen Browsern anzufertgigen und erst nach und nach trödeln diese ein. Entweder aktualisieren wir die Seite regelmäßig oder besuchen sie einfach später wieder.

Das Ergebnis sollte in etwa so aussehen:

So sieht unsere Seite in verschiedenen Browsern aus!

Seite in unterschiedlichen Browsern testen: Fazit

Ich würde nicht schreien, dass es enorm wichtig ist, dass eine Seite mit allem und jeden kompatibel ist, auch wenn es natürlich nicht schadet.

Beispielsweise wäre es mir vollkommen piepe, ob ein kleines Nischenprojekt nun barrierefrei ist, oder in einer uralten Version des Internet Explorers läuft. Das würde ich vielleicht irgendwann bedenken, aber es stünde eben auf meiner Prioritätenliste nicht unbedingt auf Platz 1.

Allerdings erachte ich solche großangelegten Teste für wachsende Blogs, Shops oder eben Webseiten für relativ wichtig, da es natürlich in unserem Sinne ist, jedem Nutzer die volle Bandbreite an Usability zu spendieren. Vielleicht auch nur deshalb, weil wir an ihm verdienen wollen. Wer weiß das schon?