Demonstration: Layout ohne Formatierung

Geschichte der Website

Die erste Website von Tango GRAZioso - bald nach der Gründung des Vereins erstellt - war noch eher schlicht mit den Mitteln aus der Anfangszeit des World Wide Web Mitte der 90er Jahre gestaltet und war unter www.info-graz.at/tango zu finden. Sie tat ihren Dienst bis zum November 2002, als eine neue Seite unter eigener Adresse ins Netz gestellt wurde. Das Layout von Andreas Schwarzmann enthielt die bis heute aktuellen Gestaltungselemente wie Farben, Bilder, den Seitenkopf und das Navigatiosmenü mit dem Tangopärchen als Hintergrund.

Mit dem Relaunch im August 2005 erfuhren die Seiten durch Gunter Jammernegg eine optische Überarbeitung und inhaltliche Ausweitung. Im Februar 2006 vervollständigten die Seiten in englischer Sprache die dritte Generation der Tango GRAZioso-Website.

Für die vorliegende vierte Generation, ebenfalls von Gunter Jammernegg gestaltet, wurde die technische Struktur der Seiten grundlegend geändert. Gleiches Design, aber unter der Haube ist alles neu. Das Ziel der Umgestaltung hieß Barrierefreiheit, das heißt möglichst hohe Zugänglichkeit der Inhalte für alle Besucher, unabhängig vom verwendeten Programm.

Die neue Technik

Während die zweite und dritte Generation der Website noch als Frameset aufgesetzt waren, und rahmenlose Tabellen für die Positionierung der Texte und Illustrationen sorgten, reifte langsam die Erkenntnis, daß diese heute veralteten, aber durchaus noch verbreiteten Techniken mehr Probleme bereiten, als daß sie Vorteile bringen. Auf die zahlreichen Einschränkungen von Frames soll hier nicht weiter eingegangen werden, als Beispiel sei nur angeführt, daß sie äußerst unpraktisch sind, wenn man eine bestimmte Seite als Lesezeichen ablegen möchte: es erscheint immer nur die Startseite, von der man sich zum gewünschten Ziel erst durchklicken muß.

Die neue Struktur geht einen völlig anderen Weg: vollständige Trennung von Form und Inhalt, realisiert durch konsequente Anwendung von Cascading Stylesheets (CSS). Während in den HTML-Dateien nur mehr klar strukturierter Text enthalten ist, beziehen die Browser alle Anweisungen zur Formatierung der Inhalte aus externen Stylesheet-Dateien. Auf den Seiten von Tango GRAZioso kommen die vom World Wide Web Consortium (W3C) empfohlenen Standards HTML 4.01 und CSS 2.0 zur Anwendung.

Einer der wichtigsten Vorteile dieser Technik ist, daß sich unterschiedliche Formatierungen ohne Änderung an den Inhalten erzeugen lassen. Für bestimmte Anwendungen, zum Beispiel Drucken, können gezielt Stylesheets bereit gestellt werden, die deutlich von der normalen Darstellung am Bildschirm abweichen. Im Folgenden zeigen Demoseiten die Anwendung verschiedener Stylesheets, vorausgesetzt Sie betrachten diese Seiten mit einem modernen Browser auf einem PC oder Laptop.

Drucklayout

Im Beispiel wird diese Seite so dargestellt, wie sie auf einem Drucker erscheint. Layoutelemente, die im Ausdruck nicht notwendig sind oder stören könnten, werden ausgeblendet. Dazu gehören der Seitenkopf und das Menü zur Seitennavigation. Das Drucklayout geht dazu sparsam mit Farben um, verzichtet auf Hintergrundbilder und ist für optimale Lesbarkeit auf Papier ausgelegt:

Demoseite Drucklayout

Kleinbildschirme und Screenreader

Immer zahlreicher werden internettaugliche Geräte mit kleinen Bildschirmen, wie Mobiltelefone oder PDAs. Ein Layout, das für eine Monitorgröße von mindestens 1024x768 Pixel ausgelegt ist, kann auf kleinen Bildschirmen völlig unleserlich werden. Screenreader wiederum, das sind Bildschirmlesegeräte für Menschen mit Sehschwächen, benötigen eine klare, übersichtliche Struktur, in der sich der Inhalt dem Besucher rasch erschließt.

Für das Ziel der Barrierefreiheit wurde der Weg gewählt, ein alternatives Layout für andere Geräte als PCs und Laptops bereitzustellen. Ebenso wie das Drucklayout verzichtet es auf Hintergrundbilder, die Seite wird "linear" dargestellt, um den hochformatigen, schmalen Bildschirmen von Mobiltelefonen und anderen Geräten gerecht zu werden. Die Musterseite demonstriert die Wirkung des Stylesheets, zur Verstärkung des Effekts ist die Breite des Anzeigebereichs auf 400 Pixel reduziert:

Demoseite Layout für Kleinbildschirme

Ältere Browser und Suchroboter

Der Nachteil von Stylesheets zur Formatierung der Inhalte ist, daß sie von älteren Browsern nicht oder nur unzureichend verstanden werden. Besonders Netscape in der Version 4.x ist hier äußerst mangelhaft und "brilliert" durch krasseste Fehlinterpretationen der Formatanweisungen. Zwar ist es möglich, durch Workarounds manche dieser Fehldarstellungen auszugleichen - was auch für den Internet Explorer der Versionen 5 und 6 häufig, für Version 7 hin und wieder notwendig ist - , jedoch sind die Probleme des Netscape 4.x zu massiv, um noch eine brauchbare Anzeige zu erhalten.

Als Lösung werden Netscape 4 und andere ältere Browser von den Stylesheets überhaupt ausgeschlossen und bekommen die Inhalte unformatiert. Da sie aber kaum mehr verwendet werden, ist dieser Weg durchaus vertretbar. Ebenso unformatiert stellen sich die Seiten aus der Sicht von Suchrobotern (Spiders) dar, das sind Programme, die das Internet nach Inhalten durchforsten, um sie Benützern von Suchmaschinen als Ergebnis von Recherchen anzubieten. Die folgende Demonstration zeigt diese Seite aus der Sicht von Googlebot, msnbot und anderen Robotern:

Demoseite Inhalt ohne Formatierung

Realisierung des Layouts

Die zentralen Elemente eines CSS-basierten Layouts sind Container oder Divisions - durch den HTML-Code <div> gekennzeichnet -, die bestimmte Bereiche einer Seite gruppieren, sich mit den Formatangaben im Stylesheet am Bildschirm verteilen lassen, ein Hintergrundbild oder Scrollbalken besitzen können und noch viele weitere flexible Gestaltungen ermöglichen. Auch andere Elemente wie Überschriften <h1-6>, Absätze <p> oder Aufzählungslisten <ul> ermöglichen unter Beibehaltung einer klaren Struktur der HTML-Dokumente variantenreiche Gestaltungen.

Das Framelayout der zweiten und dritten Generation der Website wurde mit pixelgenau positionierten Containern nachgebaut und besitzt wie bisher einen Seitenkopf mit dem Logo von Tango GRAZioso und ein Navigationsmenü links vom Inhalt. Um die Funktionalität einer Frameseite auch für Internet Explorer bis Verion 6.0 erhalten zu können - Rollen des Textbereichs bei feststehendem Seitenkopf und Menü - , ist allerdings eine Javascript-Funktion notwendig, die die Größe des Browserfensters ermittelt und dem Container für die Seiteninhalte die korrekte Höhe zuweist.

Weitere Javascript-Funktionen sorgen für die Darstellung von simulierten Popup-"Fenstern", die tatsächlich nur Container sind, die nach Klick auf einen Link ein- oder ausgeblendet werden. Zur Anwendung kommen diese Popups bei Stadtplänen oder Infoboxen. Sollte bei Ihrem Browser Javascript deaktiviert oder nicht verfügbar sein, erhalten Sie die Inhalte mit kleinen optischen Einschränkungen. Die Zoomfunktion der Stadtpläne, die Diashows auf der Albumseite und die Ausfüllhilfe bei den Anmeldeformularen stehen in diesem Fall leider nicht zur Verfügung.

Unterstützt wird die Seitengestaltung schließlich durch Symbole, die bei den Links die Art des Verweises verdeutlichen. Die Symbole waren schon bei der vorigen Generation der Webseite in Verwendung, werden jetzt aber nicht mehr im Text, sondern im Stylesheet als Hintergrundbild für einen Verweis <a> festgelegt: arrow_right.gif steht etwa für den Link zu einer weiteren Seite, info.gif öffnet ein Info-Popup, map.gif einen Stadtplan und mail.gif verweist auf eine Mailadresse.

Weiterführende Links

Ein Webdesigner kann sich die Tips und Tricks für die Gestaltung von HTML-Dokumenten natürlich nicht aus den Fingern saugen, besonders wenn er sich in der Lernphase befindet. Die folgenden Werkzeuge und Nachschlagewerke waren ungemein hilfreich bei der Entwicklung des Webauftritts von Tango GRAZioso:

Natürlich sind die Seiten immer Baustelle und niemals vollkommen. Für Fehlermeldungen, Hinweise, Anregungen oder Fragen zur Website senden Sie bitte ein Mail an:

Falls Sie Interesse haben an einem weiteren Internetprojekt des Webmasters, der musiziert und inzwischen auch tanzt, schauen Sie doch einmal hier vorbei:
Pretti&So - Standard Jazz Sextet