Post on 06-Dec-2019
transcript
Richtlinien zur Gestaltungder Webseiten der Max-Planck-Institute
München, Juli 2003
WebDesign
V O R W O R T 3
1 . S E I T E N R A S T E R
Browserdarstellung 11
Flächenaufteilung 12
2 . N A V I G AT I O N
Haupt-Navigation 15
Meta-Navigation 20
Institutskennung 21
Sub-Navigation 22
Suche 24
3 . G R A F I S C H E E L E M E N T E
Logo-Platzierung 27
Icons 28
Icon-Platzierung 29
Farben 30
Alternative Farbsets 32
4 . T Y P O G R A F I E | A B B I L D U N G E N
Schriften 37
Schlüsselbild 38
Bildplatzierung 39
Weitere Bildformate 40
5 . W E I T E R E A N W E N D U N G E N
Stellenangebote 45
Adressdarstellung 46
Anfahrtsbeschreibung 47
Formulare 48
Linklisten 50
Mitarbeiterlisten 52
Publikationen 54
Sitemap 56
6 . O N W – O P E N N E W W I N D O W
Flächenaufteilung 59
Mitarbeiterdarstellung 60
Anfahrtskarten 62
CD-ROM 64
I N H A LT
V O R W O R T
Webdesign und Funktionalität
www.maxplanck.de ist der neue Internetauftritt der Max-Planck-
Gesellschaft zur Förderung der Wissenschaften e.V. (MPG). Er verdeut-
licht die Kompetenzen und das Leistungsspektrum der MPG auf eine
seriöse und zugleich souveräne Art und Weise. Im Mittelpunkt stehen
Informationen und neues Wissen aus allen Instituten, gewissermaßen
aus „erster Hand“.
Auf Grund der komplexen Struktur der MPG und der weit reichenden
Forschungsaktivitäten ihrer Institute sind dabei die unterschiedlichsten
Themen und Inhalte an verschiedene nationale und internationale Ziel-
gruppen zu kommunizieren, wie beispielsweise an:
– die breite Öffentlichkeit
– die Medien
– Universitäten und Schulen
– andere Forschungseinrichtungen
– Wirtschaftsunternehmen
– die eigenen Mitarbeiter
Um die Richtigkeit und Aktualität der Informationen zu gewährleisten
und die Pflege der Inhalte effizient zu gestalten, stützt sich der neue
Internetauftritt der MPG auf ein Content-Management-System (CMS).
Das CMS erlaubt es, alle Inhalte getrennt vom Design in einer komple-
xen Datenbank zu verwalten und für unterschiedliche Anwendungen zu
nutzen (cross media publishing). Durch den Einsatz des CMS ergeben
sich neue Möglichkeiten, aber auch zusätzliche Anforderungen an die
Gestaltung und Struktur der Website. Daher muss der Internetauftritt
der MPG gleichzeitig eine Vielzahl von Anforderungen so gut wie mög-
lich erfüllen:
– Die technischen Anforderungen an die Systemvoraussetzungen
bei den Anwendern sollten auf ein Mindestmaß reduziert sein. So
ist der Webauftritt der Max-Planck-Gesellschaft bereits bei einer
Bildschirmauflösung von 800 Bildpunkten in der Horizontalen und
600 Bildpunkten in der Vertikalen (800 x 600 Pixel) voll nutzbar
und selbst bei einer geringeren Auflösung noch zu navigieren.
– Einen weiteren Aspekt liefern die Betriebssystem- und Browserver-
sionen. Zwar verwenden inzwischen mehr als 90 Prozent der Nutzer
den „Internet Explorer“, im akademischen Umfeld sind jedoch häufig
noch ältere „Netscape-Versionen“ und andere, eher seltene Browser
wie Lynx, Opera, u.Ä. im Einsatz. Darum ist die Konzeption und
3
4
V O R W O R T
Umsetzung der Website so flexibel gestaltet, dass sie der Vielzahl an
Betriebssystemen und Browsern, wie sie bei der weltweiten Gruppe
der Anwender gegeben ist, Rechnung trägt.
– Das Navigationskonzept soll eine „intuitive“ Bedienbarkeit der
Website ermöglichen. Auch wenn der Anwender beispielsweise
„Javascript“ in seinem Browser ausgeschaltet hat. Daher muss die
Navigation eine eindeutige Codierung und eine nachvollziehbare
Visualisierung der Interaktionsmöglichkeit bieten. Die dazu verwen-
deten Elemente wie Buttons, Icons und Menüs müssen allgemein
gehalten und international verständlich sein.
– Text, Bild, Grafik, Sound und Video. Eine Vielzahl von Contenttypen
mit völlig unterschiedlicher Qualität, Quantität und Komplexität
müssen mediengerecht abgebildet werden. Dabei sind die besonderen
Anforderungen des CMS zu berücksichtigen. Gleichzeitig gilt es die
Möglichkeiten der System- und Datenbankarchitektur voll auszu-
schöpfen. Das stellt anspruchsvolle Anforderungen an das Design des
Webauftritts und die Gestaltung der Redaktionsoberflächen. Die
Dialogmasken, mittels derer die Redakteure die Inhalte einpflegen,
müssen einfach gestaltet und leistungsfähig zugleich sein. Das
Template-System, das die Darstellung der Inhalte bei der Wiedergabe
in der Website steuert, muss einen sinnvollen Kompromiss zwischen
dem Wunsch nach Einzigartigkeit einerseits und der Bedienbarkeit
(usability) und Effizienz durch die Wiederverwertbarkeit der
Templates (recyclability) andererseits herstellen.
Neben diesen Rahmenbedingungen und Basisanforderungen spielen
weitere Aspekte bei der Planung und Realisation von Internetangeboten
eine entscheidende Rolle.
Heute sind im World Wide Web die Anwender (User) und die großen
Suchmaschinen zentrale „Stellgrößen“. Informationen, die über Bilder
oder Grafiken vermittelt werden, können durch Suchmaschinen nicht
erkannt und indiziert werden. D.h., sie sind für den Anwender nicht
gezielt „suchbar“. Eine stark bildlastige Gestaltung, die auf den Einsatz
von großformatigen Bildern, animierten Inhalten in Form von Flash-
Animationen und/oder Quicktime-Movies aufbaut, errichtet Barrieren,
da sie unnötig lange Lade- und Wartezeiten verursacht und oft spezielle
Zusatzsoftware, so genannte Plugins, voraussetzt.
Da erfolgreiche Websites und ihr Design heute wieder und wieder
kopiert werden, haben die Nutzer zunehmend einheitlichere Erwar-
tungen und Sehgewohnheiten. Eine Studie des Internetexperten Dr.
Jakob Nielsen aus dem Jahre 2002 besagt, dass Benutzer/innen genaue
Erwartungen hinsichtlich der Position bestimmter Navigations- und
5
V O R W O R T
Menü-Elemente einer Internetseite haben. So sollten Firmenname und
-logo in der linken oberen Ecke platziert werden, die Suchfunktion dage-
gen oben rechts. Der Link zur Startseite wird zumeist in der linken,
oberen Ecke der Website vermutet, während man die Hauptnavigation
am mittleren, linken Bildschirmrand erwartet.
(Quelle: u.a. Nielsen, Deep Linking is good Linking, 3. März 2002)
Unsere Wahrnehmung wird entscheidend von Atavismen beeinflusst, die
wir nur wenig beeinflussen und steuern können. Zu diesen biologisch
programmierten „Gewohnheiten“ zählen beispielsweise das reflexartige
Ansprechen unserer Aufmerksamkeit auf Bewegungen oder intensive
Farben. Im Verhältnis zu Textinhalten werden Bildmotive und Abbil-
dungen überproportional stark beachtet.
Daher bestehen die Probleme bei nicht funktionsgerecht gestalteten
Websites häufig darin, dass zu viele Informationen und Techniken
gleichzeitig zum Einsatz kommen. Die Seite wird überfrachtet. Viele
Farben, mehrere Schriftarten, bunte Buttons, „schreiende“ Grafiken und
Animationen stehen in Konkurrenz zueinander. Der Anwender kann
keine Prioritäten setzen und die Schwerpunkte der Website nicht erken-
nen. Solche Websites signalisieren vor allem eines: Alles ist wichtig!
Und letzten Endes ist dann eben doch nichts mehr hervorgehoben. Die
Gestaltung von Websites fordert Bescheidenheit bei der Auswahl der
Mittel. Nur dann ist eine Hervorhebung und Priorisierung von Inhalten
und Funktionen möglich.
Als logische Konsequenz daraus lässt sich im Verlauf der vergangenen
Jahre ein eindeutiger Trend weg von der rein visuell-dekorativ gestalte-
ten Website hin zu ergonomischen, medien- und anwendergerechten
Internetangeboten erkennen. Erfolgreich sind insbesondere klare
Seitenraster und benutzerfreundliche Prinzipien wie die bewährte räum-
liche Platzierung der benötigten Navigationselemente (vgl. die Nielsen-
Studie) und der sparsame Einsatz von Signalfarben, Bildern und
Animationen.
Und das aus gutem Grund. Navigationselemente, die als solche nicht
erkannt werden, erschweren dem Anwender das Auffinden der
Information. Er ist mehr mit dem Verstehen der Funktionalität und der
Interpretation der Website als mit der eigentlichen Wissensaufnahme
beschäftigt.
Eine gute Konzeption stellt daher die Inhalte in den Mittelpunkt und
unterstützt die Informationsaufnahme durch eine verständliche, intuitiv
bedienbare Navigation. Eine klare Gliederung der Bildschirmoberfläche
in separate Bereiche für Inhalt und Navigation hat sich bewährt
und etabliert.
6
V O R W O R T
Das spricht für die Unterteilung der Hauptnavigation in Spalten.
Menüoptionen, die in Spalten angeordnet sind, werden – so jüngste
Untersuchungen – zu 20 bis 30 Prozent schneller verarbeitet als in zei-
lenweise aufgebauten Menüs.
Darüber hinaus vermitteln Durchgängigkeit und Beständigkeit in der
Gestaltung dem Anwender „Erfolgserlebnisse“. Je mehr seine Erwar-
tungshaltungen erfüllt werden und eine konsistente Gestaltung bereits
Gelerntes bestätigt, umso schneller und zielsicherer kann er das Infor-
mationsangebot nutzen. Er zieht eine positive Bilanz aus seinem virtuel-
len Rundgang durch die Max-Planck-Gesellschaft. Die Akzeptanz der
Website wird direkt und indirekt erhöht.
Gutes Webdesign führt zu einer optimalen Strukturierung von Infor-
mationen und Kommunikationsabläufen. Der Gestalter schafft dabei
einen Raum, in dem sich der Nutzer frei bewegen und auf neue
Informationen konzentrieren kann. Zudem sollte sich der Nutzer an jeder
Stelle der Website im Klaren darüber sein, welchen Weg er bisher
zurückgelegt hat, an welcher Stelle der Website er sich gerade befindet
und welche Navigationsmöglichkeiten ihm für weitere Themen zur
Verfügung stehen.
7
V O R W O R T
Allgemeine Hinweise
Dieses Handbuch und die beiliegende CD-ROM richten sich an alle,
die für die Gestaltung der Internetseiten der Institute und Einrichtungen
der Max-Planck-Gesellschaft zuständig sind, sowie an beauftragte
Agenturen, Grafiker und Programmierer. Ein weiteres Handbuch widmet
sich dem Design der Internetseiten der Max-Planck-Gesellschaft.
Das in diesem Handbuch beschriebene Design für die Darstellung der
Max-Planck-Institute im Internet ist die logische Fortsetzung der bereits
seit dem Jahr 1999 für den Printbereich gültigen Corporate-Design-
Richtlinien. Ein einheitliches Erscheinungsbild kann nur entstehen,
wenn alle Medien konsequent nach den für den Print- und Internet-
bereich gültigen Richtlinien gestaltet werden.
NavigationAlle wesentlichen Navigationselemente sind an „gelernten“ Positionen
platziert.
– Wort-Bild-Marke: links oben
– Suche: rechts oben
– Haupt-Navigation: linker Seitenrand
– Meta-Navigation: Kopfzeile
Gestaltung und Verwendung von Links
Kommentierte Menüpunkte im Content-Bereich:
Pfeil-Icon, Verdana bold, 10 Pixel
Farbe: Schwarz, kein Rollover
Interne Links am Seitenanfang:
Pfeil-Icon, Verdana regular, 10 Pixel
Farbe: Grau, Rolloverfarbe: Rot
Externe Links am Seitenanfang:
Pfeil-Icon, Verdana regular, 10 Pixel
Farbe: Grau, Rolloverfarbe: Rot
Anker am Seitenanfang:
Pfeil-Icon, Verdana regular, 10 Pixel
Farbe: Grau, Rolloverfarbe: Rot
Link zum Seitenanfang:
Pfeil-Icon, Verdana regular, 10 Pixel
Farbe: Grau, Rolloverfarbe: Rot
8
V O R W O R T
Links zu Dokumenten im neuen Fenster (z.B. Presseinformationen):
Dokument-Icon, Verdana bold, 10 Pixel
Farbe: Schwarz, kein Rollover
Links zu PDF-Dokumenten:
PDF-Icon, Verdana regular, 10 Pixel
Farbe: Grau, Rolloverfarbe: Rot
Linklisten URLs:
Flaggen-Icon für Sprachversion, Verdana regular, 10 Pixel
Farbe: Grau, Rolloverfarbe: Rot
Textlinks im Content:
Pfeil-Icon, Verdana regular, 10 Pixel
Farbe: Rot, kein Rollover
URLs mit Icon:
ONW-Icon, Verdana regular, 10 Pixel
Farbe: Rot, kein Rollover
E-Mail-Adressen:
E-Mail-Icon, Verdana regular, 10 Pixel
Farbe: Rot, kein Rollover
Bildformate (Breite x Höhe), Beispiele siehe Seite 40 ff.
Nachrichten aktuell:
Kommentierte Links:
Bilder im Content-Fließtext:
Publikationen/Wochenspiegel:
Thumbnail-Anfahrtskarten:
Anfahrtskarten:
Institutsabbildung unter Adresse:
Porträts:
140 x 83
140 x 83
290 x 83
140 x 83
140 x Höhe
290 x Höhe
140 x 83
140 x 83
290 x Höhe
140 x 83
140 x 166
70 x 83
Standardbildformat
Standardbildformat
Schmales Querformat
Standardbildformat
Hochformat
Großes Querformat
Standardbildformat
Standardbildformat
Großes Querformat
Standardbildformat
Hochformat
Thumbnails
9
V O R W O R T
FarbenDie Farbgebung der grafischen Elemente orientiert sich hauptsächlich
an der Hausfarbe der Max-Planck-Gesellschaft (Standard-Grün:
Pantone 328 und Standard-Grau: Pantone 428). Hierfür wurden medien-
gerechte Alternativen gewählt. Als Highlight-Farbe wurde Rot gewählt,
da Rot die höchste Signalwirkung hat (siehe Seite 30 ff.).
SchriftenDie Navigation besteht nahezu ausschließlich aus Systemtext:
auf Windows und Mac Verdana, l0 Pixel, auf UNIX Helvetica, l0 Pixel
(siehe dazu Seite 15 ff. und Anwendungsbeispiele Seite 37 ff.).
Technische UmsetzungFür die technische Realisierung der HTML-Seiten oder die Umsetzung
mit dem Content-Management-System NPS steht ein Template-
Baukasten mit einer ausführlichen Dokumentation zur Verfügung.
Interessenten wenden sich bitte an: webmaster@mpg.de
10
1. Seitenraster
Sichtbare Fläche
Die Website der Max-Planck-Gesellschaft sowie die Internetseiten der
Institute und Einrichtungen sind für die Standardauflösung von
800 x 600 Pixel angelegt, berücksichtigen aber auch die von vielen
Nutzern verwendete Monitorauflösung von 1024 x 768 Pixel.
Im letzteren Fall wird der Content zentriert und rechts und links
ergänzt durch:
Weißraum1
die Fortführung der Farbbalken
Farbe: Grün R 124 / G 166 / B 166, # 7C A6 A62
eine Linienbegrenzung (vertikal, 1 Pixel gepunktet)
Farbe: Grün R 124 / G 166 / B 166, # 7C A6 A63
S E I T E N R A S T E R / B R O W S E R D A R S T E L L U N G
11
7601024
1
2
2
1
2
2
3 3
S E I T E N R A S T E R / F L Ä C H E N A U F T E I L U N G
Flächenaufteilung
Jede Seite ist sowohl horizontal als auch vertikal in bestimmte
Bereiche unterteilt.
Die horizontale Gliederung trennt den
Meta-Navigationsbereich und
den Kopfbereich (mit den Logos von Gesellschaft und Institut) vom
Contentbereich.
Die vertikale Gliederung separiert den
Bereich der Haupt-Navigation vom
Contentbereich mit einer angegliederten
Iconspalte.
Diese bietet Platz für Download-Angebote, aktuelle
interne und externe Links sowie sonstige Zusatzfunktionen.
12
281 13 466
140 140 140
760
101026 140140
1
2
1
4
4
35
2
3
3
5
1
Spaltenraster der Startseiten
Die Unterteilung der Seite in Absender-, Navigations- und Content-
bereiche erfolgt auf der Basis eines fünfspaltigen Grundrasters.
Absenderbereich
Haupt-Navigation
Meta-Navigation
Sub-Navigation
Contentbereich
S E I T E N R A S T E R / F L Ä C H E N A U F T E I L U N G
13
151
21
212014
90
83
74
16
1 1
3
4
52
Spalte 3Spalte 2Spalte 1 Spalte 4 Spalte 5
281 13 466
140 140 140
760
101026 1401401
1
2
3
4
5
14
2. Navigation
15
N A V I G AT I O N / H A U P T- N A V I G AT I O N
281
140 1 140
10 10
83
20
10
10
1
41
Haupt-Navigation
Die Haupt-Navigationspunkte sind in der ersten Spalte unterhalb des
Schlüsselbilds (Format: 140 x 83 Pixel) vertikal als einzelne gerahmte
Menüelemente (140 x 41 Pixel) angeordnet.
Font: Verdana regular
Größe: 10 Pixel, Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Grau R 102 / G 102 / B 102, # 66 66 66
Beim Anwählen eines Punktes erscheinen in der zweiten Spalte nach
unten ablaufend die hierarchisch tiefer liegenden Navigationspunkte
(siehe Seite 16 ff.).
Im aktiven Zustand erscheinen innerhalb der Menüelemente
quadratische Pfeilelemente (Format: 20 x 20 Pixel, siehe Seite 28),
die die Richtung des verfolgten Pfads markieren.
1
1
2
2
3
4
3
4
Navigations-Verhalten
Befindet sich der Mauszeiger über einem Menüelement
(Rollover-Status), wird das entsprechende Feld durch eine farbige
Hintergrundfläche markiert.
Button-Highlight
Befindet sich der Mauszeiger über einem Menüelement, erscheint die
farbige Hintergrundfläche.
Nach dem Klick weist das Pfeil-Icon auf weiterführende Menüpunkte
hin.
Farbe: Grün R 201 / G 219 / B 216, # C9 DB D8
(je nach gewähltem Farbset wird der mittlere Tonwert eingesetzt,
siehe Seite 31 ff.).
N A V I G AT I O N / H A U P T- N A V I G AT I O N
16
1
2
1 2
N A V I G AT I O N / H A U P T- N A V I G AT I O N
17
Navigations-Verhalten
Ist ein Menüpunkt durch Klick aktiviert, erscheinen im
Contentbereich gegebenenfalls die weiteren Submenüpunkte.
Zusätzliches Feature bei aktiviertem Javascript ist das
Pull-Down-Menü. Es erscheint, wenn sich der Mauszeiger über dem
Pfeil-Icon befindet und listet die zugehörigen Unterpunkte auf.
Sie zeigen das gleiche Rollover-Verhalten wie die Haupt-Navigation
und können durch Klick aktiviert werden.
Button-Highlight
Farbe: Grün R 201 / G 219 / B 216, # C9 DB D8
(je nach gewähltem Farbset wird der mittlere Tonwert eingesetzt,
siehe Seite 31 ff.).
1
2
21
N A V I G AT I O N / H A U P T- N A V I G AT I O N
18
281
140 1 140
10 10
23
23
23
33
6
6
6
6
1
1
Pull-Down-Navigation
Befindet sich der Mauszeiger über einem Menüelement
(Rollover-Status), wird das entsprechende Feld durch eine farbige
Hintergrundfläche (1-zeilig: 23 Pixel, 2-zeilig: 33 Pixel) markiert.
Button-Highlight
Farbe: Grün R 201 / G 219 / B 216, # C9 DB D8
(je nach gewähltem Farbset wird der mittlere Tonwert eingesetzt,
siehe Seite 31 ff.).
Button-Begrenzung (Rahmen):Farbe: Grau R 204 / G 204 / B 204, # CC CC CC
Font: Verdana regular
Größe: 10 Pixel
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Grau R 102 / G 102 / B 102, # 66 66 66
2
3
3
2
Navigations-Verhalten
Befindet man sich auf der nächsten Navigationsebene, werden die
vorher besuchten Ebenen durch farbige Hinterlegung von der
aktiven Stufe abgesetzt. So wird der durchlaufene Pfad markiert.
Farbe: Hellgrün R 230 / G 242 / B 242, # E6 F2 F2
(je nach gewähltem Farbset wird der hellste Tonwert eingesetzt,
siehe Seite 31 ff.).
Hat man die unterste Hierarchieebene erreicht, d.h. es gibt keine
weiterführenden Navigationspunkte, so erscheint kein Pfeil-Icon mehr
im aktiv markierten Navigationselement.
N A V I G AT I O N / H A U P T- N A V I G AT I O N
19
1
1
2
2
20
N A V I G AT I O N / M E TA - N A V I G AT I O N
140
466
25 25 2525 25 25
28
26 64 89
16
15
16
25
1
6
21
20
5
4
3
2
4
1
5
2
1
3
Meta-Navigation
Die Meta-Navigationsleiste schließt die Seite nach oben hin ab.
Font: Verdana regular, 9 Pixel
Laufweite: 0
Farbe: Grau R 102 / G 102 / B 102, # 66 66 66
Hellgrüner Grund: R 230 / G 242 / B 242, # E6 F2 F2
(hellster Tonwert je nach gewähltem Farbset, siehe Seite 31 ff.).
Innerhalb der grünen Grafik steht der gewählte Menüpunkt als
Headline, darunter erscheinen die Submenüpunkte der Metanavigation.
Rollover, Button-Highlights
Metanavigation: R 201 / G 219/ B 216, # C9 DB D8
Submenü: R 230 / G 242 / B 242, # E6 F2 F2
(je nach gewähltem Farbset wird der mittlere bzw. hellste Tonwert
eingesetzt, siehe Seite 31 ff.).
Suchen
Font: Verdana bold
Größe: 10 Pixel, Laufweite: 0
Farbe: Rot R 204 / G 51 / B 51, # CC 33 33
Schnellzugriff
Das Pull-Down-Menü des Schnellzugriffs enthält Deep-Links zu
institutsspezifischen Schwerpunktthemen.
Font: Verdana regular, 10 Pixel
Laufweite: 0
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
12
21
N A V I G AT I O N / I N S T I T U T S K E N N U N G
Wort-Bild-Marke des Instituts
Auf Höhe der Linie des MPG-Logos (Minerva) – über der dritten und
vierten Spalte – steht die jeweilige Wort-Bild-Marke des Instituts
(siehe Seite 25 bzw. Seite 27).
Der Textteil des Logos wird in der Schrift
Font: Bodoni Book, 18 Pixel
Zeilenhöhe: 20 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
mit dem Antialising-Grad „crisp“ gesetzt und als GIF platziert.
Der Bildteil des Logos erscheint in den logospezifischen Farben
und wird mit einem Mindestabstand von 40 Pixel auf der Grundlinie
des Textteils platziert. Die maximale Höhe des Bildzeichens soll
58 Pixel nicht überschreiten.
Institutsname ohne eigene Bildmarke
Institutsname mit Bildmarke
Institutsname mit Bildmarke
Institutsname 3-zeilig
ohne eigene Bildmarke
1
1
2
2
2
6432
6432
6432
6432
306 1010
N A V I G AT I O N / S U B - N A V I G AT I O N
22
Start-Content: Aktuell
„Reiter“-System
Der erste (links stehende) Punkt „Nachrichten“ ist beim Start der
Website automatisch aktiv (Unterlegung mit dem hellsten Tonwert des
Farbsets, siehe Seite 31). Der „Reiter“-Effekt entsteht im
Zusammenwirken mit der Content-Markierung.
Content-Markierung/fixierte Meldung
Der Start-Content wird idealerweise wöchentlich aktualisiert. Zur
besonderen Hervorhebung einer Meldung (beliebig zeitlich fixierbar
auf Position 1) wird das Contentfeld ebenfalls mit dem hellsten
Tonwert des Farbsets hinterlegt. Weitere Meldungen werden
chronologisch absteigend nachfolgend aufgeführt.
Trennlinien
Die einzelnen Themenpunkte werden durch eine durchgezogene
1-Pixel-Linie getrennt. Textabtand zur Linie entspricht der
normalen Zeilenhöhe von 14 Pixel.
Farbe: Grau R 153 / G 153 / B 153, # 99 99 99
1
1
2
3
2
3
N A V I G AT I O N / S U B - N A V I G AT I O N
23
466
251010 6 25 25
66
14
7
83
128
20
21
14
1
2
3
Navigations-Headline
Font: Verdana bold, 10 Pixel
Laufweite: 0
Farbe: Weiß R 255 / G 255 / B 255, # FF FF FF
Sub-Navigation
Font: Verdana regular, 10 Pixel
Laufweite: 0
Farbe: Grau R 102 / G 102 / B 102, # 66 66 66
Content-Texte
Fonts: Verdana bold (Headlines, rote Hervorhebung)
Verdana regular (Fließtext)
Größe: 10 Pixel
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farben: Schwarz R 0 / G 0 / B 0, # 00 00 00
Rot R 201 / G 51 / B 40, # CC 33 33
Grau R 102 / G 102 / B 102, # 66 66 66 (Links)
1
3
2
N A V I G AT I O N / S U C H E
24
1
1
Suche
Die angebotene Suchfunktion liefert ein Suchergebnis auf Basis einer
Volltextsuche. Weitere Optionen zur Optimierung stehen innerhalb der
Expertensuche zur Verfügung.
Suchergebnis-Anzeige
Fonts: Verdana bold, 11 Pixel (Seiten-Headline)
Verdana bold, 10 Pixel (Titel Suchergebnis)
Verdana regular, 10 Pixel (Fließtext)
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00 (Fließtext)
Grau R 102 / G 102 / B 102, # 66 66 66 (Links)
Rot R 204 / G 51 / B 51, # CC 33 33 (Link-Rollover, URL)
Datum, Ursprung und URL des gefundenen Dokuments werden mit
einer Zeilenhöhe von 18 Pixel abgesetzt.
Die einzelnen Treffer sind durch durchgezogene, horizontale
1-Pixel-Linien getrennt. Der Abstand zum Text beträgt 14 Pixel.
Farbe: Grau R 153 / G 153 / B 153, # 99 99 99
2
3
4
5
4
5
3
2
Expertensuche
Bei der Expertensuche kann das Suchergebnis verfeinert werden,
z.B. durch Einschränkung auf einen bestimmten Zeitraum oder
Einschränkung der Suche innerhalb einer oder mehrerer ausgewählter
Subkategorien.
Die Subkategorien sind als Baumstrukturen angelegt. Durch Klick
auf das Plus- oder Minus-Icon vor einer Subkategorie können weitere
Unterkategorien geöffnet oder wieder geschlossen werden. Durch
Markierung der zugehörigen Checkbox werden die entsprechenden
Subkategorien ausgewählt.
Suchoptionen/Hilfe
Der Klick auf das Icon mit dem Fragezeichen öffnet einen Hilfetext,
der die Funktionen der Expertensuche erläutert.
Weitere Hinweise zur Implementierung der Suchfunktion finden Sie
in der technischen Dokumentation.
2
2
1
1
3
4
3
25
N A V I G AT I O N / S U C H E
4
32 125125
466
2810 146
16
64
32
128
128
12
32
64
26
3. Grafische Elemente
27
G R A F I S C H E E L E M E N T E / L O G O - P L AT Z I E R U N G
140
21
151
10 10
16
74
90
25
MPG-Logo (Minerva)
Die Wort-Bild-Marke der Max-Planck-Gesellschaft wird im oberen
linken Bereich der Seite platziert – und zwar spaltenfüllend in der
ersten vertikalen Spalte (Haupt-Navigationsspalte).
Das Logo erscheint in einer mediengerechten Variante der
Max-Planck-Hausfarbe.
Farbe: Grün R 124 / G 166 / B 166, # 7C A6 A6
(GIF auf beiliegender CD-ROM: minerva_logo.gif).
Das MPG-Logo verlinkt von der Institutswebsite zur Website der
Max-Planck-Gesellschaft.
Der darüberstehende Link in der Meta-Navigationsleiste verlinkt zur
Institutsstartseite.
1
2
2
1
G R A F I S C H E E L E M E N T E / I C O N S
28
Icons
Die Icons wurden speziell für die Seiten der Max-Planck-Gesellschaft
entwickelt und erhöhen die Attraktivität und Benutzerfreundlichkeit.
Sämtliche Elemente sind in Signalrot mit grauem Schatten gestaltet.
Farben: Rot R 204 / G 51 / B 51, # CC 33 33
Grau R 204 / G 204 / B 204, # CC CC CC
Sämtliche Icons finden Sie im GIF-Format auf der beiliegenden
CD-ROM.
vor/interner Link
zurück
externer Link
nach oben/Top
nach unten/Anker
neues Fenster (ONW)
Button-Pfeilelemente(öffnen bei aktiviertemJavascript das Pull-Down-Menü)
Plus-Icon
Minus-Icon
Dokument/Infotext
Zoom/Vorschau
Film
editieren/Formular ausfüllen
löschen
Download/speichern
Hilfe
Flagge für Sprachversion z.B.bei Links
G R A F I S C H E E L E M E N T E / I C O N S
Platzierung der Icons
Icons werden in der dafür vorgesehenen Icon-Spalte platziert. Daher
beträgt die maximale Breite der Icons (ohne Schatten) 10 Pixel. Der
graue Schatten kann in Einzelfällen auch in die rechts angrenzende,
6 Pixel breite Leerspalte (Abstand zwischen Icon- und Contentspalte)
laufen.
Die Icons werden linksbündig auf die Schriftgrundlinie gesetzt.
Ausnahmen:
Das PDF-Icon wird aufgrund seiner außergewöhnlichen Höhe um
drei Pixel nach unten versetzt).
Das Zeichen für externe Links schließt bündig mit der
Schriftoberkante ab.
10 610 6
1
2
3
4
1 2 1 2
4
3
29
G R A F I S C H E E L E M E N T E / F A R B E N
30
Allgemeine Basisfarben
Die Basisfarbtöne harmonieren mit den Farben des allgemein gelten-
den Corporate Designs der Max-Planck-Gesellschaft.
Ergänzend zum dunklen Grün – der Hauptfarbe dieses Corporate
Designs – werden neutrale Grautöne verwendet.
Ein leuchtendes Rot signalisiert Funktionalität wie z.B. bei Textlinks.
R 102G 102B 102
R 153G 153B 153
R 204G 204B 204
R 204G 51B 51
Navigation, Links
Highlight-Farbe
für Icons, Textlinks, Rollovers, „suchen“-Button, „ok“-Button
Trennlinien im Text-Contentbereich
Button-Begrenzung (Rahmen)
Hex # 66 66 66
Hex # 99 99 99
Hex # CC CC CC
Hex # CC 33 33
1 2 3 4
G R A F I S C H E E L E M E N T E / F A R B E N
31
Alternative Farbsets
Die hier vorgestellten vier alternativen Farbsets stehen bei der
Definition eines institutsspezifischen Farbklimas zur freien Auswahl.
Jedes der vier Sets besteht aus drei im RGB-Farbmodus definierten
Tonstufen einer Grundfarbe. Da diese vorrangig bei der Hintergrund-
und Navigations-Flächengestaltung eingesetzt werden, tragen sie
entscheidend zum individuellen Charakter der Site bei (Anwendungs-
beispiele siehe folgende Seiten).
R 124G 166B 166
R 230G 242B 242
R 201G 219B 216
R 121G 164B 196
R 226G 239B 249
R 200G 220B 236
R 208G 186B 137
R 244G 238B 223
R 232G 220B 194
R 214G 171B 171
R 243G 235B 235
R 233G 213B 213
– Button-Highlights
– Hintergrundfarbe Meta-Navigation– Content-Markierung der Startseite– Navigationspfad-Unterlegung
– Headline-Hintergrundbalken– Seitenbegrenzung oben und unten– vertikale punktierte Begrenzungslinien
4
3
2
1
Hex # 7C A6 A6 # C9 DB D8 # E6 F2 F2
Hex # 79 A4 C4 # C8 DC EC # E2 EF F9
Hex # D0 BA 89 # E8 DC C2 # F4 EE DF
Hex # D6 AB AB # E9 D5 D5 # F1 EB EB
G R A F I S C H E E L E M E N T E / A LT E R N AT I V E F A R B S E T S
32
Grünes Farbset
Dunkle Flächenfarbe
(Standard-Grafikelemente):
R 124 / G 166 / B 166, # 7C A6 A6
Helle Flächenfarbe
(Meta-Navigations-Hintergrund/Fondfarbe):
R 230 / G 242 / B 242, # E6 F2 F2
Button-Highlights:
R 201 / G 219 / B 216, # C9 DB D8
1
G R A F I S C H E E L E M E N T E / A LT E R N AT I V E F A R B S E T S
33
Blaues Farbset
Dunkle Flächenfarbe
(Standard-Grafikelemente):
R 121 / G 164 / B 196, # 79 A4 C4
Helle Flächenfarbe
(Meta-Navigations-Hintergrund/Fondfarbe):
R 226 / G 239 / B 249, # E2 EF F9
Button-Highlights:
R 200 / G 220 / B 236, # C8 DC EC
2
G R A F I S C H E E L E M E N T E / A LT E R N AT I V E F A R B S E T S
34
Ockerfarbenes Farbset
Dunkle Flächenfarbe
(Standard-Grafikelemente):
R 208 / G 186 / B 137, # D0 BA 89
Helle Flächenfarbe
(Meta-Navigations-Hintergrund/Fondfarbe):
R 244 / G 238 / B 223, # E4 EE DF
Button-Highlights:
R 232 / G 220 / B 194, # E8 DC C2
3
G R A F I S C H E E L E M E N T E / A LT E R N AT I V E F A R B S E T S
35
Rötliches Farbset
Dunkle Flächenfarbe
(Standard-Grafikelemente):
R 214 / G 171 / B 171, # D6 AB AB
Helle Flächenfarbe
(Meta-Navigations-Hintergrund/Fondfarbe):
R 243 / G 235 / B 235, # F1 EB EB
Button-Highlights:
R 233 / G 213 / B 213, # E9 D5 D5
4
36
4. Typografie | Abbildungen
37
T Y P O G R A F I E / S C H R I F T E N
Verdana regular als Standardschrift für Navigations- und Fließtext
Eine hohe X-Höhe, gleichmäßige Dickten und der ausgewogene
Schnitt machen die Verdana zu einer ausgezeichnet lesbaren
Webschrift.
Das Schriftbild ist klar und zeitgemäß, ohne modisch zu wirken.
Sie wird als Systemschrift (ungeglättet) durchgehend in einer
Schriftgröße von 10 Pixel mit einer regulären Zeilenhöhe von
14 Pixel eingesetzt – lediglich die Begriffe der Meta-Navigation
weisen eine Größe von 9 Pixel auf.
Falls Verdana regular nicht als Systemschrift vorhanden ist, wird
als Ersatzfont Helvetica regular verwendet.
Verdana bold für Headlines, Zwischenüberschriften u. Hervorhebungen
Navigations- und Content-Headlines werden in Verdana bold mit
11 Pixel gesetzt. Auch bei Hervorhebungen kommt Verdana bold
zum Einsatz.
Falls Verdana bold nicht als Systemschrift vorhanden ist, wird als
Ersatzfont Helvetica bold verwendet.
1
2
1
2
A B B I L D U N G E N / S C H L Ü S S E L B I L D
38
Headlines (Startseite)
Headlines werden in der Verdana bold mit einer Schriftgröße von
10 Pixel und einer maximalen Laufweite über alle drei Content-
spalten gesetzt. Die Standardfarbe ist Schwarz.
2
Fließtexte
Fließtexte laufen im linksbündigen Flattersatz bei 10 Pixel
Schriftgröße und 14 Pixel Zeilenhöhe. Der verwendete Schriftschnitt
ist Verdana regular. Die Standardfarbe ist Schwarz.
3
21
3
Schlüsselbild
Das Schlüsselbild im Standard-Bildformat von 140 x 83 Pixel zeigt
eine repräsentative, plakative Abbildung aus einem Fachbereich
des Instituts. Dabei bleibt es freigestellt, ob die gewählte Abbildung
immer erscheint oder sich in den unterschiedlichen Navigations-
bereichen ändert.
1
14010 1140
83
83
83
83
39
A B B I L D U N G E N / B I L D P L AT Z I E R U N G
Bildplatzierung bei kommentierten Links
Kommentierte Menüpunkte im Contentbereich können auch mit
Bildern ergänzt werden. Die Bilder werden grundsätzlich rechts-
bündig und mit der oberen Textzeile abschließend platziert.
Außerdem wird je ein Pixel Abstand zu der horizontalen Trennline
und der vertikalen gepunkteten Linie eingehalten.
Es stehen folgende hier Bildformate zur Auswahl:
Standardbildformat: 140 x 83 Pixel (1-spaltig)
Schmales Querformat: 290 x 83 Pixel (2-spaltig)
Trennlinien
Der Abstand der grauen Trennlinien zur nachfolgenden Textzeile
entspricht der normalen Zeilenhöhe von 14 Pixeln.
Farbe: Grau R 153 / G 153 / B 153, # 99 99 99
1
1
140
290
10 110
83
1
83
1
40
A B B I L D U N G E N / W E I T E R E B I L D F O R M AT E
Bildplatzierung im Content-Fließtext
Innerhalb der Contentfläche werden Abbildungen rechtsbündig und
mit der oberen Fließtextzeile abschließend platziert. Dabei stehen
diverse Bildformate zur Auswahl.
Der Text umfließt die Abbildungen linksseitig mit einem Mindest-
abstand von 10 Pixel, der dem allgemeinen Spaltenabstand
entspricht. Soll innerhalb des Contents ein weiteres Bild eingesetzt
werden, so wird es bündig mit der obersten Textzeile des neuen
Absatzes platziert.
BildformatGroßes Querformat: 290 Pixel x Höhe x (2-spaltig)
(nur im Content-Fließtext!)
Fonts: Verdana bold, 11 Pixel (Headlines)
Verdana regular, 10 Pixel (Fließtext)
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
1
1
290 110
x
A B B I L D U N G E N / W E I T E R E B I L D F O R M AT E
41
Bildformate im Content-FließtextStandardformat: 140 x 83 Pixel (1-spaltig)
Fonts: Verdana bold, 11 Pixel (Headlines)
Verdana regular, 10 Pixel (Fließtext)
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
1
1
140 110
83
A B B I L D U N G E N / W E I T E R E B I L D F O R M AT E
42
140 110
x
Bildformate im Content-Fließtext
Hochformat: 140 Pixel x Höhe x (1-spaltig)
Fonts: Verdana bold, 11 Pixel (Headlines)
Verdana regular, 10 Pixel (Fließtext)
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
1
1
43
Porträt-Formate im Content
Porträt: 140 x 166 Pixel (1-spaltig),
siehe auch Mitarbeiterdarstellung Seite 60 ff.
Thumbnail: 70 x 83 Pixel
Fonts: Verdana bold, 11 Pixel (Headlines)
Verdana regular, 10 Pixel (Fließtext)
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
Rot R 204 / G 51 / B 51, # CC 33 33
Grau R 102 / G 102 / B 102, # 66 66 66 (Links)
1
2
14010316 1
10376 70 1
1
166
1
2
A B B I L D U N G E N / W E I T E R E B I L D F O R M AT E
83
1
44
5. Weitere Anwendungen
45
W E I T E R E A N W E N D U N G E N / S T E L L E N A N G E B O T E
Start-Content: Aktuell – Stellenangebote
Hier werden zunächst die aktuellsten Stellenangebote in Kurzform
dargestellt. Wie bei allen Seiten des Startcontents besteht die
Möglichkeit, eine Position zeitlich zu fixieren und durch die farbige
Hintergrundmarkierung besonders hervorzuheben. Nachfolgende
Stellen werden chronologisch nach unten verschoben. Durch Klick
auf ein ausgewähltes Angebot erhält man die ausführliche Stellen-
beschreibung. Die einzelnen Einträge werden durch eine horizontale
1-Pixel-Linie getrennt. Textabstand zur Linie entspricht der
normalen Zeilenhöhe von 14 Pixel.
Farbe: Grau R 153 / G 153 / B 153, # 99 99 99
1
1
Fonts: Verdana bold, 11 Pixel
Verdana regular, 10 Pixel
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
Rot R 204 / G 51 / B 51, # CC 33 33 (Datum)
Grau R 102 / G 102 / B 102, # 66 66 66 (Links)
2
2
46
1
3
W E I T E R E A N W E N D U N G E N / A D R E S S D A R S T E L L U N G
2
Adressdarstellung
Haus-, Post- und Lieferanschriften (falls vorhanden) werden unter-
einander angeordnet und durch eine durchgezogene, horizontale
Linie voneinander getrennt. Der Textabstand zur Linie entspricht der
normalen Zeilenhöhe von 14 Pixel.
Farbe: Grau R 153 / G 153 / B 153, # 99 99 99
Abbildungen (idealerweise von Institutsgebäuden) werden entspre-
chend den üblichen Platzierungsregeln für Content-Abbildungen
eingesetzt.
Fonts: Verdana bold, 11 Pixel (Headlines)
Verdana regular, 10 Pixel
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
31
1
140
10 1
83
12
47
W E I T E R E A N W E N D U N G E N / A N F A H R T S B E S C H R E I B U N G
Anfahrtsbeschreibung
Die Anfahrtsbeschreibungen werden nach den unterschiedlichen
Verkehrsmitteln gesondert aufgeführt und durch eine Kartenansicht
ergänzt.
Die Thumbnail-Darstellungen entsprechen dem Standard-Bildformat
140 x 83 Pixel.
Link zur Ansicht und Druckversion der Anfahrtskarten in einem
neuen Fenster (siehe Seite 62).
Link zur Druckversion der Seite.
Anker zum Rücksprung an den Seitenanfang.
Fonts: Verdana bold, 11 Pixel (Seiten-Headline)
Verdana bold, 10 Pixel (Bereichs-Headline)
Verdana regular, 10 Pixel (Fließtext)
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
Grau R 102 / G 102 / B 102, # 66 66 66 (Links)
1
2
3 4
3
4
5
6
1
2
5
6
140
10 1
83
1
48
W E I T E R E A N W E N D U N G E N / F O R M U L A R E
Formularanwendungen
Kontaktformular als Beispiel für eine Formulardarstellung innerhalb
des Gestaltungsrasters.
Alle Formulare basieren auf demselben Seitenraster.
49
282
466
Flächenaufteilung
Die Formularfelder sind rechts im Contentbereich über 2 Spalten
angelegt. Die Feldbezeichnung steht linksbündig in der 1. Spalte.
Font: Verdana bold, 11 Pixel (Seiten-Headline)
Verdana regular, 10 Pixel (Feldbezeichnung)
Laufweite: 0
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
1
W E I T E R E A N W E N D U N G E N / F O R M U L A R E
2810 146
1
816
816
816
816
816
16
24
64
24
16
16
W E I T E R E A N W E N D U N G E N / L I N K L I S T E N
50
Linklisten
Wird der Bereich „Links“ aus der Meta-Navigation aufgerufen,
erscheinen zunächst die verschiedenen Linkkategorien zur Auswahl.
Fonts: Verdana bold, 11 Pixel (Seiten-Headline)
Verdana bold, 10 Pixel (Linküberschrift)
Verdana regular, 10 Pixel (Fließtext, URL)
Laufweite: 0
Zeilenhöhe: 18 Pixel (Links)
14 Pixel (Fließtext)
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
Grau R 102 / G 102 / B 102, # 66 66 66 (Links)
Rot R 204 / G 51 / B 51, # CC 33 33 (Link-Rollover)
1
1
W E I T E R E A N W E N D U N G E N / L I N K L I S T E N
51
Linklisten
Subkategorien des ausgewählten Themenbereichs sind als Anker
am Seitenanfang aufgeführt. Die Unterkategorien werden mit durch-
gezogenen, horizontalen 1-Pixel-Linen getrennt.
Das Top-Icon ermöglicht den Rücksprung zum Seitenanfang.
Die einzelnen Linkangebote (idealerweise mit Kommentar und URL)
werden nachfolgend aufgelistet – gekennzeichnet durch das Icon für
externe Links.
Flaggen-Icons kennzeichnen die angebotenen Sprachversionen des
jeweiligen Links.
Innerhalb einer Kategorie werden die einzelnen Linkangebote durch
gepunktete, horizontale 1-Pixel-Linien getrennt. Textabstand zu den
Linien entspricht der normalen Zeilenhöhe von 14 Pixel.
Linienfarbe: Grau R 153 / G 153 / B 153, # 99 99 99
Fonts: Verdana bold, 11 Pixel (Kategorie-Headlines)
siehe auch gegenüberliegende Seite
1
2
3
4
1
2
3
4
52
W E I T E R E A N W E N D U N G E N / M I TA R B E I T E R L I S T E N
2
3
4
1
1
32
4
Mitarbeiterlisten
Am Seitenanfang werden verschiedene Sortierungsoptionen angeboten.
Danach werden die einzelnen Mitarbeiter – je nach Sortierung – gelistet.
Der Abstand zur Sortierungsüberschrift beträgt eine Leerzeile mit der
regulären Zeilenhöhe von 14 Pixel.
Das Icon neben dem Namen verweist auf die ausführliche
Mitarbeiterdarstellung im neuen Fenster (siehe Seite 60 ff.),
der Link dahinter auf die Kurzdarstellung der zugehörigen Abteilung.
Die durchgezogene, horizontale 1-Pixel-Linie trennt die einzelnen
Bereiche innerhalb der Auflistung.
Farbe: Grau R 153 / G 153 / B 153, # 99 99 99
Hinweise zur Implementierung der Sortierungsfunktion finden Sie in der
technischen Dokumentation.
53
W E I T E R E A N W E N D U N G E N / M I TA R B E I T E R L I S T E N
Rasteraufteilung
Einen Sonderfall bezüglich der Spaltenaufteilung stellt die
Mitarbeiterliste dar.
Der Content ist hier horizontal in zwei Spalten mit jeweils links
angrenzender Iconspalte untergliedert –
linke Spalte: Mitarbeiter – rechte Spalte: zugehörige Abteilung.
Fonts: Verdana bold, 11 Pixel (Sortierungs-Headlines/Buchstaben)
Verdana bold, 10 Pixel (Namen)
Verdana regular, 10 Pixel (zugehörige Abteilung)
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
Grau R 102 / G 102 / B 102, # 66 66 66 (Links)
Rot R 204 / G 51 / B 51, # CC 33 33 (Link-Rollover)
466
212 1610 16 212
2 2
1
1 1
2
54
W E I T E R E A N W E N D U N G E N / P U B L I K AT I O N E N
1
2
Start-Content: Aktuell – Publikationen
Hier werden zunächst die aktuellsten Publikationen in Kurzform
dargestellt.
Durch Klick auf eine ausgewählte Publikation erhält man die
ausführlichen Publikationsdaten (complete reference).
Diese stehen auch per Klick auf das entsprechende Icon als
Download-Datei zur Verfügung.
Die einzelnen Einträge werden durch eine horizontale, gepunktete
1-Pixel-Linie getrennt. Textabstand zur Linie entspricht der
normalen Zeilenhöhe von 14 Pixel.
Linienfarbe: Grau R 153 / G 153 / B 153, # 99 99 99
Fonts: Verdana bold, 11 Pixel (Seiten-Headline)
Verdana bold, 10 Pixel (Titel)
Verdana regular, 10 Pixel (Autoren, Quelle)
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
Grau R 102 / G 102 / B 102, # 66 66 66 (Links)
Rot R 204 / G 51 / B 51, # CC 33 33 (Quelle, Link-Rollover)
1
2
3
3
W E I T E R E A N W E N D U N G E N / P U B L I K AT I O N E N
55
Publikationsdaten – Complete Reference
Hier werden die Publikationsdaten in der Übersicht gelistet.
Die einzelnen Angaben werden durch eine Leerzeile getrennt.
Fonts: Verdana bold, 11 Pixel (Seiten-Headline)
Verdana bold, 10 Pixel
Verdana regular, 10 Pixel
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
W E I T E R E A N W E N D U N G E N / S I T E M A P
56
Sitemap
Die Sitemap zeigt hierarchisch den Strukturbaum der Website.
Die Menüpunkte der Hauptnavigation werden fett hervorgehoben,
alle Untermenüpunkte erscheinen im für Links üblichen Grau.
Die Icons für interne Links zeigen an, dass alle Punkte direkt
anwählbar sind.
Die durchgezogenen, horizontalen 1-Pixel-Linien trennen die
Navigationsbäume der Hauptmenüpunkte. Textabstand zur Linie
entspricht der normalen Zeilenhöhe von 14 Pixel.
Linienfarbe: Grau R 153 / G 153 / B 153, # 99 99 99
Fonts: Verdana bold, 10 Pixel (Hauptmenüpunkte)
Verdana regular, 10 Pixel (Submenüpunkte)
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
Grau R 102 / G 102 / B 102, # 66 66 66 (Links)
Rot R 204 / G 51 / B 51, # CC 33 33 (Link-Rollover)
1
1
2
3
3
2
W E I T E R E A N W E N D U N G E N / S I T E M A P
57
Sitemap
Durch Einrücken der Submenüpunkte wird die Hierarchie der
Navigationsstruktur visualisiert. Dabei werden die üblichen
Abstände zu den Link-Icons eingehalten.
1010 6 16 16
14
14
58
6. ONW – Open New Window
O N W / F L Ä C H E N A U F T E I L U N G
59
Flächenaufteilung
Die ausführliche Mitarbeiterdarstellung wird bei aktiviertem
Javascript in einem neuen Fenster mit einer Größe von
567 x 581 Pixel geöffnet (ONW = Open New Window).
Ist kein Javascript aktiviert, wird die Seite in einem neuen
Browserfenster mit undefinierter Größe angezeigt.
Die Flächenaufteilung orientiert sich am Seitenraster der Homepage.
567
581
14
60
O N W / M I TA R B E I T E R D A R S T E L L U N G
Raster
Die Flächenaufteilung orientiert sich, wie u.a. die Logoplatzierung,
am Seitenraster der Homepage.
Die Anordnung der Navigationsspalte und das Navigationsverhalten
entsprechen der Homepage.
Da die zweite Ebene der Hauptnavigation entfällt, ist der Abstand
zwischen Navigations- und Contentbereich auf eine Breite von
60 Pixel verringert.
Der Contentbereich mit der vorangestellten Icon-Spalte ist über zwei
Spalten angelegt.
530
140 60 147 10 1471010 16
15
75
16
21
20
1
2
2
1
O N W / M I TA R B E I T E R D A R S T E L L U N G
14010
Mitarbeiterdarstellung
Das Porträt entspricht mit 140 Pixel Breite der normalen Spalten-
breite. Die Bildhöhe beträgt 166 Pixel (doppelte Höhe eines
Standardbilds).
Die E-Mail-Adresse und – falls vorhanden – die eigene Homepage
werden durch die entsprechenden Icons hervorgehoben.
Fonts: Verdana bold, 11 Pixel (Name)
Verdana regular, 10 Pixel
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00 (Fließtext)
Rot R 204 / G 51 / B 51, # CC 33 33 (Textlinks)
Grau R 102 / G 102 / B 102, # 66 66 66 (Navigation)
1
2
2
1
166
61
x
O N W / A N F A H R T S K A R T E N
62
Anfahrtskarten
Die Anfahrtskarten werden bei aktiviertem Javascript in einem neuen
Fenster mit einer Größe von 567 x 581 Pixel geöffnet
(ONW = Open New Window).
Ist kein Javascript aktiviert, wird die Seite in einem neuen
Browserfenster mit undefinierter Größe angezeigt.
Die Flächenaufteilung orientiert sich am Seitenraster der Homepage,
siehe auch Spaltenraster der Mitarbeiterdarstellung.
Die Bildgröße der Karten beträgt 290 Pixel x Höhe x.
Die Navigation erlaubt zwischen der Darstellung einer Detailansicht
und einer Übersichtskarte zu wechseln.
1
2
2
1
530
140 60 290 301010
15
75
16
21
20
16
O N W / A N F A H T R T S K A R T E N
63
Anfahrtskarten
Unter der Karte, getrennt durch eine gepunktete, horizontale Linie,
ist die Kontaktadresse des Instituts platziert. Textabstand zur Linie
entspricht der normalen Zeilenhöhe von 14 Pixel.
Linienfarbe: Grau R 153 / G 153 / B 153, # 99 99 99
Per Klick auf das Druck-Icon kann die Seite direkt gedruckt werden.
Fonts: Verdana bold, 10 Pixel (Institutsname)
Verdana regular, 10 Pixel (Adresse, Links)
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
Grau R 102 / G 102 / B 102, # 66 66 66 (Links)
Rot R 204 / G 51 / B 51, # CC 33 33 (Link-Rollover)
1
1
64
C D - R O M
CD-ROM
Auf dieser CD-Rom finden sie alle auf S. 28 vorgestellten Icons
sowie eine mediengerechte Version des MPG-Logos (Minerva)
im GIF-Format.
Hinweise zur technischen Dokumentation finden sie unter der Datei
index.html.
Zur Bestellung des Template-Baukastens wenden Sie sich bitte an:
webmaster@mpg.de
Herausgeber
Max-Planck-Gesellschaft zur Förderung der Wissenschaften e.V.
Referat für Presse- und Öffentlichkeitsarbeit
Hofgartenstraße 8
80539 München
Telefon: (0 89) 2108-1276
Fax: (0 89) 2108-1207
Internet: www.mpg.de
Projektleitung
Dr. Andreas Trepte
Telefon: (0 89) 2108-1238
andreas.trepte@mpg-gv.mpg.de
Technik/CMS
Michael Frewin
Telefon: (0 89) 2108-1273
webmaster@mpg.de
Konzept und Gestaltung
Oestreicher+Wagner Medientechnik GmbH
Frankenthaler Straße 20
81539 München
Internet: www.oew.de
Juli 2003