Das Webwriting-Magazin

- Über das Publizieren im Web -

 

www.webwriting-magazin.de

Newsletter Forum Kontakt
Zur Druckversion

Die Druckversion ist voll navigierbar und macht den gesamten Informationsumfang des Dokumentes auch dann zugänglich, wenn Ihr Browser das Layout nicht darstellen kann.

Michael Charlier:

Tabellenfrei und pixelgenau?

Von einem, der auszog, dem WWM ein CSS-Design zu verpassen

Als wir vor bald 2 Jahren das Webwriting-Magazin begonnen haben, schrieben wir frohgemut, es ginge uns um Inhalte und nicht um Technik. Im Prinzip ist das auch heute noch so - aber wir haben einiges dazu gelernt. Technik ohne Inhalt - das zeigen tausende von nervigen Flash-Intros - ist für den Eimer oder zumindest für den Skip-Button. Aber Inhalt ohne Technik oder mit zuwenig Technik oder mit der falschen Technik ist auch nicht das Wahre. Die Standards, die wir vor zwei Jahren unbekümmert links liegen ließen, sehen wir jetzt mit anderen Augen an, und welche Vorteile es bietet, strukturierte Dokumente mit einer weitgehenden Trennung von Inhalt und Darstellung zu produzieren, haben wir auch erst allmählich gelernt. Einige dieser Erfahrungen, die uns jetzt zu einem gründlichen Redesign von Webwriting bewogen haben, will ich hier mitteilen.

Autor Martin Butz
betreibt mit einem Partner die "internetwerke köln" GbR, die im Web unter www.sym.net zu erreichen ist. Ein Besuch sei empfohlen.

Einen guten Ansatzpunkt dazu bietet der Artikel von Martin Butz über Navigationssysteme, den wir hier "nachdrucken" oder wie man das im Web immer nennen soll. Als Martin uns irgendwann im April (!) fragte, ob wir Interesse an seinem Text hätten, war ich sofort begeistert - bloß daß der Artikel für uns doch etwas kürzer sein sollte und ich ihn dann auch noch für das Layout des WWM anpassen müßte. Und damit fing das ganze Elend an. Martin hat zwar seinen Text so geschrieben, wie wir das eigentlich für das WWM auch tun: Mit erläuternden Illustrationen und Anmerkungen am Rand und zusätzlichen Informationen, die in einem eigenen Fenster aufpoppen. Bloß, daß bei seiner Seite der Haupttext links und die Anmerkungen rechts stehen, wärend es beim WWM umgekehrt zugeht. Und da beide Layouts auf Tabellen beruhen, hieß das, daß der Text Zelle für Zelle von dem einen Layout ins andere transportiert werden müßte.

Gar nicht so lustig. Dabei sind beide Layouttabellen nicht übermäßig kompliziert - sie lassen sich in einem Textbrowser wie Lynx noch recht gut in linearer Form darstellen. Beim Ausdruck schneiden beide ein wenig von der rechten Spalte ab - beim WWM wirkt das störender, weil rechts die Hauptspalte ist, beim Navigationsartikel im Ursprungslayout waren nur einige Anmerkungszeilen betroffen.


Der Trickist ganz einfach: Erst das HTML - dann Javaskript - und schon klappts auch mit dem Lynx.

Und beide Layouts teilen noch einen bei Popups naheliegenden schlimmen Mangel: Die Links sind so Javascript-fixiert ausgeführt, daß sie in einem Browser, der kein JacvaScript kann, nicht funktionieren. Obwohl das, wie in der jetzigen Fassung zu sehen ist, gar nicht nötig wäre.

Wenn alles stimmt - und trotzdem nichts geht

Also: Martins Text hatte genau die Textstruktur, die das WWM mag. Er war in einer exakt äquivalenten Weise in HTML umgesetzt - sogar die Schwachpunkte waren die gleichen. Und trotzdem konnten wir den Text nicht "einfach so" übernehmen, weil wir uns in einer völlig unwesentlichen Geschmacksfrage im Layout voneinander unterscheiden: Hauptspalte rechts oder Hauptspalte links!

Gut, so etwas zellenweise umzukopieren ist kein ernsthaftes Problem, das macht der Praktikant an einem Nachmittag und lernt vielleicht sogar noch was dabei. Aber erstens 'abe ich gar keine Praktikant, und zweitens muß ich nur einmal Stichworte wie "Content Syndication" oder "Redaktionssystem" vor mich hin murmeln, damit jeder sieht, daß Praktikantenpower auf die Dauer keine Lösung des Problems sein kann.

Die Lösung, das lag auf der Hand, waren CSS, und da für das WWM ja ohnehin ein Redesign auf der Tagesordnung stand, war klar: Der Artikel von Martin Butz wäre der erste, der im neuen CSS-Design erscheinen sollte. Und so gingen die Monate ins Land.

Sieht alt aus - ist aber ganz neu

Einige Abweichungen
sind beabsichtigt. Die Schrift der Menüs ist etwas größer als vorher, der Javaskript-Effekt ist durch ein CSS-Hover ersetzt. Anderes haben wir beim besten Willen nicht hingekriegt: Der kleine schwarze Strich rechts vom oberen Button "Links" will nicht weg, und wo der obere "So geht's" richtig hovert, streikt der untere hartnäckig.

Wer es bis hierhin noch nicht gemerkt hat: Dieser Text und der Artikel über die Navigation sind tatsächlich in einem tabellenlosen rein css-basierten Remake des bisherigen Layouts ausgeführt - an einigen Details wird noch gearbeitet. Dieses Layout wird von den aktuellen größeren Browsern für Windows (IE 5.5 und 6, Netscape 6, 7 und andere Geckos sowie Opera 5 und 6) nahezu pixelgenau wiedergegeben - das zeigt, daß CSS-Design durchaus schon reif für den Einsatz in der Praxis ist. Andererseits: Auf den aktuellen Explorern für den Mac treten noch einige böse Quirks auf, und auch Netscape/Mozilla und Opera zeigen dort noch nicht genau das, was wir haben wollen. Wir sehen, daß man beim Einsatz von CSS in der Praxis noch nicht alles machen kann, was man gerne machen möchte. Zumindest nicht mit vertretbarem Aufwand.

Das liegt nicht an Schwächen des Konzeptes CSS und nicht an mangelnder Fähigkeit oder fehlendem Einsatzwillen des Coders, sondern daran, daß die Browser bzw. ihre Entwickler plattformübergreifend noch nicht so weit sind, wie wir sie gerne hätten. Doch darüber zu klagen ist fruchtlos. Wir werden deshalb diesen Ansatz der möglichst weitgehenden Nachbildung des bestehenden Designs nicht weiter verfolgen. Stattdessen werden wir für das Redesign ein Layout entwerfen, das nicht auf pixelgenaue Wiedergabe auf (fast) allen Plattformen abzielt, sondern die Vorteile von CSS-Designs hinsichtlich der Flexibilität der Präsentation stärker zur Geltung bringt - und das Plattformen übergreifend.

Vorteile der Flexibilität nutzen

Ein Blick in den Quellcode
zeigt, wie einfach das Markup ausgefallen ist. Das gesamte Layout steckt in den Styles.

Bei diesem Layout werden wir dann auch noch stärker die Erfahrungen berücksichtigen, die sich aus der Arbeit mit den von uns bevorzugten Dokumentenstrukturen ergeben. Warum - so eine Überlegung - sollen wir die Breite der Spalten nicht flexibel gestalten, so daß wir bei einem Dokument mit vielen Randbemerkungen dort mehr Raum zur Verfügung stellen als bei einem, das ganz darauf verzichtet?

Das neue Layout wird übrigens, wenn es denn fertig ist, nicht mit einem "Relaunch" des WWM verbunden. Die bisherigen Beiträge werden auch im bisherigen Layout stehenbleiben, warum sollten wir die Entwicklung nachträglich unsichtbar oder gar ungeschehen machen wollen. Höchstens den jetzt in einem klar strukturierten Markup vorliegenden Text von Martin Butz werden wir dann auch zusätzlich ins neue Layout packen, um zu sehen, ob sich das wirklich weitestgehend mit einem Austausch des Stylesheets abtun läßt.

Das Netz besteht aus Links - aber nicht nur

Bleibt zum Schluß die Frage, warum wir uns - nicht zum ersten Mal - überhaupt die Mühe geben, einen bereits anderswo verwebbten Text ins WWM zu transportieren, statt ein Link mit einer freundlichen Empfehlung zu setzen. Nun, wir gehen davon aus, daß viele Besucher nicht deshalb hierhin kommen, um irgendwelche Links zu betätigen - davon haben sie selbst schon genug. Sie wollen wissen, was im Webwriting-Magazin zu bestimmten Themen steht, und das wollen sie hier lesen - auch wenn es von jemandem geschrieben ist, den sie vielleicht bisher nicht kannten.

Also setzen wir gelegentlich bereits veröffentlichte Texte, wenn sie uns gut gefallen, auch ins WWM. Davon können alle Beteiligten nur profitieren. Wir gewinnen schöne Beiträge und zusätzliche Perspektiven, ohne sie selbst schreiben zu müssen - und vieles könnten wir auch selbst gar nicht behandeln. Ein Beitrag, der an einer anderen Stelle vielleicht weniger oft gefunden worden wäre, gewinnt zusätzliche Leser, und für das Suchmaschinenranking sind die mit der Aktion verbundenen gegenseitigen Erwähnungen auch von Vorteil. Der ganz altmodische Nachdruck, die Übernahme von Texten von einem Veröffentlichungsplatz zu einem anderen, ist auch im Internet durchaus sinnvoll. Vernetzung bedeutet mehr, als ein Link zu setzen.