Der Senator für Finanzen Version vom November 2021
Gestaltungsmöglichkeiten mit Hilfe der der erweiterten KoGIs-Projektmodule
Projektmodule („Projektmaster“)
2 Impressum
Herausgeber
Senator für Finanzen
Zentrales IT-Management, Digitalisierung öffentlicher Dienste Rudolf Hilferding Platz 1
28195 Bremen
Kontaktadresse Senator für Finanzen
Zentrales IT-Management, Digitalisierung öffentlicher Dienste Rudolf Hilferding Platz 1
28195 Bremen
E-Mail: KOGIS@finanzen.bremen.de URL: www.KOGIS.bremen.de
Autorin: Kompetenzstelle CMS und Internet
Creative Commons Namensnennung 4.0
• Diese Lizenz ermöglicht nicht die Nutzung folgender ggf. enthaltener Inhalte
• Hoheits- und Wahrzeichen der Freien Hansestadt Bremen
• Titelbild
• Bildschirmfotos aus dem Internet
• Personenbezogene Daten
• Unrechtmäßig veröffentlichtes Material
3 Inhalt
Inhalt
1. Generelle Anmerkungen 4
2. Gesamtstruktur 4
2.1 Weißes Band 4
2.2 Abstand zwischen dem „Weißen Band“ und dem Menü 5
2.3 Das Suchfeld 5
2.4 Die Menüpunkte 5
2.5 Inhaltsbereich 5
2.6 Gestaltung des “Weißen Bandes” 6
2.7 Gestaltung des Sucheingabefeldes 6
2.8 Gestaltung des Menüs 6
2.9 Gestaltung des Inhaltsbereichs 7
2.10 Breadcrumb/Nutzungspfad 7
2.11 Textbereich 8
2.12 Seitennavigation 8
2.13 Lizenzangaben 8
2.14 Fußnavigation 9
2.15 Infoboxen 9
3. Aktualisierungen 10
4 Generelle Anmerkungen
1. Generelle Anmerkungen
Im Folgenden werden Gestaltungsmöglichkeiten mit Hilfe der erweiterten Projektmodule („Projektmaster“) vorgestellt.
Mit diesem Dokument sollen Organisationseinheiten die Möglichkeit haben, geplante Designanpassungen bereits theoretisch vorzubereiten und im Anschluss daran die Umsetzung innerhalb eines KOGIS-Mandanten in Absprache mit dem KOGIS und nach Unterzeichnung des zugehörigen Kontraktes vorzunehmen.
Weitere Anpassungen sind ausdrücklich nicht gestattet.
2. Gesamtstruktur
Die Gesamtstruktur steht auch bei Verwendung des Projektmasters fest und darf nur in der unten beschriebenen Form verändert werden.
2.1. Weißes Band
Das „Weiße Band“ darf nur farblich angepasst werden, die Höhe (70 Pixel in der Desktopansicht) ist festgelegt.
Enthalten sein muss immer der Bremer Schlüssel, das Suchfeld (schließt rechts mit dem Menü und dem Inhaltsbereich ab, alternativ kann das Suchfeld entfallen, wenn im Inhaltsbereich alternativ ein Suchfeld dauerhaft im Inhaltsbereich eingebunden
5 Gesamtstruktur
ist, Beispiel: Transparenzportal) und wahlweise das Auge-Symbol zum Ein- und Ausblenden des Hintergrundbildes.
Es wird empfohlen, die Links zum DGS-Video und zum Text in Leichter Sprache rechts neben dem Auge-Symbol zu platzieren.
2.2. Abstand zwischen dem „Weißen Band“ und dem Menü
Der zwischen dem „Weißen Band“ und dem Menü ist fest vorgeschrieben (70 Pixel in der Desktopansicht) und darf nicht angepasst werden.
2.3. Das Suchfeld
Das Suchfeld ist fest im „Weißen Band“ angeordnet. Die Höhe und Breite darf nicht angepasst werden, wenn das Suchfeld verwendet wird, siehe Punkt 2.1.
2.4. Die Menüpunkte
Die Menüpunkte sind fest über dem Inhaltsbereich platziert und erstrecken sich über die gesamte Breite des Inhaltsbereichs (960 Pixel). Die Höhe des Menüs beträgt in der Desktopansicht 133 Pixel und darf nicht verändert werden.
Die Hauptmenüpunkte in der Navigation sind immer einzeilig.
Es wird ausdrücklich empfohlen, sehr kurze und treffende Bezeichnungen für diese Menüpunkte zu wählen.
Es werden im Mouseover bis zu drei Menüebenen angezeigt.
Die Menüpunkte sind fest über dem Inhaltsbereich platziert. Nachdem gescrollt wurde, wird das Menü am oberen Browserrand fixiert und erstreckt/verteilt sich über die gesamte Breite des Inhaltsbereichs.
2.5. Inhaltsbereich Breakpoints (BP):
• Desktop-Max: > 1200 Pixel
• Desktop-Min: > 1020 Pixel
• Tablet: > 768 Pixel
• Mobile: < 768 Pixel
Der Inhaltsbereich darf in der Breite nicht angepasst werden.
Der Inhaltsbereich umfasst eine Breite von Desktop-Max: 960 Pixel, Desktop-Min:
780 Pixel und Tablet/Mobile: 100%.
Der Textbereich:
• Linke Spalte: 73.3333333%
Breite (padding: 30px 30px 30px 60px;) BP Tablet/Mobile: Breite 100%
• Rechte Spalte: 26.6666666%
Breite BP Tablet: Breite 100%, die einzelnen Boxen 2 spaltig BP Mobile: Breite 100%, 1 spaltig
6 Gesamtstruktur
2.6. Gestaltung des “Weißen Bandes”
Das „Weiße Band“ darf nur farblich angepasst werden, die Höhe (70 Pixel in der Desktopansicht) ist festgelegt. Links befindet sich immer der Bremer Schlüssel.
Das Drop-Down-Menü mit den zwei Links zum Transparenzportal und zum Serviceportal Bremen kann ausgeblendet werden.
Das Suchfeld (schließt rechts mit dem Blatt des Inhaltsbereichs ab) und das Auge- Symbol zum Ein- und Ausblenden des Hintergrundbildes sind feste Bestandteile, Größe und Position sind festgelegt.
Alternativ zum Titel des Internetauftritts (in den Basiseinstellungen einstellbar) kann auch ein Bild den Schriftzug ersetzen. Dazu wird das Bild mit dem Bremer-Schlüssel (unter Site > Weitere Container > Fastmedia: logo_verwaltung.png) rechts erweitert und erneut eingebunden.
2.7. Gestaltung des Sucheingabefeldes
Das Suchfeld (schließt rechts mit dem Blatt des Inhaltsbereichs ab) ist fester Bestandteil des „Weißen Bandes“, Größe und Position sind festgelegt.
2.8. Gestaltung des Menüs
Die Menüpunkte sind fest über dem Inhaltsbereich platziert (960 Pixel über die gesamte Breite). Es werden im Mouseover bis zu drei Menüebenen angezeigt. Die Höhe darf nicht angepasst werden (es sind nur einzeilige Menüpunkte erlaubt), die Breite variiert je nach Anzahl der Menüpunkte (bis zu sieben Menüpunkte möglich).
7 Gesamtstruktur
Per Mouseover auf einen Hauptmenüpunkt öffnet sich die Subnavigation mit der zweiten und dritten Navigationsebene unterhalb der Hauptnavigationspunkte.
Es können somit bis zu drei Menüebenen angezeigt werden.
Die drei Menüebenen können farblich eigenständig gestaltet werden.
Der Aspekt der Barrierefreiheit ist in diesem Zusammenhang besonders wichtig. So dürfen beispielsweise keine Bilder als ausschließliche Navigationselemente verwendet werden (Text muss Text sein).
Die Formatierung der Navigationsschrift ist frei wählbar, so dass für die Navigation die Hintergrundfarbe(n) gewechselt werden können:
• für die Menüpunkte eine einheitliche Farbe oder
• pro Menüpunkt eine eigene Farbe.
Die Schriftart, die -größe und die -farbe für die Menüpunkte können frei gewählt werden.
Die Anpassungen erfolgen ausschließlich über die CSS-Datei (Eigene Erweiterungen > .eigene templates > 01_user_css_d).
Auch das Setzen bestimmter Trennlinien zwischen den einzelnen Menüpunkten ist möglich.
2.9. Gestaltung des Inhaltsbereichs
Der Inhaltsbereich hat bei den KoGIs-Basismodulen eine feste Textbreite (siehe oben) und darf nicht verbreitert oder verkleinert werden.
Der Inhaltsbereich enthält
• links und rechts einen Abstandshalter zu beiden Seiten
• verpflichtend eine Breadcrumb bzw. einen Nutzungspfad
• einen Textbereich
• verpflichtend eine Seitennavigation („zurück“ und „nach oben“)
• verpflichtend eine Fußnavigation
• wahlweise eine rechte Marginalienspalte mit Info- und Themenboxen 2.10. Breadcrumb/Nutzungspfad
Die Breadcrumb (auch "Ariadnefaden") beschreibt den aktuellen Pfad in der Seitenhierarchie. Sie steht immer an erster Stelle im Inhaltsbereich, wobei die Startseite die einzige legitime Ausnahme bildet. Die "Elternknotenpunkte" werden
8 Gesamtstruktur
verlinkt und nacheinander aufgelistet. Der aktuelle Seitentitel wird hierbei immer ohne Link an letzter Position angezeigt.
Die Breadcrumb wird verpflichtend angezeigt und kann nicht ausgeblendet werden.
Die Formatierung des Textes kann geändert werden.
2.11. Textbereich
Der Textblock nimmt die gesamte Breite des nutzbaren Inhaltsbereiches ein.
Gesamtstruktur
In den Textbereich können Texte und Bilder integriert werden. Für alle Elemente sind vor allem die Formatierungen vorzugeben. Die Anpassungen erfolgen ausschließlich über die CSS-Datei (Eigene Erweiterungen > .eigene templates >
01_user_css_d).
Vorstellbar wären folgende Anpassungen:
• Formatierung der verwendeten Schriften, Schriftart (möglichst serifenlos:
Verdana, Arial oder Helvetica), die -größe und die -farbe:
• Überschrift
• Standardtext
• Links (normal, aktiv, besucht usw.)
• Bildunterschriften
• Listenelemente
• Bildergalerie (Schrifttype, -größe und -farbe sowie Hintergrund der Bildleiste) 2.12. Seitennavigation
Standardmäßig wird das Seitennavigationselement verwendet:
Dieses Element muss verwendet werden, kann aber im Design angepasst werden.
2.13. Lizenzangaben
Die Leiste der Lizenzangaben muss verwendet, die Farbe oder die Formatierung kann allerdings angepasst werden.
9 Gesamtstruktur
2.14. Fußnavigation
Die Fußnavigation muss verwendet, die Farbe oder die Formatierung kann allerdings angepasst werden.
Als erster Menüpunkt muss „Startseite“, als letzte Menüpunkte müssen „Impressum“,
„Datenschutzerklärung“ und „Inhaltsübersicht“ aufgeführt werden.
Die Schriftart, die -größe und die -farbe für die Fußnavigation kann ausschließlich über die CSS-Datei (Eigene Erweiterungen > .eigene templates > 01_user_css_d) angepasst werden.
2.15. Infoboxen
Info- und Themenboxen können wahlweise verwendet oder ausgeblendet werden.
Farblich und hinsichtlich der Schriftformatierung können Anpassungen ausschließlich über die CSS-Datei (Eigene Erweiterungen > .eigene templates >
01_user_css_d) vorgenommen werden.
10 Aktualisierungen
3. Aktualisierungen
Datum Thema Art Seite
September 2021 Vollständig überarbeitet alle
November 2021 Überarbeitung Anwendung Formatvorlage, Aktualisierung der Bildschirmfotos
alle
