Dieser Artikel über Layouten von Webseiten geht auf technische und gestalterische Aspekte ein, die ein Webdesigner beachten sollte.
Der Begriff wird gerne und wie selbstverständlich benutzt, wenn man von Internetseiten und deren Gestaltung/Erstellung spricht. Dabei wird gerne eine anscheinend selbstverständliche Parallele zwischen Internetseiten und Printmedien im Allgemeinen gezogen - obwohl diese Parallelen nur zum Teil überhaupt sinnvoll gezogen werden sollten.
Dieser Artikel geht auf technische und gestalterische Aspekte ein, die ein Webseitenschaffender beachten sollte - egal, ob eine Internetpräsenz mit einem Programm à la Dreamweaver, mit einem CMS à la Joomla oder sonstwie erstellt und gepflegt wird.
Der Grund, warum bei Internetseiten gerne ebenso gedacht wird, wie bei Printmedien, liegt in der Tatsache begründet, dass wir Internetseiten ebenso erleben, wie Ausgedrucktes. Wir erleben Webseiten auf den ersten Blick fast genauso, wie eine Zeitung. Wir lesen eben. Wir betrachten eine Fläche, auf der Textinhalte und Bildinhalte mehr oder weniger gefällig angeordnet sind, und verarbeiten diese Inhalte.
Was hat das nun mit Layout zu tun? Nun, offensichtlich benötigen wir für Webseiten sehr ähnliche Vorgehensweisen, wie wir das auch in Textverarbeitungen schon längst nutzen. Wir ordnen Textelemente und Bilder auf einer Fläche so an, dass sie optimal zum Lesen geeignet sind. Und weil das bei Printmedien so wunderbar klappt, muss das ja bei Internetseiten ebenso klappen. - Falsch!
Eine Internetseite ist zunächst einmal ein Dokument, das Informationen enthält. Es ist nicht unbedingt zum Ausdrucken gedacht, sondern es steht zunächst einfach für sich selbst. Printmedien speichern ihre Inhalte letztendlich auf Papier, daher nennt man sie Printmedien. Internetseiten jedoch werden primär nicht von Papier aus wahrgenommen, sondern aus verschiedensten Anzeigegeräten und -Programmen heraus. Dieser Umstand muss einem absolut klar sein, wenn man eine Seite sinnvoll „layouten“ möchte. Es besteht nämlich überhaupt keine Sicherheit auf Seiten des Erstellenden darüber, wie und wo die Inhalte später gelesen oder wahrgenommen werden. Vor allem im Zeitalter der Mobiltelefone mit hochauflösendem Farbdisplay ist es keineswegs mehr gesichert, dass da jemand an einem PC-Monitor sitzt, auf dem in einem garantiert maximierten Browserfenster bei garantierten maximalen Koordinaten die Website besucht wird.
Es war schon immer und ist noch heute eine der Stärken des HTML-Formates, dass es zunächst einmal keine Aussagen darüber macht, wie die Inhalte aussehen, sondern nur, was sie bedeuten. Daher enthielten die ersten HTML-Dialekte auch keinerlei bis kaum Möglichkeiten, die Inhalte auf einer Seite zu positionieren oder zu gestalten. Erst später, als die ersten grafikfähigen Browser entstanden, wurde der HTML-Standard immer mehr erweitert, um nun auch das Aussehen mit zu steuern.
Von einem technischen Standpunkt aus betrachtet fand damit eine Vermischung statt, bei der mit den Mitteln der Auszeichnungssprache nicht mehr nur die Bedeutung der Inhalte, sondern nun auch ihre Darstellung gesteuert wurde. Zu der damaligen Zeit war das anders nicht lösbar. Jedoch gibt es mittlerweile längst eine eigene Layoutsprache (CSS), mit deren Hilfe es möglich ist, die Darstellung (weitestgehend) unabhängig vom Inhalt zu steuern. Das bedeutet, dass man im Quelltext der Seiten wieder dazu zurückkehrt, die Inhalte nur ihrer Bedeutung nach auszuzeichnen, und Angaben zu ihrem Aussehen über die Layoutsprache CSS regelt.
Diese technische Trennung von Inhalt und Layout ist gerade vor der Vielfalt der möglichen Nutzungsarten (Handybrowser, TV-Konsolenbrowser, Netbook, PC, Vorleseprogramm, Braillezeile usw.) besonders sinnvoll, da so mit den heute verfügbaren Mitteln die ursprüngliche Information einer Internetseite an das jeweilige Gerät angepasst ausgegeben werden kann. Ein Layout, das auf einem PC-Monitor bei einer im Vergleich zu den Anfängen des Internet mittlerweile sehr hohen Auflösung im maximierten Browserfenster geradezu winzig aussieht, sprengt dagegen eventuell die verfügbare Anzeigefläche auf dem Display des Mobiltelefons, wenn der dort verwendete Browser die Seite nicht mit einem Zoom entsprechend verkleinert anzeigen kann.
Wenn mit Geräten für Sehbehinderte auf Internetseiten zugegriffen wird, dann ist jegliche Frage des Layouts ganz plötzlich irrelevant, da ein Benutzer beispielsweise nur eine Braille-Zeile als Ausgabegerät nutzen kann - oder eine Software, die die Inhalte laut hörbar vorliest.
Ein Webseitenschaffender muss sich heute also bewusst sein, dass die visuelle Präsentation von der reinen Information technisch getrennt realisiert werden sollte. Es ist zwar kein muss, da es „auch anders geht“, aber eine solche Vorgehensweise hat viele Vorteile.
Unabhängig davon wie die Inhalte später einmal auf der Seite dargestellt werden sollen, ist eine grundlegende Reihenfolge dieser Inhalte im Dokument nicht unerheblich. Seiten wie Wikipedia zeigen z. B., das sie den eigentlichen Inhalt der Seite zuerst notieren, um erst im Anschluss daran feste Seitenbestandteile wie die Navigation oder das Suchfeld anzuführen. Und sollte die Darstellung einmal irrelevant sein (Suchmaschinen, sehbehinderte Besucher mit alternativen Ausgabemedien), dann ist diese Reihenfolge der Inhalte umsomehr empfehlenswert.
Mit der Layoutsprache CSS lassen sich sogenannte Stylesheets definieren. Das ist nichts anderes als eine Formatvorlage. In einer solchen Datei stehen Anweisungen, wie bestimmte Elemente einer Seite auszusehen haben. Dabei ist es nun auch möglich, für verschiedene Ausgabemedien entsprechend angepasste Stylesheets zu verwenden. Beispielsweise lässt sich ein eigenes Druck-Stylesheet erstellen, das ganz ohne zusätzliche Links auf einer Seite eine für den Druck optimierte Darstellung regelt.
Das „Problem“ an CSS ist, dass man mit Programmen wie Dreamweaver, Frontpage, Adobe GoLive und dergleichen nun nicht mehr sinnvoll arbeiten kann, da ihre WYSIWYG-Ansicht Benutzereingaben nicht sinnvoll in semantischen Code mit passendem Stylesheet umwandeln kann. Diese Aufgabe ist so komplex und erfordert so viele individuelle Lösungen, dass ein Automatismus hier nicht greift. Selbst wenn diese Programme alles mögliche versprechen, so zeigt sich doch in der Praxis, dass diese Versprechen nicht oder kaum gehalten werden können. Es ist bei CSS anscheinend immer Handarbeit gefragt.
Wie CSS genau funktioniert, kann hier nicht weiter behandelt werden, dazu gibt es weitaus kompetentere Anleitungen im Internet: SELFHTML: Stylesheets und HTML
In externe Dateien ausgelagerte Stylesheets lassen sich selbstverständlich von jeder Seite aus einbinden. Damit ist es möglich, das Aussehen einer Website zentral zu steuern. Ebenso wird damit gewährleistet, dass alle Seiten einer Webpräsenz visuell einheitlich gehalten sind.
Weiterhin muss man nicht das Layout im Quelltext der Seite (also dort, wo eigentlich nur die blanke Information abgelegt sein sollte) ständig mit sich „herumschleppen“, was zu schlankerem Code, verringerten Datenmengen bei der Übertragung der Seiten zum Besucher, und eine deutlich einfachere Wartbarkeit der Seite führt.
Die Grundlage für ein erfolgreiches Layout ist sinnvolles Markup - also sinnvoll erstellter HTML-Code. Dabei ist insbesondere zu berücksichtigen, dass hier semantisch, also die Bedeutung von Inhalten herauskehrend, vorgegangen wird. Wie man das macht, wird an anderen Stellen im Internet hinreichend beschrieben.
Wenn ein Dokument semantischen Code beinhaltet, dann kann man damit zwar schon schöne gestalterische Effekte erzielen, jedoch benötigt es mehr, als nur semantischen Code. Die Informationen müssen auch noch „strukturiert“ werden.
Je nach gestalterischen Absichten kann es notwendig sein, doch am HTML-Code der Seite Erweiterungen vorzunehmen, damit layouttechnische Vorhaben im Zusammenspiel mit CSS überhaupt umgesetzt werden können. Hier spätestens kann es für Laien sehr verwirrend sein, da doch eine anscheinend hermetische Trennung von Markup und Layout gefordert worden war… aber das ist nun einmal das Internet. Es entwickelt sich weiter.
Als es keine anderen Möglichkeiten gab, hat man Tabellen benutzt, um Inhalte auf einer Seite zu positionieren. Verschiedene Programme zur Webseitenerstellung tun dies noch heute. Mit dieser Vorgehensweise wurde recht verlässlich dafür gesorgt, dass auf dem Bildschirm die Inhalte an den vorgesehenen Stellen zu liegen kamen. Damit wurde zwar die Bedeutung der Inhalte nicht besonders sinnvoll ausgezeichnet (ein Denken in Printmedien!), jedoch „sah“ die Seite „aus“, wie man sich das wünschte.
Mit CSS hat man nun wesentlich flexiblere und mächtigere Möglichkeiten, Elemente auf der Seite zu positionieren. Trotzdem muss man noch immer Elemente in den Quelltext aufnehmen, die die Inhalte entweder zu größeren Sinnabschnitten gruppieren, oder aber neue und leere Elemente (also sprichwörtlich sinnfreie und nichtssagende Elemente) einfügen, um spezielle darstellungstechnisch notwendige Möglichkeiten zu schaffen.
Wie das im Detail aussehen kann oder gar muss, lässt sich in den Beispielen sehen, die bei dieser Einführung in Layouts mit CSS angeführt werden.
Auch wenn sich das Prinzip der Trennung von Inhalt und Layout nicht wirklich strikt umsetzen lässt, so ist es doch eine Maxime, die es anzustreben lohnt. Vor allem im Hinblick auf das Gestalten mittels Grafiken ist eine strenge Überlegung sinnvoll, ob die jeweilige Grafik ein Element des Inhalts ist (eine Illustration, ein Schaubild o.ä.), oder ob es ein rein schmückendes Element der gesamten Gestaltung der Seite ist. Im letzteren Falle gehört diese Grafik als Hintergrundbild eingebunden und wird über CSS gehandhabt.
Ein komplexes Ineinanderverschachteln von Hintergrundfarben und Hintergrundbildern kann für sehr effektvolle Designs sorgen. Oft wird dazu nicht notwendigerweise viel an zusätzlichem und - wie bereits angesprochen - sinnfreiem Markup benötigt, sondern es kann auf bereits vorhandene Dokumentstrukturen eingegangen werden. Gerade bei Listen finden sich Verschachtelungen, die man ausnützen kann, ohne künstliche Containerelemente im Quelltext zu schaffen.
In vielen CMS werden zwangsläufig Vorlagen verwendet. Diese Vorlagen stellen ein Grundgerüst dar, welches eine Dokumentstruktur bereitstellt, in die dann die Inhalte aus einer Datenbank o.ä. eingefügt werden. Daher ist es besonders wichtig, dass das Template im Zusammenhang mit dem Stylesheet der Website mit semantischem Code erstellt wird. Leider ist das bei vielen vorgefertigten Templates nicht der Fall. Oft werden auch Änderungen vorgenommen, die die Semantik völlig außen vor lassen. Auch wenn die Dokumentstruktur sich nicht ausschließlich an der Semantik der Inhalte orientieren kann, so sollte sie doch deshalb nicht gleich weitestgehend darauf verzichten!
Gerade bei vorgefertigten Templates sollte jeder, der sie einsetzt, sehr genau prüfen, wie sinnvoll sie umgesetzt sind. Denn je sinnvoller solche Templates angelegt sind, desto leichter sind sie im Bedarfsfalle anzupassen und zu pflegen!
Das Layouten einer Internetseite ist kein triviales Unterfangen. Wenn man es „richtig“ machen will, dann bleibt im Grunde nur das Anstreben eines unerreichbaren Ideals. Aber der Weg zu diesem Ideal bringt einige Segnungen mit sich, die diese komplexe und herausfordernde Aufgabe lohnen. Dabei gilt es alte Denkweisen zu überwinden und aktuelle Technologien gezielt und bewusst einzusetzen.
Gerade hier ist der sprichwörtliche Meister noch nicht vom Himmel gefallen. Außerdem entwickeln sich diese Technologien immer weiter. Dazu gehört natürlich auch, dass aktuelle Browserprogramme diese Technologien unterstützen. Denn was nützt es einem Webseitenschaffenden, wenn er eine Seite nach Standards gestaltet hat, die Browser dieses aber nur unzureichend umsetzen? Von daher muss auf diesem Gebiet viel Erfahrung gesammelt werden, wenn man anspruchsvolle Layouts sinnvoll und gewinnbringend erstellen möchte.
Weitere Artikel zum Thema "Website erstellen":
Weitere Tipps zu Jimdo:
school website