Vorwärtskompatibilität beim Webdesign

Dieses Stichwort beschreibt eine Technik, welche für Sie als Kunde einer Webdesign-Agentur eine grosse Bedeutung hat. Das Wort ist leider ein wenig irreführend, denn vorwärtskompatible Websites funktionieren auch in alten Browsern auf alten Computern, und sind meist auch noch zugänglicher für Menschen mit Behinderungen aller Art und weisen eine ganze Reihe nicht zu unterschätzender Vorteile auf.

Warum machen wir das so?

Wegen 28.000.000 US-Dollar. Deswegen. Ganz schön viel, nicht? Das Wall Street Journal bezahlte 28 Millionen US-Dollar für ein Redesign ihrer Website. Manches funktionierte nämlich schon gar nicht mehr in neuen Browsern, weil Code verwendet wurde, der darauf ausgelegt war, möglichst der Printversion der Zeitung zu entsprechen. Dieser Code bestand aus Hacks, unzähligen proprietären (nicht-offiziellen) Codebestandteilen, welche von den neuen Browsern nicht mehr unterstützt wurden. Sicher, das ist ein extremes Beispiel, aber Sie wollen bestimmt nicht viel Geld dafür zahlen, dass der Code Ihrer Website mit jeder Veröffentlichung eines neuen Browser angepasst werden muss. Das lässt sich vermeiden.

Was ist HTML?

HTML ist eine Sprache zur Strukturierung von Webseiten. Webdesigner wollten früh schon Webseiten gestalten, dies war mit HTML nicht möglich. Also wurden mit der Zeit immer mehr Tags (Anweisungen) in die Sprache eingebaut, die Versionsnummern nahmen zu und fanden bei 4.01 ein Ende. Bis dann waren viele Tags eingebaut, die nichts zur Strukturierung der HTML-Dokumente beitrugen, aber die Gestaltung beeinflussten.

Längst waren aber die Cascading Style Sheets (CSS), die Formatvorlagen, geboren. Mit diesen sollte es möglich sein, rein strukturierte Webseiten zu gestalten, ohne HTML-Tags zu verwenden, die nichts zur Struktur beitrugen. Aber die Browserhersteller (wie Microsoft und Netscape), die Wesentliches zur Schaffung der Style Sheets beitrugen, verpassten es, diese in ihre Produkte, in die Browser, einzubauen. Der Browserkrieg fand bei den CSS vorläufig nicht statt.

Die Folge war, dass Webdesigner die Style Sheets mangels hinreichender Implementierung bestenfalls für Textauszeichnungen verwenden konnten, und weiterhin Tricks und Hacks anwendeten, um Webseiten zu gestalten. Als Folge davon sind noch heute viele Webseiten nicht zugänglich für Behinderte, dauern lange zum Laden, weil der Code schwer und kompliziert ist. Sie kennen sicher den Effekt, dass eine Webseite erst lange gar nichts anzeigt und plötzlich ist der ganze Inhalt auf einen Schlag da. Dann handelt es ich meist um den Tabellen-Hack. Der Webdesigner verwendete eine HTML-Tabelle, das heisst, er packte den ganzen Inhalt in diese Tabelle. Browser müssen HTML-Tabellen zuerst vollständig laden, dann müssen sie die Zellstruktur berechnen, bevor sie schliesslich damit beginnen können, den Inhalt anzuzeigen. Dies dauert zweimal zu lange: erstens beim Laden des langen, komplizierten HTML-Codes, was abhängig ist von der Leistungsfähigkeit der Internet-Verbindung, und ein zweites mal beim Berechnen der Tabelle, was abhängig ist von der Leistungsfähigkeit des Computers.

Modern Times – Moderne Zeiten

Diese Zeiten sind eigentlich vorbei. Die neuen Versionen der Browser verfügen über teilweise hervorragende Fähigkeiten was Formatvorlagen betrifft. Dennoch tun viele Webdesigner-Agenturen so, als wüssten sie das nicht. Es gibt einige Gründe, warum manche sich noch nicht angepasst haben. Wirklich gute Gründe sind nicht darunter.

Denn die Vorteile von X-HTML für die Struktur einer Webseite und CSS für das Design sind riesig – für Webdesigner wie für Sie als Kunde. Das X in XHTML steht für eXtensible, erweiterbar. XHTML basiert auf XML (eXtensible Markup Language) im Unterschied zu HTML, welches auf SGML (Standard Generalized Markup Language) basiert. Der Unterschied besteht in der strengen Rechtschreibung, was zu gut strukturierten und damit automatisch besser zugänglichen Websites führt, und in einigen Verbesserungen, welche dynamische Funktionen vereinfachen.

Purer XHTML-Code kennt keine Tags für das Design einer Seite. Es gibt Übertitel, Textabschnitte, Links, Bilder, aber keine Auszeichnung für fette Schrift, oder Abstände zwischen Textabschnitten, oder die horizontale Ausrichtung von Bilder und so weiter. Damit entstehen im der Seite zugrunde liegenden Code rein logische Abschnitte. Diese werden dann mit den Formatvorlagen angesprochen.

In den Formatvorlagen kann angegeben werden, dass eine Überschrift blau und gross sein soll, dass Text eingerückt dargestellt werden soll, dass alle Bilder einen unsichtbaren Rahmen in einer bestimmten Grösse erhalten sollen und sehr Vieles mehr.

Wo liegt nun der Unterschied?

Das Internet ist nicht nur für Computer mit Bildschirm gedacht. Das Internet ist genau genommen gar kein Medium. Webseiten sollen voll zugänglich sein, egal mit welchem Gerät sie auf die Webseiten zugreifen. Bereits gibt es Mobiltelefone und Kleinstcomputer, mit denen der Zugriff aufs Internet möglich ist. Diese verfügen über winzige Bildschirme, viel kleiner als normale Computerbildschirme. Denken Sie auch an blinde Mitmenschen. Diese können auf einem normalen Computerbildschirm, egal wie gross, nichts erkennen, also lesen sie Webseiten mit speziellen Geräten, wie Screenreader und Braille-Ausgabemedien. Screenreader lesen den Inhalt der Website vor, während Braille-Ausgabemedien tastbare Stifte hervorstrecken, womit Blinde die Webseite quasi zeilenweise lesen können. Stellen Sie sich eine solche Tastatur als eine ein- oder mehrzeilige Tastatur mit im Ruhezustand versenkten Stiften vor.

Webseiten, denen keine logische Struktur zugrunde liegt, sind für solche Medien schwer zugänglich. Da Blinde nicht sehen können, sind sie auf eine logische Reihenfolge des Inhalts innerhalb des HTML-Codes angewiesen, welcher ihnen dann vorgelesen wird oder den sie per Braille-Tastatur ertasten können. «Das Bild rechts oben» oder «die Navigation auf der linken Seite» sind Angaben, mit denen Sehbehinderte nichts anfangen können.

Aber nicht nur für Sehbehinderte besteht ein einfacherer Zugang zu Ihrer zukünftigen Webseite. Schon heute gibts Kleinstcomputer mit Minibildschirmen, wahrscheinlich gibt es in Zukunft Geräte, von denen wir heute noch gar nicht zu träumen wagen. Doch allen ist und wird eines gemeinsam sein: von Webseiten wird zuerst der zugrunde liegende Code gelesen und dann der Inhalt angezeigt. Logischer Code macht also in jedem Fall Sinn.

Aber die Fähigkeit, Design anzuzeigen, kann natürlich bei einem grossen Bildschirm nicht die gleiche sein wie bei einem Minibildschirm eines Mobiltelefons. Damit auf die Ausgabemedien Rücksicht genommen werden kann, lassen sich Formatvorlagen für verschiedene Medien erstellen. Webdesigner können damit gezielt einzelne Medien ansteuern, die gleiche Website kann auf dem Bildschirm ganz anders aussehen als beim Ausdrucken, und natürlich machen Farbangaben bei einer Brailletastatur keinen Sinn.

Einmal codieren, immer glücklich

Aber die Webseite wird nur noch ein einziges mal erstellt. Webdesigner können diese dann mit den verschiedenen Formatvorlagen verknüpfen. Früher musste die eigentlich gleiche Webseite mehrere Male erstellt werden, damit man sie beispielsweise gut drucken konnte. Das ist mit Formatvorlagen nicht mehr nötig. Zudem werden Formatvorlagen nur ein einziges mal geladen, dann sind sie im Zwischenspeicher (Cache) des Browsers. Beim Aufruf einer neuen Seite, welche mit den gleichen Formatvorlagen verknüpft ist, werden die Formatvorlagen nicht erneut übers Internet abgerufen sondern werden aus dem Browser-Cache geladen. Dies macht die Darstellung zusätzlich schneller.

Noch dazu kann eine logisch strukturierte Webseite leicht angepasst und geändert werden. Der Code ist leicht zu durchschauen, während frühere HTML-Tabellen-Hacks schnell sehr undurchsichtig wurden. Dadurch wurde der Unterhalt dieser Seiten teurer, weil es länger dauerte und schwierig war.

Einzelne Elemente eines logisch strukturierten Dokuments lassen sich zudem leichter ansteuern, was solche Webseiten hoch dynamisch machen kann.

Warum machen es denn nicht alle so?

Sofort ist man versucht zu fragen, «ja wieso eigentlich?». Die Antwort fällt schwer, denn die Vorteile sind überwältigend. Frühere Hacks und Tricks begründen sich meist damit, dass das Internet mit einem papierenen Medium verwechselt wird, was seinerseits die Ursache darin haben könnte, dass manche Desktop-Publisher in das Webdesign-Fach gewechselt haben. Superpräzise Designs sind auf Papier möglich, da das Medium und seine Grösse bekannt sind; Papier eben. Im Internet ist das Endmedium nicht bekannt, es kann ebenso ein leistungsfähiger Bildschirm wie eine Braille-Tastatur oder ein Projektor sein.

Die Cascading Style Sheets haben eine relativ steile Lernkurve. Steil, aber kurz. Wer den Dreh raus hat, kann sich nicht mehr vorstellen, Webseiten anders zu erstellen.

Webseiten, die so erstellt werden, sehen nicht immer gleich aus. Je nach Browser, oder eben Endmedium, in welche die Seiten dargestellt werden, kann das Resultat verschieden ausfallen. Das missfällt manchen Webdesignern.

Doch drucken Sie diese Seite aus. Der Ausdruck wird völlig anders aussehen als die Darstellung auf dem Bildschirm, aber auf Papier brauchen Sie ja auch keine Navigationselemente, nicht wahr?

Betrachten Sie diese Seiten in einem Uralt-Browser mit schwacher oder gar keiner Unterstützung von CSS, wenn Sie können, zum Beispiel in einem Netscape 4 Browser, oder einem reinen Textbrowser wie Lynx. Bei früheren HTML-Tricks und Hacks wären Sie nun verloren, da die Darstellung verwirrlich ausfallen kann. HTML-Seiten mit sauber strukturiertem Code sind problemlos lesbar, bedienbar, navigierbar, unter was für Umständen auch immer. Und sie sehen hübsch aus in allen modernen Browsern, heutigen und zukünftigen.

Hier schliesst sich der Kreis. Volle Zugänglichkeit für alle Medien, als Sahnehäubchen eine hübsche Darstellung in modernen Browsern (die überwältigende Mehrheit der heute benutzen Browser), bereits eingerichtet für zukünftige Browser und mit viel mehr und einfacheren Möglichkeit zum späteren Ausbau.

Leave a Reply

Your email address will not be published. Required fields are marked *