WEBSTYLEGUIDE - LMU München · In Grafiktexten ist generell die Schriftfamilie „LMU Compatil“...

WEBSTYLEGUIDE

REFERAT I I IA6 ( INTERNET) Email [email protected] Servicetelefon 089 / 2180 – 9898 Mo./Di./Do./Fr. 09:00 Uhr bis 12:00 Uhr Di./Do. 14:00 Uhr bis 17:00 Uhr

Ludwig-Maximilians-Universität München / Ref. III A 6 - Internet Letzte Aktualisierung: 03.09.2007Autor: Eckhard Sedlmayer Projekt: Webauftritt

2

Inhalt

Grundlagen ...............................................................................3

Einführung .........................................................................................................3 Gestaltungsansatz ..............................................................................................4 Barrierefreiheit ..................................................................................................5

Was bedeutet „Barrierefreiheit“ im Internet?................................................5 Barrierefreiheits-Richtlinien – zwischen Gesetz und Erwartungshaltung der Nutzer.............................................................................................................5 Tool zur Feststellung von Barrierefreiheit .....................................................5 Wie erreicht www.lmu.de maximale Barrierefreiheit? ..................................6 Technische Vorgaben.....................................................................................6

LMU Corporate Design – WWW........................................................................7 Die Kennzeichen der LMU im WWW.............................................................7 Farben ............................................................................................................7 Bilder ..............................................................................................................8 Kopfbilder.......................................................................................................8 Bildmaterial im Inhaltsbereich .......................................................................8 Umsetzungskriterien für Fotos und Illustrationen ..Fehler! Textmarke nicht definiert. Ikonographie: .................................................................................................9 Web-Typographie.........................................................................................10 Corporate Design in Beziehung zu Subidentitäten ......................................10

Seitenraster ............................................................................11

Templatestruktur .............................................................................................12 zentrale Seiten der LMU..................................................................................17

Startseite(n) ..................................................................................................18 Standardseite................................................................................................19

Seiten von Subidentitäten der LMU.................................................................21 Ansichten für andere Ausgabegeräte ..............................................................22

Druckansicht ................................................................................................22

Seitenelemente.......................................................................23

Kopfbereich......................................................................................................23 Funktionsbereich .............................................................................................24 Suche ...............................................................................................................24 Navigation........................................................................................................25 Inhaltsbereich ..................................................................................................26

Überschriften: ..............................................................................................26 Überschrift 1. Ordnung ................................................................................26 Überschrift 2. Ordnung ................................................................................27 Überschrift 3. Ordnung ................................................................................27 Überschrift 4. Ordnung ................................................................................27 Überschrift 5. Ordnung ................................................................................27 Überschrift 6. Ordnung ................................................................................27 Tabellen:.......................................................................................................28 Formulare: ....................................................................................................29 Listen:...........................................................................................................30 Gliederungen:...............................................................................................30

Servicebereich .................................................................................................31 Fußzeile............................................................................................................32

Impressum ..............................................................................33


3

Grundlagen

Einführung Das Internet hat sich zum wichtigsten Medium im Außenauftritt einer Institution entwickelt. Das Web ist häufig die erste Quelle, um Informationen einzuholen und Kontakt aufzunehmen. Millionen von Studierenden, Forschern und Interessierten weltweit greifen täglich auf die Seiten einer Universität zu. Die Ludwig-Maximilians-Universität München präsentiert sich daher mit einem aktuellen, benutzerfreundlichen und ansprechenden zentralen Webauftritt. Der Relaunch dieses Kernauftritts unter der URL www.lmu.de umfasst derzeit mehrere tausend Inhaltsseiten. Hier sind die Informationen zugänglich, die die Universität als Ganzes betreffen. Lehr- und Forschungseinrichtungen haben nach wie vor eigene Seiten, zu denen von www.lmu.de aus verlinkt wird. Dieser Relaunch der zentralen Seiten bildet den Auftakt dazu, die Vielzahl einzelner Webauftritte von Institutionen der LMU baldmöglichst optisch und technisch als Verband zusammengehöriger Websites zu gestalten. Bei diesem Prozess wird großer Wert darauf gelegt, dass die Einheiten der LMU Gestaltungsspielraum haben, um sich individuell zu präsentieren. Gleichzeitig soll die „Dachmarke LMU“ erkennbar sein. Für dieses Vorhaben dient der hier im Styleguide beschriebene, neue zentrale Internetauftritt www.lmu.de als Referenz.


4

Gestaltungsansatz

Dem Layout der Website wurde eine optisch schnell erfassbaren Gliederungssystematik zugrunde gelegt. Der Nutzer und sein Bedürfnis nach rascher Information stand bei der Gestaltung im Zentrum. Auf unnötige visuelle Effekte (z. B. Flash-Animationen) wurde deshalb bewusst verzichtet. Nicht zuletzt aus diesem Grund ist die Seite für behinderte Nutzer weitestgehend barrierefrei. Der großzügige Kopfbereich, der auf der Startseite das Selbstverständnis und die Bedeutung der LMU unterstreicht, lädt Besucher mit einer Vielzahl von interessanten Fotomotiven zum Weitersurfen ein. Im weiteren Verlauf nimmt sich der Kopfbereich aus Platzgründen zugunsten des Inhaltsbereichs zurück. Das Informationsangebot der Website gliedert sich klassisch nach den Rubriken der Hauptnavigation. Verschiedenen Nutzergruppen finden dort alles Wissenswerte in übersichtlichen, selbsterklärenden Rubriken vor. Die Navigationstiefe ist auf drei Ebenen beschränkt, damit die Nutzer die Tiefe des Informationsangebots stets überblicken können. Eine Funktionsleiste zwischen Kopfbereich und Inhaltsbereich umfasst alle wesentlichen, nicht zur Navigation zugehörigen Funktionen: von der Sprachwahl über die Indexfunktion bis zum künftigen Login beim Web-Portal. Im optionalen Servicebereich rechts vom Inhaltsbereich finden sich kontextbezogene Linklisten: sog. „Beliebte Links“ erleichtern das Auffinden häufig nachgefragter Informationen, Veranstaltungshinweise, Termine und Uni-Nachrichten binden den Nutzer ins Campus-Leben mit ein.


5

Das Layout der Website wird auf Basis von HTML 4.0 und CSS 2.0 realisiert. Die Seiten sind für eine Bildschirmauflösung von 1024 x 768 optimiert. Durch die nach unten offene Layoutstruktur kann Inhalt einfach mitwachsen.

Barrierefreiheit

Was bedeutet „Barrierefreiheit“ im Internet?

Ziel eines barrierefreien Webauftritts ist es, für alle Nutzer einen schnellen, unkomplizierten Zugang zur gewünschten Information zu ermöglichen - unabhängig davon, welche Geräte zum Abrufen der Seiten verwendet werden (grafische Browser, Vorlesesysteme - so genannte Screenreader -, PDAs, Drucker, usw.)

Barrierefreiheit bedeutet daher nicht nur behinderten- oder gar nur blindengerechte Programmierung. Von einer barrierefreien Umsetzung profitieren alle Nutzer, da sie insgesamt den Zugang zu einer Seite und zu deren Inhalten optimiert. Generell betrifft eine barrierefreie Optimierung immer vier wesentliche Punkte:

Wahrnehmbarkeit der Inhalte Verständlichkeit der Inhalte Bedienbarkeit der Webseite technologische Robustheit

Barrierefreiheits-Richtlinien – zwischen Gesetz und Erwartungshaltung der Nutzer

Die Barrierefreiheitsrichtlinien für Webseiten, die im wesentlichen bekannte Standards des W3C darstellen und in der der BITV (Barrierefreie Informationstechnik-Verordnung) ausführlich dokumentiert sind, sind „weiche“ Kriterien, die sich nach Priorität sortieren lassen.

Es gibt keinen gesetzlichen Zwang, sämtliche dieser Richtlinien gleichzeitig in einem Internetauftritt umzusetzen. Dies macht durchaus Sinn, da eine „radikal“ barrierefrei programmierte Website die Erwartungshaltung nicht-behinderter Benutzer an modernes Design und gefällige Optik enttäuschen würde – dabei stellt diese Nutzergruppe zahlenmäßig den höchsten Anteil.

Da ein Ziel des neuen LMU-Webauftritts eine Maximierung der Nutzer-Akzeptanz ist, fand keine starre Umsetzung sämtlicher Barrierefreiheitsrichtlinien statt. Selbstverständlich wurden alle übergeordneten Richtlinien grundsätzlich eingehalten. Der Umsetzung von gering priorisierten Barrierefreiheitsrichtlinien ging jedoch stets eine Abwägung nach „Nutzen für die angesprochene Zielgruppe“ und Programmieraufwand voraus.

Tool zur Feststellung von Barrierefreiheit

Webseiten können mit einem speziellen Tool online auf Barrierefreiheit überprüft werden. Das Tool ist unter http://www.barrierefinder.de abrufbar.


6

Wie erreicht www.lmu.de maximale Barrierefreiheit?

Die Website www.lmu.de erreicht eine optimale Barrierefreiheit durch

grundsätzliche Trennung von Layout und Inhalt strukturierten Aufbau des Inhalts einstellbare Schriftgrößen Alt- und Title-Texte zu Bildern und Links Tabellen, die ausschließlich zur Aufbereitung strukturierter Daten dienen

(Tabellen werden niemals zu Layoutzwecken verwendet!) deutliche Farbgebung (Website ist auch ohne Farbe navigierbar!) Anpassungen zur Erreichung höchster Browserkompatibilität Einsatz einer „selbsterklärenden“, monochromen Ikonographie weitgehender Verzicht auf Einsatz aktiver Inhalte (z. B. Flash) robusten Standard-HTML-Code

Technische Vorgaben

Für alle Seiten innerhalb des Webauftritts der LMU gelten zur Gewährleistung von Barrierefreiheit und größtmöglichen Browserkompatibilität folgende technische Vorgaben:

HTML 4.1 transitional CSS2 Größtmögliche W3C-Konformität keine aktiven Inhalte möglichst kompletter Verzicht auf Flash und andere multimediale

Webtechniken optimiert für 1024 x 768 Pixel Bildschirmauflösung


7

LMU Corporate Design – WWW Der Webauftritt ist nach dem Corporate Design (CD) der LMU gestaltet, das die medienübergreifende visuelle Identität der LMU auch im Internet regelt (siehe Corporate Design-Manual unter www.lmu.de/corporatedesign) Dies bedeutet für die Praxis die konsequente Verwendung der CD-Basiselemente (Logo, Siegel, Schriftarten, Farben) nach den vorgegebenen Richtlinien, die im Folgenden beschrieben werden

Die Kennzeichen der LMU im WWW das LMU-Logo das mit dem LMU-Logo verbundene Boxensystem das Siegel der Universität Diese Kennzeichen kommen im WWW verbindlich und ausschließlich im Kopfbereich (eingebunden in das Kopfbild) vor. Hierfür ist folgendes Schema einzuhalten:

Kopfbild – Startseite

Kopfbild – Standardseite (Folgeseiten ab 2. Navigationsebene)

Farben Farben, die von den für die Gestaltung der Website vorgesehenen Standardfarben abweichen, kommen sparsam und gezielt, vorzugsweise nur im Kopfbereich, zum Einsatz. In der Funktionsleiste, in der Navigation, in der Fußzeile und im Servicebereich bleiben Farben der Kennzeichnung von Links vorbehalten.


8

Bilder

Kopfbilder Das für die Gestaltung des Kopfbereichs relevante Bildkonzept wurde von der Kommunikationsagentur Haak & Nakat, München erarbeitet. Zur Erstellung von Kopfbildern kontaktieren Sie bitte das Referat IIIA6 Internet.

Bildmaterial im Inhaltsbereich Bilder werden im Inhaltsbereich einer Webseite möglichst immer mit einer Breite von 130 Pixeln angezeigt. Falls vorhanden, kann der Nutzer dann durch Mausklick auf das Bild oder die Zoom-Schaltfläche unterhalb des Bildes auf eine vergrößerte Ansicht des Bildes umschalten:

Bild im Inhaltsbereich mit

Zoom-Schaltfläche


9

Für das Erstellen und Auswählen von geeignetem Bildmaterial für den Inhaltsbereich finden Sie hier einige thematische und inhaltliche Gestaltungsansätze, die Ihnen vielleicht bei der Motivsuche helfen! Gerade Gegensätze und vermeintliche Widersprüche können dabei besonders zur Bildwirkung beitragen.

„Besonderheiten“ der LMU

Spitzenleistungen in Forschung und Lehre Fächervielfalt vs. Exklusivität durch Quotenfächer Internationalität, Erfüllung internationaler Standards Lange Tradition vs. modernste Forschung und Architektur Größe – von einer der größten Universitäten Deutschlands hin zur

Überschaubarkeit einzelner Standorte Lage: mitten in München, einer der beliebtesten deutschen Städte

Menschen und Architektur an der LMU

Tätigkeiten der Menschen an der LMU (Lehren, Lernen, Forschen, Managen …)

Studierende – Mitarbeiter (Professoren, Dozenten, Forscher, Verwaltungsangestellte)

Funktion von Architektur (Raum für Arbeit, Forschung, Lehre …) Verbindung der LMU-Standorte mit der Stadt München (Einbindung

ins Stadtbild, Nähe zum bunten Stadtleben mit, Cafés, kulturellen Einrichtungen, Einkaufsmöglichkeiten …)

Spannung durch Gegensätze

z.B. HighTech-Campus Martinsried – Hauptgebäude Ludwigstrasse z.B. Tag- und Nachtstimmungen z.B. besondere Standorte (Wendelstein, Forststation im bayerischen

Wald, Oberschleißheim …) Auf Webseiten der LMU dürfen keine Bildcollagen verwendet werden!

Ikonographie: Für eine optisch leichter erfassbare Darstellung bestimmter Funktionen und Funktionalitäten werden bestimmte Schaltflächen (Icons) oder Symbole verwendet. Schaltflächen lösen durch Mausklick eine definierte Funktion aus. Sie sind grün hinterlegt (Farbwert #006633), ihre Funktion ist mit einem einfachen, klar erkennbaren, monochrom weißen Symbol visualisiert. Folgende Schaltflächen kommen auf der LMU-Website zum Einsatz:

Druck Speichern (z.B. von Artikeln) Mail-Links Zoom-Schaltfläche zum Vergrößern von Bildern im Inhaltsbereich Zoom-Schaltfläche zum Verkleinern von Bildern im Inhaltsbereich Link nach oben zum Seitenanfang


10

Im Gegensatz zu Schaltflächen lösen Symbole keine Aktion aus, sind nicht selbst anklickbar. Sie visualisieren vielmehr eine Eigenschaft (z.B. eines Download-Angebots oder eines Links). Momentan kommem auf der LMU-Website folgende Symbole zum Einsatz:

PDF-Dateien zum Anzeigen oder zum Download Andere Dateien zum Anzeigen oder zum Download Word-Dateien zum Anzeigen oder zum Download Excel-Dateien zum Anzeigen oder zum Download ZIP-Archive zum Download Audio-Dateien zum Abspielen oder zum Download Video-Dateien zum Abspielen oder zum Download ausklappbare Auswahloptionen ausgeklappte Auswahlotionen

Web-Typographie In Grafiktexten ist generell die Schriftfamilie „LMU Compatil“ zu verwenden. Bei Webanwendungen kommt dabei vorzugsweise der Stil „LMU Compatil Fact“ zum Einsatz. Für den Text im Boxensystem in den Kopfbilder muss jedoch immer der Schriftstil „Compatil Fact Bold“ verwendet werden! Für HTML-Text im Seitenbereich der Website wird grundsätzlich der für die Anzeige auf Bildschirmen optimierte und bei den meisten Nutzern verfügbare Font „Verdana“ verwendet. Es sind ausschließlich relative Schriftgrößen zu verwenden (d.h. Größenangaben in „em“ oder in Prozent). Die kleinste verwendbare Schriftgröße beträgt 0,8 em, die größte 1,2 em.

Corporate Design in Beziehung zu Subidentitäten Für die Einbindung der einzelnen Einheiten der LMU in das Corporate Design gibt es verschieden Umsetzungsmöglichkeiten, die im Corporate Design-Handbuch der LMU näher erläutert werden. Es ist so problemlos möglich, z.B. spezifische Bildmarken in den Kopfbereich von Webauftritten nach der Corporate Design-Vorgabe zu integrieren:

Beispiel für ein in das Boxensystem integriertes Logo Verwendet eine LMU-Einheit eine eigene, identitätsprägende Leitfarbe, ist es auch möglich, die Linkfarben und die Farbe der Ikonographie im Inhaltsbereich anzupassen. Im Gegensatz zu den im Corporate Design-Handbuch der LMU für Print und andere Medien definierten Schriftvorgaben für die dritte Box ist im Web allerdings ausschließlich die in den von Referat IIIA6 zu beziehenden Vorlagen verwendete Schriftgröße zu verwenden!


11

Seitenraster Grundlage für die Webseiten der LMU ist ein definiertes, für eine Bildschirmauflösung von 1024x768 Pixeln optimiertes Grundraster:

Die Einteilung in Kopfbereich, Seitenbereich und Fußzeile mit den jeweiligen Maßen ist für alle im CMS der LMU gepflegten Webseiten zentral vorgegeben. Die Umsetzung des Seitenrasters sowie die Befüllung des Grundrasters aus Kopfbereich, Seitenbereich und Fußzeile mit den jeweiligen Funktionalitäten erfolgt durch verschiedene, im System abrufbare Vorlagen, sog. „Templates“.


12

Templatestruktur Das oben beschriebene, für alle mit dem CMS der LMU gepflegten Seiten grundlegende Seitenraster ist in einer zentralen Vorlage, dem sog. „Mastertemplate“, festgelegt. Dieses Mastertemplate bindet dann für die einzelnen Inhalts- und Funktionsbereiche der Seite notwendige, spezielle Layoutvorlagen ein, sog. „Subtemplates“. Eine Seite des LMU-Webauftritts enthält somit normalerweise folgende, durch Subtemplates generierte Bereiche:

1) Kopfbereich 2) Funktionsleiste 3) Navigationsbereich 4) Navigationspfad 5) Inhaltsbereich 6) Servicebereich 7) Fußzeile

Das Layout einer aktuell dargestellten Seite entsteht also, in dem das Mastertemplate mit den für diese Seite notwendigen Subtemplates „befüllt“ wird:


13

1) Kopfbereich Der Kopfbereich ist ein vorgeschriebener Bereich, der über jeder Seite des LMU-Webauftritts steht. Er ist das zentrale Corporate Design-Element der LMU-Website und gewährleistet ein einheitliches Erscheinungsbild über die gesamte Seitenstruktur. Auf der Startseite der LMU-Website sowie auf den Startseiten der Unterbereiche („Aktuelles“, „Über die LMU“, „Einrichtungen“, „Studium“, „Forschung“, „Kooperationen“, „Weiterbildung“) kommt ein Kopfbereich mit den Maßen 955 x 195Pixel zum Einsatz, für Folgeseiten wird ein kleinerer Kopfbereich mit 955 x 155 Pixeln verwendet.

2) Funktionsleiste Die Funktionsleiste enthält übergreifende Links und Funktionalitäten, die auf jeder Seite des Webauftritts zugänglich sein sollen. Hierzu zählen die Sprachumschaltung, die Links zu Index, Sitemap und zur Portalstartseite, künftige Login- bzw. Logout-Funktion sowie die Suche.

Seitenspezifische Funktionen, also Funktionalitäten, die sich direkt auf den Inhalt der gerade angezeigten Seite beziehen, stehen niemals in der Funktionsleiste, sondern immer im Servicebereich!


14

3) Navigationsbereich Der Navigationsbereich ermöglicht die Navigation durch die LMU-Website ebenso wie die Orientierung innerhalb selbiger. Er ist fester Bestandteil sowohl der Startseite als auch aller Standardseiten. Die Navigation ist 200 Pixel breit, zum Inhaltsbereich auf der rechten Seite hat sie einen Abstand von 20 Pixeln.

4) Navigationspfad Oberhalb des Contentbereichs wird immer der Navigationspfad mit allen übergeordneten Seiten von der Startseite hin zur aktuell angezeigten Seite angezeigt, um dem Nutzer die Orientierung auf der Website zu erleichtern und eine zusätzliche Navigationsmöglichkeit anzubieten. Einzige Ausnahme ist die Startseite des Webauftritts der LMU. Hier entfällt dieser Bereich.


15

5) Inhaltsbereich Der Inhaltsbereich enthält den informativen Inhalt der aktuell angezeigten Seite, also den eigentlichen Seiteninhalt. Der Inhaltsbereich ist 535 Pixel breit. Auf Seiten ohne Servicebereich kann er allerdings auf 735 Pixel erweitert werden (s.u.). Zur Navigation bzw. zum Servicebereich werden jeweils 20 Pixel horizontaler Abstand eingehalten.


16

6) Servicebereich Der 180 Pixel breite Servicebereich enthält zusätzliche Funktionalitäten, die meist direkten Bezug zum Inhalt der aktuell angezeigten Seite besitzen. Dies können z.B. ausgewählte Links, Terminübersichten oder ein Zielgruppenzugang sein.

7) Fußzeile Die Fußzeile mit 18 Pixeln Höhe ist fester Bestandteil jeder Seite im LMU-Webauftritt. Sie enthält die Links zum Impressum, zu den Datenschutzrichtlinien und zur Kontaktseite.


17

zentrale Seiten der LMU Für die Seiten des zentralen Webauftritts der LMU werden alle notwendigen Vorlagen (Templates) vorgegeben. Das Anlegen eigener Templates für einzelne Seiten ist nicht möglich. Somit bleibt ein einheitliches Layout und damit ein geschlossenes Corporate Design gewährleistet. Für die zentralen Seiten sind zwei Seitenraster vorgesehen, zum einen die Startseite für den Webauftritt der LMU und die erste Ebene der Unterseiten, zum anderen alle nachfolgenden Unterseiten (Standardseiten) mit in der Höhe etwas reduziertem Kopfbereich. Ferner gibt es eine Reihe von speziellen Inhalts-Vorlagen für besonders strukturierte Seiten, z.B. Terminübersichten, Pressemitteilungen, Studiengangsinformationen u.a. Detaillierte Informationen über für einen Bereich relevante spezielle Seitenvorlagen können den jeweiligen Schulungsunterlagen entnommen werden.

LMU-Startseite LMU-Standardseite


18

Startseite(n) Die Startseite des LMU-Webauftritts sowie die Startseiten der Unterbereiche in der ersten Navigationsebene unterhalb dieser zentralen Startseite besitzen einen größeren, von allen anderen Seiten abweichenden Kopfbereich. Beachten Sie: Bei Startseiten von eigenständigen Webauftritten mit eigener Startseite innerhalb der LMU wird dieser vergrößerte Kopfbereich nicht verwendet. Hier gilt das Seitenraster der sog. Standardseiten! Auf den Navigationspfad wird auf der LMU-Startseite verzichtet. Ansonsten entspricht das Seitenraster der Startseite dem oben beschriebenen Standardraster:


19

Standardseite Die Standardseite im zentralen Webauftritt besitzt einen etwas kleineren , d.h. niedrigeren Kopfbereich. Sie ist folgendermaßen aufgebaut:

Der Servicebereich ist dabei nicht zwingend vorgeschrieben. Seiten, für die keine sinnvollen Service-Elemente verfügbar sind, oder deren Inhalt einen größeren Inhaltsbereich erfordert, können auf diese Spalte verzichten.


20

Es ergibt sich dann folgendes Seitenraster:


21

Seiten von Subidentitäten der LMU Das Raster für Seiten von einzelnen Einheiten der LMU, z.B. von Fakultäten, entspricht weitgehend dem des zentralen Auftritts. Ein eigenes Seitenraster mit vergrößertem Kopfbereich für die Startseiten und die Seiten der ersten Navigationsebene kann dabei auf Fakultätsauftritten optional verwendet werden, bei anderen Einrichtungen wird darauf verzichtet. Somit basieren alle Seiten des Webauftritts einer LMU-Einheit auf dem Standard-Seitenraster mit variablem Inhaltsbereich:

Im Gegensatz zum zentralen Webauftritt der LMU besteht für die Seiten von LMU-Einheiten aber auch die Möglichkeit, eigene Seitenvorlagen (Templates) zu erstellen. Das Grundraster mit Kopfbereich, Seitenbereich und Fußzeile bleibt dabei vorgegeben:


22

Der Seitenbereich dagegen kann, wenn gewünscht, mit eigenen Templates befüllt werden.

Ansichten für andere Ausgabegeräte Andere Ausgabegeräte benötigen eventuell eigene, für die jeweiligen Darstellungsmöglichkeiten des Endgeräts angepasste Seitenraster. Denkbar sind z.B. spezielle Templates für PDAs oder für per Mobiltelefon abrufbare WAP-Seiten. Momentan ist eine Druckansicht für den Ausdruck der aktuellen Seite verfühbar.

Druckansicht Das Seitenraster für die Druckansicht verzichtet auf jegliche Navigations- oder Funktionsbereiche. Oben auf der ersten Druckseite wird ein Kopfbereich mit LMU-Logo speziell für die Druckausgabe eingeblendet. Zur Orientierung (also Einordnung der gedruckten Einzelseite in den Kontext der gesamten Website) wird der Navigationspfad angezeigt. Darunter wird der vollständige Inhalt eingeblendet.


23

Seitenelemente Im Folgenden werden die einzelnen Elemente einer Seite im LMU-Webauftritt in Funktion und Gestaltung näher beschrieben. Die Style Sheets der LMU-Website werden über das Content Management System automatisch eingebunden. Sie sind aufgeteilt in drei verschiedene externe Stylesheet-Dateien:

global_screen.css Diese Stylesheet-Datei enthält alle Vorgaben zum Seitenraster, also zur Aufteilung einer Seite des Webauftritts in die einzelnen Seitenbereiche. site_screen.css Diese Stylesheet-Datei enthält Vorgaben zum Aussehen der Seiteninhalte, also Schriftarten und Größen, Farben, Abstände innerhalb bestimmter Seitenbereiche etc. print.css Für den Ausdruck von Webseiten werden eigene, für den Drucker optimierte Formatierungen bereitgestellt. Diese sind in der Stylesheet-Datei print.css zusammengefasst.

Kopfbereich

Position: siehe Seitenraster Funktion: Im Kopfbereich wird das Corporate Design der LMU dargestellt. Es werden maximal 4 Kästen verwendet. Im ersten Kasten erscheint das Triplet LMU, im zweiten wird LMU ausgeschrieben, im dritten Rahmen erscheint der Name der Subidentität, wie z.B. der Name der Fakultät oder des Departments. Das Logo der LMU wird mit einem alt- und Title-Tag „zur Startseite“ versehen und wird mit einem Link eingebunden, der zur Startseite führt. Das Logo einer Subidentität der LMU kann ggf. in einem vierten Kasten eingebunden werden. Aussehen: Startseite:

Breite: 955 Pixel Höhe: 195 Pixel

Standardseite (und Startseite von Webauftritten der Subidentitäten):

Breite: 955 Pixel Höhe: 155 Pixel


24

Funktionsbereich

Position: siehe Seitenraster Funktion: In diesem Bereich befinden sich die Seitenübergreifenden Links und Funktionalitäten. Aussehen:

Breite: 955 Pixel Höhe: 26 Pixel Schriftgröße: .8em Schriftfarbe: #6B6C6F Schriftgewichtung: bold Schriftfarbe (Mouseover): #339933

Suche

Position: siehe Seitenraster Funktion: Die Suche kann durch das Betätigen der Entertaste, sowie einem Klick auf den „Suchen“-Button aktiviert werden. Es öffnet sich im Contentbereich eine neue Seite mit den Suchergebnissen. Aussehen:

Breite Eingabefeld: 115 Pixel Schriftgröße (im Eingabefeld): .9em Schriftfarbe im Eingabefeld: #6B6C6F Hintergrundfarbe: #FFFFFF Umrandung des Eingabefeldes: 1 Punkt Linie #808285


25

Navigation

Position: siehe Seitenraster Funktion: In der Navigation werden maximal 3 Ebenen dargestellt, alle tiefer liegenden Links werden im Inhaltsbereich angezeigt. Wird ein Punkt ausgewählt/angeklickt, klappt dieser auf ( siehe Screenshot); die folgenden Unterpunkte werden eingerückt dargestellt. Aussehen: 1. Ebene:

Breite: 200 Pixel Trennlinien: 1 Pixel, durchgehend, #AFAFAF Schriftgröße: 1.1 em Schriftfarbe: #6B6C6F Schriftgewichtung: bold Hintergrund (Mouseover): #EFEFEF Einrückung: 5 px

2. Ebene:

Schriftgröße: 1em Schriftfarbe: #6B6C6F Schriftgewichtung: normal Hintergrund (Mouseover): #EFEFEF Einrückung: 15 px

3. Ebene:

Schriftgröße: 1em


26

Schriftfarbe: #6B6C6F Schriftgewichtung: normal Hintergrund (Mouseover): #EFEFEF Einrückung: 30 px

Inhaltsbereich

Überschriften:

Für den Inhaltsbereich stehen sechs verschiedene Überschriften zur Verfügung. Diese unterscheiden sich in Schriftgröße, Gewichtung und Farbe von einander. Jede Überschrift hat einen bestimmten Abstand nach oben und nach unten zugewiesen. Überschriften erster Ordnung werden ausschließlich für den Haupttitel der jeweiligen Seite verwendet!

Überschrift 1. Ordnung Aussehen:

Schriftgröße: 1.2 em Schriftgewichtung: bold Schriftfarbe: #000000 Abstand nach oben: 20 Pixel Abstand nach unten: 105 Pixel


27


Schriftgröße: 1 em Schriftgewichtung: bold Schriftfarbe: #333333 Abstand nach oben: 12 Pixel Abstand nach unten: 2 Pixel


Schriftgröße: 1 em Schriftgewichtung: bold Schriftfarbe: #666666 Abstand nach oben: 8 Pixel Abstand nach unten: 10 Pixel


Schriftgröße: 1 em Schriftfarbe: #7A7979 Abstand nach oben: 8 Pixel Abstand nach unten: 10 Pixel


Schriftgröße: .9 em Schriftfarbe: #7A7979 Abstand nach oben: 8 Pixel Abstand nach unten: 0 Pixel


Schriftgröße: .8 em Schriftfarbe: #7A7979 Schriftgewichtung: italic Abstand nach oben: 6 Pixel Abstand nach unten: 0 Pixel


28

Tabellen:

Funktion: Tabellen dürfen aufgrund der Richtlinien der Barrierefreiheit ausschließlich zur Strukturierung von Daten verwendet werden, niemals zu Layoutzwecken.

Bei Datentabellen muss auf die genaue und korrekte Verwendung der HTML-Tags geachtet werden, so dass z.B. die Tabellenüberschriften mit <caption> gekennzeichnet werden, sowie die Kopfzellen mit <th>.

Durch grau hinterlegte Zellen mit einem Abstand von 2 Pixeln zu benachbarten Zellen werden Tabellen übersichtlich strukturiert. Durch Verwendung der Klasse „tabellerahmenlos“ ist es aber auch möglich, Tabellen ohne eine solche Hinterlegung anzulegen.

Aussehen: Breite der Tabelle: 535 Pixel Abstand nach oben: 8 Pixel Abstand nach unten: 12 Pixel Schriftgröße: .9em Caption – Schriftgewichtung: bold Caption –Umrandung: Linie mit 2 Pixeln Breite , durchgehend, # EFEFE9

(gleich Hintergrundfarbe, dadurch optischer Effekt eines Abstandes) Hintergrundfarbe: #E9E8E8 Kopfzelle – Schriftgewichtung: bold Kopf- und Tabellenzelle – Umrandung: Linie mit 2 Pixeln Breite ,

durchgehend, # EFEFE9 (gleich Hintergrundfarbe, dadurch optischer Effekt eines Abstandes)


29

Formulare:

Funktion:

Formulare werden für weiterzuverarbeitende Nutzereingaben aller Art verwendet. Durch die durchgehende Hinterlegung mit Grau (#EFEFEF) sind sie immer eindeutig zu erkennen.

Ausgenommen sind hiervon lediglich spezielle Eingabebereiche außerhalb des Inhaltsbereich (z.B. das Suchfeld).

Aussehen: Breite eines Formulars: 535 Pixel Abstand nach oben: 8 Pixel Abstand nach unten: 15 Pixel Hintergrundfarbe: #EFEFEF Innenabstand nach oben: 5 Pixel


30

Listen: Zwei verschiedene Arten von Listen sind zu unterscheiden:

Aufzählungen:

Gliederungen:


31

Servicebereich

Position: siehe Seitenraster Funktion: Im Servicebereich können verschiedene einzelne Module angezeigt/verwendet werden. Die Module, wie z.B. „Beliebte Links“, beziehen sich auf den jeweils aktuell dargestellten Inhalt. Es stehen zurzeit folgende Module zur Auswahl:

Beliebte Links Zielgruppenzugang („Informationen für …“)

Linksammlungen wie „Beliebte Links“ oder der Zielgruppenzugang werden in Listen aufgeführt.


32

Aussehen: Breite: 180 Pixel Überschrift – Schriftgröße: 0.9em Überschrift – Schriftgewichtung: bold Überschrift – Schriftfarbe: :#7E7E7E Überschrift – Hintergrundfarbe: #EFEFEF Umrandung: 1 Punktlinie oben und unten, durchgehend, #A09F9F Überschrift – Einrückung: 2 Pixel Text – Schriftfarbe, Schriftgröße: #7E7E7E, 0.9em Links – Schriftfarbe, Auszeichnung: #339933, keine Links, besucht – Schriftfarbe, Auszeichnung: #669966, keine Links, mouseover – Schriftfarbe, Auszeichnung: #339933, unterstrichen Links, aktiv – Auszeichnung: keine Links, focus – Auszeichnung: keine

Fußzeile

Position: siehe Seitenraster Funktion: In der Fußzeile befinden sich die Links zu Kontakt, Datenschutz und Impressum. Aussehen:

Textausrichtung: center Links – Schriftgröße, Schriftfarbe, Auszeichnung: .8em, #6B6C6F, keine Links, besucht – Schriftfarbe, Auszeichnung: #669966, keine Links, mouseover – Schriftfarbe, Auszeichnung: #339933, unterstrichen


33

IMPRESSUM Herausgeber: Rektorat der Ludwig-Maximilians-Universität (LMU) München www.lmu.de Konzept Internet: Referat Internet LMU Konzept Corporate Design: www.haak-nakat.de Alle Nutzungsrechte liegen bei der Ludwig-Maximilians-Universität München. Sowohl das Logo als auch das Siegel, die Dateivorlagen und Fonts dürfen genehmigungsfrei nur durch die Angehörigen der Universität und nur nach den hier vorliegenden Richtlinien verwendet werden. Alle anderen Verwendungen, insbesondere durch externe Dienstleistungsunternehmen bedürfen einer vorherigen Genehmigung. Die Urheberrechte bezüglich des ursprünglichen LMU-Logos (Buchstabentriplet LMU) liegen beim Grafikbüro Rolf Müller, München; die Urheberrechte bezüglich des Konzepts des Corporate Designs liegen bei der Kommunikationsagentur Haak & Nakat, München. Die Schriftsoftware ist geistiges Eigentum der Heidelberger Druckmaschinen AG und/oder deren Lizenzgeber.

WEBSTYLEGUIDE - LMU München · In Grafiktexten ist generell die Schriftfamilie „LMU Compatil“...

Documents

Transcript of WEBSTYLEGUIDE - LMU München · In Grafiktexten ist generell die Schriftfamilie „LMU Compatil“...