Tanja Heilberger, petitio Werbeagentur gmbh Gugelstraße 79 RG Nürnberg. Telefon Fax

Transkript

1 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 Nürnberg Telefon Fax Version 1.1 Datum 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.

2 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: Seite: 2 von 16

3 1 Grundlagen 1.1 Ziele 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 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 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: Seite: 3 von 16

4 1.2 Technische Vorraussetzungen 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 Clientseitige Vorraussetzungen 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 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: Seite: 4 von 16

5 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: Seite: 5 von 16

6 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 Einheiten Schriftgrößen Alle Schriftgrößen des Auftritts werden in % angegeben. Abstände werden in em angegeben Layergrößen Laut BITV müssen alle CSS-Angaben, die das Layout betreffen, in relativen Maßeinheiten angegeben werden 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 Aufteilung der Seite 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: Seite: 6 von 16

7 Aufteilung der Seite Beispielseite: Theresien-Krankenhaus Nürnberg 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: Seite: 7 von 16

8 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: Seite: 8 von 16

9 Schmuckbalken ohne Foto, nur schmale Farbfelder Beispielseite: Theresien-Krankenhaus Nürnberg Hauptinformationen, einspaltiger Satzspiegel Datum: Seite: 9 von 16

10 Platz für Logo des Trägers Schmuckbalken mit Foto Beispielseite: Klosterkindergarten Hauptinformationen, zweispaltiger Satzspiegel Datum: Seite: 10 von 16

11 Platz für Logo des Trägers Schmuckbalken ohne Foto Beispielseite: Klosterkindergarten Datum: Seite: 11 von 16

12 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 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: Seite: 12 von 16

13 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 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: Seite: 13 von 16

14 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: Seite: 14 von 16

15 3 Gestaltung der Seiten 3.1 Typografie HTML Als Schrift für HTML-formatierte Texte wird im CSS Verdana mit den Alternativen Arial und sans-serif angegeben 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 px Grün Ordnung Verdana, # Überschrift 2. Ordnung Bold Verdana, Bold 12 px Grün # Überschrift 3. Ordnung Verdana, Bold 11 px Grün # Überschrift 4. Ordnung Verdana, Bold italic 11 px Grün # Fließtext Verdana 11 px Schwarz Verweise, Legenden, etc Verdana italic 9 px Schwarz Farben Hauptfarben Als Hauptfarben/Führungsfarben werden die Logo-Farben des Ordens (Blau/Grün) verwendet. Alle Einrichtungen der TGE übernommen diese Farbigkeit. Datum: Seite: 15 von 16

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 # Grün # % Grün #84aba1 50% Grün #a9bfb9 25% Grün #bfcdc8 DunkelGrau #bbbdbe HellGrau #cacbcc Schwarz # Datum: Seite: 16 von 16