Browser-übergreifendes Webdesign
Sisyphusarbeit

BrowserWorkspace

Wer es beim Webdesign jedem recht machen will, wird schnell
in einer Sackgasse enden. Internet Professionell erklärt, wie Sie ein Maximum an Browser-Kompatibilität erreichen können.

Rücksichtnahme

Browser-übergreifendes Webdesign

Ein Webdesigner könnte sich die Arbeit einfach machen: Der Marktanteil des Internet Explorers von Microsoft liegt bei rund 90 Prozent. Also orientiert sich das Design an dem, was dieser Browser kann. Wer ihn nicht installiert hat, hat eben Pech gehabt.

Ob es jedoch sinnvoll ist, praktisch die Standardisierungsversuche eines W3C oder die Nutzer alternativer Plattformen oder Browser einfach zu ignorieren, darf man bezweifeln.

Selbst die Konzentration auf einen einzigen Browser ist keine Garantie für eine unproblematische Lösung. Sie können sich nicht darauf verlassen, dass alle Surfer die neueste Version dieses Browsers installiert haben, und selbst wenn, bietet er so viele individuelle Einstellmöglichkeiten, dass ein Webdesigner sie unmöglich alle abdecken kann. Mit wenigen Mausklicks kann zum Beispiel ein User mit dem Internet Explorer eine eigene, lokale Stylesheet-Datei einbinden und Ihre Design-Bemühungen zur Makulatur machen. Er kann die Schriften nach Belieben vergrößern oder verkleinern und damit der Webseite, die er von Ihrem Server abruft, ein völlig anderes Erscheinungsbild verleihen.


W3C-Standards

Browser-übergreifendes Webdesign

Seit den Anfängen des World Wide Web bemüht sich das W3C, einheitliche Standards zu definieren. Im Rückblick kann man sagen, dass diese Bemühungen die Entwicklung positiv beeinflusst haben. Kaum ein Segment der IT-Branche kann sich auf eine größere Bandbreite allgemein anerkannter Standards stützen als das Web. Die gilt ungeachtet der Tatsache, dass es von Seiten der Browser-Hersteller ständig Tendenzen gab, die verabschiedeten Standards mit eigenen Features zu ergänzen und zu erweitern. Microsoft war bei diesen Bemühungen immer in einer Vorreiterrolle zu finden.

Eine zu enge Orientierung an diesen W3C-Standards birgt für den Webdesigner jedoch auch ihre Tücken. In den meisten Fällen hinkt nämlich die Browserentwicklung den verabschiedeten Standards um Monate, wenn nicht um Jahre hinterher.

Dies war bei HTML nicht anders als bei CSS oder Javascript. Es nützt also nichts, immer sofort das umzusetzen, was vom W3C gerade definiert wurde, wenn die in der realen Web-Welt eingesetzten Browser mit diesen Innovationen nichts anfangen können, oder, noch schlimmer, deren Umsetzungen gar zu fehlerhaften Darstellungen führen.


Trennung von Inhalt und Design

Browser-übergreifendes Webdesign

Eine Empfehlung zieht sich jedoch durch alle aktuellen Standardisierungsbemühungen dieses Konsortiums, nämlich die Prämisse, Inhalt und Darstellung strikt zu trennen. Dies ist auch der beste Weg, wie sich ein Designer aus der Sackgasse einer universellen Browser-Kompatibilität befreien kann.

Die grundsätzlichen Probleme sind damit zwar noch nicht gelöst, allfällige Anpassungen an neue Entwicklungen lassen sich bei Beachtung dieser Vorgabe jedoch mit wesentlich weniger Aufwand umsetzen.

Schon bei einer einfache Firmenpräsenz lässt sich das nachvollziehen: Hat die Site zum Beispiel 100 statische Seiten, in denen Inhalt und Präsentation bunt gemischt sind, müssen Sie bei einer erforderlichen Anpassung jede dieser Seiten aufrufen und mit einem Editor individuell bearbeiten. Haben Sie jedoch von Anfang an alle Formatelemente in ein CSS-Stylesheet ausgelagert, brauchen Sie nur dieses zu ändern.

Auch eine Optimierung für verschiedene Browser lässt sich auf diesem Weg relativ einfach realisieren. Eine Browserweiche holt die notwendigen Informationen über den Client (Browser, Betriebssystem, Bildschirmauflösung) ein und kombiniert die Inhaltsseite mit dem passenden Stylesheet.

Nahezu perfekt wird dieses Problem mit Hilfe eines XML-Publishing-Frameworks gelöst, bei dem alle Inhalte in einem XML-Dokument liegen und die Client-gerechte Aufbereitung on the fly über XSLT erfolgt. Auf diese Weise lassen sich nicht nur unterschiedliche Browser individuell bedienen, sondern auch die unterschiedlichsten Ausgabemedien wie Mobile Devices oder zum Beispiel PDF-Reader.


Dynamische Webseiten

Browser-übergreifendes Webdesign

Auch dynamisch generierte Webseiten bieten eine optimale Umgebung, um eine möglichst umfassende Abdeckung aller relevanten Plattformen und Browser zu gewährleisten. Das Skript hat dabei nicht nur die Aufgabe, die gewünschten Informationen aus einer Datenbank abzurufen, sondern dient gleichzeitig als Schaltzentrale für die Browser-gerechte Aufbereitung der Daten. Viele Browserweichen werden mit Hilfe von Javascript auf dem Client realisiert. Ist auf dem Browser Javascript jedoch deaktiviert, läuft der Versuch ins Leere. Mit der Implementierung einer Weiche auf dem Server können Sie dieses Problem elegant umgehen.


Browser-Fähigkeiten testen

Browser-übergreifendes Webdesign

Die beschriebenen Wege zeigen zwar das Schema, mit dem Sie eine möglichst individuelle Bedienung eines Clients und des verwendeten Browsers realisieren können. Offen bleibt jedoch immer noch die Frage nach den individuellen Fähigkeiten eines Browsers, den ein Webdesigner bedienen will. Hier helfen in der Regel nur konkrete Tests.

Die können Sie mit dem passenden Werkzeug teilweise schon in der Designphase durchführen. Dreamweaver MX bietet zum Beispiel ein solches Test-Tool. Über das Datei-Menü können Sie den Befehl Seite überprüfen, Zielbrowser überprüfen aufrufen. Im folgenden Dialog wählen Sie dann den zu testenden Browser aus. Das Testergebnis wird in einem ausführlichen Protokoll angezeigt. Auf der Basis der monierten Passagen können Sie dann das Patchen an den HTML-Files beginnen. Allerdings müssen Sie das Spiel für jeden gewünschten Zielbrowser wiederholen. Das kann sich je nach Anzahl der Browser zu einer wahren Sisyphusarbeit entwickeln. Jede Änderung im Hinblick auf einen Browser kann wieder negative Auswirkungen auf das Erscheinungsbild in einem anderen, schon getesteten Browser haben.


Prüfung mit Hilfe des Editors

Browser-übergreifendes Webdesign

Auch Frontpage bietet eine solche Testumgebung. Hier ist die Arbeit jedoch noch um einiges umständlicher. Sie müssen nämlich jeden einzelnen Zielbrowser auf Ihrem Rechner installieren und in die Testumgebung einbinden, bevor Sie loslegen können.

Da stellt sich zwangsläufig die Frage, wie weit Sie das Spiel treiben sollen und wie viele Browser-Varianten und -Generationen Sie überhaupt mit Ihrem Design abdecken wollen.

Bei einer Site, die schon eine Besucherfrequenz zu verzeichnen hat, kann hier ein Blick auf die Besucherstatistik oder eine Analyse der Webserver-Logfiles weiterhelfen. Die meisten Webhoster bieten hier komfortable und übersichtliche Tools an, die unter anderem auch Aufschluss darüber geben, wie viele Besucher mit welchen Browsern Ihre Site besucht haben. Die hier zahlreich vertretene Klientel sollten Sie in jedem Fall vorrangig und optimal bedienen und auf deren Browser-Eigenschaften beim Design eingehen


Prüfung auf Standardkonformität

Browser-übergreifendes Webdesign

Wer seine Webseite auf Standardkonformität prüfen will, sollte sich nicht
auf die in Web-Editoren eingebauten Checker verlassen. Diese testen lediglich einzelne HTML-Elemente und halten sich selbst nur bedingt an den W3C-Standard. Die erste Adresse ist der HTML Validator vom W3C höchstselbst (
validator.w3.org
). Er überprüft das gesamte HTML-Dokument anhand eines Regelwerks und arbeitet dabei sehr zuverlässig. Empfehlenswert ist auch HTML-Tidy vom W3C (
www.w3.org/People/Raggett/tidy
). Das Tool korrigiert zum Beispiel vergessene oder verwechselte End-Tags und schreibt den neuen Code übersichtlich zurück. Auf dem Browser-Friedhof unter
browsers.evolt.org
finden sich alle Browser, die das Internet jemals hervorgebracht hat für Website-Tester ein Muss. Beim Internet Explorer muss man allerdings bedenken, dass mehrere Versionen nicht auf einem Rechner getestet werden können. Die neuen Systemdateien beeinflussen die älteren Versionen. Unter Windows wird die ältere Version komplett entfernt.