Trendsetting in Sachen Webdesign

Pointiert formuliert: Was haben Computer und Frauen gemeinsam?
Bei beidem sucht man(n) immer noch händeringend nach einer verständlichen Bedienungsanleitung, wenn sie etwas sagen ist es meist völlig unverständlich und was sie tun scheint nur in Ausnahmefällen eine logische Folge der Ursache zu sein.

Bevor wir näher erörtern, was "Webdesign" mit "klugen" Sprüchen zu tun hat: zuerst ein Outing: ich liebe Frauen. Aber ich hasse Computer. Zumindest wenn sie nicht tun was sie sollen, was eigentlich in 98% der Fälle so ist.
Normalerweise hasse ich es auch über "Webdesign" zu reden - für mich ein heißer Kandidat für das Unwort des Jahres. Denn jeder uninformierte Anfänger, der gerade einmal HTML fehlerfrei buchstabieren kann scheint sich inzwischen als "Webdesigner" zu betrachten. Für mich ist das so, als wäre ich Klomann und nenne mich vollmundig "Location Assistant". Das klingt vielleicht cooler, ist in Wahrheit aber immer noch ein Sch***job.
Gleich danach kommt das Wort "Trendsetter". Was ja nichts anderes heißt als sich selbst als den König einer fantasiefreien Massenbewegung zu begreifen, die anstatt eigene Ideen zu entwickeln auf Teufel-komm-raus ein fremdes Konzept kopiert. Sprich: so recht glücklich bin ich mit dieser Formulierung nicht, auch wenn es inhaltlich das trifft worum es geht.

Aber Schwamm drüber. Denn eigentlich geht es um eine Entwicklung, die ihren Ursprung in den späten '90ern hat. Und ich will versuchen, das so unterhaltsam zu machen, dass sie sich dabei nicht langweilen werden, da der Inhalt an sich natürlich rein hypothetisch ist.

Layerstruktur:

Prolog

Der Beginn unserer Geschichte liegt im Jahr '98/'99. Ich habe fast geheult, als ich das erste Mal mit den beschränkten Möglichkeiten von HTML eine Seite erstellen musste. Nichts funktionierte. Ich hatte ursprünglich mit Webinhalten auf CDs (geschrieben mit echten Multimediatools) angefangen und eigentlich war ich gewohnt, dass alle Elemente einer Seite einen Namen hatten und einen Zeitindex. Eine Position und einen Layer. All das gab es aber damals noch nicht.

Netscape kannte Layer, verstand darunter aber etwas völlig anderes. Der Internet Explorer konnte alles irgendwie besser, aber eigentlich auch nichts wirklich richtig. Im Endeffekt konnte man also Text schreiben, ein paar Bilder einfügen und hielt sich dann mit Ausreden wie "die Seiten anderer Leute sehen noch schlechter aus" über Wasser. Keine Frage: Schreiben von Webseiten hatte bis vor ein paar Jahren mehr mit Nervenstärke als mit Kreativität zu tun.

Stellen sie sich vor, sie hätten Utopia gesehen, einen Ort wo Milch und Honig fließen und dann wachen sie auf und sehen einen Hinterhof irgendwo in Berlin und alles was fließt ist der Regen vor ihrem Fenster. So in etwa ist es, von einem Multimediatool und CDs auf HTML und eng begrenzten Webspeicher umzusteigen. Ich kam mir vor wie der Colgate-Biber, der mit seiner Zahnbürste eine Eiche umlegen sollte.

Grundsätzliches

Eines der wichtigsten Features aus der Multimediawelt hat seit damals mit CSS 2.0 endlich auch Einzug in die Webwelt gehalten. Völlig freies Positionieren und Skalieren von Objekten. Auch übereinander.
Auch IFrames sind erwachsen geworden und zu echten im Dokument frei positionierbaren Browserfenstern mutiert.

Wie erfolgreich die Idee des IFrame tatsächlich war zeigt sich, wenn man die neueren Standards zu XHTML durchforstet und verwundert feststellt, dass plötzlich eine sehr große Anzahl von Tags ein SRC (source) Attribut besitzt, welches das Laden von Dateiinhalten ermöglicht. Auch wenn der IFrame als Element damit in Zukunft eventuell ausgedient haben dürfte, zeigt sich doch, dass die Existenz an sich insgesamt eine positive Auswirkung auf die zukünftige Entwicklung hatte.

Objekte übereinander zu positionieren heißt, Schichten (eng. Layer) aufzubauen.
Alles, was keiner Schicht zugeordnet ist, gehört automatisch zur Schicht 0.

Ein Beispiel: Der Hintergrund sei unsere unterste Schicht: also Schicht 0. Diese kann durchaus auch aus Text oder einzelnen Bildern bestehen. Darüber befindet sich dann die 1. Schicht, welche den Hintergrund überdeckt. Das könnten zum Beispiel Hintergrundbild und Umrandung für einen IFrame oder eine Navigationsleiste sein, die wir einbinden wollen.

Darüber vielleicht eine weitere Schicht mit einem Logo oder Text und ganz oben wieder eine Schicht: mit allen Dingen, die nicht überdeckt werden dürfen. Den Links unserer Navigationsleiste zum Beispiel.

Um ein weiteres Beispiel zu nennen: Man kann also auch, um einen Button zu gestalten über einer Grafik eine Beschriftung und den Link über Grafik und Text platzieren. Bisher war das unmöglich.

Das Prinzip ist jedoch klar: Texte, Bilder, ... alles wird einer Schicht zugeordnet und ist frei positionierbar.

Das ermöglicht eine völlig neue Art Webseiten zu gestalten, benötigt aber auch eine neue Generation von Editoren, die damit umgehen kann. Vorausgesetzt, diese Ansicht setzt sich durch, wäre die Entwicklung allerdings kein größeres Problem.
Im Klartext heißt das: die Zeiten, in denen man Webseiten mit etwas Geduld und einem Texteditor schreiben konnte gehen langsam zu Ende.
Kein durchschnittlich begabter Mensch kann aus dem Quelltext einer solchen Seite bestimmen, welche Objekte einer Webseite tatsächlich sichtbar sind und welche von darüber liegenden Objekten verdeckt werden, oder wo genau (X/Y Position) ein Bild eingefügt werden muss, damit es einen bestimmten Teil eines anderen Bildes verdeckt usw. An diesem Punkt ist eine Visualisierung notwendig.

Kompatibilitätsprobleme spielen keine so gravierende Rolle mehr, da die aktuellen Versionen der großen Browser (Netscape und Internet Explorer) und deren direkte Vorversionen CSS 2.0 und damit auch Seiten, die nach diesem Prinzip gestaltet wurden bereits unterstützen.

Anwendung

Der eigentliche Witz an der Sache ist, dass diese CSS-Anweisungen inzwischen bekannt sind. Einige Seiten sind mir im WWW aufgefallen, die sogar schon damit experimentiert haben. Nur: auf die Idee damit eine Layerstruktur aufzubauen ist selten jemand gekommen.
Möglicherweise ist das eine DER Entwicklungen der kommenden 3 Jahre. Ich bin jedenfalls gespannt zu sehen, ob es sich durchsetzt... bis es soweit ist hoffe ich sie gut unterhalten zu haben. Und mit etwas Glück sehen wir in Zukunft noch eine Menge noch besserer Webseiten. Das wäre den Aufwand wert.

Damit sind wir quasi am Ende des kleinen Exkurs. Allerdings nicht ohne ihnen zu verraten, wie sie bereits jetzt und ohne entsprechende Software Seiten schreiben können, die sich das Prinzip zunutze machen.

Es zeigt die Erfahrung, dass sich DIVs sehr gut als "Box" für Text, komplexe Bilder und andere Objekte eignen. Die Positionierung erfolgt in der Regel über das Attribut "style". Es gibt eine Vielzahl alternativer Möglichkeiten, den gleichen Effekt zu erreichen, ich möchte hier aber nur ein einziges Quelltextbeispiel angeben. Zum Vertiefen der verschiedenen Möglichkeiten sind sie bei der Fachliteratur zu CSS besser aufgehoben.

<DIV STYLE="
position: "absolute" zur linken oberen Ecke oder "relative" zur aktuellen Position;
top: Abstand von Seitenanfang in Pixel;
left: Abstand von Zeilenanfang in Pixel;
z-index: Nummer der Schicht;
width: Breite in Pixel;
height: Höhe in Pixel
">...</DIV>

(ac/tom) Diskussion