Die Lösung: OOCSS

Die Webentwicklerin Nicole Sullivan versucht mit ihrer Objektorientiertes CSS (OOCSS) genannten Methode einen Lösungsansatz zu finden.
OOCSS versucht die Idee der Objektorientierung auf CSS zu übertragen. Objektorientiertes CSS ist dabei keine neue Technik, sondern vereint eine Reihe von Regeln für die Gestaltung von CSS-Dateien. Grundgerüst von OOCSS ist eine von Nicole Sullivan auf ihrer GitHub Projektseite bereitgestellte Code-Bibliothek im Alpha-Stadium. Um das CSS-Framework einsetzen zu können, müssen wie schon erwähnt einige Regeln beachtet werden.
Die zwei wichtigsten:

• Trenne Container und Inhalt
  Gemäß Sullivans Terminologie bildet ein simpler HTML-Tag (z.B. <h1>, <p>, <li>, …) mit zugehörigem CSS einen Inhalt. Komplexere Strukturen bestehend aus mehreren <div>-Elementen werden als Container bezeichnet. Ordnet man diesen Containern jetzt noch über mehrere CSS-Klassen Layout und Design (Skins) zu, dann entstehen Sullivans Objekte.

• Trenne Struktur und Design
  Nicole Sullivan bezieht sich hier auf das CSS von Containern und Inhalten. Durch die Verwendung unterschiedlicher Klassen für Layout- und Design-Elemente wird die Wiederverwendbarkeit von Objekten in anderen Projekten ermöglicht.
  

Generell sollten CSS-Deklarationen vermieden werden, die HTML-Elemente in Abhängigkeit eines Containers bringen. Also keine derartigen Konstrukte:

Alle CSS-Anpassungen werden ausschließlich über Klassen vorgenommen, die einander erweitern. Beispiel:

HTML:

Weiters empfiehlt Sullivan bevorzugt Klassen statt IDs zu verwenden und Selektoren ohne Tags zu schreiben (.box statt div.box).
Grund: Einsatzmöglichkeiten erweitern, Redundanzen im Code minimieren.

OOCSS in der Praxis

Sullivans CSS-Framework besteht derzeit aus 12 CSS-Dateien, von denen drei nur zum Debugging verwendet werden. Einen guten Ausgangspunkt für eigene Entwicklungen bildet die Datei template.html, die das Grundlayout umsetzt und als Basis für alle weiteren Seiten dient.
Die Breite der linken und rechten Spalte wird beispielsweise durch Erweiterung des Spalten-Objektes gesetzt:

HTML:

Don’t think of this as overwriting my classes, but rather extending the objects provided by the framework. I give you columns, headings, and other objects. You can extend those objects by adding another class that only specifies the differences between my base object and your implementation of the same. Mixins may be a good analogy here.

Wichtig dabei ist, dass Sullivans CSS-Deklarationen unberührt bleiben!
Die Klasse .leftCol im Beispiel sollte also keinen eigenen CSS-Code erhalten. Schon allein deshalb nicht um schnell und unkompliziert ein Update des Frameworks durchführen zu können.

Mit Grids können die Seiten weiter in kleinere Bereiche unterteilt werden. Beispiel:

Sobald das Raster einer Seite aufgebaut ist, können Inhaltsobjekte wie Überschriften, Absätze, Listen, usw. der Datei content.css hinzugefügt werden. Die Datei konzentriert sich hauptsächlich auf die Definition von Ausrichtungen, Abständen, Listendarstellungen, Schriftgrößen, Schriftfarben und dem Verhalten von Links.

Module und Skins

Besonders interessant ist die Datei module.html, die einen Überblick über die mit dem Framework realisierbaren Blockstrukturen gibt. Sullivans HTML-Grundgerüst für alle Arten von Boxen schaut wie folgt aus:

Durch Kombination dieses Containers mit drei verschiedenen CSS-Klassen entstehen drei OOCSS-Module. Für jeden der drei Container gibt es wiederum eigene Skins, die den Rand und die Hintergrundbilder der Boxen definieren. Eine vollständige Komponente besteht aus bis zu vier Klassen, von denen die letzten beiden für Skin und Hintergrund sorgen.

würde unsere Box folgendermaßen darstellen:

Mit Sullivans Grundformen lassen sich bereits über 200 verschiedene Boxen generieren. Das CSS-Framework bietet auch schon einige Styles für Tabs und “Sprechblasen”.

Mein Fazit

OOCSS ist prädestiniert für die gemeinsame Erstellung von CSS-Dateien im Team und fördert die Wiederverwendbarkeit und Strukturierung von CSS-Dokumenten. OOCSS hat auch viele Kritiker, da die Regel “Trenne Container und Inhalt” in direktem Widerspruch zum CSS-Grundkonzept der Kaskade steht – jedoch wird dieses 1994 entwickelte Konzept heutigen Entwicklungsprozessen überhaupt noch gerecht?
Ich finde Sullivans Ansätze jedenfalls sehr interessant und kann mir gut vorstellen ihr Framework bei einem umfangreicheren Teamprojekt einzusetzen.

Weiterführende Links

• Object Oriented CSS video on YDN
  Eine der ausführlichsten Quellen zu OOCSS.
• OOCSS GitHub Projektseite
• OOCSS Google Group

Warum am 9. April?

Tja, dafür gibt es scheinbar ein paar ganz plausible Gründe:

• Der Tag sollte immer auf einen Dienstag, Mittwoch oder Donnerstag fallen (am meisten Traffic)
• Möglichst Anfang April, jedoch nie am 1. April (internationaler Scherz- und Streichetag)
• Es sollte ausreichend Zeit für die Ankündigung sein

Nackte Tatsachen – automatisiert

Damit man den CSS Naked Day nicht versäumt, gibt es eine sehr praktische PHP-Funktion um das Deaktivieren bzw. nicht laden der Styles zu automatisieren:

Man übergibt der Funktion den entsprechenden Monatstag (z.B. “9″ für 2009) und bekommt am CSS Naked Day true als Rückgabewert. Ist dies der Fall, muss das Einbinden der CSS-Files verhindert werden.
Hier eine mögliche Anwendung:

Hilfe, ich bin immer noch nackt!

Das oben gelistete Script setzt die “starke” Variante um. Dabei werden alle Zeitzonen berücksichtigt und man ist dann insgesamt 48 Stunden ohne Styles. Die “schwache” Version inkludiert nur die eigene Zeitzone, daher 24 Stunden ohne CSS.

Weiterführende Links

• CSS Naked Day Website
• WordPress Naked Day Plugin

Web 2.0 und Emotion

Wiewohl sich alle Werbechefs gegen “falsche Technologiegetriebenheit” aussprechen, können Web 2.0 Funktionalitäten den Nutzen eventuell doch erhöhen…

(…) “Web 2.0 umschreibt alles im Netz, was für Unternehmen nicht funktioniert”, meint gar Christoph Holz (…) Doch für Pixelution-Chef August F. Golser ist Web 2.0 sehr wohl ein Trend. Webdesign, wie es vom jungen Unterländer gemacht wird, packt den Surfer auf der Gefühlsebene. Neben Multimedia-Loops setzt er zudem auf konkrete Handlungsaufforderungen, genannt “call to action”-Elemente – und hält damit einen postmodernen Internet-User bei der Stange. So gehört Interaktivität laut Golser dazu: ob Newsletter, Kommentare oder Anfragen. Auch Kundenbewertungen, beispielsweise im Tourismus, sollten dabei sein. Der gelernte Medienkundler erblickt darin zunehmend auch ein Marketingtool. “Die Leute beobachten Blogs und Bewertungen. Das kann ein Hotel zu seinem Vorteil nutzen.” Ansonsten hängt auch er tendenziell einer geradlinigen Informationsvermittlung an. “Zeitaufwändige Flash-Animationen sind eher out”. Überholt sind auch Tabellenelemente, aus denen mit einem “gewaltigen Codeaufwand” vor Jahren Webseiten aufgebaut wurden. “Heute wird mit CSS (steht für Cascading Style Sheets) gearbeitet”, weiß Golser, dadurch werde das Design von der Struktur unabhängig. Der Vorteil: Solche Seiten funktionieren auch im Druck, am PDA, am Handy oder eben – schlechterdings Zeichen der Zeit – am iPod. Aus seiner Sicht gibt es bislang allerdings nur wenige, die CSS professionell umzusetzen wissen.

Suchmaschinenoptimierung

Google bestimmt, wer im Internet top ist, und wer floppt. Nicht umsonst, bemühen sich Webdesigner um Suchmaschinenoptimierung…

(…) “Design ist nicht so tragisch, ich will gefunden werden mit Begriffen, die auf mich zutreffen”, meint August F. Golser, von Pixelution St. Johann. Wer die Logiken der Listung kennt, kann dies mitunter gut für sich ausnützen. Prioritäten legt Google auf Domainnamen, Headlines oder Keywords.

Achja, die liebe Suchmaschinenoptimierung – klingt alles logisch und einfach, ist aber in Wirklichkeit ein sehr komplexes Gebiet und man lernt nie aus. Ähm – und das Design ist schon auch nicht zu vernachlässigen – sonst hab ich zwar Besucher auf meiner Website, aber die sind nach ein paar Sekunden wieder weg.

Nachfolgend habe ich noch einige im Artikel vorkommende Aussagen aufgegriffen…

(…) Doch zur Zeit tue sich sehr viel im Netz, wie Fabrizi beobachtet. “99 Prozent davon ist aber Müll.”
Schuld daran ist, “dass jeder kann und jeder darf”.

Ich wagte in der WIA-Ausgabe Oktober 2005 – Artikel Ein Pixel kommt selten allein – die Behauptung, dass 95 Prozent aller Webseiten Müll sind. Ist es wirklich noch schlimmer geworden?

(…) Doch Christoph Holz muss beim Surfen manchmal den Kopf schütteln: “Besser keine Webseite, bevor man einen miserablen Auftritt hat.”
“Es fehlt oft an der Bereitschaft, ins Internet zu investieren”,
so Christoph Kaspar.

Definitiv! Jedoch zum Glück erkennen mittlerweile immer mehr Leute, welches Potential eine professionelle, “arbeitende” Website bergen kann.

Die Preisfrage

Einst brachte Österreichs erster Sonnyboy-Finanzminister Karl-Heinz Grasser die Diskussion ins Rollen, was eine Webpage kosten dürfe. Die persönliche KHG-Website schlug mit satten 120.000 Euro zu Buche…

(…) Für Jürgen Birlmair startet eine Webseite für ein KMU mit zehn Mitarbeitern jedenfalls bei 7.000 Euro. Alles unter 5.000 sei jedenfalls grob unseriös.

Hmm… warum den Preis von der Mitarbeiteranzahl abhängig machen? Schlussendlich zählt für das Angebot ja primär der Umfang und die geplanten Features – Eigenwartung?, Sprachversionen?, Animationen?, aufwändige Kontaktformulare?, Videoeinbettung?, Web 2.0 Inhalte? usw.

(…) Branchenkenner Holz veranschlagt für einen Industriebetrieb zwischen 20.000 und 50.000 Euro, für einen Mittelständler gilt je nach Anforderungen die 10.000 Euro Marke. “Wenn die Website individuell sein soll”, sei es keinesfalls billiger zu haben.

• Valider (X)HTML-Quellcode
  Ein sehr wichtiges Qualitätskriterium, das auch viel über die “Sorgfalt” des jeweiligen Programmierers aussagt.
  web developer: Tools > Validate HTML [Strg+Umschalt+H]
  alternativ: manuell über validator.w3.org

• Trennung von Struktur/Inhalt und Design
  Suchmaschinen sehen kein ansprechendes Design, sondern bevorzugen einen einfachen, gut strukturierten Aufbau und bewerten die Anzahl der Schlüsselwörter in Relation zum Codeumfang.
  Vereinfacht gesagt sollten bei einer gut programmierten Seite bei deaktiviertem “Design” nur noch die Strukturelemente wie hierarchisch gegliederte Überschriften, Absätze, Aufzählungslisten, Links, Hervorhebungen und einige Content-Bilder übrigbleiben.
  web developer: CSS > Disable Styles > All Styles [Strg+Umschalt+S]
  Prinzipiell gilt, je einfacher die Darstellung, desto besser!

• Logische Struktur und Überschriften
  Bei deaktiviertem CSS sollte auch gut die Struktur der Website erkennbar sein. Besonders wichtig ist hierbei die Verwendung von gut strukturierten, logisch gesetzten und aussagekräftigen Überschriften (<h1> – <h6>). Überschriften sind auch für die Suchmaschinenoptimierung von zentraler Bedeutung.
  web developer: Outline > Outline Headings

• Druckfreundlichkeit
  Häufig entspricht es dem Wunsch der Besucher, Seiteninhalte auszudrucken. In vielen Fällen werden dabei überflüssige Inhalte (wie z.B. die Navigationselemente) mitgedruckt und der eigentliche Seiteninhalt wird am Rand abgeschnitten – ärgerlich! Gut strukturierte Webseiten machen auch im Ausdruck ein gutes Bild und ein speziell für den Ausdruck optimiertes Stylesheet ist mit geringem Aufwand realisierbar.
  check: Datei > Druckvorschau

• Vermeidung von Frames
  Die Verwendung von Frames bricht etliche Konventionen, an die sich der Webbenützer gewöhnt hat, wie z.B. die Möglichkeit, eine spezifische Website als Favorit zu speichern oder die direkte URL einem Freund zu mailen.
  Auch aus Sicht der Suchmaschinenoptimierung sind Frames sehr bedenklich.
  web developer: Outline > Outline Frames

• Keine Tabellen als Layoutelement
  Tabellen sind dazu gedacht Informationen tabellarisch darzustellen. Vielfach werden sie jedoch “zweckentfremdet” und für die Positionierung und Ausrichtung von Elementen missbraucht.
  Solche tabellen-basierten Layouts bergen jedoch gegenüber reinen CSS-Layouts viele Nachteile. Mit einem CSS-Layout wird nicht nur die Zugänglichkeit (Accessibility) sondern auch die Performance verbessert. Eine Umstellung von einem Tabellen-Layout auf ein CSS-Layout kann durchaus bis zu 70% weniger Quellcode bedeuten, was sich sehr positiv auf die Ladezeiten auswirkt.
  web developer: Outline > Outline Tables > Table Cells

• Optimierte Seitentitel
  Ein sehr wichtiges Qualitätsmerkmal ist auch die Verwendung von präzisen und aussagekräftigen Seitentiteln (<title>-Tag). Titel sollten einen Schluss auf den Textinhalt zulassen und dem Websitebesucher helfen die gesuchte Information einfach aufzufinden. Nach Nielsen (Usability-Guru) sollte ein Titel nicht länger als 60 Zeichen sein. Seitentitel wie z.B. “Willkommen auf unserer Homepage” oder “untitled document” sind absolut nutzlos.
  check: Titelzeile des Browserfensters

• Funktionalität bei deaktiviertem JavaScript
  Unter Umständen haben einige Besucher z.B. aus Sicherheitsgründen die Ausführung von JavaScript deaktiviert.
  Eine qualitativ hochwertige Seite sollte so angelegt sein, dass diese auch mit deaktiviertem JavaScript noch korrekt dargestellt wird und navigierbar ist.
  web developer: Disable > Disable JavaScript > All JavaScript

Weiterführende Links

• Qualidator Website Test
  Der Qualidator überprüft die ersten 5 Seiten einer Website mit ca. 60-70 automatischen Tests auf die Kernpunkte der Bereiche Usability (Benutzungsfreundlichkeit), Accessibility (Zugänglichkeit), SEO (Suchmaschinenoptimierung) und Quality (technische Qualität).

Grundvoraussetzung für barrierefreie Internetseiten ist die Einhaltung von Webstandards (valides HTML/XHTML). Die geforderte strikte Trennung von Inhalt (Text, Bilder usw.) und Layout erreicht man durch den korrekten Einsatz von Cascading Style Sheets (CSS).
Kompromisse beim Design sind nicht nötig.

Die Vorteile dieses Konzeptes sind kürzere Ladezeiten, hohe Browser-Kompatibilität, verbesserte Suchmaschinenplatzierungen und damit verbunden mehr Besucher und Umsatz. Weiters wird durch barrierefreies WebDesign auch die Benutzerfreundlichkeit (Usability) und Wartbarkeit der Website erhöht.

Viele Webprojekte sind derzeit noch weit von Barrierefreiheit entfernt, arbeiten mit wild verschachtelten “Tabellenmonstern” und scheitern schon beim Versuch die Informationen übersichtlich auf ein Blatt Papier zu drucken.
Gewiss ist der Wechsel von einer jahrelang praktizierten Arbeitsweise mit Old-School-Tabellenlayouts zum Layouten mit CSS nicht so einfach.
Aber die vielleicht schwierige Phase der Umstellung lohnt sich, denn CSS-Layouts bieten allen Beteiligten – den Anwendern und Sitebetreibern ebenso wie den Designern – viele Vorteile.