TYPOlight-Website für den WSV St. Johann in Tirol

Im Juni dieses Jahres wurde TYPOlight in Contao umbenannt.
Der Entwickler Leo Feyer begründete diesen Schritt damit, dass TYPOlight oft fälschlicherweise mit dem CMS TYPO3 in Verbindung gebracht wurde und dass der Zusatz “light” dahingehend missverstanden wurde, dass das CMS nur für kleine Projekte geeignet sei.

Mit der Namensänderung auf Contao wurden auch einige Neuerungen eingeführt – z.B. der Theme-Manager oder Möglichkeiten der Anbindung an soziale Netzwerke wie Facebook und Twitter. Um meine Kenntnisse des Systems zu vertiefen und auch wieder neue Kniffe und Techniken kennenzulernen, habe ich mir kürzlich das Buch Mit Contao Webseiten erfolgreich gestalten: Konzeption, Umsetzung, Beispielprojekte bei Amazon bestellt. Der Autor, Thomas Weitzel, ist Diplom-Designer und setzt in seinem Buch andere Schwerpunkte als der Contao-Entwickler Leo Feyer:

In diesem Buch führt Sie Diplom-Designer und Contao-Team-Mitglied Thomas Weitzel durch alle Schritte des Entwurfs und Designs einer Contao-basierten Website.
Sie lernen zunächst Techniken und Tools für Planung und Entwicklung kennen, arbeiten sich in das CSS-Framework von Contao ein und erfahren dann anhand zweier Praxisprojekte detailliert, wie Sie eine Website von A bis Z mit Contao gestalten und umsetzen. Checklisten und Tipps & Tricks leisten wertvolle Hilfe bei der erfolgreichen Veröffentlichung der Website.

Ich freue mich schon auf die Lektüre!

Weiterführende Links

• think.Contao!

Hintergründe & Status Quo

Meine ersten Erfahrungen mit CM-Systemen sammelte ich im 2. Semester an der FH Hagenberg. Im Rahmen eines Semesterprojektes setzte ich gemeinsam mit einem Studienkollegen ein auf PostNuke basierendes Portal für unseren Jahrgang MTD02 um.
Im 4. Semester wurde ich dann im Rahmen der Lehrveranstaltung Document Content Management ziemlich ausführlich mit TYPO3 konfrontiert. Es gab auch Klausuren, bei denen das Verfassen von TypoScript-Code auf Papier abverlangt wurde.
Ich hatte jedoch damals keine Anforderung für ein so “mächtiges” CMS und meine anfängliche Euphorie ist dann auch schnell wieder verflogen.

Richtig interessant wurde das Thema Content-Management-Systeme dann wieder im Rahmen meiner Selbständigkeit mit PIXELUTION.AT.
Da griff ich meistens zu unserem selbst programmierten, einfach gestrickten PXcms basierend auf TinyMCE. Dieses System erlaubt jedoch nur die textuelle WYSIWYG-Bearbeitung eines Bereiches pro Seite und das Einfügen von Bildern und PDF-Dateien über eine einfache Multimedia-Datenbank.
Das ein oder andere Projekt habe ich auch mit Joomla umgesetzt, wobei mich hier die Benutzeroberfläche mit den ganzen Modulen und Verschachtelungen nie richtig überzeugte.

Die Suche beginnt

Mein zukünftiges CM-System sollte vor allem ein hübsches, intuitiv bedienbares Benutzerinterface aufweisen, suchmaschinenfreundlich sein, validen XHTML-Code produzieren und MooTools als JavaScript-Framework verwenden – und natürlich nicht zu “aufgebläht” sein.
Nach gründlicher Recherche und einigem Feedback über Twitter und Facebook habe ich mich für das CMS Contao entschieden, das alle meine Kriterien erfüllt und auf mich von Anfang an einen guten Eindruck machte.

Contao OpenSource CMS

Die (für mich) wichtigsten Features im Überblick:

• Ansprechendes, benutzerfreundliches Backend
• Barrierefreie XHTML-Strict-Ausgabe
• Verwendet Web2.0-Technologien auf MooTools-Basis
• Browserübergreifendes CSS-Framework
• Generiert (automatisch) suchmaschinenfreundliche URLs
• Unterstützt Mehrsprachigkeit
• Frontend basiert zu 100% auf Templates
• Live Update Service
• Gute Dokumentation

Update: Aus TYPOlight wurde Contao

Mit der Veröffentlichung der Vorabversion 2.9. RC1 am 6. Juni 2010 wurde TYPOlight in Contao umbenannt. Der Entwickler Leo Feyer begründete diesen Schritt damit, dass TYPOlight oft fälschlicherweise mit dem CMS TYPO3 in Verbindung gebracht wurde und dass der Zusatz “light” dahingehend missverstanden wurde, dass das CMS nur für kleine Projekte geeignet sei.

Weiterführende Links

• Contao OpenSource CMS
• Wassersportverein St. Johann in Tirol
  Mein erstes TYPOlight-Projekt.

PIXELUTION.AT PXcms Demos

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

• 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.

Gerade in der Architektur sind die Auswirkungen von “Design for All”, hauptsächlich in Zusammenhang mit der Zugänglichkeit von Gebäuden für Menschen mit Mobilitätseinschränkungen, sichtbar. Rampen, Aufstiegs- und Orientierungshilfen ermöglichen auch jenen Menschen den Zutritt, die vom Durchschnitt abweichende Anforderungen haben, wie z.B.: Eltern mit Kinderwagen, Rollstuhlfahrer, ältere Menschen, Menschen mit Sehbehinderungen oder Menschen mit vorübergehenden Einschränkungen.

Die barrierefreie Gestaltung betrifft alle Lebensbereiche

Nach dem mit 1. Jänner 2006 in Kraft getretenen Behindertengleichstellungsgesetz müssen nun beispielsweise der Einkauf im Supermarkt, der Besuch eines Kinos, Theaters, Museums oder Gastgartens, das Aufsuchen der Toilette, der Kauf eines PKWs, der Kauf einer Fahrkarte für die Straßenbahn, aber auch Fahrplanauskünfte im Internet oder Websites von Unternehmen barrierefrei möglich bzw. zugänglich sein.

Da die Beseitigung von Barrieren mit hohen Kosten und Aufwand verbunden sein kann, wird je nach Anwendungsfall eine entsprechende Übergangsfrist eingeräumt und das Vorhaben mit Förderungen unterstützt.

• Die Geduld der Nutzer und Übertragungskapazitäten sind begrenzt.
  Standardkonformer HTML-Code verringert die durchschnittliche Dateigröße um bis zu 70 Prozent. Die Seite wird schneller übertragen und dargestellt.

• Suchmaschinen sind blind.
  Suchmaschinen sehen kein ansprechendes Design, sondern bevorzugen einen einfachen, gut strukturierten Code und bewerten die Anzahl der Schlüsselwörter in Relation zum Codeumfang.

• “Silver Surfer” sind eine der kaufkräftigsten Kundengruppen.
  Die große Bevölkerungsgruppe der über 50-jährigen benötigt übersichtliche Strukturen und oft auch geringere Bildschirmauflösungen oder höhere Schriftgrößen.

Experten vom W3C, dem Fraunhofer-Institut für Angewandte Informatik und der Universität Linz zeigten uns effiziente Vorgehensweisen aus Forschung und Praxis. RedDot stellte als Assistive Technology mit dem RedDot Web Compliance Manager ein Tool zur einfachen, automatisierten Qualitätssicherung vor.

Als ROI (Return on Investment) einer Website, welche nach den Anforderungen von Barrierefreiem Webdesign konzipiert wurde, lassen sich laut Shadi Abou-Zahra (Experte des W3C) folgende Benefits herausstreichen:

• Größere Reichweite und damit höhere Wertschöpfung,
• soziale Verantwortlichkeit,
• Effizienz und
• Qualität.