Publikationen
Webdesign und Webentwicklung:
Bericht von der Baustelle WWW (Jan. 2007)
1. Teil: Style Guide für eine Website
2. Teil: CSS-Code Organisation erleichtert Übersicht und Unterhalt
3. Teil: (X)HTML- und CSS-Richtlinien
Style Guide für eine Website
Teil 1 der dreiteiligen Serie «CSS- und (X)HTML-Code Organisation»:
Die meisten Websites werden von mehreren Personen bearbeitet, bei einigen sind sogar mehrere Teams zu verschiedenen Aspekten mit der Website beschäftigt. Es ist also möglich, dass Programmierer, Content-Manager und Redaktoren verstehen müssen, wie die Elemente in der Website dargestellt werden. Sie müssen nachvollziehen können, wie das Design funktioniert. Genau dafür ist der Style Guide eine gute Sache.
Legende: Beispiel eines Style-Guides welcher als komplette Website abgegeben wurde, Programmierer können jederzeit nachschauen wie XHTML- und CSS-Code zusammenspielen, Redaktoren finden Angaben zu Stilvorlagen.
Ein Style Guide ist eine Webpage oder eine kleine Website. Sie ist eine überschaubare Dokumentation des Designs. Je nach Ausprägung des Projektes wird der Umfang grösser oder kleiner ausfallen. Wichtige Inhalte sind:
Style Guide «Design»
- Farbkonzept
- Farbklima, Farbbpalette mit Haupt- und Kontrastfarben. Text- und Linkfarben (mit Hex- und RGB-Wertangaben)
- Layout
- Seitenaufteilung und -Gliederung, Varianten mit ihren Dimensionen
- Bilder
- Angaben zu Ausrichtung, Dimensionen ggf. auch zu Bildsprache und Bildfarbe
- Ikonografie
- Verwendung von Icons
- Typografie
- Titel- und Textformate
- Navigation
- Alle möglichen Navigationsebenen, Breadcrumb und in-the-page Links
- Beiträge
- Alle vorbereiteten Beitragstypen: Artikel, Tabellen, Listen, Formulare, Fehlermeldungen usw.
- Accessibility-Angaben
- Accessibility-Level, Angaben für Unterhalt und Inhalt, Accesskeys, Title- Acronym- und Abbreviations-Konvention
Style Guide «off the page»
- Site-Struktur
- File-Struktur mit Namenskonventionen
- Doctype und Browsertype
- Angaben zur verwendeten (X)HTML-DTD, dem Zeichensatz und der Browser-Unterstützung
- Webserver-Angaben
- Nötige Server-Einstellungen, robots.txt, angepasste Fehlerseiten, serverseitige Scripte
Style Guide «Code»
- (X)HTML-Code-Richtlinien
- Gliederung und Konvention für Markup, Anwendung von Headern, Listen und weiteren Struktur-Tags
- CSS-Code-Richtlinien
- Organisation der CSS, Verwendung der ID's und Klassen, Schreibweise
- CSS-(X)HTML-Katalog
- Beispiele aller Elemente und den zugehörigen ID- und Klassen-Namen
Dieser Style Guide und seine Themen können natürlich varieren. Die wichtigsten Stichworte sind erfahrungsgemäss aufgeführt. In den folgenden zwei Beiträgen geht es nur um den letzten Punkt, Code, der das Zusammenspiel der (X)HTML-Elemente und der CSS-Regeln dokumentiet.
Weiter zum 2. Teil: CSS-Code Organisation erleichtert Übersicht und Unterhalt
