Das Thema Browserkompatibilität ist in aller Munde und ist besonders wichtig für die Usability von Webseiten. Sobald ein User eine Webseite öffnet und nutzen möchte, ist die Browserkompatibilität entscheidend. Aber warum ist das so? Was bedeutet Browserkompatibilität überhaupt und wie wird sie erreicht?

Browserkompatibilität

Unter Browserkompatibilität versteht man die Darstellung und Nutzung einer Webseite in verschiedenen Webbrowsern. Der wohl bekannteste Browser ist der Internet Explorer gefolgt von Firefox, Safari, Netscape, Opera und zahlreichen weiteren Browsern. Der aktuelle Marktanteil der einzelnen Browser wird zum Beispiel regelmäßig unter Webhits veröffentlicht. Jeder dieser Browser hat seine eigene Darstellung und technische Anforderungen.

Warum Browser die gleiche Webseite unterschiedlich darstellen

Jeder Browser hat ganz spezifische Eigenarten. Häufig sind diese Eigenarten abhängig vom verwendeten Betriebssystem oder auch wirtschaftlichen Interessen. Trotz vorhandenem W3C („World Wide Web Consortium„), einem Gremium zur Standardisierung der Techniken die im World Wide Web Verwendung finden, werden die Standards oft nicht eingehalten. Und auch dort, wo man sich strikt an die bestehenden Spezifikationen hält, muss noch lange nicht das gleiche Ergebnis bei zwei unterschiedlichen Umsetzungen herauskommen. Das liegt daran, dass die Spezifikationen – speziell von CSS – nicht nur „muss“-Regeln enthalten, Beschreibungen interpretierbar sind und mit wachsender Komplexität immer mehr Stellen entstehen, wo einzelne Regeln sich gegenseitig im Weg stehen. Das W3C ist zudem keine weltweit anerkannte Organisation, so das die Standards zudem von Browser-Anbietern mitunter ignoriert werden, die nach eigenen neuen Technologien suchen, um sich von der Masse abzuheben. Die Usability einer Webseite wird folglich dadurch benachteiligt, dass jeder Browser (subtil) andere Anforderungen stellt und eine Webseite ggf. anders darstellt. Um dies zum vermeiden, muss eine Webseite aktiv auf Browserkompatibilität geprüft werden. Realistisch betrachtet lässt sich die Optimierung einer Website an alle Browser kaum bewältigen. Daher ist es in dem meisten Fällen auch einfacher und ausreichend dafür zu sorgen, dass Webseiten auf allen gängigen Browsern lesbar dargestellt werden. Aber auch bei der Konzentration auf vergleichsweise wenige Browser und Betriebssysteme ist eine exakt identische Darstellung kaum (oder mit hohem Aufwand) zu erzielen. Aus diesem Grund zielt eine Optimierung meistens darauf ab, grobe Darstellungsprobleme zu vermeiden und dafür kleine Unterschiede, die das Gesamtbild nicht stören, in Kauf zu nehmen. Aber was bedeutet Optimierung einer Webseite und für welche Browser sollte man die Webseite optimieren?

Optimierung einer Webseite

Bei der Optimierung geht es darum, jeden Pixel in jedem Browser identisch aussehen zu lassen. Diese Anforderung ist sehr hoch, da neben den browserabhängigen Faktoren, auch browserunabhängige Faktoren wie die Bildschirmauflösung das Aussehen der Webseite beeinflussen. Dabei ist zu beachten das spezielle Effekte in manchen Browsern nicht dargestellt werden können. Die Textinhalte sollten allerdings in jedem Browser lesbar sein. Aus diesem Grund sollte auch auf versteckte oder übereinander liegende Inhalte verzichtet werden. Außerdem muss es nicht unbedingt das Ziel sein, wirklich „pixelgenau“ in jedem Browser gleich auszusehen. Leicht unterschiedliche Abmessungen einzelner Seitenbereiche sind sicherlich leichter zu ertragen als Seiten, die in bestimmten Browsern gar nicht lesbar oder gar unbedienbar sind.

Für welche Browser die Webseite optimieren

Pauschal kann man diese Frage nicht beantworten. Je nachdem, welche Zielgruppe mit der Webpräsenz erreicht werden soll, kann entschieden werden. Empfehlenswert ist die Optimierung auf alle Browser mit einem hohen Marktanteil, die von vielen Usern verwendet werden. Außer Acht gelassen werden können eventuell sehr alte Browser mit nur noch geringem Marktanteil, wie zum Beispiel Netscape 4 oder Internet-Explorer in älteren Fassungen.

Wie Browserkompatibilität erreicht werden kann

Eine Webseite zu erstellen, die gleichermaßen gut funktioniert und ebenso die Grafiken korrekt wiedergibt, ist gar nicht so einfach. Für Laien empfiehlt sich zunächst eine Prüfung der eigenen Webpräsenz auf Seiten wie Browsershots. Dort kann die Optik der Webseite in den vielen unterschiedlichen Browsern getestet werden. Treten Fehler auf und wird die Usability beeinträchtigt, sollte die Agentur, die die Webseite erstellt hat, darauf hingewiesen werden. Hierbei gilt es aber zu bedenken, dass hierüber nur Anhaltspunkte für evtl. Probleme einzelner Seiten aufgedeckt werden können. Ein realistischer Test benötigt daher zwingend einen „lebenden“ Browser, damit Sie mehr als eine Seite untersuchen, scrollen und das Verhalten aktiver (Scripte) oder interaktiver Elemente (Formulare) überprüfen können.  Um es deutlich zu formulieren:

Ein gut aussehender Screenshot der Startseite von einem Safari auf dem Mac garantiert noch lange nicht, dass mit dieser Kombination auch wirklich der Kauf in Ihrem Shop fehlerfrei abgeschlossen werden kann!

Folgende Mittel werden in der Regel vom Autoren einer Webseite oder eines Layouts für ein Content Management System eingesetzt, um den Unterschieden der Browser zu begegnen und nebenbei auch möglichst für alternative Anzeigegeräte wie Handys, PDAs etc, geeignet zu sein:

• Tabellen sind out, aber praktisch: Anstelle von Tabellen werden heute so genannte DIV Elemente (englisch „division“ in der Bedeutung „Bereich“ ein allgemeines Block-Element) verwendet, die in Cascading Stylesheets (CSS: eine Stylesheet Sprache, die eine Erweiterung der starren HTML Programmierung die nur Tabellen, Rahmen, Hintergrund und Bilder, darstellt) formatiert werden. Mit CSS können alle grafischen Definitionen wie zum Beispiel Rahmen, Schriftarten, Farben und Abstände flexibler dargestellt werden. CSS bietet folglich HTML ergänzende Eigenschaften für die Formatierung. CSS wurde von dem W3C entwickelt. Der Programmiercode wird durch CSS erheblich vereinfacht; außerdem wird das Design auf diese Weise barriereärmer. Ein hoher Anteil an Problemen mit unterschiedlichen Browsern treten aber leider gerade dort auf, wo solche DIV-Elemente wie die Spalten einer Tabelle nebeneinander „fließen“ müssen. Daher ist die Kenntnis einiger Regeln und Eigenheiten von so gearteten Layouts fast unerläßlich, wenn man Anpassungen an einem bestehenden Design machen will, die in mehr als nur einem Browser korrekt dargestellt werden. Aus diesem Grund existieren auch zahlreiche Standardvorlagen oder komplette Sammlungen von CSS-Layouts und vorgefertigten Elementen als Baukastensystem, mit deren Hilfe man möglichst browserstabile und barrierearme Designs umsetzen kann.

• Browserhacks: Im Gegensatz zum klassischen Begriff „Hack“, handelt es sich beim CSS Hack nicht um einen illegalen Zugriff, sondern um eine ausgefeilte Technik die Webseite den entsprechenden Browseranforderungen anzupassen. CSS Hacks werden eingesetzt, um spezielle Schwachstellen in verschiedenen Browsern auszugleichen. Dabei ist es Ziel, dass möglichst in jedem Browser dasselbe Ergebnis angezeigt wird.

• Weichen stellen: Die so genannte CSS Weiche wird benutzt, um die CSS Anweisungen nur vom gewünschten Browser interpretieren zu lassen. Man stellt damit „Weichen“ – das heißt, je Browser werden passende Anweisungen gegeben, wie die Webseite dargestellt werden soll.

• Box Model: Das so genannte Boxmodel gilt als wichtiges Gestaltungselement im CSS. In dieser viereckigen Box sind Inhalte wie Bilder und Texte enthalten. Der Inhalt wird festgelegt mit den Elementen: Content mit Höhe und Breite (height, width), Innenabstand (padding), Rahmen (border) und dem Außenabstand (margin). Das Boxmodell ist ein regelmäßiger Lieferant für die uneinheitliche Darstellung von Webseiten, da die Interpretation des Modells im Internet Explorer von allen anderen Browsern abweicht.

• Conditional Comments für Internet Explorer: So genannte Conditional Comments sind spezielle HTML Kommentare. Mit den HTML Kommentaren ist es möglich, dem Internet Explorer für Windows ab der Version 5 eine eigene CSS Datei zuzuordnen. Conditional Comments bieten eine gute Möglichkeit, um die aufwändige Optimierung für den Internet Explorer zu bewältigen.

Damit eine Webseite auf allen Zielsystemen und in allen gängigen Browsern fehlerfrei angezeigt wird, muss aktiv geprüft werden, ob sie browserkompatibel ist. Mit Hilfe eines Webeditors wie Dreamweaver wird z. B. bereits während der Entwicklung der Webseite geprüft, ob diese fehlerfrei angezeigt wird. In jedem Fall aber sollten Sie bei Anpassungen des Designs nicht nur in Ihrem „Lieblingsbrowser“ nachschauen, sondern sich auch den einen oder anderen zusätzlichen Browser installieren: Internet Explorer, Firefox, Google Chrome, Opera und Safari können z. B. problemlos nebeneinander auf einem Windows-System „leben“, für viele andere Fälle hilft die Virtualisierung weiter. Ebenso existieren Lösungen, die mehrere Internet-Explorer-Fassungen auf einem Rechner ermöglichen… oder Sie greifen auch hier auf fertige virtuelle Maschinen – z. B. für Microsofts VirtualPC –  zurück.

Wer regelmäßig mit der Erstellung solcher Designs befasst ist, wird solche weiterführenden Tools einsetzen (wollen) oder oder zumindest zur Virtualisierung via VirtualBox & Co. greifen, um z. B. auch mit unter Linux gängigen Browsern selbst zu testen. Werden die angeführten Hinweise von Anfang an genutzt, kann man Problemen mit Browserkompatibilität aus dem Wege gehen, wenn man die Messlatte nicht zu hoch hängt und eine „punktgenaue Übereinstimmung“ erwartet. Eine Garantie für vollständige Browserkompatibilität einer Webpräsenz gibt es allerdings aufgrund der Vielzahl verschiedener Browser nicht.