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

St. Johann in Tirol als Mittelpunkt der Welt

Folgendes Beispiel zeigt eine erweiterte Anwendung von Google Maps – die Darstellung wurde um Bedienelemente ergänzt und als Marker wurde mein Logo verwendet. Jeder Klick auf die Karte erhöht den Zoomlevel um einen Grad.

Im Zusammenhang mit Suchmaschinenoptimierung gibt es eine wichtige Unterscheidung in sogenannte On the Page und Off the Page Ranking-Kriterien. Die On the Page Kriterien werden ausschließlich durch den Seitenaufbau bestimmt (z.B. durch den Header der Seite, Verlinkung, Überschriften usw.). Off the Page wird im Gegensatz dazu rein durch die Linkstruktur (sowohl seiteninterne als auch externe Links) bestimmt und ist somit nicht direkt beeinflussbar. Der wohl bekannteste Vertreter für diese Ranking-Kategorie ist das PageRank-System von Google.

Keyword Recherche

Das Ermitteln relevanter und passender Keywords ist wohl die wichtigste Tätigkeit einer jeden Suchmaschinenoptimierung. Man sollte sich vorerst selbst die Frage stellen,

was würde ich bei einer Suchmaschine eingeben, wenn ich nach meinen Produkten bzw. meinen angebotenen Leistungen suchen würde?

Ergänzt man diese durch “Brainstorming” ermittelten Schlüsselwörter mit denen, die man beispielsweise durch Auswertung von Google AdWords erhalten hat, ist das schon mal ein guter Ausgangspunkt für die nachfolgende Optimierung.

Im nächsten Schritt sollte man diese ermittelten Schlüsselwörter bei den wichtigsten Suchmaschinen eingeben und die Ergebnislisten begutachten. Bieten die am besten gereihten Sites ähnliche Produkte und Dienstleistungen, dann hat man wohl ein lukratives Gebiet gefunden und kann beginnen seine eigenen Seiten dahingehend zu optimieren.

Gewiss kann man sich von den bestgereihten Einträgen bereits einiges abschauen. Besonderes Augenmerk sollte man hierbei auf den <title>-Tag, Meta-Angaben, Überschriften (<h1> – <h6>), Hervorhebungen (<b>, <i>, <strong>, <em>) und Linktext legen.

Suchmaschinenfreundliches Design

Nachdem man sich eine Liste mit Keywords zurecht gelegt hat, muss man diese Schlüsselwörter nun den einzelnen Seiten des Webauftritts passend zuordnen. Als Faustregel sollte man jeder Seite nicht mehr als 3 wichtige Suchbegriffe zuweisen und sie in weiterer Folge für diese Keywords optimieren. Will man bei einem Internetauftritt beispielsweise 30 Keywords unterbringen, dann sollte dieser schon mindestens 10 verschiedene Seiten aufweisen.

Im nächsten Schritt bestimmt man für jede Seite das wichtigste Keyword und bildet daraus den Dateinamen. Am besten erstellt man eine Auflistung aller Dateinamen mit den zugeordneten Schlüsselwörtern, da diese Information später bei der Verlinkung eine wichtige Rolle spielt.

Optimierung des sichtbaren Textes

Bei vielen Suchmaschinen wird den als Überschriften gekennzeichneten Textpassagen (HTML-Tag <h1> – <h6>) eine besondere Bedeutung zugesprochen, da diese den Text gliedern und den Inhalt kurz und prägnant benennen. Aus diesem Grund sollten möglichst viele Keywords innerhalb dieser Tags, besonders zwischen <h1></h1> und <h2></h2>, platziert werden. Weiters sollte man versuchen, die wichtigsten Schlüsselwörter möglichst “weit oben” im Quelltext zu positionieren – am besten gleich nach dem <body>-Tag, da dieser Bereich von Suchmaschinen als besonders wichtig eingestuft wird. Ebenso wird auch dem letzten Absatz einer Seite eine höhere Bedeutung zugesprochen – es macht also durchaus Sinn, am Ende jeder Seite nochmal die wichtigsten Keywords zu wiederholen. Generell bevorzugen Suchmaschinen Seiten mit viel (sichtbarem) Text, daher sollten die einzelnen Seiten mindestens 250 Wörter aufweisen.

Keyword-Dichte

Darunter versteht man nichts anderes als die Häufigkeit eines Schlüsselwortes bezogen auf die Wortanzahl der gesamten Seite. Wichtige Keywords sollten eine Dichte von in etwa 5% bis 10% 3% bis 5% aufweisen. In diesem Zusammenhang sollte man anmerken, dass sich auch der Linktext (z.B. <a href="page.html">Linktext</a>) auf die Keyword-Dichte auswirkt. Es gibt auch noch viele andere Methoden um die Keyword-Dichte zu erhöhen, die ich nachfolgend vorstellen möchte.

Optimierung des Headers

Unter “Header” versteht man jenen Bereich, der im HTML-Quellcode zwischen den <head></head>-Tags positioniert ist. Das Grundgerüst eines “suchmaschinenfreundlichen” Headers sollte folgenden Aufbau aufweisen:

Man sollte beherzigen, dass die description nicht nur eine Wiederholung der Schlüsselwörter, sondern eine Beschreibung des wirklichen Seiteninhalts sein sollte, da sie von einigen Suchmaschinen verwendet wird um einen Eintrag zu bilden. Weiters möchte ich anmerken, dass sich der Stellenwert der <meta>-Angaben hinsichtlich der Relevanzbeurteilung von Webseiten stark vermindert hat – Google beispielsweise ignoriert die keywords-Angabe völlig! Über die Notwendigkeit der robots-Angabe könnte man auch streiten, aber es schadet sicher nicht, explizit anzugeben, dass alle Links verfolgt werden sollen.

Bei der Optimierung des Seiten-Headers ist sicher am wichtigsten, dass jede Seite einen eigenen, mit Keywords angereicherten <title> erhält. Der Titel der Seite sollte nicht zu lang sein (max. 70 Zeichen), da sonst den einzelnen Wörtern weniger Relevanz beigemessen wird.
Man sollte auch darauf achten, dass die Datei möglichst “schlank” ist und somit alle Scripts und CSS-Angaben in externe Dateien auslagern:

Anker und Links

Ein Anker wird verwendet um eine bestimmte Stelle innerhalb einer Seite zu referenzieren, auf die dann verlinkt werden kann. Diese “on page links” sind eine weitere Möglichkeit Schlüsselwörter unterzubringen und somit die Keyword-Dichte zu erhöhen. Bevor man einen Anker setzt, sollte man sich eine passende Anwendung dafür überlegen. Ein “Klassiker” ist sicherlich der “Top-Link” am Ende einer Seite. Um den Link zum Seitenanfang für die Suchmaschinenoptimierung zu nutzen, könnte man beispielsweise mit

am Anfang der Seite einen Anker setzen und dann am Ende der Seite darauf verweisen:

Durch diese Vorgehensweise hat man einerseits die Keyword-Dichte für das Wort “SEO” (Search Engine Optimization) erhöht und noch zusätzlich durch die Ausführung als Linktext die Relevanz des Wortes gesteigert. Ein berechtigtes Gegenargument könnte wohl sein, dass man “nachdenken” muss warum der Link “SEO” und nicht einfach “top” heißt und man somit gegen das wichtigste Usability-Gesetz verstößt.

alt-Attribute von Grafiken

Das alt-Attribut beschreibt eine Grafik auf einer Website. Dieser Beschreibungstext wird angezeigt, während sich ein Bild lädt, wenn ein Bild nicht mehr online verfügbar ist und nicht angezeigt werden kann, wenn ein User eine Website mit einem reinen Text-Browser besucht oder wenn man mit der Maus über ein Bild fährt. Die meisten Browser erlauben es auch, das Anzeigen von Bildern auszuschalten, um die Geschwindigkeit zu erhöhen. Sehbehinderten Internetusern wird dieser Text anstelle der Bildinformation vorgelesen oder ausgegeben.

Der Textbereich innerhalb des alt-Attributs wird von Suchmaschinen höher gewertet als Fließtext und eignet sich hervorragend zum Erhöhen der Keyword-Dichte. Daher sollten alle Bilder mit einem passenden, Schlüsselwörter aufweisenden Text versehen werden.

Domain-, Datei- und Verzeichnisnamen/Struktur

Da manche Suchmaschinen auch die Domain auf Schlüsselwörter analysieren, ist es sicher hilfreich, mehrere Domains mit verschiedenen Schreibweisen und Varianten zu besitzen – nicht nur um in Suchmaschinen gefunden zu werden, sondern auch um Schreibfehler von potentiellen Kunden abdecken zu können.
Suchmaschinen bewerten in der Ordnerstruktur “tiefer liegende” Dateien meist als weniger relevant als hierarchisch höher liegende Seiten. Daher sollte man die Verzeichnisstruktur möglichst flach halten und für wichtige Bereiche der Seite eigene Subleveldomains anlegen. Diese Domains können als eigene Websites bei Suchmaschinen registriert werden und werden von den Crawlern auch als “vollwertige” Domain behandelt. Das bedeutet, auch wenn die hinter einer Subleveldomain liegende Website in der Ordnerstruktur tiefer liegt, wird sie als oberste Hierarchieebene bewertet und alle darunter liegenden Seiten relativ dazu betrachtet.

Weiters sollte man dynamische Seiten mit Parameterübergaben vermeiden bzw. die Seiten für Suchmaschinen möglichst “statisch” wirken lassen. Dies lässt sich mit einem sogenannten URL Rewrite realisieren – eine scheinbar statische Seite wird erst beim Aufruf in ihr “dynamisches Äquivalent” umgewandelt. Dies kann durch entsprechende Modifikationen der .htaccess-Dateien auf Unix-Servern realisiert werden.
Als Beispiel hierzu möchte ich eine bei einer Bildergalerie angewendete Kombination von Subleveldomain und URL Rewrite anführen:
Ein dynamisch erzeugtes Bild mit der URL www.domain.at/gallery/details.php?image_id=100 habe ich in den suchmaschinenfreundlichen Link gallery.domain.at/img100.htm umgewandelt.

PageRank

Wie bereits erwähnt, ist der PageRank ein Off the Page Ranking-Kriterium und stellt Google’s Maß für die Relevanz einer Seite dar. Zur Berechnung des Rankings einer Seite werden sowohl die On the Page Kriterien als auch der PageRank betrachtet. Sind beispielsweise zwei Seiten On the Page nahezu für die gleichen Keywords optimiert, dann entscheidet meist der PageRank welche Seite weiter oben im Suchergebnis aufscheint.

Die “PageRank-Theorie” geht davon aus, dass wenn eine Seite A auf eine Seite B verlinkt, dann hält Seite A die Seite B für eine wichtige Seite – es ist also eine Art “Stimme” für Seite B. Der verwendete Linktext spielt für den PageRank keine Rolle. Es fließt jedoch die “Wichtigkeit” der auf eine Seite verweisenden Links in die Berechnung ein. Hat eine Seite viele “wichtige” Links, die auf sie verlinken, dann werden auch die ausgehenden Links auf andere Seiten als “wichtiger” eingestuft.

Obwohl man heutzutage einen Link nicht mehr als “Empfehlung” für eine Seite werten kann (man denke beispielsweise an “Linkaustausch”), ist der PageRank nachwievor ein wichtiges Ranking-Kriterium, da er viel schwerer beeinflussbar ist als andere Ranking-Faktoren.

Der PageRank wird für jede einzelne Seite einer Website berechnet, sobald diese von Google indiziert wurde (z.B. durch einen Backlink). Den PageRank einer Seite kann man sich mit Hilfe der Google Toolbar anzeigen lassen. Die Skala reicht von 0 bis 10, wobei eine Seite mit PageRank 10 für Google am wichtigsten ist.

Backlinks führen einerseits zu einer höheren Relevanzbeurteilung der verlinkten Seite und sorgen auch noch für einen “Ranking-Boost” für die im Linktext vorkommenden Keywords.
Linkt beispielsweise eine Seite A mit

auf Seite B, so erzielt Seite B eine Verbesserung des Rankings für das Keyword “Hagenberg”. Das erklärt auch, warum fast alle Sites bei der Suche nach ihrem Domainnamen auf Platz 1 landen.

Diese “Gesetzmäßigkeit” gilt natürlich auch für interne Verlinkungen – verwendet man zum Beispiel für den Link zur Startseite nicht “home”, sondern ein Keyword, für das die Startseite optimiert wurde, wäre das aus Sicht der Suchmaschinenoptimierung sehr empfehlenswert, man landet jedoch wieder bei einem Usability-Problem.

SEO Don’ts

Hier möchte ich noch in kompakter Form ein paar wichtige Punkte anführen, die man im Zusammenhang mit Suchmaschinenoptimierung vermeiden sollte. Da das Bereitstellen einer von Suchmaschinen verfolgbaren Linkstruktur ein besonders wichtiger Punkt ist, sollte man auf folgende Elemente möglichst verzichten:

• Flash (besonders Flash-Navigationen)
• JavaScript-Links
• Frames
• Image-Maps
• Drop-Down-Menüs (<option>-Tag)