Die strikte Trennung von Design und Inhalt bei Webprojekten führte dazu, dass die HTML-Konstrukte immer einfacher und die CSS-Dokumente immer komplexer wurden. So bringen es sogar die Stylesheets kleiner Websites recht schnell auf über 500 Zeilen Code und werden über den Projektlebenszyklus hinweg immer undurchsichtiger. Bei umfangreicheren Webprojekten stellen die Stylesheets nicht selten ein kleines “Kunstwerk” dar, das mit vertretbarem Zeitaufwand nur vom ursprünglichen Entwickler komplett durchschaut wird.
Diese Tatsache macht es auch sehr schwierig im Team an den Styles einer Website zu arbeiten. Auch eine Wiederverwendung von CSS-Dokumenten für andere Projekte ist nur eingeschränkt möglich.
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.
[weiterlesen…]
26. Januar 2010
481 Aufrufe
Tags: codesnippet, css, Internet, webdesign, webdevelopment, work
CSS Naked Day ist ein Projekt zur Förderung der Webstandards.
Unter der Oberfläche einer Website zeigt sich die wahre Qualität: korrekte Verwendung von (X)HTML, semantisches Markup, gut gegliederter, hierarchischer Aufbau und natürlich hochwertige Inhalte.
Am jährlich stattfindenden CSS Naked Day zeigen sich alle teilnehmenden Websites “nackt”, entblößen ihren <body> und zeigen was dahinter steckt. 
Gut strukturierte Websites machen auch bei deaktiviertem “Design” (siehe Cascading Style Sheets) ein gutes Bild und sind ohne Einschränkung les- und navigierbar.
[weiterlesen…]
09. April 2008
940 Aufrufe
Tags: barrierefreiheit, codesnippet, css, Internet, webdesign, webdevelopment, webstandards
In der aktuellen Ausgabe 02/2008 des Magazins Wirtschaft im Alpenraum (WIA) wird beim Artikel “Websites: was sie kosten, was sie bringen?” (Seite 92 ff.) PIXELUTION.AT an einigen Stellen zitiert. Redakteurin Andrea Salzburger führte diesbezüglich mit mir ein Telefongespräch, bei dem ich ihr meine Ansichten über “zeitgemäßes Webdesign” und zukünftige Trends im Web mitteilte.
[weiterlesen…]
25. März 2008
1,023 Aufrufe
Tags: Aufgeschnappt, css, Internet, Pixelution, web2.0, webdesign, Wirtschaft
Nachfolgend möchte ich einen kleinen Überblick über ein paar sehr wichtige Qualitätskriterien für Webseiten geben. Alle Kriterien können sehr schnell überprüft werden – für einige Tests wird jedoch die Web Developer Erweiterung für Mozilla Firefox benötigt. Die Erweiterung steht nach der Installation als eigenständige Toolbar im Browser zur Verfügung und kann jederzeit wieder deaktiviert werden.
[weiterlesen…]
09. Dezember 2007
1,281 Aufrufe
Tags: barrierefreiheit, css, Internet, webdesign, webdevelopment, webstandards
Barrierefreies WebDesign bezeichnet die Gestaltung und Entwicklung von Websites, die von allen, unabhängig von ihren körperlichen und/oder technischen Möglichkeiten, uneingeschränkt genutzt werden können.
Dies schließt sowohl Menschen mit und ohne Behinderungen, als auch Benutzer mit technischen (z.B. Textbrowser) oder altersbedingten Einschränkungen (z.B. Sehschwächen) sowie automatische Suchprogramme ein. Fachbegriff: Accessibility.
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.
[weiterlesen…]
18. Juni 2007
718 Aufrufe
Tags: Bakkalaureatsarbeit, barrierefreiheit, css, Internet, webdesign, webstandards
Der persönliche Blog von