Ein Design besteht aus einem austauschbaren Satz an CSS- und Grafikdateien, mit dessen Hilfe eine spezielle optische Darstellung erzeugt wird. Die CSS- und Grafikdateien werden in einem eindeutig bezeichneten Verzeichnis geschrieben, so dass es bei einem Wechsel eines Designs nicht zu Problemen kommt: Die CSS-Dateien werden in das Verzeichnis /css/Designname/ geschrieben, während die zu diesem Design gehörenden Grafiken in das Verzeichnis /grafiken/Designname/ eingeordnet werden.

Einbindung in HTML-Datei

Folgender Code muss im Kopfbereich einer jeden HTML-Datei stehen, damit die CSS-Dateien und damit das Design beim Seitenaufruf geladen werden:

<link href="/css/Designname/layout.css" rel="stylesheet" type="text/css" />	
<link href="/css/tools.css" type="text/css" rel="stylesheet" title="default" />	
<!--[if lte IE 7]>	
  <link href="/css/Designname/patches/patch.css" rel="stylesheet" type="text/css" />	
<![endif]-->	

Anmerkung: "Designname" muss hier jeweils mit dem entsprechenden Ordnernamen des Designs ersetzt werden (z.B. "flexi").

CSS-Dateien

In einem Design werden folgende CSS-Dateien definiert:

  • layout.css

    Diese Datei enthält selbst keine Style-Definitionen, sondern listet alle designspezifischen CSS-Dateien auf, die eingebunden werden sollen. Dies geschieht mit dem @import-Befehl:

    @import url(../base.css);
    @import url(screen/basemod.css);
    @import url(screen/content.css);
  • base.css

    Diese Datei enthält wichtige Definitionen für die Bildschirmdarstellung und die Druckausgabe der Designs, die für alle Designs gleichermaßen gelten sollen. Die Datei ist somit in jedem Design identisch und wird stets eingebunden. Änderungen an dieser Datei sollten nicht vorgenommen werden, sondern stattdessen über die Datei basemod.css durchgeführt werden.

  • basemod.css

    Diese Datei enthält alle strukturellen Informationen des Designs: das heißt, alle Definitionen zu vorgegebenen Seitenstrukturen, die mit der Position, den Breiten, den Größen und anderen Eigenschaften zu tun haben. Eigenschaften, welche die Tags und Marken im Inhaltsbereich betreffen, werden der besseren Organisation wegen ausgelagert: in die Dateien content.css.

  • content.css

    Diese Datei enthält alle Definitionen für Klassen und HTML-Anweisungen, die Teil des Inhaltsbereichs sind.

Alternativen für den Internet Explorer

Sofern notwendig, können auch alternative CSS-Definitionen für den Internet Explorer erstellt werden. Solange die Datei

css/Designname/patches/patch.css

eingebunden wird, werden diese CSS-Definitionen in älteren Versionen des Internet Explorer aufgerufen. Bei Verwendung des Naveditors wird diese Datei automatisch eingebunden, alternativ kann der oben genannte HTML-Code zur Einbindung verwendet werden.

Die Datei patch.css bindet außerdem die Datei iehacks.css ein, die für alle Designs identisch ist und grundlegende Fehler von IE6 und IE7 behebt. Sollten dennoch Darstellungsprobleme in diesen Browsern auftreten, so werden diese Fehler mit CSS-Definitionen in der designspezifischen Datei patch.css direkt adressiert.

Weiterführende Informationen zu designspezifischen Anpassungen für den Internet Explorer entnehmen Sie der offiziellen YAML-Dokumentation.

Erweiterungen, Modifikationen und weitere Stylesheets

Falls Sie tiefgreifende Änderungen am Design planen, führen Sie diese bitte nicht im Ordner des jeweiligen Designs durch, sondern legen Sie unbedingt einen gesonderten Ordner innerhalb des /css/-Ordners an. Dort können Sie Änderungen unabhängig von den Design-Vorlagen durchführen, ohne dass sie Gefahr laufen, dass Ihre Änderungen durch ein zukünftiges Update überschrieben werden.

In der Datei layout.css können außerdem weitere Stylesheets eingebunden werden. Hierzu zählen z.B. Erweiterungen und Modifikationen der Designs, die den Dateinamen basemod_Modulname.css tragen. Diese können manuell über die @import-Anweisung eingebunden, oder modular über den Styleswitcher des Webbaukastens aktiviert werden. Hierzu genügt es, bei der entsprechenden Erweiterung bzw. Modifikation ein Häckchen zu setzen, diese wird dann automatisch eingebunden und aktiviert.

Damit die Modulverwaltung eigens erstelle Modifikationen erkennt, müssen diese außerdem in der Datei meta.txt in folgendem Format aufgelistet werden:

basemod_Modulname.css   Modulbeschreibung

Also beispielsweise:

basemod_h_menu.css      horizontale Navigation
basemod_search.css      Suchfeld aktivieren

Werden bei einem Design weitere Stylesheets benötigt, können diese ebenfalls über die @import-Anweisung eingebunden werden.

Design für mobile Geräte

Mobile Geräte - vornehmlich Smartphones - erhalten mit der Modifikation basemod_mediaqueries.css ein gesondertes, speziell auf kleine Bildschirme zugeschnittenes Design. Sollte das mobile Design verwendet werden (standardmäßig aktiviert), so muss folgender HTML-Code im Kopf-Bereich der HTML-Dateien platziert werden:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0" />

Andernfalls wird bei vielen mobilen Geräten das Standarddesign anstelle des mobilen Designs verwendet. Ebenso muss bei Deaktivierung des Moduls die Code-Zeile aus dem Kopf-Bereich entfernt werden.

Grafiken

Alle Grafiken eines Designs werden im Verzeichnis /grafiken/Designname/ gespeichert.

Gestalterische Rahmenbedingungen

Da alle Webauftritte weitgehend barrierefrei sein sollen, gelten die Regeln bezüglich der Farbwahl und der Grafiken auch für die CSS-Designs. Dies bedeutet im wesentlichen:

  • Vordergrund- und Hintergrundgrafiken müssen mit einem ausreichenden Kontrast versehen sein.
  • Es dürfen keine Farbkombinationen verwendet werden, die zu Problemen bei klassischen Fehlsichtigkeiten führen können (zum Beispiel rote Schrift auf grünem Grund).
  • Es wird empfohlen, dass jedes Design mit dem kostenfreien Programm ADesigner von IBM getestet wird.
  • Schriften müssen sich vergrößern oder verkleinern lassen. Bei einer Vergrößerung bis zu 150 Prozent sollten keine gravierenden Schäden am Design auftreten. Das gleiche gilt für Verkleinerungen bis zu 75 Prozent
  • Das Design soll sich flexibel auf die jeweilige Fenstergröße des Browser anpassen können und keine feste Größe für den Inhaltsbereich vorschreiben. Wohl aber kann eine Minimalbreite von 500 Pixel für den Inhaltsbereich bei der Darstellung auf Bildschirmen oder Projektionen vorausgesetzt werden. Es ist jedoch zu beachten, dass die Darstellung des Inhalts auf mobilen Endgeräten möglich bleiben muss.

Weiterführende Informationen zu gestalterischen Rahmenbedingungen für Webauftritte finden Sie im Artikel: Aus Print mach Web − Was Printdesigner wissen müssen.