Direkt zum Hauptmenu |  Direkt zum Content |  Direkt zu den News 

So sieht die Seite aus, wenn man Stylesheets deaktiviert hat oder einen Browser benutzt, der damit nicht umgehen kann. Oder den wir ausgesperrt haben, weil die Software nur die Nutzung eines kleinen Teil des Leistungsvermögens von CSS zulässt. Ausführlicher?


CSS-Design

Stil - Struktur - Standard

Ein Special des Webwriting- Magazins


Mailingliste CSS-Design:

Die Liste CSS-Design hat derzeit ca. 500 Mitglieder und tauscht an starken Tagen 40-60 Mails aus. Zum Mitdiskutieren einfach eine leere Mail an css-design bei Yahoogroups schicken - und schon sind Sie dabei.

Sommer 2003: CSS-Design zum Zweiten.

Vor fast anderthalb Jahren haben wir CSS-Design online gestellt. Seitdem haben wir viel über CSS dazugelernt - genug jedenfalls, um zu sehen, daß ein gründliches Redesign dieser Seiten notwendig wurde. Unsere Besucher sehen davon wenig - die Optik der alten Layouts ist fast ohne Änderung erhalten geblieben, und auch die Texte haben wir nicht umgeschrieben. Umso größer sind die Veränderungen unter der Oberfläche.

Wir haben:

  1. Das ziemlich verkrampfte Markup der ersten Version völlig umgebaut - jetzt sieht es so aus, wie ein Markup aussehen sollte.
  2. Die Styles für die Layouts völlig neu geschrieben, Hacks und Workaround reduziert und die Cross-Browser-Fähigkeit deutlich verbessert.
  3. Auch das Konzept der Site der neuen Situation angepasst.

1. Neues Markup

Das alte Markup hatte diverse formale Mängel und war mit Klassen und Divs, an denen man Styles aufhängen können sollte, überladen. Hier haben wir gründlich aufgeräumt und ein Webdokument erzeugt, das die Vorteile der Trennung von Inhalt und Darstellung demonstrieren kann. Es gibt nur noch wenige Elemente, die speziell dem Layout zuliebe eingefügt wurden, und der Code ist deutlich verschlankt.

Wir unterscheiden jetzt bewußter zwischen Elementen, die bei der Darstellung aus dem Dokumentenfluss herausgehoben werden müssen oder können, und denen, die zweckmäßiger im Fluss bleiben. Damit können die Vorteile der verschiedenen Positionierungsarten besser genutzt und ihre Nachteile vermieden werden.

Das Markup wurde von HTML 4.1 transitional auf XHTML 1.0 strict umgestellt und entspricht den Zugänglichkeitsanforderungen von WAI AAA.

2. Neue Styles für alte Layouts

Wir haben nicht alle alten Layouts in die Neuauflage übernommen, sondern nur die, die sich in wesentlichen Punkten Ihrer Anlage unterscheiden. Außerdem sind neue Layouts mit neuen Möglichkeiten dazu gekommen. Hacks, Workarounds und unsaubere Lösungen, die nicht in allen aktuellen Browsern ordentlich dargestellt werden, sind weitgehend ausgemerzt - ganz ohne Hacks, insbesondere "Tantek" und "escaped comment" lassen sich komplexere Layouts jedoch erst dann realisieren, wenn IE 5.0 und 5.5 und Ihre Fehler weitgehend verschwunden sind.

Die Seiten sind so gestylt, daß sie in MSIE für Windows ab Version 5.0, Mozilla bzw. Netscape ab 6.1 und Opera ab 6 größtenteils sogar pixelgenau übereinstimmen. Damit sind auch Linux und Mac weitgehend abgedeckt. Allerdings können wir noch etwas Unterstützung für Mac IE 5 gebrauchen.

Netscape 4 , der nach der Statistik von Webhits im Sommer 03 nur noch von 6,4% der deutschen User eingesetzt wird, bleibt ausgesperrt. Nicht, weil wir meinen, daß man ihn überhaupt nicht berücksichtigen müßte - das kann bei kommerziellen Seiten immer noch erforderlich sein. Aber für eine Demonstration der fortgeschrittenen Möglichkeiten von CSS ist er gänzlich ungeeignet. Um zu zeigen, was immerhin für NN4 möglich ist, bieten wir einen neuen Style "Netscape 4" an. Der zeigt auf modernen Browsern ein Layout, das auch der NN4 wiedergeben kann - auf der Grundlage des gleichen Markup, versteht sich. Wer den Veteranen noch auf der Platte hat, kann ein Original NN4-Layout hier ansteuern und sich davon überzeugen.

Bei den Styles haben wir intensiven Gebrauch von Kontextselektoren gemacht. Der Nachteil: Der Umfang der Stylesheets (die aber nur einmal geladen werden müssen) hat deutlich zugenommen. Auf der Plus-Seite gewinnen wir aber nicht nur ein schlankeres Markup, sondern auch einen in den variablen Teilen extrem einfach strukturierten Code, der wirklich sehr leicht mit der Hand zu pflegen oder als Template in CMS einzubauen wäre.

3. Neues Konzept

Eine der erfreulichsten Auswirkungen des ersten Jahres Mailingliste CSS-Design ist die Tatsache, daß einige Aktivisten der Liste die Seite CSS-Technik aufgebaut haben, auf der wertvolle Informationen und Erfahrungen zum Thema zusammengetragen werden. CSS-Design kann sich daher darauf beschränken, Beispiele für gelungene CSS-Designs zu sammeln. Was wir zu CSS zu sagen haben, wird im Webwriting-Magazin zu finden sein.

Trotzdem soll auf CSS-Design das Bild einer "richtigen" Website mit Navigation und allem Drum und Dran erhalten bleiben - nur so gibt es eine realistische Demonstration der Möglichkeiten. Die Links werden dann aber hauptsächlich zu Vorstellungen oder zumindest Verlinkungen von interessanten CSS-Seiten führen. Die Zusendung von Adressen für gute Beispiele oder die Entwicklung alternativer Styles für unser Markup (download:xxx) ist höchst willkommen.

Als nächstes CSS-Thema für das WWM ist ein Artikel über den Zusammenhang zwischen Content und Layout in Arbeit. Das gehört nämlich zu den interessantesten Erfahrung der Arbeit an Markup und Styles für das Redesign dieser Seite: Schon das Markup entscheidet darüber, welche Layout-Lösungen möglich sind oder sich gar nicht bzw. nur mit großen Verrenkungen realisieren lassen. Oder umgekehrt: Wo ein bestimmtes Layout unbedingt "umgesetzt" werden muß, ist man in der Gestaltung des Markups nicht mehr frei. "Jedes Layout auf jedem Markup" ist nicht zu haben. Die Herausforderung besteht dann darin, das Webdokument so zu gestalten, daß es das vorgegebene Layout "trägt" - und dennoch auch ohne Layout ein sinnvoll lesbares und komfortabel navigierbares Dokument ergibt.

*

Den Styleswitcher haben wir für diese Seite ert mal stillgelegt - für den Vierspalter muß das Stylesheet noch angepasst werden.


Die Hauptnavigation enthält immer noch viele unbelegte Positionen. Aber wir geben uns Mühe.

Das ist neu:

Große CSS-Sites nun auch in Deutschland! Seit Ende 2002 sind die Webauftritte des Magazins "Stern" und der Deutschen Post mehr oder weniger konsequent auf CSS-Design umgestellt. Besonders bemerkenswert: Der Stern verzichtet auf ein spezielles Layout für NN4.

Als neue Plattform für CSS-Interessenten ist zum 1. Dezember CSS-Technik ans Netz gegangen. Aktivisten aus der Liste CSS-Design sammeln hier Knowhow, das sich aus Diskussionen der Liste und aus anderen Quellen ergibt.

Auch im November gab es neue große Sites in pure CSS. EZBoard zeigt ein richtig elegantes Erscheinungsbild ganz ohne Tabellen, und das tschechische Boulevard-Blatt Blesk demonstriert, daß CSS auch in weniger technischem Umfeld funktionieren.

Es geht voran: Nach Lycos Frankreich (mit tabellarischen Einsprengseln) haben im Oktober Wired News und die US-Sport-Newsseite USCHO auf völlig tabellenfreies CSS-Design umgestellt. Dort bekommt NN4 nur noch Magerkost. Seit November ist auch die Wired-Hauptseite im neuen Layout gebaut.

Lycos Europe hat einen völlig tabellenfreien CSS-Prototyp erarbeitet, der allerdings in dieser Form nicht umgesetzt werden wird.


Anderes Layout gefällig? Bitte sehr!

Mit dem Styleswitcher können Sie zwischen völlig unterschiedlichen Layouts wählen, die alle eines gemeinsam haben: Sie sind ganz und gar mittels CSS erzeugt, also ohne das HTML-Dokument auch nur anzufassen. Ein Blick in den Quellcode beweist es: Nicht einmal die verschiedenen Bildelemente sind dort "fest gecodet". Wer die Datei ganz OHNE Styling ansehen will, wird im Styleswitcher ebenfalls fündig. Mehr dazu auf der Erklärungsseite. (Noch bzw. wieder in Arbeit)