Styleguide - d-NRW

Weitere Magazine

Empfehlungen

Info

Die Breite der Gestaltungsfläche soll sich an die Browserfenstergröße des Nutzers anpassen. Diese ist zu unterscheiden von der tatsächlichen Bildschirmauflösung, die unabhängig von der Größe des Browserfensters bestimmt werden kann. In Hinblick auf die maximale Begrenzung der Gestaltungsfläche über 952 px hinaus ist zu beachten, dass dabei die Lesbarkeit des Textes gewährleistet ist. Damit sich das Layout beim Textzoom in der Größe anpassen kann, kann für die maximale Breite die Einheit EM Verwendung finden. E: Um eine adäquat lesbare Zeilenlänge zu erreichen sollte der Contentbereich aufgeteilt werden in eine Absatzbreite von 480 px zzgl. einer Randspalte ( Infoboxen, 0.5.5.8) von 190 px. Sofern eine Randspalte aufgenommen wird ist darauf hinzuweisen, dass eine höhere Auflösung als 800 px * 600 px zur Anzeige erforderlich ist. Tabellen, Formulare, Grafiken und ähnlicher Content dürfen die volle Breite der Gestaltungsfläche einnehmen. Beim Verkleinern des Browserfensters unter 952 px sollten die Vorgaben der BITV (Barrierefreie Informationstechnik-Verordnung vom 24.07.2002) eingehalten werden. Diese sehen vor, dass horizontale Bildlaufleisten (Scrollbars) erst dann erscheinen, wenn die äußere Browserfensterbreite kleiner als 800 px wird (minimale Begrenzung). Aus gestalterischer Sicht muss bei der flexiblen Anpassung der Gestaltungsfläche an die Browserfenstergröße jeder Einzelfall abgewogen werden, da breitere oder schmalere Browserfenster zu Kompromissen in Hinsicht auf die Gestaltung führen. Gerade Websites mit repräsentativem Charakter sind darauf angewiesen, dass die Gestaltung bei unterschiedlicher Browserfenstergröße ohne Einbußen erhalten bleibt. Auch die Darstellung von Sonderfällen wie breite Datentabellen, komplexe Flash-Darstellungen, Flash-Videos oder die direkte Zuordnung von Text und Bild im Contentbereich spricht gegen eine verkleinernde Anpassung an die Browserfenstergröße. Unabhängig von der flexiblen Anpassung im Browserfenster muss eine Vergrößerung der Schriftgröße über die Einstellungen des Browsers oder die Tastatur möglich sein. Die reine Vergrößerung der Website bei Schriftgradvergrößerung ist wie auch die entsprechende Möglichkeit in der neuen Generation Browser (Internet Explorer 7.x und 8.x, Firefox 3.x, Opera 9.x) kein Ersatz hierfür, da bei Nutzern mit kleinen Bildschirmauflösungen horizontale Bildlaufleisten erscheinen. Eine vertikale Begrenzung ist nicht definiert, da die Anordnung und Länge der Seiten von der Struktur und Darstellungsweise ihrer Inhalte abhängt. V: Geht die Gestaltung in der Vertikalen jedoch stark über den sichtbaren Bereich hinaus, sollen die Inhalte durch Sprungmarken angemessen gegliedert werden. 0.4.7 Screenaufteilung und Frames V: Der Verzicht auf Frames ist verbindlich. V: Die Gestaltungsfläche wird in fünf, konsistent platzierte und in ihren Funktionen einheitliche Bereiche aufgeteilt. Dies erleichtert die Orientierung in den unterschiedlichen Präsenzen der EAs und trägt in erheblichem Maße zu ihrer Wiedererkennung bei. Seite 20 von 47
Die fünf Bereiche sind: • die Metanavigation für die Sprachauswahl, die Items Kontakt, Impressum, Inhalt und das Suchenfeld • der BMWI-Logobereich für die Bild-Wort-Marke Einheitlicher Ansprechpartner / Single Point of Contact • der Identitätsbereich als EA-Logo-Gestaltungszone • der Navigationsbereich mit den Navigationsebenen, ggf. auch mit hierarchisch tieferen Ebenen und die ihn abschließende Bild-Wort-Marke EUGO-Logo • der Contentbereich für die Breadcrumbnavigation mit optionalen Seitenfunktionalitäten (Drucken, Seite empfehlen, Verlinkung zu Sozialen Netzwerken u.ä.), die Texte und Bildinhalte sowie die Bottombelegung für die „nach-oben-Funktion“ 0.4.8 Bild- und Formensprache Die klare und eindeutige Bildsprache bedient sich der journalistischen und dokumentarischen Farb- oder Schwarz-Weiß-Fotografie. Sie vermeidet grafische Nachbearbeitungen wie zum Beispiel Verläufe, Filter oder andere Verfremdungen. Seite 21 von 47
Seite 1 und 2: IT-Umsetzung der EG-Dienstleistungs
Seite 3 und 4: Seite 3 von 47
Seite 5 und 6: Der Header (Kopf) des EA-Portals, b
Seite 7 und 8: 0.2 Zusammenfassung für den eilige
Seite 9 und 10: 0.3 Zum Verständnis des Kapitels,
Seite 11 und 12: Aus den genannten Merkmalen der Zie
Seite 13 und 14: 0.3.2.5 Inhalte EA-Portal Die Inhal
Seite 15 und 16: aus Content-Header, Content-Body, C
Seite 17 und 18: 0.4.2 Bild-Wort-Marke EUGO Die Bild
Seite 19: Konturfarbe von Navigationsschaltfl
Seite 23 und 24: V: Die Unterkante der Metanavigatio
Seite 25 und 26: 0.5.1.5 Suche V: Das Suchenfeld sow
Seite 27 und 28: 0.5.1.6 Sprachregelungen V: Neben d
Seite 29 und 30: V: Der Identitätsbereich dient der
Seite 31 und 32: Unternehmensführung • Berichtspf
Seite 33 und 34: E: Für eine komfortable Bereitstel
Seite 35 und 36: V: Piktogramme dürfen nicht als Hi
Seite 37 und 38: 0.5.5.9 Startseite eines EA-Portals
Seite 39 und 40: Die Datenerhebung folgt der gängig
Seite 41 und 42: 0.6.2 Kontaktformular Seite 41 von
Seite 43 und 44: 0.6.4 Passwort vergessen-Bildschirm
Seite 45 und 46: Bildschirm 2, Juristische Person Se
Seite 47: 0.6.7 Technische Standards V: Alle

Styleguide - d-NRW

Sie wollen auch ein ePaper? Erhöhen Sie die Reichweite Ihrer Titel.

Template löschen?

Als Template speichern?