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

Konzept, Design, clientseitige Programmierung (HTML, CSS, JS/Ajax), Suchmaschinenoptimierung und Projektmanagement stammen von mir; die Wartungsoberfläche, Datenbank und Datenbankanbindung wurden von einem meiner Partner umgesetzt.

Anforderungen und Features der Plattform

• Einfache Bedienung (Zielgruppe 50+)
• Exklusives Screendesign (klare Struktur, Emotionen)
• Komplette Administrierbarkeit der Immobilien über eine individuell programmierte Wartungsoberfläche
• Eigene Wartungs-Logins für jeden Makler
• Übersichtliche und intuitiv bedienbare Suchfunktion
• Ansprechende Präsentation der Immobilienbilder mittels Slideshows und Bildergalerien (Thumbnails mit Vergrößerungsfunktion)
• Möglichkeit Immobilienfilme einzubetten
• Favoritenliste zur Verwaltung der persönlichen “Favoriten”
  (Versenden per E-Mail möglich)
• Auto-Vervollständigungsfunktion für Eingabefelder
• Berücksichtigung unterschiedlicher Währungen
• Zweisprachig (deutsch, englisch)

Feedback der Makler (Auszug)

Herzlichen Glückwunsch zum erfolgreichen Start Ihrer Internetseite! Sehr schönes Design und eine wirklich ansprechende Präsentation. Sehr gelungen.

Gratulation! Der Gesamteindruck ist sehr professionell und anspruchsvoll, gefällt mir durchgehend sehr gut.

Die Seite sieht sehr schick aus, gefällt uns sehr gut die Aufmachung!

Ich habe mir die Seite bereits angesehen und finde sie super!

Weiterführende Links

• Immobilien Streifzug Exklusiv
• PIXELUTION.AT Multimedia Agentur

Besonderheit: Das vom Spielehersteller Ravensburger als Brettspiel produzierte “KNORR-Memo-Spiel” wurde von uns etwas abgespeckt (12 Paare) als Flash-Variante umgesetzt.

Kinder-Suppen Microsite v2

Die Kidssuppen-Promotion war ein unglaublicher Erfolg und daher gab es auch eine zweite Auflage der Microsite. Statt der Glückskäfer Suppe ging die Elefanten Suppe ins Rennen. Dementsprechend war der “Aufhänger” dann ein animierter Elefant, der sowohl im Flash-Intro als auch im “Bravo-Screen” des “KNORR-Puzzle-Spiels” auftauchte. Auch das Gewinnspiel, die Downloads und die Rezepte wurden erneuert.

KNORR Kaiser Teller Microsite

Bei dieser Flash-Microsite war ich für die Umsetzung des Online-Gewinnspiels verantwortlich.
Features: Internet-Gewinncode, Formular-Validierung per Ajax, Spamschutz, Web2.0-Effekte, passwortgeschützter Login-Bereich zur Einsicht aller Teilnehmer.

Weiterführende Links

• KNORR Kinder-Suppen Microsite
• PIXELUTION.AT Multimedia Agentur

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.

Die Domain GOLSER.info habe ich schon vor knapp 3 Monaten registriert – primär um eine Domain mit Namensbezug mein Eigen nennen zu können. In den letzten Wochen habe ich neben den PIXELUTION.AT Projekten etwas Zeit gefunden und angefangen die Domain mit Inhalten zu füllen. Die Website ist im Wesentlichen eine Weiterführung meines alten AGWORK Portfolios. Ich werde einige “Highlights” der alten Seiten hier so nach und nach wieder integrieren. Weiters möchte ich auch einige Teile meiner fachbezogenen Bakkalaureatsarbeit mit dem Titel “Erfolgreiches Web Engineering” hier veröffentlichen. Besonderes Augenmerk wird auf die Verfolgung aktueller Entwicklungen im Internet rund um den Hype Web 2.0 gelegt. Die Beiträge sind sehr vielseitig und es gibt keinen konkreten Themenschwerpunkt, wobei dem Internetbereich eine besonders hohe Bedeutung beigemessen wird.
Ich freue mich auf Feedback und wünsche viel Spaß beim Absurfen der einzelnen Beiträge!

Web Engineering @ ncm.at

Salzburg. Der Student August Golser von der FH Hagenberg absolvierte ein 15-wöchiges Praktikum bei der Salzburger Internetagentur ncm.at und war durch seine zuverlässige und genaue Arbeitsweise ein wertvolles Mitglied des NCM-Teams.

Herr Golser war vorwiegend im Bereich Web Design & Producing tätig und die Aufgaben reichten von kleineren Wartungs- und Optimierungsarbeiten bis hin zur HTML-Umsetzung ganzer Webprojekte. Das schnelle Erlernen der von ncm.at verwendeten Sitestruktur und des Template-Systems stellte für den im Bereich Web bereits erfahrenen Praktikanten keine großen Schwierigkeiten dar. Öfters konnte der Student sein in Hagenberg erworbenes Fachwissen auch bei der professionellen Aufbereitung von Videosequenzen fürs Web unter Beweis stellen.

August war prinzipiell für die ihm zugeteilten Aufgaben alleine zuständig, konnte sich jedoch jederzeit mit Fragen an seine Kollegen wenden und die von ihm gewählte Vorgehensweise besprechen. Daher konnte der Student sein Know-how im Bereich Web noch weiter ausbauen und viele Erfahrungen sammeln, die auch in seine parallel zum Berufspraktikum verfasste Bakkalaureatsarbeit mit dem Titel “Erfolgreiches Web Engineering” eingeflossen sind. Mehr Infos findet man auf seiner Homepage unter work.creativeweb.at golser.info.

Während der gesamten Praktikumsdauer herrschte im Unternehmen ein angenehmes und kollegiales Arbeitsklima und die Agentur war mit der studentischen Leistung sehr zufrieden.
Dazu Herr Greisberger, Projektmanager bei NCM: „Herr Golser hat sich sehr schnell eingearbeitet und sein theoretisches Fachwissen sehr gut in die Praxis umgesetzt. Neben einigen kleineren Projekten war Herr Golser maßgeblich an der Internationalisierung von www.logoclic.de beteiligt. Engagiert und einsatzfreudig erledigte er anfallende Arbeiten mit großer Sorgfalt.“

Internetagentur ncm.at

Seit der Gründung 1996 bietet NCM seinen Kunden alle Leistungen rund ums Internet. Mit 12 19 fixen Mitarbeitern garantiert ncm.at Beratung, Handwerk und Dienstleistung auf professionellem Niveau. Über 400 500 realisierte Projekte, Auszeichnungen und Designpreise sowie nicht zuletzt Kunden, die seit mehreren Jahren im Web erfolgreich sind, sprechen für den Erfolg der Firma.
NCM hat einen Schwerpunkt im Tourismusbereich und ist neben individuellen Internet-Dienstleistungen vorwiegend im Bereich Web Marketing tätig.

Die Zeit in Salzburg war sehr interessant, aber auch sehr anstrengend – wenn man bedenkt, dass ich fast jeden Abend noch mit dem Schreiben meiner fachbezogenen Bakkalaureatsarbeit beschäftigt war. Untergebracht war ich in einer ca. 10 Gehminuten von der Arbeitsstelle entfernten WG, die ich gemeinsam mit zwei Studenten der FH Salzburg bewohnte. Die Einrichtung bzw. der Wohnkomfort war sehr spartanisch zweckmäßig: Matratze zum Schlafen, Dusche, Kaffeemaschine und ein Computer zum Arbeiten – gelegentlich sogar mit funktionierender Internetverbindung

Downloads

Entwurf und Gestaltung

Digitale Gestaltungstechniken

Produktfotografie

Hypermedia Programmierung, Softwaretechniken, Datenbanken

3D-Modellierung

Multimedia Design Video

Animation und Trickfilm

Multimedia Programmierung

Medienintegration und -produktion

Projekte