Tabellen, Spalten und Weblogs vs. Hypertext
Gedanken hinsichtlich einer Befreiung moderner Layouts vom Ballast vergangener Zeiten
Inhaltsübersicht
- Die Layouttabelle einst und heute
- Aktueller Stand hinsichtlich Markup und Design
- Analyse typischer Templates hinsichtlich der Platzverteilung
- Fragwürdiger Nutzen überbordender Sidebars
- Fazit: Nachbau von Tabellen- und Frameset-Funktionalität
- Alternative: Hypertext ist Navigation
- Leseempfehlungen
Die Layouttabelle einst und heute
Mit HTML 3.2 wurden Tabellen als Gestaltungsmöglichkeiten eingeführt und fortan weidlich genutzt. Sie ermöglichten es, Bereiche voneinander abzugrenzen und Elemente ohne großen Aufwand zu positionieren. Tabellen schränken jedoch die Flexibilität der Inhalte gehörig ein, wie Mathias Schäfer im Beitrag Grundlagen für Spaltenlayout mit CSS bereits ausführte. Ferner erschweren Layouttabellen
- die Erstellung von Drucklayouts sowie
- die Darstellung auf mobilen Endgeräten mit begrenzter Anzeigefläche
und erzwingen damit eine aufwändigere serverseitige Generierung für beide Medientypen, um zwei weitere gewichtige Nachteile zu nennen. Tabellen als Gestaltungsmittel gelten daher zu Recht als veraltet und werden zunehmend von CSS-basierten Layouts wie YAML verdrängt, wobei die CSS-affine Blogging-Szene eine Vorreiterrolle spielt.
Aktueller Stand hinsichtlich Markup und Design
Analysiert man das von weit verbreiteten Weblog-Systemen generierte Markup, stößt man größtenteils auf validen Quelltext. Ferner wird (X)HTML zur logischen Auszeichnung eingesetzt und per CSS formatiert. Insofern brachten Weblogs aus technischer Sicht eine Qualitätssteigerung mit sich.
Was die grafische Umsetzung betrifft, steht die Entwicklung meines Erachtens jedoch noch weit hinter der des Markups zurück. Ein großer Teil der Betreiber bindet auf jeder einzelnen Seite eine umfangreiche Navigation ein, zumeist wird diese in einen Kopfbereich (»Header«) mit Logo, einen oder mehrere Seitenbereiche (»Sidebars«) und einen Fußbereich (»Footer«) aufgeteilt.
Analyse typischer Templates hinsichtlich der Platzverteilung
Untersucht man beispielsweise die der Weblog-Software Wordpress beiliegenden Themes, fällt auf, dass sie allesamt einen Kopfbereich und zwei Spalten aufweisen. Andere Aufteilungen oder sidebar- und damit spaltenlose Vorlagen werden gar nicht erst mitgeliefert. Der für den Inhalt zur Verfügung stehende Platz reduziert sich damit mindestens um ein Drittel, oft sogar um knapp die Hälfte des gestalteten Bereichs.
Die abgebildeten Screenshots erfolgten bei einer Fenstergröße von 1.280 · 1.024 Pixel im Vollbildmodus und zeigen damit einen vertikal überdurchschnittlich großen Bereich. Berücksichtigt man, dass Browser nicht nur den eigentlichen Seiteninhalt anzeigen, sondern auch Titel-, Navigations-, Menü- und Adressleisten aufweisen, verschlechtert sich die Bilanz noch weiter.
Zur besseren Erkennbarkeit wurden Inhaltsbereiche grün und wiederkehrende Navigationsbereiche gelb eingefärbt. Bei der Berechnung der Prozentsätze wurde ungenutzte Fläche, die sich aus einer dem Lesefluss dienlichen Beschränkung der Breite (max-width
) ergibt nicht berücksichtigt.
Wordpress-Template »Almost Spring«
Aufgrund des schlanken Kopfbereichs verbleiben dem Inhalt 64 %, der Navigation 36 % der gestalteten Fläche. Positiv hervorzuheben ist, dass die Navigation dezent gestaltet wurde und die Aufmerksamkeit nicht unnötig ablenkt. Der eigentliche Inhalt steht hier noch im Vordergrund.
Wordpress-Template »Blix«
Ein höherer, aber noch nicht übertrieben großer Header beschränkt den Inhalt auf 53 %, bereits 47 % beansprucht die Navigation und die darin enthaltenen auffälligen Überschriften ziehen das Auge an.
Die weiteren Standard-Layouts bewegen sich im Rahmen der oben angeführten Werte, etwas darunter liegen Vorlagen, die zwei Sidebars aufweisen und damit drei Spalten simulieren. Ein exemplarisches Drei-Spalten-Layout:
Dem Inhalt steht mit 47 % bereits weniger Raum zur Verfügung als der Navigation mit 53 %.
Dieses Ergebnis lässt sich auf andere Weblog-Systeme übertragen, da die Templates alle ähnlich aufgebaut sind. Analysiert man die Layout-Vorlagen von Wordpress, Textpattern, Movable Type, Serendipity, Drupal usw., so besteht die überwältigende Mehrheit aus zwei oder mehr Spalten. Der Verzicht auf Sidebars ist derzeit die absolute Ausnahme.
Fragwürdiger Nutzen überbordender Sidebars
Weblog-Systeme erlauben die serverseitige Einbindung von wiederkehrenden Inhalten auf jeder Seite. Typische Beispiele sind Navigationsverweise im engeren (Kategorien, aktuelle oder verwandte Beiträge, usw.) und weiteren Sinn (Kalender, chronologisches Archiv, Feeds, Blogroll, Tags, soziale Lesezeichen, Kommentar-Exzerpte usw.).
Es mag dabei verlockend sein, möglichst viele Zusatzangebote unterzubringen, um den Besuchern eine breite Auswahl anzubieten und eigene oder fremde Inhalte zu bewerben. Bei übertriebenem Einsatz entsteht jedoch schnell eine unansehnliche Linkwüste:
Hier ist Selbstbeschränkung anzuraten. Verweise sind Leseempfehlungen und von daher mit Bedacht auszuwählen und zu präsentieren, zumal es sich um keine einseitigen Verknüpfungen handelt. Interessante Verweisziele steigern aus Sicht der Besucher die Qualität des eigenen Angebots. Inflationäre Verwendung hingegen »entwertet« nicht nur den Inhalt sowie jeden einzelnen Navigations-Link, sie wird entweder ignoriert oder stellt Besucher vor die schwer zu bewältigende Hürde, das wirklich Relevante aus dem Überangebot herauszufiltern. Wie Stefan Münz schon 1997 formulierte:
Der Navigierende orientiert sich an den angebotenen Verweisen. Wenn die Verweise nicht "intelligent" sind, keinen kontextuellen Zusammenhang herstellen, droht der Navigierende die Orientierung zu verlieren und in jenen Zustand zu geraten, den man in der Hypertextliteratur als "Lost in Hyperspace" - verloren im Hyperraum - bezeichnet.
Eine schnell auffindbare, dezente und leicht verständliche Navigation sowie projektinterne und -externe Verweise sind ohne Zweifel wichtige Bestandteile von Web-Präsenzen, doch gebührt ihnen nicht mehr Aufmerksamkeit als dem Inhalt. Selbst bei Zurückhaltung ergibt sich ein Konflikt daraus, Sidebars eine dermaßen hohe Bedeutung zuzumessen, deren Inhalt ständig wiederkehren zu lassen und sich gleichzeitig optisch (mittels visueller Trennung) und inhaltlich (mittels wenig informativer Kurztexte) von ihnen zu »distanzieren«.
Es drängt sich die Frage auf, was Autoren dazu bewegt, das Angebot dermaßen auszuweiten. Liegt es an der Möglichkeit, ohne großen Aufwand Plugins installieren zu können? Oder handelt es sich um einen zu gut gemeinten Versuch, Besucher an die eigene Präsenz zu binden oder gar erst anzuziehen? Dies ist ein legitimer Wunsch, denn interessiertes Publikum ist letztlich das Ziel jedes Weblogs und die Konkurrenz ist groß. Meine Ansicht ist, dass zwei Verweise auf relevante Seiten diesbezüglich mehr Erfolg haben werden als 20 Verweise auf Beiwerk. Klasse statt Masse sollte die Maxime lauten, nicht »Käufer des aktuellen Artikels interessierten sich auch für …«.
Die Ausdünnung des Angebots hat nicht nur für die Leserschaft einen zweifelhaften Nutzen, sie beeinträchtigt sogar in besonderem Maße Suchmaschinen, die noch viel schlechter erkennen, wo sich »das bisschen Inhalt« versteckt.
Fazit: Nachbau von Tabellen- und Frameset-Funktionalität
Die Entwicklung flexibler und hinreichend browserkompatibler CSS-Layouts führte zu validem Quelltext und skalierbaren Webseiten, die in allen Ausgabemedien gute Dienste leisten und dem Publikum einen deutlichen Mehrwert bieten. Bei den meisten Templates handelt es sich jedoch immer noch um einen – wenn auch mit modernen Mitteln umgesetzten – Nachbau von Layouttabellen (Header, Sidebar, Footer) mit Frameset-Funktionalität (ständig wiederkehrende Bausteine). Althergebrachte Design-Richtlinien, die größtenteils noch immer auf Tabellendenken basieren, werden nicht in Frage gestellt.
Punkte, die man als Betreiber bei der Konzeption eines entsprechenden Online-Angebots vorab klären sollte, sind aus meiner Sicht:
- Benötige ich auf jeder Seite einen umfangreichen Navigationsbereich? Oder gar mehrere?
- Ist sichergestellt, dass Zusatzangebote, die sich größtenteils nur indirekt auf die aktuelle Seite beziehen nicht vom Inhalt ablenken?
- Sind alle Verweise relevant?
- Würdigen knapp gehaltene Linktexte das Verweisziel in ausreichendem Maße?
- Werden Sidebars von der Zielgruppe überhaupt wahrgenommen?
- Beachte ich selbst beim Besuch anderer Weblogs deren Sidebars?
- Will ich, obwohl ich Layouttabellen ablehne diese mittels CSS samt Workarounds nachbauen?
- Ist es daher erforderlich, meine Site in Zellen und Spalten aufzuteilen?
Alternative: Hypertext ist Navigation
Bei umfangreichen Projekten, wie sie Weblogs mit häufigen Einträgen darstellen, ist es eine herausfordernde Aufgabe, schlüssige Navigationsmöglichkeiten zu implementieren, die neuen Besuchern den Zugang zu älteren Beiträgen ermöglichen. Sollte man sich dabei nicht besser auf das Wesen von Hypertext verlassen, Navigationsmechanismen auslagern, ausbauen und schlussendlich auf Spaltenlayouts verzichten?