Webstandards

Standardkonforme Webseiten

• Wer schon mal mit HTML gearbeitet hat, weiß, dass das, was in dem einen Browser gut aussieht, in dem anderen noch lange nicht so aussieht.
• Es hat mich immer gestört, bzw. es stört mich noch immer, wenn ich auf eine Webseite stoße, auf der fett geschrieben steht: "Optimiert für Browser XYZ". Bei mir stand der Spruch zwar nicht, aber da man Mitte 2001, als ich mit diesem Projekt angefangen habe, immer noch den Spagat zwischen "modernem" HTML und den Darstellungsproblemen im Netscape Navigator hinkriegen musste, war mein Projekt letztendlich auch optimiert, und zwar für eben diesen Netscape Navigator, der dem WWW bei seinem Durchbruch mitgeholfen hat und zu der Zeit in der Version 4.XX noch immer recht häufig genutzt wurde...
• Irgendwann habe ich angefangen, mir Gedanken darüber zu machen, was HTML eigentlich genau ist. Dabei stößt man zwangsläufig auch auf Tim Berners-Lee, den Erfinder des WWW und das W3C. Trotz recht zeitaufwendiger Basteleien an diesem Projekt habe ich irgendwann im Herbst 2002 festgestellt: "Kleinschmidt, Deine Seite hat immer noch ziemlich viele 'Barrieren', was nicht dem Gedanken des WWW entspricht: grenzüberschreitende Verbreitung von Informationen (wobei der Kerngedanke ist, dass die Art der Grenze hier keine Rolle spielt). Da musst Du was gegen tun!"
• Dazu gesellte sich noch ein anderes, weitaus praxisnäheres Problem: durch das stetig wachsende Volumen an Bildern (mit der Seite der Hirschkammer zusammen waren es zu dem Zeitpunkt schon knappe 2000) wurde z. B. das Beheben von Fehlern, die in einer Seite zum Bilder anzeigen waren (und damit in fast allen, da man sich ja irgendwie Vorlagen basteln musste), fast nicht mehr möglich. Auf der Suche nach einer Lösung bin ich auf PHP gestoßen. Die Ausgabe dieser Sprache erfolgt in HTML. Man kann beim Aufruf der Seite den Output beeinflussen, in dem man Argumente übergibt, die zum gewünschten Ergebnis führen. Es genügt also eine einzige PHP-Seite für eine Unmenge an Bildern! Das ist echt Klasse!
• Ich habe mich also daran gemacht, den ganzen Kram mal neu zu gestalten. Dabei bin ich von HTML 4.01 Transitional (wenn's das denn überhaupt war) auf XHTML 1.1 mit CSS umgestiegen. Nachdem ich damit fertig war (das war wohl so im Spätsommer 2003), war nicht mehr viel Arbeit nötig, um weite Teile des Projekts barrierefrei zu gestalten. Zudem hat die Verwendung von PHP zu einer enormen Ersparnis von (X)HTML-Seiten geführt: von mehreren hundert allein in diesem Projekt auf weniger als 20!
• Im Fuß einer jeden Seite befinden sich Links zu Prüfprogrammen auf Einhaltung der Standards. Mit ihrer Hilfe kann jeder Besucher dieses Projekts die Einhaltung der jeweiligen W3C-Spezifikationen prüfen. Zur Zeit gibt es jedoch keinen aussagekräftigen Test, der eine vernünftige Aussage zur Einhaltung der WAI-Richtlinien zur Barrierefreiheit liefert. Deshalb ist dieses Logo nur mit Erläuterungen dazu verknüpft. Das Logo weiter unten auf der Startseite, das auf eine "Viewable With Any Browser"-Kampagne für Browser unabhängige Webseiten verweist, hat nichts mit dem W3C zu tun: es stammt aus dem reichhaltigen Fundus eben dieser Kampagne...

Funktionsfähigkeit älterer Browser

• Dieses Webprojekt wurde optimiert für alle modernen Browser und gemäß den Richtlinien des W3C gestaltet.
• Ältere Browser, insbesondere alle Netscape- und Microsoft-Browser der Generation 4.x, dürften enorme Probleme haben, diese Seiten ordnungsgemäß darzustellen. Insbesondere der Netscape 4.x ist berühmt-berüchtigt für sein von Version zu Version wechselndes Verhalten: mal wurden Seiten "korrekter" dargestellt, mal weniger "korrekt". Aber niemals konnte er den derzeit gültigen im Jahre 1996 veröffentlichten Spezifikationen des W3C entsprechende Seiten anzeigen. Die letzte veröffentlichte 4.x-Version dieses Programms stammt aus 1999!
• Der Internet Explorer ist konzeptionell schon mehrere Jahre alt und entspricht auf die Webseitendarstellung bezogen definitiv nicht dem neuesten Stand der Technik, da bis auf das Ausbessern von durch die Einbindung in das Betriebssystem fast immer kritischen Sicherheitslücken keine die Darstellung betreffenden Neuerungen hinzugekommen sind. Für die Version 7 (nur für Windows XP, Vista und Server 2003) sind insbesondere auf älteren PCs Schwächen in der Performance zu bemängeln. Die "Verbesserungen" in der Sicherheit sind vermutlich häufig Änderungen in den Sicherheitseinstellungen und Kastrationen von eigentlich rudimentären Programmfunktionen, wie z. B. das Anmelden an Websites. Ohne Änderung der Sicherheitseinstellungen ist das nicht möglich (was allerdings sofort bemängelt wird). Es mutet schon seltsam an, dass der "Neue" rein darstellungstechnisch betrachtet noch immer nicht den Stand erreicht hat, den andere Programme (die keine solch gravierenden Sicherheitslücken aufweisen) schon vor mehreren Jahren hatten. Zudem führen eigensinnig umgesetzte W3C-Richtlinien zu "recht interessanten" Ergebnissen.
• Die meisten anderen Programmierer haben sehr viel getan, damit ihre Produkte Webseiten gemäß den W3C Spezifikationen darstellen können. Da bleibt es nicht aus, das ältere Programme den aktuellen Anforderungen nicht mehr gerecht werden. Diese Browser sollten nicht mehr genutzt werden.
• Jedes Programm, das standardkonform geschriebene Webseiten korrekt darstellen kann, ist für das Stöbern in diesem Projekt geeignet. Die Funktionsfähigkeit des Layouts wurde getestet und für angemessen empfunden auf Microsoft Internet Explorer 5.x und höher (mit Einschränkungen), Browser mit der Gecko-Engine (Netscape 7.x, Mozilla 1.4 und Mozilla Firefox 0.87 [in der getesteten Version hieß das Programm noch "Firebird"]), Opera 6.x und hoffentlich alle Nachfolgeversionen. Damit dürften auch (aber nicht nur) für eingefleischte Hasser des Internet Explorers genügend Alternativen geboten werden, während ich mir für die Zukunft eine ganze Menge Tipperei ersparen werde.
• Ein Screenshot mit der Startseite als Layout-Beispiel für dieses Projekt soll denjenigen, bei denen diese Seiten "irgendwie komisch" aussehen, veranschaulichen, wie ein W3C-konformer Browser diese Seiten wiedergeben würde...

Weitere Infos

• Mehrere sehr gute W3C-konforme Browser warten in den unendlichen Weiten des WWW auf Nutzer. Beispiele dazu findet man bei den Software-Links.
• Zum Erlernen des Schreibens von standardkonformen Webseiten habe ich eine Reihe von Tutorien als Verknüpfungen in den Surftips zusammengestellt.
• Zum Prüfen der Standardkonformität von Webseiten stehen zahlreiche kostenlose Validierungsdienste zur Verfügung, die neben den kommerziellen Programmen für Projekte, die nur ein paar Seiten groß sind, gute Dienste leisten. Mehr dazu gibt's bei den Surftips.
• Für Inspirationen oder einfach nur zum Zeitvertreib findet man (wo sonst?) unter den Surftips eine Auflistung verschiedener Ressourcen, die sich sich mit dem Thema Webdesign im Allgemeinen beschäftigen.

Designexperimente

Nach Beendigung des technischen Feinschliffs sind logische Textstruktur und Layout in diesem Projekt streng getrennt. Die Seite CSS Zen Garden - the beauty of CSS Design hat mich zu ein paar Designexperimenten inspiriert: ich habe versucht, ohne Änderung des MarkUps geänderte Optiken für dieses Projekt zu gestalten. Das veranschaulicht, wie einfach validierte Webseiten optisch zu verwalten sind: mittels nur einer Datei! Den Seitenquelltext kann sich jeder anschauen; die Stylesheets sind hier verlinkt. Falls sie nicht wie erwartet als Textdatei im Browser dargestellt werden, sollten sie lokal gespeichert und mit einem Texteditor geöffnet werden.

• das vierte Layout: Style 4 und das dazu gehörende Stylesheet (2006-08-16)
  (Anm.: dieses Stylesheet hat ebenfalls nur Auswirkungen auf die Startseite, d. h. es importiert Style 1 und hat Ergänzungen für die Darstellung der Startseite, funktioniert jedoch nicht ganz korrekt im IE bis Version 6. Doch schaut selbst...)
• das dritte Layout: Style 3 und das dazu gehörende Stylesheet (2006-01-27)
  (Anm.: dieses Stylesheet importiert Style 1 und hat Ergänzungen für die Darstellung der Themen dieses Projekts auf der Startseite: das unscharfe Bild soll beim Überfahren der Themenbox mit der Maus durch ein scharfes ersetzt werden. Ich hoffe, dass das auch bei den meisten Besuchern funktioniert. Ich habe es jedenfalls mit den gängigsten Browsern getestet...)
• das zweite (experimentelle) Layout: Style 2 und das dazu gehörende Stylesheet (2005-06-15)
  (Anm.: Dieses Experiment ist fast abgeschlossen. Mir fehlen noch Ideen für die Symbole zur Auszeichnung von Gliederungspunkten und Links.)
• das Standard-Layout: Style 1 und das dazu gehörende Stylesheet (2005-06-15)
• für Puristen: HTML only ohne Anwendung von CSS (2005-06-15)

Die Nutzung von PHP ermöglicht, durch die Mitgabe eines Arguments "?style=..." unabhängig von der browserabhängigen Auswahlmöglichkeit alternativer Stylesheets dieses serverseitig abzuändern, so dass jeder, der einen W3C-konformen Browser besitzt, damit innerhalb des gesamten Projekts rumspielen kann. Das mitgegebene Argument "?style=..." kann jederzeit aus der Adressleiste entfernt werden, um zum normalen Design zurückzukehren. Mehr als die hier vorgestellten Stile sind nicht vorhanden. Falls eine nicht vorhandene Stildefinition eingegeben wird, so wird automatisch der Standard ausgewählt. Damit ich nicht den Programmteil für die Ausgabe der <LINK>-Elemente mit den Verknüpfungen zum Haupt- und den Alternativstylesheets ändern muss, falls noch welche hinzukommen, habe ich die nicht ausgewählten Stylesheets nicht als Alternativen im Seitenkopf angegeben. Die Auswahl "ohne Stil" funktioniert jedoch, sofern der Browser diese Funktionalität beherrscht)...

Viel Spaß!