Hinweise zur Nutzung

Die Codebasis des Styleguides kann über https://styleguide.sachsen.de direkt in eine zu entwickelnde Webpräsenz eingebunden werden. Es besteht ebenfalls die Möglichkeit den Styleguide als Archivdatei zu erhalten. Hierzu muss eine Anfrage an den Projekteigner gestellt werden (Technische Dokumentation). Beide Varianten beinhalten immer die aktuell veröffentlichte und getestete Version. Bei der Nutzung der Styleguide-Ressourcen sind diverse Dinge zu beachten, die im Folgenden beschrieben werden.

Die Projektverantwortung für den Styleguide liegt bei der Sächsische Staatskanzlei (SK). In dieser Rolle ist die SK Projekteigner des Styleguide-Projekts und wird folgend als solcher bezeichnet. Alle Anliegen und Rücksprachen bezüglich des Styleguides müssen an onlineredaktion@sk.Sachsen.de gerichtet werden.

Nutzen der Online-Ressourcen

Trotz der angebotenen Archivdatei wird dringendst empfohlen, die Quellen direkt über die URL https://styleguide.sachsen.de einzubinden. Vorteile dieses Vorgehens sind:

• Anpassungen am Styleguide werden sofort in der Webpräsenz sichtbar.
• Es muss kein Aktualisierungsprozess durchgeführt werden, indem die Archivdatei erneut heruntergeladen und in das neue Projekt integriert werden muss.
• Mögliche Fehler im Styleguide werden zentral behoben. Die Fehlerbehebung wird automatisch auf alle Portale, die die Online-Ressource nutzen, angewandt.

Cooperate Design und Wiederverwendbarkeit

Entstehen in einer Portalentwicklung neue Komponenten, so sind diese modular zu behandeln. Diese müssen als Komponenten extrahiert werden und sind so zu entwerfen, dass diese in anderen Styleguide-Projekten wiederverwendet werden können. Neue Komponenten unterliegen generell der Genehmigungspflicht des Projekteigners und dürfen ohne Rücksprache nicht eingebunden werden.

Der Styleguide definiert verschiedene Farbschemata. Bei der Erstellung einer neuen Webpräsenz ist ein solches Schemata vorab zu wählen. Innerhalb der Farbschemata sind Symboliken definiert, welche zwingend genutzt werden müssen. Wird ein weiteres Farbschema gewünscht oder soll ein vorhandenes Schema erweitert werden, so muss dies mit dem Projekteigner abgesprochen werden.

Anpassen von Styleguide-Ressourcen

Die Quelldateien des Styleguides sollten auf keinen Fall angepasst werden. Mit der Bereitstellung einer neuen Version können mögliche Anpassungen inkompatibel oder obsolet werden. Die Aktualisierung der manipulierten Quelldateien hinsichtlich der Styleguide-Ressourcen kann aufwändig und fehleranfällig sein. Sollte ein Fehler im Styleguide zu Tage treten, oder werden neue Funktionen benötigt, so ist dies dem Projekteigner zu melden.

Qualitätskriterien

• Innerhalb des Quellcode darf kein console.log(...) verwendet werden, da dies zu Performanceproblemen, wie auch Laufzeitproblemen führen kann.
• Dateien und Ressourcen müssen UTF-8 kodiert bereitgestellt werden.
• Auf die Verwendung von proprietärer Client-Technologie wie bspw. ActiveX, Macromedia Flash, Microsoft Silverlight usw. sollte verzichtet werden.

Der Aufbau der veröffentlichten Projekte muss einer einheitlichen Struktur folgen. So sind folgende Verzeichnisse vom Wurzelverzeichnis aus maßgebend:

Verzeichnis	Beschreibung des Inhalts
img	Bilddateien, die Inhalte auf der Webseite darstellen
css	Stylesheet-Dateien des zu entwickelnden Portals, falls notwendig
js	JavaScript-Dateien des zu entwickelnden Portals, falls notwendig
xml	XML-Dateien, wie bspw. die Themenbaum-XML

Performanceoptimierung

Alle Ressourcen sind minifiziert und sollten auch nur so genutzt werden. Eigene definierte Ressourcen, die während der Portalentwicklung entstehen, sind ebenfalls nur minifiziert auszuliefern und einzubinden. Dies dient der Performanceoptimierung beim Laden der Webseite.

Ressourcen eines Typs, die semantisch zusammengehören, müssen auch physisch zusammengefügt werden. Dies bedeutet, dass bspw. mehrere portalspezifische JavaScript-Dateien zu einer Gesamtdatei zusammengefügt werden. Auch dies dient der Performanceoptimierung beim Laden der Webseite.

Zur Einbindung von Bilddateien sind komprimierte/ komprimierbare Formate wie png, svg, gif, jpeg oder jpg zu verwenden. Auf Rohdatenformate sind generell zu verzichten.

Responsives Design

Die Komponenten im Styleguide sind so entwickelt, dass diese sich an die Bildschirmgröße des Endgerätes anpassen. Bei kleinen Bildschirmauflösungen ist die Funktionalität genauso gegeben wie bei großen Auflösungen.

Bei der Entwicklung einer Webseite auf Basis des Styleguides ist darauf zu achten, dass die Seite ebenfalls dem Kriterien an das responsive Webdesign genügt. Komponenten müssen auf Touchgesten genauso reagieren, wie auf Maus- oder Tastaturinteraktion. Komponenten dürfen die Funktionalität der Seite nicht einschränken, so muss bspw. innerhalb einer Kartendarstellung darauf geachtet werden, dass man noch immer innerhalb der Seite scrollen kann.

Damit die Webseiten effizient im mobilen Umfeld verwendet werden können, müssen auch Bilddateien in verschiedenen Auflösungen und Größen bereitgestellt werden. Nähere Informationen hierzu sind der Komponente: Responsive Bilder zu entnehmen.

Mehrsprachigkeit

Ein Portal kann mehrsprachig angeboten werden, dies ist jedoch nicht verpflichtend. Um die Mehrsprachigkeit zu erzielen, muss jede Seite in seiner übersetzten Version auf einem Webserver abgelegt werden. Die Dateien für die Standardsprache werden im Wurzelverzeichnis des Webservers abgelegt. Zusätzliche Sprachen werden in Unterverzeichnissen organisiert. Alle Dateien einer zusätzlichen Sprache werden in ein entsprechendes Verzeichnis abgelegt. Der Name eines solchen Verzeichnisses muss hierbei dem Kürzel der Sprache entsprechen. Somit wird erreicht, dass Seiten in den verschiedenen Sprachausprägungen über die URL eindeutig aufrufbar sind.

Die Sprachauswahl wird über die Toolbar gesteuert. Die Definition der Toolbarinhalte findet im Kopfbereich einer jeden Seite statt und damit auch die Definition der Sprachvarianten. Das Konfigurieren von Sprachvarianten wird in Komponente: Toolbar im Detail beschrieben.