030715 MPI webstyleguide - MPG HLL · mationsangebot nutzen. Er zieht eine positive Bilanz aus...

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:



Anker am Seitenanfang:



Link zum Seitenanfang:



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


Linklisten URLs:

Flaggen-Icon für Sprachversion, Verdana regular, 10 Pixel


Textlinks im Content:


Farbe: Rot, kein Rollover

URLs mit Icon:

ONW-Icon, Verdana regular, 10 Pixel


E-Mail-Adressen:

E-Mail-Icon, Verdana regular, 10 Pixel


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: [email protected]

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)


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.).


16

1

2

1 2


17


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




1

2

21


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




Button-Begrenzung (Rahmen):Farbe: Grau R 204 / G 204 / B 204, # CC CC CC

Font: Verdana regular

Größe: 10 Pixel

Laufweite: 0


Farbe: Grau R 102 / G 102 / B 102, # 66 66 66

2

3

3

2


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,


Hat man die unterste Hierarchieebene erreicht, d.h. es gibt keine

weiterführenden Navigationspunkte, so erscheint kein Pfeil-Icon mehr

im aktiv markierten Navigationselement.


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.


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



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


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


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


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.


(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

E-Mail

neues Fenster (ONW)

Button-Pfeilelemente(öffnen bei aktiviertemJavascript das Pull-Down-Menü)

Plus-Icon

Minus-Icon

PDF

Dokument/Infotext

Zoom/Vorschau

Film

editieren/Formular ausfüllen

löschen

Download/speichern

drucken

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


33

Blaues Farbset



R 121 / G 164 / B 196, # 79 A4 C4

Helle Flächenfarbe


R 226 / G 239 / B 249, # E2 EF F9

Button-Highlights:

R 200 / G 220 / B 236, # C8 DC EC

2


34

Ockerfarbenes Farbset



R 208 / G 186 / B 137, # D0 BA 89

Helle Flächenfarbe


R 244 / G 238 / B 223, # E4 EE DF

Button-Highlights:

R 232 / G 220 / B 194, # E8 DC C2

3


35

Rötliches Farbset



R 214 / G 171 / B 171, # D6 AB AB

Helle Flächenfarbe


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)


Laufweite: 0



1

1

290 110

x


41

Bildformate im Content-FließtextStandardformat: 140 x 83 Pixel (1-spaltig)



Laufweite: 0



1

1

140 110

83


42

140 110

x

Bildformate im Content-Fließtext

Hochformat: 140 Pixel x Höhe x (1-spaltig)



Laufweite: 0



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



Laufweite: 0



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


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


Farbe: Grau R 153 / G 153 / B 153, # 99 99 99

1

1

Fonts: Verdana bold, 11 Pixel

Verdana regular, 10 Pixel

Laufweite: 0



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


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.



Laufweite: 0



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.


Verdana bold, 10 Pixel (Bereichs-Headline)


Laufweite: 0



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


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.


Verdana bold, 10 Pixel (Linküberschrift)

Verdana regular, 10 Pixel (Fließtext, URL)

Laufweite: 0

Zeilenhöhe: 18 Pixel (Links)

14 Pixel (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)

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



Grau R 102 / G 102 / B 102, # 66 66 66 (Links)


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




Verdana bold, 10 Pixel (Titel)

Verdana regular, 10 Pixel (Autoren, Quelle)

Laufweite: 0



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.


Verdana bold, 10 Pixel


Laufweite: 0



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.


Fonts: Verdana bold, 10 Pixel (Hauptmenüpunkte)

Verdana regular, 10 Pixel (Submenüpunkte)

Laufweite: 0



Grau R 102 / G 102 / B 102, # 66 66 66 (Links)


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)


Laufweite: 0


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.


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



Grau R 102 / G 102 / B 102, # 66 66 66 (Links)


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:

[email protected]

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

[email protected]

Technik/CMS

Michael Frewin

Telefon: (0 89) 2108-1273

[email protected]

Konzept und Gestaltung

Oestreicher+Wagner Medientechnik GmbH

Frankenthaler Straße 20

81539 München

Internet: www.oew.de

Juli 2003

030715 MPI webstyleguide - MPG HLL · mationsangebot nutzen. Er zieht eine positive Bilanz aus...

Documents

Transcript of 030715 MPI webstyleguide - MPG HLL · mationsangebot nutzen. Er zieht eine positive Bilanz aus...