Styleguide Content-Management-System für die Internetpräsenzen der Einrichtungen der TGE gträgergesellschaft der Schwestern vom Göttlichen Erlöser (Niederbronner Schwestern) Autor Tanja Heilberger, petitio Werbeagentur gmbh Gugelstraße 79 RG 90450 Nürnberg Telefon Fax email 0911-80 10 660 0911-80 10 661 info@petitio.de Version 1.1 Datum 12.04.2010 Freigabe- Vermerk: Name Ort, Datum Unterschrift Die Übertragung, Reproduktion oder Verwendung eines Teils oder des gesamten Dokuments ist ohne die schriftliche Zustimmung des Verfassers verboten. Alle Rechte sind vorbehalten.
0 Allgemeines 0.1 Änderungshistorie Version Editor geänderte Abschnitte Änderungsgrund Freigabedatum 0.2 Abkürzungsverzeichnis Abkürzung CMS BITV Erklärung Content-Management-System Barrierefreie Informations-Technik-Verordnung 0.3 Projekteigene Terminologie Begriff Verwendung / Definition Datum: 12.04.20109 www.petitio.de Seite: 2 von 16
1 Grundlagen 1.1 Ziele 1.1.1 Richtlinien für einen einheitlichen Auftritt Für die Einrichtungen der TGE soll ein einheitlicher Internetauftritt erarbeitet werden. Ziel ist eine Zusammengehörigkeit zu demonstrieren und die Vernetzung der Inhalte zu optimieren. Der Bezug/Zugehörigkeit zum Orden der Schwestern vom göttlichen Erlöser bzw zur TGE soll deutlich erkennbar sein. Hierzu müssen die jeweils rechtlich richtigen Logos platziert werden (Logo Klosters oder Logo TGE oder Logo Stiftung, etc). Es soll Vertrauen, Sicherheit und Professionalität vermittelt werden. Besonderer Wert muss auf Nutzerfreundlichkeit, Information und Innovation mit Hilfe von zeitgemäßen Technologien und professionellem Web-Design, auch Zugänglichkeit nach BITV gelegt werden. Dieses Dokument soll helfen, den zukünftigen Internet-Auftritt aller Einrichtungen visuell unter einem gemeinsamen Dach zusammenzuführen. 1.1.1.1 Einheitlicher Aufbau der Seiten Um die Nutzungsqualität der Seiten zu erhöhen, müssen Farben, Ikonografie, Bildgestaltung, Navigation und Interaktion innerhalb des Auftritts vereinheitlicht werden. Dies ist wichtig, um die Vertrautheit des Nutzers in den Auftritt zu fördern und den Umgang mit den Seiten zu erleichtern. Eine gemeinsame Frontend-Gestaltung kann zudem helfen, Inhalte über Sites hinweg auszutauschen und technologisch auf ein gemeinsames Backend zu implementieren. 1.1.1.2 Gestalterische Freiheit Richtlinien sind nicht dazu da, blind eingehalten zu werden. Vielmehr erfordern sie einen verantwortungsvollen Umgang. Um dem Inhalt gerecht werden zu können, wird es hin und wieder Fälle geben, bei denen neue Regeln erstellt bzw. bestehende Regeln erweitert werden müssen. Datum: 12.04.20109 www.petitio.de Seite: 3 von 16
1.2 Technische Vorraussetzungen 1.2.1 Serverseitige Vorraussetzungen Die Gestaltung und Programmierung des Auftritts soll mit Hilfe eines Content-Management- Systems realisiert werden. Welches System verwendet wird, muss erst noch entschieden werden. Hr. Mey erarbeitet eine Entscheidungsgrundlage. 1.2.2 Clientseitige Vorraussetzungen 1.2.2.1 Browser Folgende Browser sollen unterstützt werden: Internet Explorer 6 und höher Mozilla Firefox 2 und höher Safari Opera 9 und höher Netscape 8 und höher Konqueror 3.4 und höher Für ältere Browser welche CSS nicht oder nur unvollständig unterstützen, gilt: Funktionen sollen größtmöglich umgesetzt werden Das Design mittels Stylesheets wird nicht oder nur unvollständig angezeigt 1.2.3 Vorraussetzungen bei der technischen Umsetzung der Seite Als technischer Standard soll wird noch festgelegt verwendet werden. Die Umsetzung des Stylesheets erfolgt mittels wird noch festgelegt. Javascript soll weitestgehend so verwendet werden, das der Inhalt auch ohne diese Technologie zugänglich bleibt. Datum: 12.04.20109 www.petitio.de Seite: 4 von 16
1.3 Layoutoptimierung Das Layout soll auf eine Bildschirmauflösung von 1024x768 Pixel optimiert werden. Es wird von einer Maximierung des Browser-Fensters auf Bildschirmgröße ausgegangen. 1.4 Barrierefreiheit Kommende gesetzliche Anforderungen an Barrierefreiheit werden weitestgehend berücksichtigt. Eine Realisierung von Inhalten ist ohne im Browser des Clients ausführbare aktive Inhalte möglich. Es wird davon ausgegangen, dass Standardfunktionen des Browsers vollständig zur Verfügung stehen. Beim Ersteller müssen keine weiteren Tastenbelegungen definiert oder Plugins geladen werden. Datum: 12.04.20109 www.petitio.de Seite: 5 von 16
2 Nutzerführung Um eine optimale Benutzbarkeit und Zugänglichkeit zu erreichen, ist es notwendig, einige Regeln zu befolgen. Besonders wichtig ist es, die Navigationsstruktur über den gesamten Auftritt einzuhalten sowie das System konsistent zu halten. Mit Hilfe einer konsequenten Ikonografie soll das Vertrauen des Nutzers in den Auftritt gefördert und Inhalte geordnet werden. 2.1 Layout 2.1.1 Einheiten 2.1.1.1 Schriftgrößen Alle Schriftgrößen des Auftritts werden in % angegeben. Abstände werden in em angegeben. 2.1.1.2 Layergrößen Laut BITV müssen alle CSS-Angaben, die das Layout betreffen, in relativen Maßeinheiten angegeben werden. 2.1.1.3 Ungeeignete Größen Absolute Größen wie pt und cm oder auch ex, werden von den Browsern unterschiedlich interpretiert, deshalb werden diese nicht verwendet. Ausnahme: Bei Schriftangaben für das Drucklayout sollte pt verwendet werden. 2.1.2 Aufteilung der Seite 2.1.2.1 Gesamtgröße Die Gesamtbreite der Seite wird auf 1000 Pixel gesetzt. So werden Browser mit einer Breite von 1024 Pixel bei vertikaler Scrollleiste unterstützt. Datum: 12.04.20109 www.petitio.de Seite: 6 von 16
2.1.2.2 Aufteilung der Seite 1 4 3 2 5 6 7 Beispielseite: Theresien-Krankenhaus Nürnberg 1 2 3 4 5 6 7 Bereich für das Logo der jeweiligen Einrichtung Bereich für die Servicenavigation, kann evtl. nach links erweitert werden Schmuckbalken. Bereich für Emotionsfotos. Die Bildsprache mit Linien und Farbfeldern muss immer gleich bleiben. Es gibt auch eine grafische Lösung ohne Bild. Bereich für Trägerlogo, bzw rechtlich richtige Zuordnung Bereich für Hauptnavigation Bereich für Hauptinformation. Der Text kann einspaltig oder zweispaltig platziert werden. Bereich für Zusatzinformationen, News, Suchmaschine, etc Datum: 12.04.20109 www.petitio.de Seite: 7 von 16
2.1.2.3 Variablen der Aufteilung Platz für Logo des Trägers Logo der Einrichtung Schmuckbalken mit Foto Hauptinformationen, zweispaltiger Satzspiegel Beispielseite: Theresien-Krankenhaus Nürnberg Datum: 12.04.20109 www.petitio.de Seite: 8 von 16
Schmuckbalken ohne Foto, nur schmale Farbfelder Beispielseite: Theresien-Krankenhaus Nürnberg Hauptinformationen, einspaltiger Satzspiegel Datum: 12.04.20109 www.petitio.de Seite: 9 von 16
Platz für Logo des Trägers Schmuckbalken mit Foto Beispielseite: Klosterkindergarten Hauptinformationen, zweispaltiger Satzspiegel Datum: 12.04.20109 www.petitio.de Seite: 10 von 16
Platz für Logo des Trägers Schmuckbalken ohne Foto Beispielseite: Klosterkindergarten Datum: 12.04.20109 www.petitio.de Seite: 11 von 16
2.1.3 Navigation Ziel der Navigation ist es, dauerhafte Seite innerhalb einer Navigationsstruktur miteinander zu verbinden. Dies gilt nicht für Seiten, die aus der Service-Navigation geöffnet werden sowie für Suchergebnisseiten. In den Navigationsbereichen der Haupt- und Service-Navigation dürfen sich keine Verweise befinden, die zu einer externen Webseite führen oder ein neues Fenster öffnen. Der Nutzer erwartet, dass er sich innerhalb der Navigationsstruktur auf der Seite bewegt. 2.1.3.1 Service-Navigation Position und Größe Die seitenübergreifende Service-Navigation befindet sich rechtsbündig im Kopfbereich der Seite. Für Einrichtungen die in diesem Bereich umfangreichere Navigationspunkte haben, könnte auch eine Fußzeile ergänzt werden Funktion Die Zielseiten der Service-Navigation sind nur über diese und nicht über den Navigationsbaum erreichbar. In der Service-Navigation sollen sich nur Funktionen befinden, die den gesamten Auftritt betreffen. Beispiele hierfür sind die Startseite (Home), die Seitenübersicht (Sitemap), das Impressum, das Kontaktformular, AGBs und ggf. Hinweis auf fremdsprachige Versionen. Es wäre wichtig, die Verweise zu fremdsprachigen Versionen in der jeweiligen Sprache zu kennzeichnen (z.b. English für englischsprachige Version). Die Verwendung von Flaggen ist als Kennzeichnung einer Sprachversion eher nicht tragfähig, da ja nicht eine Landesversion sondern ein Sprachwechsel angeboten wird. Die Verwendung fremder Hoheitszeichen ist zudem fragwürdig. Als erster Verweis in der Service-Navigation ist der Link zur Startseite aus Sicht der Usability besonders wichtig. Datum: 12.04.20109 www.petitio.de Seite: 12 von 16
2.1.3.2 Hauptnavigation Position und Größe Die Hauptnavigation befindet sich unterhalb des Trägerlogos, ist linksbündig neben dem Inhaltsbereich ausgerichtet. Kommen längere Begriffe vor, sollen die Navigationspunkte ggf. umbrechen. Funktion Die Hauptnavigation dient zur Orientierung und schnellen Übersicht auf der Seite. 2.1.3.3 Navigation im Inhaltsbereich Um eine Unterbrechung des Textflusses zu vermeiden, ist es ratsam, keine Verweise innerhalb des Fließtextes zu platzieren. Eine Linkliste am Ende einer Seite oder eines Abschnitts bieten ebenso die Möglichkeit, die Information auf der Seite vollständig zu erfassen. Zudem werden Verweise in Linklisten eher wahrgenommen und lassen sich entspannter lesen. Negativbeispiel: Lesefluß wird unterbrochen... Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht - ein geradezu unortho-graphisches... Positivbeispiel: Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht - ein geradezu unortho-graphisches... >> Wortberge >> Regelialien >> Satzteile Datum: 12.04.20109 www.petitio.de Seite: 13 von 16
Sprungmarken (Anker) Seiten mit Sprungmarken (z.b. FAQ) sollen die Fragen zu Beginn der Seite auflisten und den Antworttext mittels eines Ankers mit der Frage verknüpfen. Nach jedem Antworttext soll die Möglichkeit bestehen, wieder zurück auf den Seitenanfang springen zu können. Bereich für Zusatzinformationen Hier wird auf Anfrageformulare, Ansprechpartner, Veranstaltungen, Newsletter, Fotogalerien etc verwiesen. Die Verweise werden gruppiert und mit entsprechenden Überschriften und/oder Icons versehen. PDF-Dateien und externe Verweise öffnen sich in neuen Fenstern. Datum: 12.04.20109 www.petitio.de Seite: 14 von 16
3 Gestaltung der Seiten 3.1 Typografie 3.1.1 HTML Als Schrift für HTML-formatierte Texte wird im CSS Verdana mit den Alternativen Arial und sans-serif angegeben. 3.1.2 Textformatierung Texte sollten mit Zwischenüberschriften gegliedert werden, um dem Nutzer das schnelle Erfassen eines Textes zu erleichtern. Dadurch werden auch Suchergebnisse bei externen Suchen qualifizierter. Überschriften, Textformatierung mit Stylesheet-Angaben: Übersicht Schriftart Schriftgröße Schriftfarbe Überschrift 1. 14 px Grün Ordnung Verdana, #117865 Überschrift 2. Ordnung Bold Verdana, Bold 12 px Grün #117865 Überschrift 3. Ordnung Verdana, Bold 11 px Grün #117865 Überschrift 4. Ordnung Verdana, Bold italic 11 px Grün #117865 Fließtext Verdana 11 px Schwarz Verweise, Legenden, etc Verdana italic 9 px Schwarz 3.1.3 Farben Hauptfarben Als Hauptfarben/Führungsfarben werden die Logo-Farben des Ordens (Blau/Grün) verwendet. Alle Einrichtungen der TGE übernommen diese Farbigkeit. Datum: 12.04.20109 www.petitio.de Seite: 15 von 16
Die Farbwerte Blau HKS 39 und Grün HKS 55 wurden entsprechend für die Bildschirmdarstellung in Hexadezimalwerten festgelegt. Die Farben kommen in der Benutzeroberfläche und in der Gestaltung von Grafiken, Karten, usw zum Einsatz. Als Zusatzfarben für eine ruhige Gestaltung wird die Farbe Grau (in Abstufungen) verwendet. Hauptfarben Bezeichnung Farbwert Hexadezimal Blau #015093 Grün #117865 70% Grün #84aba1 50% Grün #a9bfb9 25% Grün #bfcdc8 DunkelGrau #bbbdbe HellGrau #cacbcc Schwarz #000000 Datum: 12.04.20109 www.petitio.de Seite: 16 von 16