Redaktions- und Gestaltungsleitfaden Webdesign … · Anpassung des Kapitels für Next-Level-Teaser, s. ... 05.1 Magazin-Startseite ... Mit dem vorliegenden Layout wird den von der

Projektmanagement: Svenja Rausch | Internationales Marketing | Abteilung 82 Marketing Verantwortlich: Dr. Patrick Honecker | Leitung Dezernat 8 Kommunikation und Marketing

Design und Redaktion Leitfaden: SEITENBAU GmbH www.seitenbau.com

WEBRELAUNcH 2015

Redaktions- und Gestaltungsleitfaden Webdesign

Universität zu Köln

Stand 30.06.2015

DISCLAIMER:

Dieser Redaktions- und Gestaltungsleitfaden bildet das umfangreiche Modul-Portfolio im neuen Design der Webseite www.uni-koeln.de ab. Das Dokument liefert eine Modul-Beschreibung in Hinblick auf Verwendung und responsives Verhalten (Desktop- vs. Tablet - oder mobile Version) sowie eine Übersicht der Elemente (z.B. Fotos), die eingesetzt werden können. Der Redaktions- und Gestaltungsleitfaden gibt Empfehlungen bezüglich der Verwendung einzelner Module. Die Umsetzung sollten von den Redakteur_innen entsprechend den Strukturen und Anforderungen der jeweiligen Webseite-Bereiche vorgenommen werden. In einzelnen Fällen kann es sein, dass Module auf technischer Seite z.Zt. in Bearbeitung sind oder im Content-Management-System nicht abgebildet werden konnten. Dieses Dokument ist keine Bedienungsanleitung für das jeweilige Content-Management-System. Diese wird von den diversen Verantwortlichen im IT-Bereich (zentrale IT, Abteilung 32 oder Rechenzentrum) nach Beendigung des Relaunch Prozesses separat und ergänzend zur Verfügung gestellt.

http://www.uni-koeln.de/

R e d a k t i o n s - u n d G e s t a l t u n g s l e i t f a d e n f ü r d e n W e b a u f t r i t t d e r U n i v e r s i t ä t z u K ö l n

Erstellt von:

SEITENBAU GmbH

Seilerstraße 7

D-78467 Konstanz

http://www.seitenbau.com

http://www.seitenbau.com/


S e i t e 2 | 142

ÄNDERUNGSHISTORIE

Version Datum Zusammenfassung der Änderungen Autor

1.0 30.03.2015 Ersterstellung SEITENBAU

1.1 21.04.2015 Anleitung zur Icon-Erstellung hinzugefügt, s. Umgang mit neuen Icons

Fav-Icons gegen übergreifendes UzK-blaues ausgetauscht, s. Icons und Anhang Fav-Icon

Sprünge durch Querverweise entfernt + Inhaltsverzeichnisse aktualisiert

SEITENBAU

1.2 19.05.2015 Korrektur + Anpassung Kapitel für Tabellen, s. Tabellen

Hinzunahme neues Kapitel für Definitionslisten, s. Definitionslisten

Anpassung Kapitel für Sticky-Header nach Umsetzung des Mobile-Sticky-Header, s. Sticky-Header

SEITENBAU

1.3 08.06.2015 Umgang mit Bildern deutlicher formuliert, s. Bilder (Bildsprache, Formate) + Einzel-Bild + Main-Slider

Kapitel Aufzählungen angepasst, s. Aufzählungen und Auflistungen

Anpassung des Kapitels für Next-Level-Teaser, s. Next-Level-Teaser und Seitentitel

SEITENBAU

1.4 15.06.2015 Responsive Tabellen um transparente Klickleiste erweitert, s Tabellen.

UzK

30.06.2015 Teaser-Slider Kapitel entfernt Anpassung in Kap. Bilderslider

SEITENBAU


S e i t e 3 | 142

INHALTSVERZEICHNIS

ÄNDERUNGSHISTORIE ________________________________________________________ 2

INHALTSVERZEICHNIS ________________________________________________________ 3

01 Einführung _____________________________________________________________ 7

01.1 Zielgruppe __________________________________________________________ 7

01.2 Aufbau und Anwendung des Leitfadens __________________________________ 7

02 Grundlegendes zum neuen Layout __________________________________________ 9

02.1 Anforderungen an das neue Layout ______________________________________ 9

02.2 Leitfaden als Erweiterung des Corporate Design Manual ____________________ 12

02.2.1 Einheitlichkeit __________________________________________________ 12

02.2.2 Responsive Design _______________________________________________ 12

02.2.3 Verwendung von JavaScript _______________________________________ 13

02.2.4 Logo und Signets ________________________________________________ 13

02.2.5 Umgang mit neuen Siegeln und Logos _______________________________ 14

02.2.6 Farbschema ____________________________________________________ 15

02.2.7 Schriften ______________________________________________________ 16

02.2.8 Raster, Responsive Verhalten, Column Drop __________________________ 16

02.2.9 Bilder (Bildsprache, Formate) ______________________________________ 19

02.2.10 Icons ________________________________________________________ 20

02.2.11 Umgang mit neuen Icons ________________________________________ 20

02.2.12 Seitentitel____________________________________________________ 21

02.2.13 Kooperationen ________________________________________________ 22

02.3 Redaktionelle DOs und DON’Ts ________________________________________ 22

03 Fixe Seitenelemente ____________________________________________________ 24

03.1 Seitentypen ________________________________________________________ 24

03.1.1 Die Startseite 75% 25% (Anwendung, Elemente, Richtlinien) _____________ 24

03.1.2 Die Inhaltsseite 66% 33% (Anwendung, Elemente, Richtlinien) ____________ 24

03.1.3 Abweichende Seitentypen ________________________________________ 25

03.2 Header und Footer __________________________________________________ 25

03.2.1 UzK-Home bzw. Portal-Header _____________________________________ 25

03.2.2 Sticky-Header __________________________________________________ 29

03.2.3 Zielgruppen-Header _____________________________________________ 31


S e i t e 4 | 142

03.2.4 Fakultätsheader _________________________________________________ 33

03.2.5 Institutsheader _________________________________________________ 34

03.2.6 Microsite-Header _______________________________________________ 34

03.2.7 Footer ________________________________________________________ 35

03.3 Navigation _________________________________________________________ 40

03.3.1 Allgemeine Struktur _____________________________________________ 40

03.3.2 Hauptnavigationsleiste ___________________________________________ 40

03.3.3 Mega-Flyout ___________________________________________________ 42

03.3.4 Submenü ______________________________________________________ 45

03.3.5 Breadcrumb ____________________________________________________ 46

03.3.6 Mobile Navigation – Hamburger-Menü ______________________________ 49

04 Flexibel einsetzbare Module ______________________________________________ 52

04.1 Adressdaten einzeln _________________________________________________ 52

04.2 Adressdaten als Liste ________________________________________________ 53

04.3 Akkordeon ________________________________________________________ 54

04.4 Audio-Modul _______________________________________________________ 56

04.5 Autor-Social-Sharing _________________________________________________ 59

04.6 Einzel-Bild _________________________________________________________ 60

04.7 Bilderslider ________________________________________________________ 64

04.8 Download-Liste _____________________________________________________ 65

04.9 Druckansicht _______________________________________________________ 67

04.10 Formulare _______________________________________________________ 69

04.11 Kalender ________________________________________________________ 70

04.12 Listen (filter- und blätterbar) ________________________________________ 76

04.12.1 Alphabetische Suchnavigation ___________________________________ 76

04.12.2 News-Listenelement ___________________________________________ 77

04.12.3 Suchefeld und Filter-Dropdowns __________________________________ 80

04.12.4 Pagination ___________________________________________________ 82

04.13 Main-Slider ______________________________________________________ 83

04.14 Notfallzeile ______________________________________________________ 87

04.15 Service-Box ______________________________________________________ 88

04.16 Sitemap _________________________________________________________ 89

04.17 Tabbox am Beispiel Kontaktdaten ____________________________________ 91


S e i t e 5 | 142

04.18 Tabellen _________________________________________________________ 94

04.19 Teaser __________________________________________________________ 98

04.19.1 Dateline-Teaser _______________________________________________ 99

04.19.2 Exzellenzteaser ______________________________________________ 101

04.19.3 Multi-Teaser ________________________________________________ 103

04.19.4 News-Teaser ________________________________________________ 104

04.19.5 Next-Level-Teaser ____________________________________________ 107

04.19.6 Kontextteaser _______________________________________________ 110

04.19.7 Teaser zweispaltig ____________________________________________ 111

04.19.8 Teaser-Linkliste ______________________________________________ 113

04.19.9 Veranstaltungs-Teaser _________________________________________ 115

04.20 Text-Block ______________________________________________________ 116

04.20.1 Text mit Rahmen / Hintergrundfarbe / Einrückung __________________ 118

04.20.2 Aufzählungen und Auflistungen _________________________________ 119

04.20.3 Definitionslisten ______________________________________________ 121

04.21 Trenner ________________________________________________________ 122

04.22 Video __________________________________________________________ 122

04.23 Zitat ___________________________________________________________ 124

05 Magazin-Module ______________________________________________________ 126

05.1 Magazin-Startseite _________________________________________________ 126

05.1.1 Magazin-Main-Slider ____________________________________________ 126

05.1.2 Magazin Startseitenteaser _______________________________________ 127

05.2 Magazin-Detailseite ________________________________________________ 129

05.2.1 Magazin Marginalspaltenteaser ___________________________________ 129

05.3 Magazin-Suchergebnisseite __________________________________________ 131

05.3.1 Magazin-Suchergebnisfilter ______________________________________ 131

05.3.2 Magazin Suchergebnisteaser _____________________________________ 132

ANHANG ________________________________________________________________ 135

A Glossar ____________________________________________________________ 135

B Vorlage für Instituts-/Kooperationslogo __________________________________ 136

C Icon-Liste __________________________________________________________ 137

D Fav-Icon ___________________________________________________________ 138

ABBILDUNGS- UND TABELLENVERZEICHNIS _____________________________________ 139


S e i t e 6 | 142


S e i t e 7 | 142

01 Einführung

01.1 Zielgruppe

Dieses Dokument richtet sich an die Mitarbeiter/innen der Redaktion, des Grafik-Designs

und der CMS-Technik, also an alle, die daran beteiligt sind den neuen Webauftritt der

Universität zu Köln mitzugestalten und zu ermöglichen.

Nicht alle Kapitel sind für jede Zielgruppe gleich wichtig, als Orientierungshilfe wird Ihnen im

nachfolgenden Kapitel der Aufbau des Dokuments ausgelegt.

01.2 Aufbau und Anwendung des Leitfadens

Sie haben den Gestaltungs- und Redaktionsleitfaden der neuen Website der Universität zu

Köln (UzK) vor sich. Genau wie die UzK selbst, besteht die Website aus vielen kleinen

Einzelteilen, die ein großes Ganzes ergeben. Damit dies funktioniert und das komplette

Potential ausgeschöpft wird, muss jedes Element seiner Bestimmung nach richtig eingesetzt

werden. Dabei hilft Ihnen dieser Leitfaden.

Sie erfahren Grundlegendes zum neuen Layout, zum Corporate Design der UzK und zum

Einsatz der zahlreichen Elemente auf der neuen Website der Universität zu Köln. Siehe:

Grundlegendes zum neuen Layout

Sie bekommen Wissen an die Hand zum Erstellen eigener Grafiken (s. Logo und Signets +

Kap. Icons), Texte und Bilder zum passenden Einsatz auf allen Start- und Unterseiten.

Sie lernen Grundbegriffe des heutigen Webdesign, des Responsive Design, wie man es

nutzt und was man besser nicht tun sollte. (s. Redaktionelle DOs und DON’Ts)

Sie erhalten detaillierte Beschreibungen aller möglichen Elemente, welche Sie zum

Befüllen Ihrer eigenen Seite benutzen können, mit Beschreibung, was diese können, wie

sie funktionieren und an welchen Stellen sie eingesetzt werden können. (ab Fixe

Seitenelemente)

Die nachfolgende Tabelle gibt eine Orientierungshilfe, welche Kapitel für welche Zielgruppe

relevant sind.

Kapitel Inhalt Zielgruppe

Kap. 01-02 Grundlagen des Layouts kennenlernen welche Anforderungen

werden mit dem neuen Layout erfüllt,

welches sind die Basiselemente, wie Farbschema und ähnliches,

Redaktion, Grafik-Design, CMS-Technik


S e i t e 8 | 142

was ist bei der Gestaltung neuer Elemente zu beachten

Kap. 03 Verständnis für den Grundaufbau und die Grundelemente des Layouts aufbauen Seitentypen Header, Footer Navigation

Redaktion, CMS-Technik

Kap. 04 einzelne Module verwenden lernen


Kap. 05 Spezielle Module des Magazin-Webauftritts verwenden lernen



S e i t e 9 | 142

02 Grundlegendes zum neuen Layout

02.1 Anforderungen an das neue Layout

Mit dem vorliegenden Layout wird den von der UzK definierten Zielen des Relaunchs

Rechnung getragen. Die Ziele entstammen der Leistungsbeschreibung (Vergabeverfahren

Nr.: 1439) und der Website http://www.portal.uni-koeln.de/webrelaunch2015.html

Hierbei handelt es sich in erster Linie um eine redaktionelle Aufgabe, da die

Strukturierung der Seiten in der Hand der Redaktion liegt. Wird der Verzeichnisbaum

zielgruppenbezogen aufgebaut, dann können mit Hilfe der Hauptnavigationsleiste (s.

Hauptnavigationsleiste) die Zielgruppen in den Fokus gestellt werden, s.

zielgruppenorientierte Hauptnavigation auf UzK-Startseite.

Das eigenständige Portal „International“ wird über einen angepassten Header (s. Header

und Footer) abgegrenzt, ohne den Bezug zur UzK zu verlieren. Das Portal kann seine eigene

Startseite gestalten, hierfür stehen alle UzK-Layout-Elemente zur Verfügung. (s. Flexibel

einsetzbare Module)

Zielgruppenorientierung

Der Relaunch verfolgt das Ziel, die organisationsorientierte Struktur des Webauftritts

verstärkt zu einer adressatenbezogenen Navigation zu entwickeln. Die Strukturierung der

Inhalte soll konsequent auf die Zielgruppen abgestimmt werden.

Aufbau eines internationalen Portals (Microsite)

Für die internationalen Zielgruppen soll eine gesonderte Microsite, ein internationales

Portal, entstehen, das sich den strategischen Zielen der Universität

(Internationalisierungsstrategie, strategische Partnerschaften, etc.) sowie den operativen

und unterstützenden Maßnahmen und Angeboten der Universität im Bereich

internationaler Kooperation widmet.

Raum zur Markenbildung

Die neuen Seiten sollen Raum für Markenbotschaften, die in die Konsolidierung der

Dachmarke "Universität zu Köln" einzahlen, bieten. Dies soll z.B. über großflächige

Bildformate (Slider) oder Videoformate über Start- und Contentseiten möglich gemacht

werden.

http://www.portal.uni-koeln.de/webrelaunch2015.html


S e i t e 10 | 142

Der Raum für Markenbotschaften ist mit dem großflächigen Main-Slider gegeben (s.

Main-Slider), diversen Teaser-Varianten (s. Teaser), Video- und weiteren Modulen (s. Kap.

Module). Die Markenbotschaft kann redaktionell somit vielfältig umgesetzt werden. Der

übergeordnete UzK-Header stärkt zudem die Dachmarke UzK. (s. Header und Footer)

Das Layout mit dem übergeordneten Header und dem strikten Farbschema sorgt dafür,

dass die UzK als Dachmarke präsent ist. Die Fakultäten sowie andere Einrichtungen und

Seiten der UzK werden dadurch automatisch dezenter repräsentiert. Die Submarken sind

u.a. durch den Farbbalken, in der Fakultätsfarbe gehalten, erkennbar. Des Weiteren soll

dieser Redaktions- und Gestaltungsleitfaden der Redaktion der UzK dabei helfen, Inhalte

einheitlich zu gliedern und Seiten einheitlich aufzubauen, so dass die Dachmarke durch

Einheitlichkeit weiter gestärkt wird. (s. Einheitlichkeit)

Damit die bestehenden Seiten mit all ihren verschiedenen Bedürfnissen weiterhin abgebildet

werden können, wurden eine Vielzahl an Modulen bereitgestellt (s. Flexibel einsetzbare

Module), wobei die Musterseiten-Elemente als Basis dienten (s. http://musterseiten.uni-

koeln.de/).

Einheitlichkeit durch universitätsübergreifendes Corporate Design

Die Universität umfasst sechs Fakultäten, die unter der Dachmarke als dezente

Submarken erkennbar sein sollen. Die Dachmarke nutzt die übergreifenden

Universitätsfarben blauweiß-hellgrau, die prominent das Gesamtbild bestimmen sollen.

Die Fakultäten bedienen sich in der Akzentuierung eigener aus der historischen Tradition

kommender Farben, die zur dezenten Distinktion beitragen sollen.

Einheitliches Aussehen, vielfältige Ansprüche

Das Onlineangebot der Universität umfasst zur Zeit etwa 300.000 Webseiten mit über

3.000 RedakteurInnen. Für alle diese vielfältigen Angebote soll eine multifunktionale

Vorlage erstellt werden, die die unterschiedlichen Ansprüche sowohl von zentraler Seite,

als auch auf Institutsebene berücksichtigt. Diese Vorlage wird in die zentralen

Contentmanagementsysteme eingepflegt und auch eigenständigen Webauftritten der

Universität zur Verfügung gestellt.

http://musterseiten.uni-koeln.de/

http://musterseiten.uni-koeln.de/


S e i t e 11 | 142

Die im Rahmen des Relaunchs erstellten Fotos spielen eine wichtige Rolle und sind eine

tragende Komponente im Markenbildungsprozess der Universität zu Köln (s. Bilder

(Bildsprache, Formate). Das neue Layout bietet eine Reihe von Elementen, mit denen sich

diese Fotos platzieren lassen. Zum einen sind dies die Module „Bild“ und „Bilder-Slider“ (s.

Kap. Einzelbild + Bilderslider), jeweils mit optionaler Lightbox-Funktion, zum anderen ist

auch das Anteasern von Themen zumeist mit Unterstützung durch Bildmaterial angedacht

(Teaser-Slider, diverse andere Slider, s. Teaser).

Damit das Klicken durch die Webseiten Lust auf ein Studium, auf Forschungsprojekte oder

eine Mitarbeit an der Universität macht, unterstützt der Redaktions- und

Gestaltungsleitfaden die Redaktion dabei das notwendige Gefühl für die Erstellung von

Inhalten und Seiten zu entwickeln. Mit den im neuen Layout vorliegenden Elementen, lässt

sich eine ansprechende Gestaltung erreichen.

Mit dem responsive Design des neuen Layouts ist gewährleistet, dass die Inhalte der UzK-

Website auf allen Endgeräten dargestellt werden können. Die Darstellung passt sich dabei

der Auflösung bzw. dem Viewport des jeweiligen Endgerätes an. (s. Responsive Design)

Anpassung an technologische Standards (z.B. responsives Design)

Die Universität möchte für alle Zielgruppen erreichbar sein, ob zuhause am Schreibtisch

oder unterwegs auf dem Smartphone oder dem Tablet. Die Umsetzung des Relaunch hat

zum Ziel, alle Inhalte auch mobil angenehm lesbar für den Nutzer bereitzustellen – von

textlichen Inhalten über die Darstellung von Fotos und interaktiven Grafiken bis hin zum

Bewegtbild.

Authentische Darstellung der Universität durch kohärentes Bildkonzept

Fotos spielen im Relaunch sowie für das internationale Portal eine wichtige Rolle und

sind eine tragende Komponente im Markenbildungsprozess der Universität zu Köln.

Durch dialog- und interaktionsorientierte Kommunikationsszenen, authentische

Darstellung von Studierenden und Lehrenden an Schlüsselorten der Universität (Hörsäle,

Forschungslabore, Cafés, Bibliothek, Außenanlagen) sowie in der Stadt (Dom, Rhein)

möchte die Universität ihren Zielgruppen ein willkommen heißendes Gefühl vermitteln.

Das Klicken durch die Webseiten soll Lust auf ein Studium, auf Forschungsprojekte oder

eine Mitarbeit an der Universität machen. Stimmungsvolle Bilder von Studierenden und

Lehrenden auf dem Campus sowie attraktive Forschungssituationen sollen die hohe

Diversität und das umfangreiche Angebotsportfolio der Universität lebendig vermitteln.


S e i t e 12 | 142

02.2 Leitfaden als Erweiterung des Corporate Design Manual

Der Gestaltungsleitfaden ist als Ergänzung zum bisherigen CD-Manual der Universität zu Köln

zu sehen, womit kombiniert angewendet auf alle gestalterischen Elemente der

Onlinekommunikation der UzK, ein einheitliches Bild angestrebt wird.

02.2.1 Einheitlichkeit

Eine heterogene Einrichtung wie eine Universität nach außen hin einheitlich darzustellen, ist

keine leichte Aufgabe. Eine übergreifende Corporate Identity bzw. ein Corporate Design

dienen der Einheitlichkeit zur Unterstützung, aber nur die konsequente Umsetzung dieser

Vorgaben führt zu dem gewünschten Effekt.

Gerade bei einer Institution wie der Universität zu Köln, die ihre Außendarstellung sehr

dezentral von vielen verschiedenen Stellen aus tätigt, ist der Wiedererkennungswert einer

der wichtigsten Punkte, um die verschiedenen Präsentationen zurück auf einen Nenner zu

bringen. Trotz aller Autonomie der Fakultäten und Institute muss die UzK als übergeordnete

Autorität erkennbar bleiben und diese Dachmarke richtig kommuniziert werden. Dies wird

u.a. durch einen einheitlichen Rahmen (Header und Footer) erreicht sowie durch ein

einheitliches Farb- und Schriftbild. Die eigene Identität der einzelnen Einrichtungen kann

unter dem zentralen Erscheinungsbild der UzK weiterhin authentisch dargestellt werden.

Hierfür stehen die spezifischen Gestaltungselemente wie der Farbcode und die

verschiedenen Siegel der Fakultäten zur Verfügung. Neues Material, das für den Einsatz auf

den Seiten der UzK angefertigt wird (z.B. Grafiken), sollte mit den hier definierten Schriften

und Farben angefertigt werden.

Werden die Richtlinien des Gestaltungsleitfadens eingehalten, entsteht eine stabile

Wahrnehmung der Universität zu Köln in der Öffentlichkeit.

02.2.2 Responsive Design

Responsive Design beschreibt im Wedesign eine gestalterische und technische Denkweise

zur Reaktion einer Website auf verschiedene technische Endgeräte. Ziel ist die zentrale

Steuerung der Ausgabe, vor allem im Hinblick auf mobile Endgeräte wie Tablets und

Smartphones. Besonderer Augenmerk liegt hierbei auf dem Aufbau der Seite, also die

unterschiedliche Anordnung der grafischen Elemente bzw. des zu Grunde liegenden Rasters

sowie die Nutzung verschiedener Eingabemethoden, wie z.B. der Maus an normalen

Desktop-Computern oder die direkte Eingabe auf Touch-Displays.

Responsive Design unterscheidet sich durch das Erzeugen einer einzigen (flüssig

angepassten) Version der Website, die aber unterschiedliche Darstellungen auf

verschiedenen Geräten zulässt, von mobilen Websites (zusätzliches Template für mobile

Endgeräte), adaptiven Websites (statisches Design für wenige festgelegte Breakpoints) und

liquiden Websites (gleichbleibende Anordnung der Elemente im prozentualen Verhältnis).

Redaktionell ist bei der Arbeit mit responsive Design zu beachten, dass sich die eingesetzten

Elemente ggf. in den unterschiedlichen Viewports verändern und somit z.B. den erzielten


S e i t e 13 | 142

Gewichtungseffekt verlieren. Jede Modulbeschreibung enthält deswegen zur Unterstützung

der Redaktionsarbeit einen Abschnitt zum responsive Verhalten. Zudem sollte das

responsive Verhalten vor der Liveschaltung überprüft werden, um so noch rechtzeitig auf

unerwünschte Nebeneffekte reagieren zu können (s. Redaktionelle DOs und DON’Ts)

02.2.3 Verwendung von JavaScript

Um alle Layout-Elemente so darstellen zu können wie sie vorgesehen sind, ist es an vielen

Stellen unvermeidlich JavaScript einzusetzen und somit im Browser zu aktivieren. Das hat zur

Folge, dass die betroffenen Elemente bei deaktiviertem JavaScript abweichend dargestellt

werden können und anders funktionieren.

Nachfolgend ein paar Beispiele, was passiert, wenn das JavaScript im Browser ausgeschaltet

ist:

das Akkordeon (s. Akkordeon) wird vollständig ausgeklappt dargestellt und die Tabs der

Tabbox untereinander (s. Tabbox am Beispiel Kontaktdaten)

die Bilder im Bilderslider (s. Bilderslider) werden nicht als Slider angezeigt, sondern

untereinander dargestellt

ohne JavaScript gibt es die Lightbox-Funktion bei den Bild-Elementen (s. Einzel-Bild)

nicht, d.h. der Klick auf das Bild öffnet nicht das Bild in einer Lightbox, sondern im

Browserfenster selbst

die Inhalte des Mega-Flyout (s. Mega-Flyout) werden passend zu den

Hauptnavigationsleisten-Punkten untereinander und die Breadcrumb-Menüs werden

nicht angezeigt (s. Breadcrumb)

im Fall des Social-Sharing (s. Autor-Social-Sharing) funktioniert das eingebundene Plugin

nicht, es wird dann an den Anfang der Seite gesprungen und es erscheint ein Hinweis,

dass Javascript aktiviert werden sollte

02.2.4 Logo und Signets

Die historischen Siegel der Universität zu Köln und ihrer Fakultäten verbinden die

Außendarstellung der heutigen Universität mit der langen Geschichte der Hochschulbildung

in Köln. Sie bilden einen der Markenwerte der UzK.

In ihrem Urzustand sind sie sehr kleinteilig und für den responsive Webauftritt nur begrenzt

einsetzbar, weil sie in kleinen Auflösungen verschwimmen und damit ihren Wert verlieren.

Sie wurden entsprechend webgerecht aufbereitet und modernisiert. Zudem werden sie

pointierter und dadurch prägnanter eingesetzt.

Das Siegel der Universität zu Köln dient weiterhin als Bildmarke, die durch den Wortzusatz

„Universität zu Köln“ (Wortmarke) ergänzt wird. Sowohl das UzK-Siegel als auch die

Fakultätssiegel dienen hier zum Transport der Markenbotschaft „Tradition“, der modern

anmutende Zusatz „Universität zu Köln“ als Identifikationselement.


S e i t e 14 | 142

Das Siegel wird reduziert eingesetzt, zum Beispiel entfällt es in der mobilen Ansicht zu

Gunsten der Informationsmenge, die auf diesem begrenzten Raum präsentiert werden

möchte, komplett (s. Navigation). Der Einsatz der Wortmarke reicht als

Identifikationselement im Zusammenspiel mit dem Farbklima völlig aus.

Siegel Beschreibung

Siegel der Universität zu Köln

Siegel der Mathematisch-Naturwissenschaftlichen Fakultät

Siegel der Medizinischen Fakultät

Siegel der Philosophischen Fakultät

Siegel der Rechtswissenschaftlichen Fakultät

Siegel der Wirtschafts- und Sozialwissenschaftlichen Fakultät

Tabelle 1 Siegel

02.2.5 Umgang mit neuen Siegeln und Logos

Um den Instituten und Kooperationspartnern in Zukunft gerecht zu werden, können deren

Logos u.a. in einem weißen Bereich im Header eingefügt werden (s. Zielgruppen-Header),

weitere Möglichkeiten für Kooperationen sind im Kapitel Kooperationen beschrieben. Die

Größe dieses weißen Bereichs ändert sich in den verschiedenen Viewports. Um Logos für

diesen Bereich entsprechend bereitzustellen, gibt es eine Formatvorlage für Photoshop (s.

Vorlage für Instituts-/Kooperationslogo), mit deren Hilfe das Logo richtig ausgerichtet


S e i t e 15 | 142

werden kann. Hieraus kann das erforderliche PNG exportiert werden. Da diese Logos auf

einem weißen Hintergrund stehen, ist eine farbliche Anpassung nicht nötig, um einem ggf.

entstehenden unruhigen Bild entgegenwirken zu müssen. Wichtig ist, dass der Hintergrund

des Logos transparent ist.

Besitzt das Logo z.B. einen weißen Rahmen, so empfiehlt es sich den Rahmen mit einem

Schlagschatten zu versehen, da der Rahmen sonst nicht zur Geltung kommt.

Handelt es sich um ein Kooperationslogo, dann ist „In Kooperation mit“ Bestandteil vom

Logo, d.h. bei der Logo-Erstellung ist dies mit zu integrieren. Dies ist entsprechend in der

PSD-Vorlage vorgegeben.

Siegel und Logos, die im blauen Bereich dargestellt werden, müssen als SVG mit

transparenten Hintergrund bereitgestellt werden. Das bedeutet, dass nicht jede Logo-

Darstellung funktioniert. So sollte neben weiß keine weitere Farbe zum Einsatz kommen und

beispielsweise auch kein Schlagschatten (s. z.B. Unisport-Logo).

Der Vorteil vom SVG-Format ist, dass Siegel und Logos für die kleineren Auflösungen

reduzierter vorgehalten werden können, so dass sie auch in klein noch gut erkennbar sind.

02.2.6 Farbschema

Das auf den Seiten der UzK benutzte Farbschema basiert auf dem bisherigen Styleguide der

Universität zu Köln. Es greift sowohl die verschiedenen Blautöne als auch die fakultätsfarben

wieder auf und wurde um einige Farbabstufungen ergänzt.

Farbe Beschreibung Hex-Wert RGB-Werte CMYK-Werte

UZK Blaugrau Hell

#c8d1db RGB 200/209/219

CMYK 26/14/11/0

UZK Blaugrau Mittel

#a5b6c7 RGB 165/182/199

CMYK 40/22/16/1

UZK Blaugrau #7a93ab RGB 122/147/171

CMYK 57/34/22/5

UZK Blaugrau dunkel

#4a657d RGB 74/101/125

CMYK 74/51/33/19

UZK Blauschwarz

#32475b RGB 50/71/91 CMYK 83/62/42/36

UZK Metamenu #253746 RGB 37/55/70 CMYK 87/66/48/50

UZK Navigation Active

#002c37 RGB 0/44/55 CMYK 99/66/53/62

UZK Font Grau #595959 RGB 89/89/89 CMYK 59/49/48/40

UZK Font Blau #3e566c RGB 62/86/108 CMYK 79/56/38/26

UZK Heller Fond #e3e8eb RGB 227/232/235

CMYK 13/6/7/0


S e i t e 16 | 142

UZK Kontur #dbdbdb RGB 219/219/219

CMYK 17/12/13/0

UZK WiSo Grün #83af23 RGB 131/175/35

CMYK 57/10/100/1

UZK ReWi Bordeaux

#7d321d RGB 125/50/29 CMYK 32/83/89/41

UZK Phil Violett #590f68 RGB 89/15/104 CMYK 80/100/25/13

UZK MatNat Blau

#0082c6 RGB 0/130/198 CMYK 82/39/0/0

UZK Human Orange

#dba619 RGB 219/166/25

CMYK 14/34/95/3

UZK Medi Rot #af111d RGB 175/17/29 CMYK 21/100/92/14

UZK Notfall Rot #b4000e RGB 180/0/14 CMYK 19/100/100/12

Tabelle 2 Farbschema

02.2.7 Schriften

Die UzK_Seiten werden mit der Schriftart Open Sans umgesetzt. Sie ist modern, gut lesbar

und eignet sich besonders für den Einsatz im Web. Sie bietet eine große Anzahl an

Schriftschnitten und ist somit für eine umfangreiche Textformatierung geeignet.

Die Schrift wird in folgenden Schnitten verwendet:

Open Sans Regular

Open Sans Italic

Open Sans Semibold

Open Sans Semibold Italic

Open Sans Bold

Open Sans Bold Italic

Die Textformatierung auf den Seiten der UzK bietet Einsatzmöglichkeiten für sechs

verschiedene Headline-Varianten (H1-H6) (s. Text-Block). Die Schriftgrößen variieren je nach

Breakpoint, unterschreiten jedoch nicht die geforderte Mindestgröße von 12,1px. Die

Technik arbeitet an dieser Stelle nicht mit absoluten Pixelgrößen, sondern mit „em“, was die

Skalierung der Schriften in den verschiedenen Viewports ermöglicht.

02.2.8 Raster, Responsive Verhalten, Column Drop

Das UzK-Layout basiert auf einem 12-spaltigen Grundraster, welches je nach Einsatzort

anders aufgeteilt werden kann. Die Anzahl der nutzbaren Spalten verringert sich in

niedrigeren Auflösungen, um Kleinteiligkeit zu verhindern. In Auflösungen über 1024 Pixeln

steht die volle Anzahl von 12 Spalten zur Verfügung, zwischen 768 und 1023 Pixeln nur noch

sechs und unter 768 nur noch eine Spalte.

Eine Seite unterteilt sich in einen Content-Bereich und eine Marginalspalte. In Viewports


S e i t e 17 | 142

über 1024 Pixel Breite wird unterschieden zwischen Startseiten (UzK-Home, Portalstartseiten

und Fakultätsseiten) sowie Inhaltsseiten. Auf Startseiten beträgt das Verhältnis zwischen

Content-Bereich und Marginalspalte 75% zu 25% (also 9 Spalten zu 3 Spalten), auf

Inhaltsseiten 66% zu 33% (8 Spalten zu 4 Spalten). (s. Seitentypen).

In Viewports zwischen 768 und 1023 Pixeln Breite stehen generell 6 Spalten zur Verfügung,

die sich in 66% zu 33% (also 4 zu 2 Spalten) aufteilen.

Ansichten unter 768 Pixel Breite haben nur noch eine Spalte zur Verfügung, nutzen also die

volle Breite. Die Marginalspalte rutscht hier unter den Content-Bereich (Column Drop).


S e i t e 18 | 142

Die zur Verfügung stehenden Spalten und die nutzbare Seitenbreite (Wrapper = 100%

Content) sind in folgender Tabelle aufgeführt:

Tabelle Grids/Viewports

Viewport Wrapper Spalten Spaltenbreite Steg Rand

1440 + 1400 px 12 80 px 40 px

1280 - 1439 1232 px 12 66 px 40 px


S e i t e 19 | 142

1024 - 1279 978 px 12 54 px 30 px

768 - 1023 726 px 6 96 px 30 px

Bis 767 100 % 1 Ca. min.

1,5%

02.2.9 Bilder (Bildsprache, Formate)

Bildsprache

Die Universität zu Köln ist eine der führenden Bildungseinrichtungen des Landes mit einem

vielfältigen Angebot. Um die Qualität des Angebots und damit des öffentlichen Auftritts zu

unterstreichen, sollte darauf geachtet werden, dass eine einheitliche und hochwertige

Bildsprache zum Einsatz kommt. Vor allem zentrale Seiten, wie z.B. die Startseiten, sollten

nicht mit z.B. unter- oder überbelichteten Bildern bestückt werden. Weitere Merkmale, die

bei der Auswahl von geeignetem Bildmaterial überprüft werden sollten:

Passt die Bildauflösung? – lieber eine zu hohe als eine zu geringe Bildauflösung

verwenden

Passt das Bild zum Thema? – wenn es nicht unterstützend wirkt, sondern z.B. eher

verwirrend, lieber das Bild weglassen

Passt der Bildausschnitt in allen Viewports? – in manchen Modulen, z.B. Slider, wird ein

Bild automatisch beschnitten, so dass ggf. etwas weggeschnitten wird, was essentiell ist

Im Zuge des Webrelaunch wurde im Auftrag des zentralen Marketings der Universität zu

Köln neues Bildmaterial angefertigt, welches vorrangig genutzt bzw. als Referenzmaterial

gesehen werden kann.

Bildformate

Vorgesehen sind für das Layout der UzK die Formate 1:1 (quadratisch), 3:2 und 16:9

(Querformat) sowie 2:3 (Hochformat). Um eine einheitliche Formensprache für den

gesamten Webauftritt der UzK zu erreichen, wird empfohlen nur diese Bildformate zu

benutzen. Bei den Modulen ist das Bildformat i.d.R. fest vorgegeben, meist 3:2 oder 16:9.

In einzelnen Modulen können alle Formate eingebunden werden, wie z.B. bei den

Bilderslidern (s. Bilderslider), jedoch kann der Einsatz abweichender Bildformate zur

Entstehung von unschönen Weißräumen oder stark vergrößerten oder verkleinerten

Ansichten der Bilder führen, so dass davon explizit abgeraten wird.

Die Bilder werden technisch, sowohl durch das CMS als auch durch den Browser passend zur

Anzeigegröße umgerechnet bzw. skaliert. Es gibt Bild-Module, die eine fixe Größe haben,

hierfür erfolgt keine Umrechnung, so dass nur das eine fixe Format vorliegen muss.

Um das Bildmaterial jedoch für alle Bild-Module verwenden zu können, sollten die Bilder in

der höchstmöglichen Auflösung bereitgestellt werden. Als Mindestrichtwert gilt eine


S e i t e 20 | 142

Auflösung von 1440 Pixeln Breite, was der maximalen Breite des größten Bild-Moduls (s.

Main-Slider) entspricht. Höhere Auflösungen kommen vor allem in der Lightbox-Funktion

zum Tragen, in welcher das Bild bildschirmfüllend angezeigt wird (s. z.B. Einzel-Bild).

Bitte beachten Sie beim Umgang mit Bildern auch die Hinweise für die Redaktionsarbeit, s.

Redaktionelle DOs und DON’Ts.

02.2.10 Icons

Es wird eine große Anzahl an Icons zur klaren Kennzeichnung von Menüpunkten, Bereichen

und Funktionen geboten. Das gewählte Icon-Set basiert auf dem Elegant Font, ergänzt durch

einige andere Icons. (s. Icon-Liste).

Im Impressum ist folgender Verweis aufzunehmen:

All icons used on the Universität zu Köln Website are licensed under CC BY 3.0.

It is attributed to Elegant Themes (Elegant Font), freepik and Situ Herrera (Line Icon Set).

The Original versions can be found here:

Alle Icons auf den Seiten der Universität zu Köln sind unter CC BY 3.0 lizensiert und

den Autoren Elegant Themes (Elegant Font), freepik und Situ Herrera (Line Icon Set)

zugeschrieben.

Das Originalmaterial befindet sich hier:

1. https://creativecommons.org/licenses/by/3.0/legalcode (muss auf CC BY 3.0 verlinkt werden)

2. http://www.flaticon.com/authors/elegant-themes

3. http://www.flaticon.com/authors/freepik

4. http://www.flaticon.com/authors/situ-herrera

5. http://www.flaticon.com/ (auf „here“ bzw. „hier“ verlinken)

Zusätzlich gibt es das Fav-Icon, welches übergreifend für alle UzK-Seiten verwendet wird. Auf

eine farbliche Einfärbung pro Fakultät wurde zu Gunsten der besseren Erkennbarkeit

verzichtet (s. Fav-Icon).

02.2.11 Umgang mit neuen Icons

Für die Bearbeitung von Icons sollte ein Programm verwendet werden, mit dem

Vektorgrafiken erstellt und bearbeitet werden können. Wir empfehlen das Programm Adobe

Illustrator.

Icons sollen mitskalieren im responsive Design, daher müssen diese im SVG-Format

bereitgestellt werden. Die Einfärbung in den UzK-Farben erfolgt per CSS.

Wird ein neues Icon benötigt, so sollte folgendermaßen vorgegangen werden:

1. prüfen, ob im verwendeten Elegant-Font (s. Icons) ein passendes Icon vorhanden ist

https://creativecommons.org/licenses/by/3.0/legalcode

http://www.flaticon.com/authors/elegant-themes

http://www.flaticon.com/authors/freepik

http://www.flaticon.com/authors/situ-herrera

http://www.flaticon.com/


S e i t e 21 | 142

WENN ja

2. die *.eps Datei im Illustrator öffnen

3. die Zeichenfläche auf (20 x 20) px festlegen und so benennen wie später die SVGs

heißen sollen

4. Ebene und Ebenengruppe ebenfalls so benennen

5. das Icon passend verkleinern /vergrößern

6. prüfen, ob noch Konturen vorhanden sind, wenn ja, in Flächen umwandeln

7. das Icon einfarbig schwarz färben (CMYK: 100/100/100/100)

8. als SVG exportieren

9. und im Quelltext bereitstellen

WENN nein

10. passendes Icon selbst als Vektorgrafik erzeugen und weiter verfahren wie oben ab

dem 3.Schritt

Wird ein Icon im Internet gesucht und verwendet, so sind die Verwendungsrechte des Icons

zu prüfen und ggf. das UzK-Impressum zu erweitern.

02.2.12 Seitentitel

In den verschiedenen Navigationselementen, spielt die Bezeichnung einer Seite, also der

Seitentitel, eine gravierende Rolle, da er immer wieder angezeigt wird. Je nach

Verwendungsort des Seitentitels steht nur begrenzt Platz zur Verfügung, so dass es

empfehlenswert ist für eine Seite den Seitentitel-Bezeichner in verschiedenen Zeichenlängen

redaktionell festgelegt vorliegen zu haben, damit das CMS diese Bezeichner automatisiert

verwenden kann.

Der Seitentitel wird verwendet in:

Element maximale Wortlänge maximale Zeichenlänge

Hauptnavigationsleiste 20 20

Mega-Flyout 30 90

Submenü + Mobile Navigation – Hamburger-Menü

30 90

Breadcrumb 40 40

Next-Level-Teaser 30 Einheitlich, z.B. 90

Sitemap - -


S e i t e 22 | 142

Die Inhaltsseite 66% 33% (Anwendung, Elemente, Richtlinien)

- -

Header und Footer 20 20

Daraus ergibt sich die Empfehlung folgender Titelvarianten:

Titel (ohne Begrenzung der Zeichenanzahl)

Titel kurz (max. Wort- und Zeichenlänge 20 Zeichen)

Titel mittel (max. Wort- und Zeichenlänge 40 Zeichen)

Titel lang (max. Wortlänge 30, max. Zeichenlänge 90 Zeichen), wobei diese

Titelvariante am besten für alle Elemente außer dem Titel in der Inhaltsseite

verwendet werden sollte

02.2.13 Kooperationen

Das UzK-Layout bietet die Möglichkeit den Kooperationspartnern einen angemessenen Platz

zu geben. Dies geschieht über die Einbindung ihrer Logos und/oder dem Link auf ihre

Website an folgenden Stellen im Layout:

Im Header in den dafür vorgesehenen Logo-Platzhalter (s. Kap.

Zielgruppen-Header und Anhang Vorlage für Instituts-

/Kooperationslogo)

Als Teil des Submenu (s. Submenü)

Footer beim Unisport (s. Footer)

Normaler Teaser

Enthaltene Elemente

Logo der Einrichtung (nicht im Footer)

Headline „in Kooperation mit:“

Textlink (im Footer)

Responsive Verhalten

Richtlinien (z.B. Zeichenanzahl, Wortlänge)

Kooperationslogo ist ein optionaler Teil des Moduls „Submenu“. Es

muss im sowieso enthaltenen Modul Submenu aktiviert und mit einer

Bilddatei des Logos bestückt werden.

02.3 Redaktionelle DOs und DON’Ts

Einige Punkte, die bei der Inhalts-Eingabe zentral beachtet werden sollten:


S e i t e 23 | 142

Generell gilt: wenn Sie sich unsicher sind oder das Ergebnis Ihrer Eingabe nicht wie

erwartet aussieht, gleichen Sie bitte die Eingaben mit den in den einzelnen

Modulkapiteln beschriebenen Richtlinien und Ansichten ab.

Vor dem Veröffentlichen der Seite ist es ratsam die Seite auf unschöne Darstellungen hin

zu überprüfen, z.B. durch Verkleinern des Browserfensters, um zu sehen, ob auch unter

Berücksichtigung des responsive Designs der gewünschte Effekt erzielt wird.

Bei der Benennung von Seiten und Navigationspunkten auf kurze und aussagekräftige

Namen achten. Lange Titel können zu unschönen Darstellungen führen, unklare

Benennungen zu Verwirrung beim Nutzer. Siehe dazu auch Kap. Seitentitel

Hochformatige Bilder sind zwar möglich, sollten aber mit Vorsicht eingesetzt werden. Es

kann z.B. passieren, dass die Navigationselemente im Bilderslider unten aus dem Bild

rutschen (s. Bilder (Bildsprache, Formate)).

In kleineren Viewports muss beachtet werden, dass Bildelemente in weniger

Größenvarianten oder nur noch in einer Größe benutzt werden können (z.B. fällt die

33%-Anzeige weg). Dies muss bei der Gewichtung von Bildmaterial auf einer Seite

beachtet werden. Beachten Sie hierzu die Angaben zum responsive Verhalten bei den

einzelnen Modulen.

Bei der Befüllung der Marginalspalte sollte beachtet werden, dass diese in der Mobile-

Ansicht unter den Content in die aufklappbare Marginalspalte am Seitenende rutscht (s.

Raster, Responsive Verhalten, Column Drop). Inhalte, die unbedingt schnell durch die

Anwender/innen erfasst werden können sollen, sollten hier also nicht untergebracht

werden.

Ein textlastiger Inhalt kann durch diverse Elemente aufgelockert werden, z.B. durch den

gezielten Einsatz von Bildern (s. Bilder (Bildsprache, Formate)), eines passenden Zitats (s.

Zitat), eines Video- oder Audio-Elements (s. Kap. Video + Audio) und weiteres. Lassen Sie

sich durch die Vielzahl an Modulen inspirieren. Wichtig ist hierbei, dass Sie die Elemente

gezielt einsetzen und nicht versuchen alle Elemente auf einer Seite unterzubringen.

Pointierter Einsatz dieser Elemente verstärkt deren Gewichtung.

Der Einsatz von Plugins (z.B. die Einbindung von Blog-Einträgen) ist mit Vorsicht zu

genießen, da diese meist nicht so gut an das hauseigene Layout angepasst werden

können und somit den Gesamteindruck der Website schmälern können.

Zudem ist nicht gewährleistet, dass das Plugin auch responsive funktioniert.

Auf die Einbindung von automatisch geladener Werbung sollte wenn möglich verzichtet

werden, da diese das Layout z.B. durch den Einsatz verschiedener Farben und

Bewegtbilder massiv stören kann.

Wenn Sie schlechte Nachrichten übermitteln müssen, versuchen Sie dies auf

konstruktive Art und Weise zu tun. Zum Beispiel statt „weitere Baustelle im Gebäude xy“,

könnte eine Hilfestellung gegeben werden, wie z.B. „Raum XY kann in der Zeit von.. bis..

über YX erreicht werden“.

Diese Auflistung erhebt keinen Anspruch auf Vollständigkeit und sollte möglichst mit den

Erfahrungen der Redaktion erweitert werden.


S e i t e 24 | 142

03 Fixe Seitenelemente

03.1 Seitentypen

Nachfolgend werden die unterschiedlichen Seitentypen erklärt, die es aus Layout-Sicht gibt.

Diese bilden die Basis für alle Seiten-Aufbauten der UzK-Website, und damit für die

Seitentypen, die im CMS für die redaktionelle Arbeit bereitgestellt werden.

Die Seitentypen unterscheiden sich nicht nur durch den zur Verfügung stehenden Platz pro

Seitenbereich (Contentbereich, Marginalspalte), sondern auch darin, dass nicht auf allen

Seitentypen alle Module verwendbar sind bzw. nicht alle Module verwendet werden sollten.

Es ist ratsam im CMS entsprechend die Module auf Seitentyp-Basis zu berechtigen, um die

redaktionelle Arbeit zu erleichtern. Möchte man die Einheitlichkeit weiter unterstützen, so

könnte zudem die Verwendung und Positionierung der Module für bestimmte Seiten (z.B.

Startseite, Artikelseite) durch Vorlagen vorgegeben werden.

Die Prozentangaben für die Bereiche beziehen sich auf das zu Grunde liegende Raster (s.

Raster, Responsive Verhalten, Column Drop).

03.1.1 Die Startseite 75% 25% (Anwendung, Elemente, Richtlinien)

Die Startseite ist eine besondere Seite und sollte selten und gezielt eingesetzt werden. Sie

markiert den Startpunkt eines eigenen Bereichs, z.B. der UzK Home, einer eigenen Website

(z.B. Unisport) oder einer Fakultäts- oder Institutsstartseite.

Durch ihren eigenen Aufbau und die enthaltenen Elemente ist sie sofort als solch ein

Startpunkt zu erkennen. Das 12-spaltige Raster wird hier im Verhältnis 9:3 (75% zu 25%)

aufgeteilt. Dadurch bekommt der Inhaltsbereich etwas mehr Gewicht und die darin

enthaltenen Elemente wie z.B. Teaser sind prägnanter.

Über allem steht der Main-Slider (s. Main-Slider), der sich auf der UzK-Home über die

komplette Wrapper-Breite erstreckt und Markenbotschaften oder besondere Ansprachen

transportiert. Für verschiedene Startseiten gibt es verschiedene Slider, die sich in Design und

Größe unterscheiden.

Weitere reine Startseiten-Elemente sind News- und Teaser-Slider (s. News-Teaser und

Fehler! Verweisquelle konnte nicht gefunden werden.) sowie der Exzellenz-Teaser zur

Darstellung des „Zukunftskonzepts“ (s. Kap.

Exzellenzteaser). Die Service-Box ist ein Startseiten-Element (s. Service-Box), welches nur in

der Marginalspalte verwendet werden darf.

Daneben können die Elemente von Inhaltsseiten auf Startseiten verwendet werden.

03.1.2 Die Inhaltsseite 66% 33% (Anwendung, Elemente, Richtlinien)

Inhaltsseiten geben durch die Aufteilung 8:4 (66% zu 33%) der Marginalspalte etwas mehr

Raum, um dort mehr wiederkehrende und kleinteiligere Informationen wie z.B.


S e i t e 25 | 142

Kooperationspartner (s. Kooperationen), Download-Links (s. Download-Liste) und ähnliches

unterbringen zu können.

Inhaltsseiten fungieren als Informationsträger, sie enthalten u.a. Texte (s. Text-Block) und

Bilder (s. Einzel-Bild), Tab-Module (s. Tabbox am Beispiel Kontaktdaten) und Akkordeons (s.

Akkordeon), Tabellen (s. Tabellen) und weiterführende Teaser (s. Teaser).

03.1.3 Abweichende Seitentypen

Abweichend vom allgemeinen UzK-Webauftritt kann das Magazin gesehen werden. Hier

unterteilt sich die Startseite in 3x4 Spalten (33% 33% 33%), welche mit 33%-Teasern oder

66%-Teasern befüllt werden können. Hier entfällt die Marginalspalte.

Auf Artikelseiten kommt wieder die herkömmliche Aufteilung der UzK-Inhaltsseiten zum

Einsatz. In der Marginalspalte werden hier ähnliche Artikel angeteasert.

Für das Magazin gibt es eigene Module, s. Magazin-Module.

03.2 Header und Footer

Der Header und Footer sind zentrale Elemente des UzK-Layouts. Hier wird sowohl die Marke

transportiert als auch durch die Angebote der UzK navigiert. Je nach Seite hat der Header

andere Aufgaben und sieht entsprechend anders aus.

03.2.1 UzK-Home bzw. Portal-Header

Die Hauptfarbe der UzK ist das Blauschwarz, weswegen der UzK-Home- bzw. der Top-

Header-Bereich komplett in dieser Farbe dargestellt wird. Der zugehörige UzK-übergreifende

Footer-Bereich, welcher die Navigationselemente des Headers enthält

(Hauptnavigationsleiste, Schnellzugriff- und Fakultäten-Dropdown), ist ebenfalls so

eingefärbt.

Nachfolgend sind die Elemente des UzK-Home-Headers beschrieben. Variationen des UzK-

Home-Headers kommen für komplett eigenständige Portale zum Einsatz. Hierzu gehören das

Magazin, der Unisport und das Portal „International“. Hierbei kann es Abweichungen geben,

weil z.B. nicht alle Elemente zum Einsatz kommen.

Verwendung in

UzK-Startseite bzw. eigenständige Portal-Startseiten, wie z.B.

International und Unisport, inkl. deren Inhaltsseiten

Anwendungszweck (inhaltlicher Nutzen)


S e i t e 26 | 142

Transportieren von Marke und grundsätzlichen Corporate Design-

Elementen

Abbilden der Hauptnavigation

Einstieg ins Portal

Optische Abgrenzung von zielgruppen- und themenbezogenen

Inhalten (z.B. Fakultätsseiten etc.)

Enthaltene Elemente

UzK-Siegel mit Wortmarke, welches über alle Seiten hinweg als

Rückkehrmarke auf die UzK-Home- bzw. Portal-Startseite verlinkt ist;

beim Unisport-Portal wird stattdessen ein Schrift-Logo angezeigt

Metanavigation mit Links auf zentrale Dienste, wie z.B. das Magazin

Sprachauswahl mit Weltkugel-Icon, um sich die Website in seiner

präferierten Sprache ansehen zu können

Fakultäten-Dropdown, für die Auswahl der Fakultät von Interesse inkl.

der Verwaltung als zentrale Einrichtung; die Einträge sind mit den

Fakultätsfarben gekennzeichnet

Schnellzugriff-Dropdown mit Links auf Informationen, die oft

angewählt oder besonders relevant eingestuft werden, um den

Webbesuchern einen komfortablen und schnellen Einstieg zu

ermöglichen

Suchfeld mit Lupe-Button, um über den gesamten UzK-Webauftritt

hinweg suchen zu können; im Magazin ist das Suchfeld nicht im

Header enthalten, sondern Bestandteil des Contentbereichs

Hauptnavigationsleiste, welche die erste Strukturebene der

Verzeichnisstruktur wiederspiegelt (s. Navigation)

Funktionalität

Klick auf Siegel und Wortmarke bzw. Schrift-Logo führt zu UzK-Home

bzw. zur Portal-Startseite

Klick auf Link in Metanavigation führt auf die entsprechend

hinterlegte Seite

Klick auf Sprachwahl öffnet Flyout; Klick auf eine Sprache führt dazu,

dass die Seite inkl. Header und Footer in der gewählten Sprache

angezeigt wird

Klick auf Dropdowns öffnet diese; bei den Einträgen handelt es sich

um Links, die bei Kick auf die entsprechenden Seiten führen

Klick auf Suche-Lupe-Button führt die Suche über alle Seiten des UzK-

Webauftritts aus; das Ergebnis wird auf einer eigenen Suchergebnis-

Seite angezeigt


S e i t e 27 | 142

Klick auf Hauptnavigationsleistenpunkt öffnet Mega-Flyout (s.

Hauptnavigationsleiste + Mega-Flyout)


Unter 768: kein Siegel, nur Wortmarke; im Fall von Unisport wird das

Schrift-Logo verkleinert angezeigt

Unter 768: Metanavigation, Sprachauswahl, die beiden Dropdowns

und die Hauptnavigationsleistenpunkte verschieben sich ins

Hamburger-Menü, welches in Form eines Icons im Headerbereich zur

Verfügung gestellt wird (s. Mobile Navigation – Hamburger-Menü)

Unter 1280: statt dem Suchfeld mit Lupe-Button wird nur noch der

Lupe-Button angezeigt; das Suchfeld fügt sich bei Klick auf den Button

links daneben ein; unter 768: wird das Suchfeld bei Klick darunter

eingefügt und der Lupe-Button ändert sich in einen Schließen-Button


In der Metanavigation sollten nicht allzu viele Links aufgenommen

werden. Die Bezeichner sind kurz und prägnant zu wählen,

Abkürzungen und Anglizismen sind wenn möglich zu vermeiden.

Wenn nicht vermeidbar, bitte nur eindeutig verständliche

Abkürzungen und Anglizismen verwenden.

s. Hauptnavigationsleiste

Screenshots zur Veranschaulichung mit Kommentaren

Abbildung 1 UzK-Home-Header in 1280

Abbildung 2 Uzk-Home-Header in 768

Abbildung 3 UzK-Home-Header in 320


S e i t e 28 | 142

Abbildung 4Magazin-Header in 1280

Abbildung 5 Magazin-Header in 768

Abbildung 6 Magazin-Header in 320

Abbildung 7 Header International in 1280



Abbildung 10 Header Unisport in 1280



S e i t e 29 | 142


03.2.2 Sticky-Header

Der sticky-Header ist eine reduzierte Ansicht des UzK-Headers, welcher über alle Seiten

hinweg angezeigt wird, sobald der eigentliche Header beim Scrollen aus dem Bild fährt. Da

der Platz begrenzt ist, wird hier das Siegel nicht mehr angezeigt, sondern nur die Wortmarke.

Diese enthält den Link auf die UzK-Home. Die zentralen Funktionen wie das Suchfeld und die

Sprachauswahl bleiben erhalten, die Schnellzugriff- und Fakultäten-Dropdowns entfallen, da

sie Elemente der UzK-Home-Startseite sind. Anstelle der Hauptnavigationsleiste wird ein Link

„zum Seitenanfang“ angeboten, womit bei Klick auf den Seitenanfang zurückgesprungen

wird und somit der komplette Header inkl. der Hauptnavigationsleiste zurück ins Blickfeld

rückt. Dies wurde so gelöst, weil sich die Hauptnavigationsleistenpunkte an der aktuell

zugehörigen Startseite orientieren und somit nicht übergreifend gleich sind (s. hierzu im

Detail Navigation).

Verwendung in

Startseite

Inhaltsseite


Sichtbarhalten der zentralen Headerinformation, damit u.a. deutlich

bleibt, auf welchem Portal man sich befindet

Leichter Rücksprung zum Beginn der Seite

Enthaltene Elemente

Portalbezeichnung als Schriftzug (Wortmarke); Ausnahme Portal

Unisport, hier wird das Schriftlogo angezeigt; beides ist verlinkt

Link „zum Seitenanfang“ mit Pfeil-nach-oben-Icon, um schnell z.B. auf

die Hauptnavigationsleiste zugreifen zu können; dieser ist im Mobile-

Sticky-Header nicht enthalten

Nur im Mobile-Sticky-Header ist ein Lupe-Icon vorhanden

Nur im Mobile-Sticky-Header ist ein Hamburger-Menü-Icon vorhanden

Suchfeld mit Lupe-Button, um über den gesamten UzK- bzw. Portal-

Webauftritt hinweg suchen zu können; im Magazin ist das Suchfeld

nicht im Header enthalten, sondern Bestandteil des Contentbereichs;

das Suchfeld ist im Mobile-Sticky-Header standardmäßig ausgeblendet

und wird durch Klick auf das Lupe-Icon eingeblendet (s.u.

Funktionalität)


S e i t e 30 | 142


präferierten Sprache ansehen zu können; diese ist im Mobile-Sticky-

Header nicht enthalten

Funktionalität

s. UzK-Home bzw. Portal-Header

Klick auf Wortmarke bzw. Logo führt zu UzK-Home- bzw. Portal-

Startseite

Klick auf Link „zum Seitenanfang“ springt zum Beginn der Seite

im Mobile-Sticky-Header führt der Klick auf das Lupe-Icon sowie der

Klick auf das Hamburger-Menü-Icon automatisch neben der regulären

Funktionalität bei Klick auf das jeweilige Icon auch zum Beginn der

Seite, analog zum „zum Seitenanfang“-Link


Suchfeld skaliert mit

Unter 768: wird der Mobile-Sticky-Header angezeigt; der

portalübergreifende Teil des Headers bleibt beim Nach-unten-

Scrollen fix oben stehen; dieser entspricht optisch somit dem

portalspezifischen Headerbereich

unter 768 wird der Zusatz in der Portalüberschrift nicht angezeigt,

d.h. z.B. bei der Microsite Unilauf vom Unisport fällt der Zusatz

„Unilauf“ im Titel des Mobile-Sticky-Headers weg




Abbildung 13 Sticky-Header in 1280

Abbildung 14 Sticky-Header von Unilauf in 1280




S e i t e 31 | 142



03.2.3 Zielgruppen-Header

Der Zielgruppen-Header setzt sich aus zwei Teilen zusammen.

Zum einen besteht er aus dem reduzierten allgemeinen UzK-Home- bzw. Portal-Header

mit den übergreifenden Funktionen, welcher so unverändert bestehen bleibt („Top-

Header“) und dem Sticky-Header ähnelt (s. Sticky-Header),

und zum anderen aus dem spezifischen Bereich. Dieser Bereich ist zur Abgrenzung in

einem helleren Blaugrau gehalten und wird um den optionalen bereichsspezifischen

Footer-Bereich ergänzt, welcher dieselbe Hintergrundfarbe hat.

Dieser Headertyp ist die Basis für die Varianten:

Fakultätsheader

Institutsheader

Microsite-Header

Die nachfolgende Beschreibung ist allgemein für alle diese Header-Varianten gültig.

Verwendung in

Startseite des jeweils spezifischen Bereichs

Inhaltsseiten des jeweils spezifischen Bereichs


Verdeutlichen, dass man sich in einem speziellen Bereich im Verzeichnisbaum

(Sitemap) befindet

Einstieg in den spezifischen Bereich

Optische Abgrenzung vom allgemeinen UzK-Home- bzw. Portal-Webauftritt

Enthaltene Elemente

reduzierter allgemeiner UzK-Home- bzw. Portal-Header


S e i t e 32 | 142

verkleinertes überlappendes UzK-Siegel mit Wortmarke als UzK-Home-

Link bzw. beim Unisport ist es ein nicht überlappendes verkleinertes

Schrift-Logo

Suchfeld mit Lupe-Button, um über den gesamten UzK- bzw. Portal-

Webauftritt hinweg suchen zu können


präferierten Sprache ansehen zu können

Spezifischer Bereich

Titel des Bereichs und somit der Startseite; bei Zielgruppen und

Institutsbezeichnern ist dieser zweizeilig mit der Zielgruppe bzw. dem

Institut in Fettschrift

Optional das Fakultäts- oder Instituts-Siegel

Optional der Logo-Platzhalter (weißer Bereich rechts), der anstelle eines

Siegels verwendet werden kann, um ein zielgruppen- oder

themenspezifisches Logo zu hinterlegen oder um eine übergreifende

Kooperation mit einer anderen Einrichtung hervorzuheben (s.

Kooperationen)

Hauptnavigationsleiste mit den Unterseiten-Punkten der spezifischen

Startseite

Funktionalität

reduzierter allgemeiner UzK-Home- bzw. Portal-Header

s. UzK-Home bzw. Portal-Header bzw. Sticky-Header

Spezifischer Bereich

Siegel und Logo können verlinkt sein und führen bei Klick auf die

zugehörige Start- bzw. Kooperationsseite




Suchfeld, Siegel und Logo skalieren mit

Unter 768: keine Anzeige der Siegel mehr; das Logo skaliert hier weiter mit

Existiert ein Farbbalken, so wird dieser in allen Auflösungen angezeigt, auch in der

Sticky-Header-Variante

der Titel-Bezeichner kann umbrechen


s. UzK-Home bzw. Portal-Header bzw. Sticky-Header



S e i t e 33 | 142


Abbildung 19 Zielgruppen-Header in 1280



03.2.4 Fakultätsheader

Dieser Headertyp unterscheidet sich in erster Linie vom Zielgruppen-Header durch einen

Farbbalken zwischen UzK-Top-Header und spezifischem Header-Bereich. Dieser Farbbalken

repräsentiert den Farbcode der entsprechend ausgewählten Fakultät. Daneben kann

optional das Fakultäts-Siegel rechts eingebunden werden. Wird der Logo-Platzhalter

verwendet, ist die Anzeige des Siegels obsolet.

Der Titel ist in diesem Headerbereich einzeilig, die Fakultätsart wird in Fettschrift dargestellt.

Die Haupt-Navigations-Leiste enthält die Unterseiten der Fakultät und der

bereichsspezifische Footer bezieht sich jetzt auf die Fakultät.

s. Details Zielgruppen-Header

Abbildung 22 Header Medizinische Fakultät in 1280


S e i t e 34 | 142



03.2.5 Institutsheader

Dieser sieht aus wie der Fakultätsheader, und auch hier gilt, dass sich die Haupt-Navigations-

Leiste und der bereichsspezifische Footer nach der zugehörigen Instituts-Startseite richten.

Mit dem Farbbalken wird die Zugehörigkeit zur Fakultät dargestellt, welches mit Hilfe des

Fakultäts-Siegels noch verstärkt werden kann. Anstelle dessen kann ein Instituts-Siegel zum

Einsatz kommen oder der Logo-Platzhalter gefüllt werden. Der Titel ist in diesem

Headerbereich zweizeilig, mit in Fettschrift dargestelltem Fokus auf dem Institutsnamen. In

der ersten Zeile sollte der Name der zugehörigen Fakultät stehen.


Abbildung 25 Fakultäts-Header mit Institutslogo

03.2.6 Microsite-Header

Besteht der Bedarf ein spezielles Themengebiet (z.B. „UzK auf Messen“) oder eine autonome

Einrichtung (z.B. Asta, UniFit) losgelöster darzustellen, dann kann der Microsite-Header dafür

verwendet werden. Dieser sieht wie der Fakultätsheader ohne Farbbalken aus, mit

einzeiligem Titel, in dem der eigentliche Fokusbegriff, z.B. UniFit, in Fettschrift angezeigt

wird.


Im Sticky-Header kann bei Bedarf der Titel des Bereichs mitaufgenommen werden, s. z.B.

UniFit.


S e i t e 35 | 142

Abbildung 26 Microsite-Header UniFit

Abbildung 27 Microsite-Sticky-Header UniFit

03.2.7 Footer

Der Footer (oder Rich-Footer) bildet große Teile der Navigation nochmals übersichtlich ab

und enthält zudem weitere Interaktionsmöglichkeiten und „Kleingedrucktes“ wie Copyright-

Hinweise oder Links zu Impressum, Kontakt und Sitemap.

Der Footer unterteilt sich von unten nach oben in vier Bereiche:

Bottom-Footer

Bildet zusammen mit dem UzK-Home- bzw. Portal-Header einen optisch abschließenden

Rahmen (s. Header und Footer) und enthält die übergreifenden Daten wie z.B.

Impressum, Copyright-Angabe und ähnliches. Dieser Bereich ist fix und sollte redaktionell

nur zentral angepasst werden.

Portalspezifischer Bereich

Dieser Bereich ist eine Ergänzung mit den portalübergreifenden Daten, die auch

größtenteils bereits im Header enthalten sind wie z.B. die Punkte der

Hauptnavigationsleiste als „Informationen für“ oder „Angebote des Unisport“ (s. UzK-

Home bzw. Portal-Header). Dieser Bereich ist wie der Bottom-Footer fix über alle

Portalseiten und sollte redaktionell nur zentral angepasst werden bzw. automatisiert

durch das CMS auf Basis z.B. der Header-Daten befüllt werden.

Bereichsspezifische Funktionen

Bildet farblich passend zusammen mit dem Ziel-, Fakultäts-, Instituts- oder Microsite-

Header einen Rahmen (s. Zielgruppen-Header) und enthält die hierfür übergreifend

geltenden Daten.

Dieser Bereich sollte ebenfalls redaktionell zentral gepflegt werden, um sicherzustellen,

dass die Inhalte zum zugehörigen Startseiten-Header passen. D.h. handelt es sich z.B. um

die Seiten der Medizinischen Fakultät und es wird der Fakultätsheader angezeigt, dann

sollten in diesem Footer-Bereich die Funktionen der Medizinischen Fakultät angezeigt

werden. Wird hingegen der Institutsheader „Zentrum für Anatomie“ angezeigt, dann

können hier spezielle Angebote des Zentrums für Anatomie aufgelistet werden. Besteht


S e i t e 36 | 142

kein Bedarf spezielle Angebote aufzulisten, dann wird idealerweise das Angebot der

Medizinischen Fakultät angezeigt.

Autoren und Datumszeile

Dieser Bereich wird idealerweise nur auf Inhaltsseiten angezeigt und ist fix. Er ist

redaktionell nicht beeinflussbar, da hier automatisiert angezeigt wird, welcher Autor die

Inhaltsseite wann erstellt hat und wann und von wem die Seite zuletzt bearbeitet wurde.

Verwendung in

Bottom-Footer

Alle UzK- bzw. Portal-Seiten


Portal-Startseite

Alle Portal-Inhaltsseiten


Optional auf der Startseite des zielgruppen- oder

themenspezifisch abgegrenzten Bereichs

Entsprechend auf allen zugehörigen Inhaltsseiten


Startseiten optional

Inhaltsseiten


bereitstellen allgemeiner Informationen (Impressum, Kooperationen,

Öffnungszeiten usw.), die übergreifend für mehrere Seiten gelten;

Ausnahme bildet die Autorenzeile, dessen Inhalt sich alleinig auf die

aktuelle Seite bezieht

zusätzliche Navigationsmöglichkeit

abschließendes Element, um zusammen mit dem Header einen

Rahmen um den Inhalt zu bilden

Enthaltene Elemente

Bottom-Footer

Social-Media-Kanal-Leiste mit Verlinkung auf die

portaleigenen Social-Media-Kanäle (z.B. International oder

Unisport)

Copyright-Vermerk

Sitemap-Link

Impressum-Link

Kontakt-Link


S e i t e 37 | 142

Optionale Link-Liste für die Akkreditierungen; diese können

nach Fakultät gegliedert werden oder nicht

der Akkreditierungsabschnitt wird im Unisport-Footer ersetzt

durch einen eigenen Abschnitt zur Aufnahme der

gleichwertigen Kooperationspartner-Logos und der weiteren

Kooperationen als Link-Liste


Hauptnavigationsleistenpunkte des Portals als z.B.

„Informationen für“ oder „Angebot des Unisport“

Inhalt des Fakultäten-Dropdowns aus dem Header (s. UzK-

Home bzw. Portal-Header) oder alternativ eine Link-Liste mit

Service-Einträgen wie beispielsweise FAQ, Newsarchiv und

ähnliches, die ggf. in der Servicebox angeboten werden (s.

Service-Box)

Inhalt des Schnellzugriff-Dropdowns aus dem Header (s. UzK-

Home bzw. Portal-Header)


Beliebig redaktionell befüllbare Link-Liste


Textzeile mit Informationen zu wann und von wem die

Inhaltsseite angelegt wurde sowie wann und von wem die

Seite aktualisiert wurde

Funktionalität

Klick auf Social-Media-Button öffnet hinterlegte Seite des

portaleigenen Social-Media-Kanals

Klick auf portalspezifischen Bereich bzw. das zugehörige Pfeil-Icon

klappt den Bereich aus und ein; das Pfeil-Icon zeigt bei der

geschlossenen Ansicht mit der Pfeilspitze nach unten, in der

geöffneten Ansicht entsprechend nach oben

Klick auf Link öffnet die zugehörige Seite, dies kann im Fall von z.B.

einer Kooperation auch außerhalb des UzK-Webauftritts sein


Kleiner 768: Akkreditierungen 3- statt 6-spaltig; kleiner 320: 1-spaltig;

je nach Zeichenlänge des einzelnen Akkreditierungseintrags, kann

dieser über mehrere Zeilen umbrechen

Kleiner 768: die Link-Listen aus dem portal- und bereichsspezifischen

Footerbereich werden als Dropdowns untereinander angezeigt

Kleiner 768: Autoren und Datumszeilig bricht über mehrere Zeilen um


S e i t e 38 | 142


Es sollten nur die Social-Media-Buttons eingebunden werden, zu

denen auch ein eigener Kanal existiert

Inhalte der Footerbereiche sind idealerweise je nur einmal

vorhanden, so dass diese redaktionell zentral verwaltet werden

können; die Daten, die aus dem Header im Footer wiederverwendet

werden, sollten insgesamt nur einmal vorhanden sein

die Befüllung sollte entsprechend automatisiert durch das CMS

erfolgen

Klick auf Sitemap öffnet idealerweise die Sitemap mit der gesamten

Verzeichnisstruktur des aktuellen Portals, z.B. International oder UzK

mit all ihren Fakultäten, wenigstens jedoch die Struktur ab der letzten

Startseite

Die Link-Bezeichner sollten kurz und prägnant gewählt werden, so

dass es zu so wenig wie möglich Umbrüchen im responsive Design

kommt


S e i t e 39 | 142


Abbildung 28 Footer 1280 px mit geschlossenem portalspezifischem Bereich

Abbildung 29 Footer 1280 px mit geöffnetem portalspezifischem Bereich

Abbildung 30 Footer UniSport


S e i t e 40 | 142

03.3 Navigation

03.3.1 Allgemeine Struktur

Die besondere Herausforderung des Navigationskonzepts besteht darin, dass

bis zu sieben Ebenen als Menütiefen abgebildet werden können müssen, es sich nicht um EINE Website handelt, sondern um eine Vielzahl von Websites, und diese Websites komplex miteinander verbunden sind. Die Verzeichnisstruktur ist

nach Zuständigkeiten geordnet, z.B. alle Seiten im Zuständigkeitsbereich einer Fakultät sind in einer Struktur abgebildet, aber es gibt Sichtweisen, z.B. über einen fakultätsübergreifenden Studiengang, die eine eigene Struktur erfordern würden.

Eine Webseite mit dieser Datenmenge und Komplexität, wie sie die UzK aufweist, benötigt

eine Navigation, die übersichtlich und zielgerichtet ist. Um die Anwender/innen nicht mit der

gesamten Verzeichnisstruktur zu überwältigen, wurde deshalb die Struktur zerkleinert und in

verschiedenen Navigationselementen untergebracht. Zentrales Element ist hierbei die

zielgruppen- und/oder themenorientierte Navigation in Form der Hauptnavigationsleiste (s.

Hauptnavigationsleiste). Daneben gibt es die Elemente:

Mega-Flyout (s. Mega-Flyout)

Submenü (s. Submenü)

Breadcrumb (s. Breadcrumb))

Mobile Navigation – Hamburger-Menü (s. Mobile Navigation – Hamburger-Menü)

Next-Level-Teaser (s. Next-Level-Teaser)

Sitemap (s. Sitemap)

03.3.2 Hauptnavigationsleiste

Zielgruppen- und/oder themenorientierte Navigation als erste Orientierungshilfe für die

Anwender/innen über das vorliegende Angebot.

Verwendung im

Header auf allen Seiten, mit Ausnahme des Magazin-Portals, in

welchem keine Navigation angeboten wird


Bietet den konkreten Einstieg in ein Thema von Interesse. Die

Navigationspunkte sind entweder zielgruppen- oder themenorientiert

aufgebaut.

Zielgruppen sind z.B.: Studierende, Studieninteressierte,

Mitarbeiter/innen u.a.


S e i t e 41 | 142

Themen sind z.B.: Studiengänge, Studium im Ausland, Sportarten,

Internationale Kooperationen u.a.

Gibt eine Übersicht über die Unterseiten der zugehörigen Startseite.

Enthaltene Elemente

1..n Buttons nebeneinander, die bei Bedarf umbrechen

Funktionalität

Klick auf einzelnen Button öffnet das Mega-Flyout; Flyout öffnet sich

nicht als Hover des Menüpunkts

Hauptnavigationsleiste wird pro Startseite neu aufgebaut und zeigt

die Unterseiten der jeweiligen Startseite an.

Die Leiste bleibt unverändert für alle Inhaltsseiten, die in der

Verzeichnisstruktur als Unterseiten der Startseite, abliegen.


skaliert nicht mit, sondern bricht um

wird der Logo-Platzhalter im Header verwendet, so kann es passieren,

dass die Hauptnavigationsleiste in diesen Bereich hineinläuft

ab Viewport <768 wird die Navigationsleiste nicht mehr angezeigt, da

dann das Konzept der mobilen Navigation greift (s. Mobile Navigation

– Hamburger-Menü)


In den Viewports >= 1280 sollte darauf geachtet werden, dass die

Hauptnavigationsleiste nicht umbricht. Hierfür die Bezeichner

prägnant und so kurz wie möglich wählen. Empfohlen wird eine

maximale Wort- und Zeichenlänge von 20 Zeichen nicht zu

überschreiten.

Die Maximallänge muss nicht zwingend festgelegt werden,

entscheidend ist die Breite aller Navigationspunkte zusammen. Die

maximale Wortlänge sollte abgeprüft werden, da diese in der

Mobileansicht eine Rolle spielt. Hier können zu lange Begriffe nicht

umbrechen, sondern werden stattdessen abgeschnitten.


Abbildung 31 Hauptnavigationsleiste in 1280


S e i t e 42 | 142

Abbildung 32 Hauptnavigationsleiste in 768

Abbildung 33 Hauptnavigation in 320 hinter Hamburger-Icon versteckt

03.3.3 Mega-Flyout

Das Mega-Flyout erleichtert das Zurechtfinden auf großen Webseiten. Es wird als Zusatz zur

Hauptnavigation angezeigt und bildet die nächsten drei Ebenen der aktuell angezeigten Seite

ab.

Verwendung in

Hauptnavigationsleiste auf allen Seiten, mit Ausnahme des Magazins


Gibt eine Übersicht über die Unterseiten, die unterhalb der

ausgewählten Seite in der Verzeichnisstruktur liegen.

Bietet den direkten Sprung auf eine der angezeigten Seiten an.

Enthaltene Elemente

Link auf die Seite, die über die Hauptnavigationsleiste ausgewählt

wurde; dieser Link ist ganz oben platziert

danach folgt ein Bereich mit 1..n Links auf die Unterseiten der

ausgewählten Seite (zwei Ebenen tief in Fett- und Normalschrift)

der optionale Bereich „weitere Informationen“ enthält 1..n Links auf

spezielle Unterseiten der ausgewählten Seite (über alle Ebenen

hinweg) und bietet damit den Direktzugriff auf z.B. noch tiefer

liegende Unterseiten

der optionale Bereich „weiterführende Informationen“ enthält 1..n

Links auf Seiten, die von der aktuellen Seite und dessen Struktur

wegführen, diese können auch vom Portal und der Website

wegführen

ein Schließen-Button rechts oben

Funktionalität

Klick auf einzelnen Link öffnet die ausgewählte Seite

Klick auf Schließen-Button schließt das Mega-Flyout ohne weitere

Auswirkung; es wird weiterhin die aktuelle Seite angezeigt


S e i t e 43 | 142

geöffnetes Flyout graut Hintergrund aus


skaliert mit, wodurch sich die Spaltenaufteilung anpasst und die

Bezeichner über mehrere Zeilen umbrechen können

die Links werden passend zum Viewport in vier, drei oder eine Spalte

eingeordnet

ab Viewport <768 wird das Mega-Flyout nicht mehr angezeigt, da

dann das Konzept der mobilen Navigation greift (s. Mobile Navigation

– Hamburger-Menü)


Im Viewport = 768 sollte darauf geachtet werden, dass die Bezeichner

der ersten beiden Ebenen, die im Flyout in Fettschrift angezeigt

werden, nicht umbrechen, und die Bezeichner der dritten Ebene

möglichst maximal über drei Zeilen umbrechen. Hierfür die

Bezeichner prägnant und so kurz wie möglich wählen. Empfohlen

werden für alle Bezeichner eine maximale Wortlänge von 30 Zeichen

und für die Bezeichner der dritten Ebene eine maximale Zeichenlänge

von 90 Zeichen nicht zu überschreiten.

Anordnung kann nur durch andere Einordnung der Seiten beeinflusst

werden

Flyout kann nach unten hin wachsen, bei zu vielen Menüpunkten wird

eine redaktionelle Umstrukturierung des Verzeichnisses empfohlen.


S e i t e 44 | 142


Header mit ausgeklapptem Mega-Flyout in 1280

Header mit ausgeklapptem Mega-Flyout in 768 und Flyout-Lösung in 320


S e i t e 45 | 142

03.3.4 Submenü

Das Submenü bildet die direkten Unterseiten der aktuell sichtbaren Seite ab. Sie bildet ein

ergänzendes Navigationselement zum Mega-Flyout.

Verwendung in

Marginalspalte ganz oben auf allen Inhaltsseiten, mit Ausnahme des

Magazin-Portals, in welchem keine Navigation angeboten wird

zusätzlich im Hamburger-Menü


Bietet die Möglichkeit auf eine Unterseite der aktuellen Seite zu

wechseln und damit tiefer in die Verzeichnisstruktur einzusteigen.

Gibt eine Übersicht über die Unterseiten der aktuell angezeigten

Seite.

Enthaltene Elemente

Optionales Kooperationslogo mit vorangestelltem Schriftzug „in

Kooperation mit“ oberhalb der Seitenmenü-Tabelle

1-spaltige Tabelle mit dem Titel der aktuellen Seite als Überschrift

und den 1..n Unterseiten-Bezeichnern, die bei Bedarf umbrechen, je

in einer Zeile als Links

Funktionalität

Klick auf einen Link öffnet die ausgewählte Unterseite

Seitenmenu wird pro Inhaltsseite neu aufgebaut und zeigt die

Unterseiten der jeweils aktuell angezeigten Seite an.


skaliert mit, was dazu führen kann, dass ein Unterseiten-Bezeichner

über mehrere Zeilen umbricht

ab Viewport <768 wird das Seitenmenu inkl. dem Kooperationslogo,

wie alle Inhalte der Marginalspalte, unterhalb des Haupt-

Contentbereichs angezeigt (s. Glossar zusätzlich wird der Inhalt des

Seitenmenus im Hamburger-Menu angezeigt (s. Mobile Navigation –

Hamburger-Menü)


Im Viewport = 768 sollte darauf geachtet werden, dass die Unterseitenbezeichner

im Seitenmenu maximal über drei Zeilen umbrechen. Hierfür die Bezeichner


S e i t e 46 | 142

prägnant und so kurz wie möglich wählen. Empfohlen werden eine maximale

Wortlänge von 30 und eine maximale Zeichenlänge von 90 Zeichen nicht zu

überschreiten.


Abbildung 34 Marginalspalten Subemü in Viewport 1280 und 320 (inkl. aufgeklappter Collapse-Sidebar und Kooperationslogo)

03.3.5 Breadcrumb

Die Breadcrumb ist ein wichtiges Navigationselement, weil sie die Anordnung der aktuellen

Seite im Strukturbaum wiedergibt. Sie bietet die Möglichkeit über klickbare Links und Flyouts

einen oder mehrere Schritte zurückzugehen, sich zurechtzufinden und andere Abzweigungen

zu nehmen.

Die Breadcrumb bildet hierbei nicht zwangsläufig den gegangenen Weg ab, sondern die

Anordnung der aktuellen Seite im Strukturbaum. Dies vereinfacht das Zurechtfinden. Es

beitet sich daher an Seiten in sinnvolle Strukturen z.B. unter einer übergeordneten Seite

„Fakultäten“ zu bündeln. Ein Pfad in der Breadcrumb würde dann beispielsweise heißen:

UzK Home > Fakultäten > Medizinische Fakultät > …

Ähnliches gilt auch für Institute, Verwaltung etc.

Verwendung im

Haupt-Contentbereich auf allen Seiten, mit Ausnahme der UzK-

Startseite aller Portal-Startseiten, da hier die jeweilige

Verzeichnisstruktur beginnt, und mit Ausnahme des gesamten


S e i t e 47 | 142

Magazin-Portals, in welchem keine Navigation angeboten wird; die

Breadcrumb wird ganz oben direkt unterhalb des Headers angezeigt

in der mobilen Ansicht im Hamburger-Menü ebenfalls ganz oben


dient zur Orientierung, wo im Verzeichnisbaum die aktuell angezeigte

Seite liegt und zeigt somit den direkten Weg dorthin im

Verzeichnisbaum auf; es wird nicht der tatsächlich „gelaufene“ Weg

der/des Anwenderin/Anwenders angezeigt

Bietet eine zusätzliche Navigationsmöglichkeit zu den direkten

Unterseiten, der jeweils angezeigten Seiten im Breadcrumb-Pfad.

Enthaltene Elemente

1..n Seiten-Bezeichner als Links getrennt durch einen „größer-Pfeil“

nebeneinander, die bei Bedarf umbrechen

ab Viewport >1280 wird zusätzlich hinter dem Bezeichner ein Plus-

Button angeboten, wenn die Seite in der Verzeichnisstruktur

Unterseiten besitzt

Funktionalität

Klick auf einzelnen Link öffnet die ausgewählte Seite

Klick auf einzelnen Plus-Button öffnet ein Dropdown mit einer Link-

Liste auf die Unterseiten der ausgewählten Seite. Klick auf einen Link-

Eintrag öffnet die ausgewählte Unterseite.

Breadcrumb wird pro Seite aktualisiert angezeigt; keine Anzeige auf

Portal-Startseiten und im Magazin


skaliert mit und bricht ggf. über mehrere Zeilen um

ab Viewport <1280 wird die zusätzliche Navigation über die Plus-

Buttons nicht mehr angeboten

ab Viewport <768 wird die Breadcrumb nicht mehr auf der Seite

angezeigt, sondern im Hamburger-Menü, da dann das Konzept der

mobilen Navigation greift (s. Mobile Navigation – Hamburger-Menü)


Breadcrumb wird immer absolut angezeigt, d.h. bei Home beginnend

Es sollte allgemein darauf geachtet werden, dass die Bezeichner, die

für die Breadcrumb verwendet werden prägnant und so kurz wie


S e i t e 48 | 142

möglich sind. Empfohlen wird eine maximale Wort- und Zeichenlänge

von 40 Zeichen nicht zu überschreiten.

Bitte keine automatische technische Verkürzung vornehmen, da es

hierbei zu Informationsverlust kommen kann, womit die Breadcrumb

ihren Wert verlieren würde. Es wird in Kauf genommen, dass es zu

einem sehr langen Breadcrumb-Pfad kommen kann, je tiefer man sich

in der Informationsarchitektur befindet.


Abbildung 35 Breadcrumb in 1280px mit Flyout-Buttons

Abbildung 36 Breadcrumb in 1280px mit Flyout-Buttons und geöffnetem Flyout

Abbildung 37 Breadcrumb in 768px ohne Flyout-Buttons

Abbildung 38 Abbildung 33 Breadcrumb in 768px ohne Flyout-Buttons


S e i t e 49 | 142

03.3.6 Mobile Navigation – Hamburger-Menü

Das mobile Navigationskonzept greift ab dem Viewport <768, da nun weniger Platz zur

Verfügung steht und sich damit der Fokus der Anwender/innen verschiebt bzw. dieser

kleiner wird.

Gravierender Unterschied des mobilen Navigationskonzepts ist es, dass die

Hauptnavigationsleiste mitsamt dem Mega-Flyout entfällt und stattdessen das Hamburger-

Menü zur Verfügung gestellt wird. Die Anwender/innen sollen sich auf die aktuelle Seite

konzentrieren können, weswegen das Hamburger-Menü seinen Inhalt erst nach einem Klick

auf den Button Preis gibt. Da durch Öffnen des Hamburger-Menüs die aktuelle Seite nicht

mehr sichtbar ist und weiterhin nur begrenzt Platz ist, wird eine beschränkte

Navigationstiefe angeboten. Die Navigation ermöglicht jetzt lediglich den Sprung auf die

direkten Unterseiten der aktuell angezeigten Seite.

Nachfolgend wird das Element Hamburger-Menü erläutert.

Verwendung im

Header auf allen Seiten ab Viewport <768


fasst allgemeine Service-Funktionen platzsparend zusammen

Enthaltene Elemente

Hamburger-Menü-Button rechts im Header platziert

Zugehöriges geöffnetes Menü enthält die Elemente:

Breadcrumb mit 1..n Seiten-Bezeichnern als Links getrennt durch

einen „größer-Pfeil“ nebeneinander, die bei Bedarf umbrechen (s.

Breadcrumb)

Titel der aktuellen Seite

Seitenmenü mit den 1..n Unterseiten-Bezeichnern der aktuellen Seite

als Links (s. Submenü)

Fakultäten-Dropdown ohne Fakultätsfarben-Kennzeichnung der

einzelnen Einträge (s. Header und Footer)

Schnellzugriff-Dropdown (s. Header und Footer)

Sprachauswahl (s. Header und Footer)

Metanavigation als Link-Liste (s. Header und Footer)

„weitere Informationen“ aus dem Mega-Flyout als Link-Liste (s. Mega-

Flyout); es werden die Einträge gezeigt, die im Mega-Flyout auf der

obersten Ebene zu sehen sind


S e i t e 50 | 142

„weiterführende Informationen“ aus dem Mega-Flyout als Link-Liste

(s. Mega-Flyout); es werden die Einträge gezeigt, die im Mega-Flyout

auf der obersten Ebene zu sehen sind

Schließen-Button

Funktionalität

Klick auf Hamburger-Menü-Button öffnet das zugehörige Menü als

Overlay

Klick auf Schließen-Button schließt das Hamburger-Menü ohne eine

Auswirkung, d.h. die aktuelle Seite ist weiterhin sichtbar

Klick auf einen Link öffnet die ausgewählte Seite


skaliert mit, so dass ggf. Bezeichner über mehrere Zeilen umbrechen

wird nur ab Viewport <768 angeboten


s. Richtlinien der einzelnen Elemente


Abbildung 39 Navigation eingeklappt hinter Hamburger-Icon


S e i t e 51 | 142

Abbildung 40 Mobile-Navigation Overlay


S e i t e 52 | 142

04 Flexibel einsetzbare Module

Einleitung alles für alle Portale verwendbar, bis auf ganz spezielle, die separat ausgewiesen

sind.

Hier finden Sie eine Liste an Modulen, die flexible eingesetzt werden können. Sie bieten

verschiedene Einsatzzwecke, inhaltliche Nutzen und Funktionalitäten. Die meisten Module

können für alle Portale (UzK, Unisport, International) benutzt werden. Spezielle Module sind

separat ausgewiesen. Die Kapitel enthalten folgende Informationen:

Modul Name

Verwendung in (z.B. Startseite Content oder Inhaltsseite Marginalspalte)

Nicht jedes Modul kann überall eingesetzt werden. Hier werden die Einsatzmöglichekiten

aufgeführt.


Hier wird erklärt, für welchen Zweck die einzelnen Module gedacht sind.

Funktionalität (Was tut es, wenn ich was mache?)

Die meisten Module bieten Interkationsmöglichkeiten. Welche das im Detail sind wird

unter diesem Punkt erklärt.


Das Aussehen und Verhalten der Module ändert sich in verschiedenen Breakpoints. Die

Details und was dabei zu beachten ist, wird hier erklärt.


Redakteure sollten bei der Befüllung der Module auf Besonderheiten wie textlängen

oder Bildformate achten.


04.1 Adressdaten einzeln

Zusätzlich zu einem Artikel oder Informationsseite kann auf eine Ansprechperson verwiesen

werden. Die wichtigsten Informationen werden in einem kompakten Block

zusammengefasst.

Verwendung in

Startseite Contentbereich

Startseite Marginalspalte

Inhaltsseite Contentbereich

Inhaltsseite Marginalspalte


Fasst persönliche Informationen kurz zusammen


S e i t e 53 | 142

Elemente

Bild

Text

Link zur persönlichen Website

Kontakt-Button

Funktionalität

Klick auf Button öffnet persönliche Website

Klick auf Button öffnet Mailprogramm oder Kontaktformular


Unter 768 einspaltig (Column Drop), Bild entfällt


Wenn möglich nicht mehr als ca. 30 Zeichen pro Spalte


Abbildung 41 Adressblöcke in 1280 Contentbereich mit und ohne Bild

Abbildung 42 Adressblöcke Marginalspalte ohne Bilder

04.2 Adressdaten als Liste

Die in 4.2 beschriebenen Adressmodule können auch als Liste dargestellt werden, z.B. bei

Kontaktlisten von Fakultäten.


S e i t e 54 | 142

Verwendung in

Inhaltsseite Contentbereich & Marginalspalte

Startseite Contentbereich & Marginalspalte


Personenbezogene Daten kompakt zusammenfassen, gliedern und

Interaktionsmöglichkeit bieten. Kann alleinstehend und als Liste

eingesetzt werden.

Enthaltene Elemente

Bild (optional)

Name, Institut, Raum

Kontaktdaten

Link auf persönliche Website

Mail-Button

Funktionalität

Klick auf Website-Button öffnet persönliche Website

Klick auf Mail-Button öffnet Kontaktformular oder Mailprogramm


Unter 1024 fallen Bilder weg und Daten floaten untereinander

Daten bleiben linksbündig, Buttons rechts


Gerade E-Mail-Adressen können nicht getrennt werden, deshalb nicht

zu lange Adressen vergeben.

04.3 Akkordeon

Das Akkordeon erlaubt die Bereitstellung von Informationstexten zu verschiedenen Themen

in einem platzsparenden Modul. Es ist geeignet für zusätzliche Informationen am Ende eines

Artikels, die nicht auf den ersten Blick erfassbar sein müssen oder für kleinere

Informationseinheiten zu verschiedenen Themen.

Verwendung in




S e i t e 55 | 142

Kleinere Informationsblöcke zu verschiedenen Themen platzsparend

unterbringen

Enthaltene Elemente

Reitertitel

Headline

Text

Textlinks (optional)

Funktionalität

Klick auf Pfeil-Icon oder Reiter-Headline öffnet den entsprechenden

Reiter, erneuter Klick schließt ihn wieder. Pfeil-Icon dreht sich hierbei

jeweils um 180 Grad mit Spitze nach oben (geöffnet) bzw. Spitze nach

unten (geschlossen)

Klick auf Pfeil-Icon eines anderen Reiters schließt eventuell geöffnete

andere Reiter, es gibt immer nur einen geöffneten Bereich. Dies

bezieht sich nur auf jeweils ein Akkordeon. Sind mehrere vorhanden,

bleiben die Reiter in den anderen Akkordeons geöffnet.


fließende Skalierung auf 100% des Contentbereichs (ohne

Marginalspalte)


Keine Einbindung von Bildern möglich

Allgemein gültig formatierter Text möglich (alle im Editor

freigeschalteten Funktionen, z.B. Fettungen, Aufzählungspunkte etc.)

Akkordeon-Überschriften nicht mit zu langen Begriffen füllen (max.

ca. 20 Zeichen), da diese nicht getrennt werden und in kleineren

Breakpoints (320 px) in den Pfeil hineinragen können oder

abgeschnitten werden. Überschriften brechen um und können

theoretisch unbegrenzt lang sein, sollten aber der Verständlichkeit

und Übersichtlichkeit wegen so knapp und prägnant wie möglich

gehalten werden.



S e i t e 56 | 142

Abbildung 43 Akkordeon geschlossen

Abbildung 44 Akkordeon geöffnet

04.4 Audio-Modul

Komfortabel benutzbarer Player für Audio-Files, alternativ kann das Video-Modul verwendet

werden mit Standbild (s. Video).

Verwendung in




Das Modul spielt Audiodateien ab und kann diese zusätzlich mit

einem Bild illustrieren.

Enthaltene Elemente


S e i t e 57 | 142

Bild (optional)

Audio-Player mit Play/Stopp-Button, Fortschrittsbalken, Zeitanzeige,

Stummschalten-Button – Anzeige ist Browserabhängig und kann

daher abweichen, d.h. es gibt hier kein einheitliches Layout

Erklärungstext wie Bildunterschrift

Funktionalität

Klick auf Play-Button startet Wiedergabe, erneuter Klick stoppt sie

Klicken, Festhalten und Verschieben des Fortschrittsbalkens springt

an andere Stelle der Wiedergabe

Klick auf Lautsprecher-Icon schaltet Wiedergabe stumm/laut


Bestenfalls das mp3-Format nutzen, hier ist die Browserkompatibilität

am höchsten


S e i t e 58 | 142


Abbildung 45 Audio-Modul in 1280 bei 100% Content-Bereich

Abbildung 46Audio-Modul in 1280 bei 50% Content-Bereich


S e i t e 59 | 142

04.5 Autor-Social-Sharing

Sie dient als Abschluss eines Artikels im Inhaltsbereich und bietet weitere Informationen und

Interaktionen für die Anwender/innen der Seite. So zeigt sie den Autor des Artikels sowie

eine Kontaktaufnahmemöglichkeit mit dem Autor an.

Zudem gibt es die Möglichkeit den Inhalt der Seite auf verschiedenen Social-Media-Kanälen

zu teilen.

Verwendung in



Kennzeichnung der Autorenschaft bei Artikeln

Interaktion durch Kontaktaufnahme und Social-Media-Sharing

Enthaltene Elemente

Autorenzeile (Name, optional mit Verlinkung)

Datum, Ort

Bild (optional)

Social-Media-Modul (optional)

Button für Sharing per Mail

Buttons für Sharing auf Facebook, Twitter oder Google+ (die

Darstellung ist hier Plugin-abhängig, liegt also beim Social-

Media-Dienst selbst)

Es kann entweder das Autorenmodul oder das Social-Media-Modul benutzt

werden oder die Kombination aus beiden

Funktionalität

Klick auf Autorenname öffnet dessen persönliche Website oder

Mailprogramm

Klick auf Mail-Button öffnet Mailprogramm

Klick auf Social-Media-Button öffnet jeweiliges Flyout mit Share-

Button (2-Click-Variante, Aussehen ist abhängig von dem vom Dienst

selbst bereitgestellten Plugin)


In Viewports unter 768 bricht das Social-Media-Modul unter das

Autoren-Modul um

Bild skaliert mit


S e i t e 60 | 142


Sowohl Autorenzeile als auch Social-Media-Modul können allein

benutzt werden. Die Nutzung in Kombination wird aber generell

empfohlen.

Die Social-Media-Leiste bitte nur einmal pro Seite einbinden, da sonst

irritierend, da sich diese Funktion i.d.R. auf die gesamte Seite bezieht.

Bildformat 65 x 65 px


Abbildung 47 Autor-Social-Sharing in Breakpoint 1280 – verkleinerte Darstellung

Abbildung 48 Autor-Social-Sharing im Breakpoint 768

Abbildung 49 Autor-Social-Sharing im Breakpoint 320

04.6 Einzel-Bild

Das Bildmodul dient der Illustration von Texten. Es kann allein oder ergänzend im Fließtext

eingesetzt werden. Hierbei sind für das Bild die Größen 100% (8 columns), 50% (4 columns)

oder 33% (3 columns) auswählbar. Der Text kann entweder daneben losgelöst stehen, oder

das Bild wird vom Fließtext umflossen. Dazu kommt der Sonderfall „Kopfbild“, welches auf

Inhaltsseiten als dekoratives Element ohne Beschreibung eingesetzt wird.

Das Bildmodul dient als Grundlage für den Bilderslider (s. Bilderslider) und das Audio-Modul

(s. Audio-Modul).

Der allgemeine Umgang mit Bildern ist im Grundlagenkapitel zu Bildern beschrieben (s.

Bilder (Bildsprache, Formate).

Verwendung in




S e i t e 61 | 142


Illustration von Seiteninhalten

Es gibt die Möglichkeit am oberen Ende einer Inhaltsseite ein Kopfbild

zu platzieren. Dieses hat eine rein dekorative Funktion und darf daher

ohne Bildunterschrift eingesetzt werden. Ein Alt-Text sollte dennoch

gesetzt werden.

Enthaltene Elemente

Bild

Bildunterschrift (nicht bei Kopfbild)

Verlinkung und Hervorhebung in der Bildunterschrift (optional, nicht

bei Kopfbild)

Lightbox-Button (optional, nicht bei Kopfbild)

Funktionalität

Klick auf Lightbox-Button öffnet Bild in Lightbox (bildschirmfüllend)


Viewports unter 1024: 50% und 33% Bilder nehmen beide 50% des

Content-Bereichs ein

Viewports unter 768: alle Bildvarianten nehmen 100% des Content-

Bereichs ein und die Lightbox-Funktion entfällt


Es wird ein Bildformat von 3:2 empfohlen, abweichende Formate sind

möglich.

Hochformate bitte mit Bedacht einsetzen, da 100%-Module sehr hoch

werden können und somit der Bild-Inhalt ggf. über den sichtbaren

Bereich der Anwender/innen gehen kann, so dass der Inhalt gescrollt

werden muss.

Kopfbild wird dekorativ ohne Beschreibung auf Inhaltsseiten

eingesetzt. Es hat eine feste Größe von 100% im Content-Bereich mit

einem Seitenverhältnis von 2,4:1. Der Alt-Text sollte hier angegeben

werden. Die Auflösung sollte eine Breite von 1024 Pixeln Breite nicht

unterschreiten.

Die Mindestauflösung für Bilder sollte so gewählt werden, dass sie für

ein 100%-Bildmodul ausreichend ist. Als Richtwert gilt eine

Mindestauflösung von 1440 Pixeln. Für ein 100% Bildmodul würde


S e i t e 62 | 142

auch eine Breite von 1024 Pixeln ausreichen, jedoch sollte

Bildmaterial von Anfang an so angelegt und hochgeladen werden,

dass es für jeden Einsatzzweck genutzt werden kann (s. allgemeine

Vorgaben für den Umgang mit Bildern in Kapitel Bilder (Bildsprache,

Formate)).


S e i t e 63 | 142


Abbildung 50 Bildmodul in 480 px mit und ohne Bildunterschrift und Lightbox-Button (weiss: hover)

Abbildung 51 Bildmodul in 50% mit Bildunterschrift und Lightbox-Button im Text


S e i t e 64 | 142

Abbildung 52 Kopfbild

04.7 Bilderslider

Es gibt den Bilderslider im Contentbereich in verschiedenen Größen (100%, 50% und 33%).

Die Versionen 50 % und 33 % können von Text umflossen werden. Grundsätzlich baut der

Bilderslider auf dem Bildmodul auf (s. Einzel-Bild) und wird um eine Navigation mit

Pagination erweitert.

Die Einzel-Bilder können einen optionalen Beschreibungstext haben, der jeweils unterhalb

des Bildes angezeigt wird. Bildquellen- bzw. Autorenhinweise (Copyrightvermerk) werden in

kursiver Schrift dargestellt. Im Beschreibungstext können Links und Hervorhebungen

verwendet werden.

Verwendung in






Mehrere Bilder zu einem Thema platzsparend anzeigen.

Enthaltene Elemente

s. Einzel-Bild

Navigationspfeile (vor und zurück) mit Bildanzahl-Anzeige (Ziffer

aktuelles Bild / Gesamtanzahl Bilder)

Funktionalität

s. Einzel-Bild

Mit der Pfeilnavigation kann durch die Bilder navigiert werden (vor

und zurück; Endlosschleife)


S e i t e 65 | 142

Die Nummer des aktuellen Bildes wird mit Betätigung der Pfeil-

Buttons aktualisiert

In der Lightbox-Ansicht können diese auch durchgeblättert werden.

ohne automatischen Bildwechsel


s. Einzel-Bild


s. Einzel-Bild

Es sollte ein einheitliches Format der Bilder verwendet werden, damit

es nicht zu unschönen Sprüngen bei der Navigation durch die Bilder

kommt. Hierbei kann es passieren dass die Navigationselemente aus

dem Sichtfeld rutschen.


Abbildung 53 Bilderslider in 1280px in Contentbereich und Marginalspalte

04.8 Download-Liste

Downloadliste: (Teil von Text-Block)

Um das Bereitstellen von Zusatzmaterial zu ermöglichen, gibt es das Download-Liste-Modul.

Es ermöglicht dem User den Download von Dateien. Es kann verschieden eingesetzt werden,

z.B. alleinstehend, als Ergänzung am Ende eines Artikels oder als Inhaltselement des Tabbox-

Moduls.


S e i t e 66 | 142

Verwendung in

Inhaltsseite Content-Bereich und Marginalspalte

Kontakt-Tabbox (s. Tabbox am Beispiel Kontaktdaten)


Bereitstellen von Dateien zum Herunterladen

Enthaltene Elemente

Dateispezifisches Icon und Textlink (pdf, doc, jpg, xls, zip oder Fallback

„file“)

Angabe von Dateityp und -größe

Link „gesamtes Material downloaden“ (optional)

Funktionalität

Klick auf einzelnen Link startet Download

Klick auf „gesamtes Material downloaden“ lädt alle Dateien

zusammengefasst als zip-Datei herunter


Textlink kann umbrechen (bricht vor der Klammer mit

Dateiinformationen um)


Dateinamen möglichst kurz und prägnant halten, wenn möglich ohne

Umlaute und Leerzeichen


Abbildung 54 Download-Liste


S e i t e 67 | 142

04.9 Druckansicht

Die Druckansicht kommt zum Tragen, sobald eine Webseite versucht wird auszudrucken.

Hierbei kommt es nicht zu einem 1:1-Ausdruck, sondern zu einer reduzierten Form, in der

z.B. der Header- und Footerbereich sowie die Marginalspalte nicht ausgedruckt werden. Des

Weiteren wird nur die Schriftfarbe schwarz verwendet, damit der Druck auch in Graustufen

gut funktioniert.

I.d.R. werden Artikel-Seiten ausgedruckt, also textlastige Seiten. Die Startseiten eignen sich

nicht besonders für den Ausdruck, da hier sehr viele Bilder enthalten sind und auch

Bewegtbilder wie der Main-Slider. Das Aussehen der Druckansicht ist optimiert für ein DIN-

A4-Blatt, für jedes Modul ist das Aussehen im Druck eigens festgelegt.

Verwendung in

Druckausgabe


Seiteninhalte ausdrucken, i.d.R. Artikel-Seiten

Enthaltene Elemente

Reduzierter Header; auf den UzK-Seiten ist es das UzK-Siegel +

Seitentitel, auf den Unisport-Seiten nur der Seitentitel

Kein Footer

Keine Marginalspalte; mit Ausnahme der Magazin-Detailseite

Funktionalität

Reduziert den Seiteninhalt auf den Contentbereich

Tatsächliches Ergebnis ist Browserabhängig


Darauf achten, dass in der Marginalspalte keine Inhalte enthalten

sind, die für die ausgedruckte Version einer z.B. Artikel-Seite relevant

sind.


S e i t e 68 | 142


Abbildung 55 Besipielhafte Druckansicht der Textblockseite


S e i t e 69 | 142

04.10 Formulare

Formulare können beispielsweise zur Eingabe von Daten zur Kontaktaufnahme, Anmeldung

zu einem Veranstaltungstermin o.ä. verwendet werden.

Da Formulare i.d.R. mit Hilfe eines Plugins bereitgestellt werden, kann es passieren, dass die

Darstellungen nicht 100% mit dem Layout übereinstimmen und ggf. einzelne Elemente nicht

redaktionell gepflegt werden können.

Verwendung in



Eingabe von Daten

Enthaltene Elemente

Verschiedene Eingabefelder wie Dropdowns, Texteingabe,

Auswahlliste, Checkboxen, Radiobuttons

Benennung von Eingabefeldern

Downloadlink (optional)

Senden-Button

Info-Tooltips

Fehlermeldungen, idealerweise am betroffenen Feld

Funktionalität

Falsche oder fehlende Eingabe gibt bei Verlassen des Feldes oder bei

Klick des Senden-Buttons eine oder mehrere Fehlermeldungen aus

Klick auf Senden-Button sendet Informationen gebündelt an

hinterlegten Empfänger


Unter 768 Wechsel von zweispaltigem auf einspaltiges Layout


Beschriftung von Eingabefeldern aussagekräftig wählen

Nicht zu lange Begriffe, könnten evtl. in 320 über das Feld

hinausragen

Fehlermeldungen sollten idealerweise am Feld selbst angezeigt

werden, welches betroffen ist


S e i t e 70 | 142


Abbildung 56 Formularelement 2-spaltig (1280_Content-Bereich) und 1-spaltig (Mobile)

04.11 Kalender

Der Kalender besteht aus verschiedenen Ansichten, die je nach Bedarf eingesetzt werden

können. Es wird unterschieden zwischen:

Tagesansicht

Wochenansicht

Monatsansicht

Jahresansicht

Detailansicht

Listenansicht

Da die Kalenderansichten i.d.R. mit Hilfe eines Plugins bereitgestellt werden, kann es

passieren, dass die Darstellungen nicht 100% mit dem Layout übereinstimmen und ggf.

einzelne Elemente nicht redaktionell gepflegt werden können.

Verwendung in

Ansicht Startseite Inhaltsseite

Tag Content- und

Marginalbereich

Content- und

Marginalbereich

Woche Contentbereich Contentbereich


S e i t e 71 | 142

Monat Content- und

Marginalbereich

Content- und

Marginalbereich

Jahr Contentbereich Contentbereich

Detail Contentbereich Contentbereich

Liste Contentbereich Contentbereich


Übersichtliches sowie detailliertes Darstellen von Terminen

Enthaltene Elemente

Tagesansicht:

Tagesangabe, idealerweise mit Wochentag und vollständigem

Datum

Zeitstrahl Uhrzeit (vertikal)

Termineintrag mit automatisch abgekürztem Titel-Bezeichner

und Fakultätsfarbe bzw. UzK-Defaultfarbe

Hover-Flyout mit Kurzinfo zum Termin

Wochenansicht:

s. Tagesansicht

Zeitstrahl Tage (horizontal)

Wochennavigation (vor und zurück)

Monatsansicht:

Zeitstrahl Tage (horizontal)

Zeitstrahl Kalenderwoche (vertikal)

Monatsnavigation (vor und zurück)

Einzelne Felder für Tage; sind Termine eingetragenen, ist das

Feld blau hinterlegt, handelt es sich um den aktuellen Tag, ist

es grau hinterlegt; Wochenendtage sind in hellem Blaugrau

hinterlegt

In der großen Auflösung wird die Anzahl Termine je Fakultät

als farbiger Punkt dargestellt, Anordnung von links unten nach

rechts oben

Jahresansicht:

zwölf kleine Monatsansichten, s. Monatsansicht ohne

separate Terminanzahl-Ausweisung und farbliche

Kennzeichnung der Fakultätstermine

Jahresnavigation (vor und zurück)

Detailansicht

Optionales Datum-Icon


S e i t e 72 | 142

Detaillierte Informationen zum Termin wie Terminname,

Fakultät, Gastgeber, Uhrzeit, Raum, Informationstext; ist i.d.R.

mit dem Texteditor individuell befüllbar, s. Text-Block

Optional verlinkter Titel

Optional ein Download-Link um den Termin in seinen Kalender

übertragen zu können

Optional ein Link, um sich z.B. direkt für die Veranstaltung

anmelden zu können

Listenansicht

Ähnlich der Detailansicht ohne Links

Elemente einer Listendarstellung, wie z.B. Pagination (s. Listen

(filter- und blätterbar))

Funktionalität

Hover im Tages-/Wochenansicht öffnet Flyout mit Kurzinfo zum

Termin, Klick öffnet Termin-Detailseite entweder unterhalb der

Tabelle oder auf separater Seite

Tag, Woche (KW), Monat, Jahr sind verlinkt, in der Überschrift des

jeweiligen Elements und in den Tabellen, wenn Termine an dem Tag

bzw. innerhalb der Woche existieren

Klick darauf öffnet jeweils die dazugehörige Ansicht, z.B. auf

markierte Tage- bzw. Fakultätsfarbbuttons in Monats- und Tage in

Jahresansicht öffnet die Übersichtsseite mit allen Terminen dieses

Tages als Liste dargestellt oder die Tagesansicht selbst; die Anzeige

kann darunter oder auf einer separaten Seite erfolgen

Navigationspfeile öffnen den vorigen bzw. nachfolgenden Tag, die

Woche, den Monat oder das Jahr. Je nach technischer Umsetzung

handelt es sich um Endlosschleifen oder es gibt eine Begrenzung, z.B.

könnte in der Monatsansicht die Navigation nur über die Monate des

aktuell angezeigten Jahres ermöglicht sein

Klick auf Link in Detailansicht führt z.B. auf eine Formularseite, über

die man sich für die Veranstaltung anmelden kann oder es wird das

Mailprogramm geöffnet

Klick auf Download-Link ermöglicht es den Termin in seinen Kalender

übertragen zu können


Tages-/Wochenansicht:

unter 1280 wird aus der Wochenansicht die Tagesansicht mit

Tages- und Wochennavigation


S e i t e 73 | 142

Monatsansicht:

unter 768 nur noch reduzierte Ansicht mit markierten Tagen,

Fakultätsgliederung fällt weg

Jahresansicht:

unter 1280 zweispaltig

unter 768 nur noch einzelne Monatsansicht mit Monats- und

Jahresnavigation

Detailansicht:

Unter 768 fällt Datum-Icon weg


Da Headlines abgekürzt werden, wichtige Informationen an den

Anfang der Headline

Tages-/Wochenansicht

Hover-Flyout sollte verwendet werden, da je nach verfügbarer

Breite der Titel-Bezeichner in abgekürzter Form nicht

aussagekräftig genug ist

Max. Wortlänge für Hover-Flyout sind 35 Zeichen, da die

Breite des Flyout fix ist und der Text sonst "hinausläuft" oder

abgeschnitten wird


Abbildung 57 Kalender Aktueller Tag in Monatsansicht 1280 Content und 320


S e i t e 74 | 142

Abbildung 58 Aktueller Tag in Monatsansicht 768

Abbildung 59 Tagesansicht in 1280


S e i t e 75 | 142

Abbildung 60 Wochenansicht in 1280

Abbildung 61 Jahresansicht in 1280


S e i t e 76 | 142

04.12 Listen (filter- und blätterbar)

Listen eignen sich dazu gleichwertige Daten, wie z.B. Adressdaten, komprimiert und

übersichtlich bereitzustellen. Es gibt verschieden Elemente, die zu einer Liste

zusammengefasst werden können:

Adressdaten (s. Adressdaten als Liste)

News-Elemente (s. Mobile Navigation – Hamburger-Menü)

Artikel, z.B. im Magazin auf Suchergebnisseite (s. Magazin-

Suchergebnisseite)

Listen können je nach Menge der Einzelelemente zusätzlich durch Navigations- und

Filterelemente ergänzt werden:

Pagination (s. Pagination)

Alphabetische Suchnavigation (s. Alphabetische Suchnavigation)

Filter-Dropdowns (s. Magazin-Suchergebnisseite)

04.12.1 Alphabetische Suchnavigation

Dient als Navigation größerer Ergebnislisten wie zum Beispiel Adresslisten oder

Suchergebnisseiten. Mit Hilfe der alphabetischen Suchnavigation kann an eine bestimmte

Stelle in der Liste (Angangsbuchstabe oder Zahl) gesprungen werden.

Verwendung in



Navigation in großen Listen, zum Beispiel Kontaktlisten oder

Suchergebnisseiten

Enthaltene Elemente

Buchstaben und Ziffern sind vorgegeben, nicht optional

Links für Gesamtansicht und Suchfeld

Funktionalität

Klick auf Buchstaben oder Zahl springt zur entsprechenden Stelle der

Liste (Sprungmarkennavigation)

Buchstaben oder Zahlen ohne Entsprechung in der Liste sind nicht

klickbar und werden grau angezeigt.

Zusätzliche Funktionen sind die Anzeige der Gesamtansicht und ein

Suche-Button, der eine neue Suchseite öffnet.


S e i t e 77 | 142


Feste Breite der einzelnen Zeichenbereiche

skaliert nicht mit sondern bricht um


Nur bei großen Listen verwenden


Abbildung 62 Alphabetische Suchnavigation 1280



04.12.2 News-Listenelement

Das News-Listenelement dient zum Anzeigen von Neuigkeiten in einer Listenansicht.

Verwendung in


Anwendungszweck

Neuigkeiten kurz Anteasern

Elemente


S e i t e 78 | 142

News-Element

Bild (optional)

Verlinkte Headline, Subline, Teasertext

Datierung, Autorenhinweis

Listen-Ansicht

s. Listen (filter- und blätterbar)

Funktionalität

Klick auf Element öffnet verlinkte Detail-Seite

s. Listen (filter- und blätterbar)


kleiner 768 entfallen die Bilder


In kleinen Viewports auf die Wortlänge in Head- und Subline achten,

da Worte sonst abgeschnitten werden könnten.

Max. Wortlänge Headline: ca. 25 Zeichen

Max. Wortlänge Subline: ca. 35 Zeichen

Bildformat 50 x 50 px


S e i t e 79 | 142


Abbildung 65 Newsliste in 1280


S e i t e 80 | 142

Abbildung 66 Newsliste in 768 und 320

04.12.3 Suchefeld und Filter-Dropdowns

Das Suchefeld und die Filter-Dropdowns können dazu eingesetzt werden, wenn sehr große

Listen gefiltert werden können sollen.

Verwendung in


Anwendungszweck

Ein Listenergebnis einschränken.

Elemente

Suchfeld

Eingabefeld


S e i t e 81 | 142

Suchen-Icon (Lupe)

Dropdowns

Dropdown-Name

Icon Ein-/Ausklappen

Filtern-Button

Funktionalität

Suchfeld-Eingabe startet neue Suche

Auswahl in Dropdowns und Klicken des Filtern-Buttons filtern die

aktuelle Suche nach den Eingaben


In kleineren Viewports ändert sich die Anordnung der Suchfilter:

768: zweispaltiges Layout

320: einspaltiges Layout

Unter 768 wird das Suchfeld unter dem Lupe-Icon im Header

versteckt.

Die Filter-Dropdowns werden hinter einem Ausklapp-Button „Filtern“

versteckt“


Die Auswahlmöglichkeiten in den Dropdowns folgen den Schlagworten bei

der Eingabe von Artikeln. Diese sollten eine Wortlänge von ca. 30-35

Zeichen nicht überschreiten.


Abbildung 67 Suchfeld und Filter-Dropdowns in 1280

Abbildung 68 Suchfeld und Filter-Dropdowns in 768


S e i t e 82 | 142

Abbildung 69 Suchfeld und Filter-Dropdown in 320

04.12.4 Pagination

Die Pagination fungiert als Gliederungselement für lange Listen. Eine große Anzahl an

Einträgen oder Ergebnissen kann auf mehrere Seiten verteilt werden, um Seiten nicht zu

groß werden zu lassen.

Verwendung in

Inhaltsseite


Aufteilung großer Listen auf mehrere Seiten, über die navigiert

werden kann

Enthaltene Elemente

Text „Seite x von y“

Pfeilnavigation (vor und zurück)

Seitennavigation (ähnlich alphabetischer Suchnavigation)

Funktionalität

Klick auf Pfeil öffnet vorherige bzw. nächste Seite

Klick auf Zahl öffnet entsprechende Seite


320: Text „Seite x von y“ entfällt


Wird durch CMS befüllt (Anzahl Suchergebnisse etc.)


Abbildung 70 Pagination in 1280


S e i t e 83 | 142



04.13 Main-Slider

Es gibt den Slider in verschiedenen Formen:

UzK Home und internationales Portal Home: Slider mit rundem Badge

Es gibt drei unterschiedliche Positionen für den Badge

Startseiten von anderen Webseiten direkt unter dem Hauptportal

(z.B. Fakultät + Zielgruppe)

Startseiten von untergeordneten Webseiten (z.B. Institute)

Mainslider UzK-Home:

Runder Badge an drei Positionen (links, Mitte links, rechts)

Dachzeile, Headline, Subline

Badgepositionen können in einzelnen Slides variiert werden

Mainslider Startseite:

Dachzeile, Headline, Subline

Textanordnung in Kästen am unteren Ende des Sliders

Positionierung fest

Mainslider Unterportalseite:

Design angelehnt an Startseiten-Slider

Nur 9 Spalten breit

Verwendung in

Startseite

Unterportalseiten auf 2. Und 3. Ebene

Anwendungszweck

Der Slider dient zur Kommunikation von Markenbotschaften,

Kampagnen, wichtigen Themen, etc.

Elemente

Redaktionell bestimmbar

Bild

Dachzeile, Überschrift und Teasertext


S e i t e 84 | 142

Redaktionell nicht bestimmbar

Navigation (Vor- und Zurück-Buttons)

Paginations-Bullets

Funktionalität

Mit den Navigations-Buttons lässt sich durch die einzelnen Slides

blättern

An den Paginations-Bullets lässt sich erkennen, der wievielte Slide

gerade aktiv ist

Über die Paginations-Bullets lassen sich Slides auch direkt ansteuern

Slides laufen automatisch durch


Bei Viewports kleiner 1280px wird der Slidertyp Badge zu einem

normalen Slider

Bei Viewports kleiner als 768px ändert sich die Darstellung der Slider

grundlegend

Es werden keine Navigationsbuttons angezeigt. Da davon

ausgegangen werden kann, dass kleine Viewports auf einem Touch-

device (Tablet, Smartphone) betrachtet werden, funktioniert der Slide

hier durch eine Wischbewegung.

die Bullets befinden sich nicht mehr unter dem Slider, sondern rechts

oben im Slide

Der Text steht unterhalb des Bildes

alle Slidertypen werden gleich dargestellt


Die Stage-Slider dienen der Präsentation von zentralen Inhalten durch

kurze, prägnante Aussagen. Deshalb auf kurze Texte achten.

Badge-Slider (nur UzK-Home):

Dachzeile: Max. 40 Zeichen in 2 Zeilen

Headline: max. 30 Zeichen in 2 Zeilen

Subline: max. 70 Zeichen in 2 Zeilen

Fixes Bildformat: 2,4 : 1

Startseiten-Slider: 100% Wrapper-Breite

Fakultätsstartseiten-Slider: Breite von 9 Spalten

In Breakpoints unter 768 Pixeln wird das Bild automatisch

beschnitten (siehe Schnittkante im ersten Slide)


S e i t e 85 | 142

Bitte bei Slidern auf gestalterische Qualität und ausreichend hohe

Auflösung (mind. 1440 Pixel Breite) der Fotos achten.


Abbildung 73 Mainslider UzK-Home in 1280, Badge links, Schnittkanten für Mobile-Ansicht

Abbildung 74 Mainslider UzK-Home in 768, Badge wird zu Kasten, Schnittkanten für Mobile-Ansicht

Abbildung 75Mainslider UzK-Home 320, Badge unter Bild


S e i t e 86 | 142

Abbildung 76 Mainslider UzK-Home, Badge mitte links

Abbildung 77 Mainslider UzK-Home, Badge rechts

Abbildung 78 Mainslider Fakultäts- oder Themenstartseiten


S e i t e 87 | 142

Abbildung 79 Mainslider Magazin

Abbildung 80 Mainslider Instituts- oder Inhaltsseiten (75%)

04.14 Notfallzeile

Die Notfallzeile ist ein auffälliges Element, das Leben retten kann. Im Fall eines Feuers, einer

Bombendrohung oder eines sonstigen Notfalls wird sie direkt oben auf der gesamten UzK-

Seite eingeblendet. So erfährt jeder User sofort von Evakuierungsanordnungen.

Verwendung in

Startseite

Inhaltsseite


Sofortige Information über Notfälle

Enthaltene Elemente

Roter Rahmen


S e i t e 88 | 142

Warn-Icon

Text mit Informationen, Anordnungen und Verortung

Zusätzliche Infos über z.B. Fluchtwege

Funktionalität

Normal keine, nur zur Warnung

Evtl. Link auf nützliche Informationen


320: Floaten der Inhalte untereinander


Kurzer, prägnanter Text mit den wichtigsten Informationen


Abbildung 81 Notfallzeile 1280

04.15 Service-Box

Um schnell auf Seiten zu kommen, die organisatorische Services beinhalten, wird auf

Startseiten die Servicebox angezeigt. Sie enthält zahlreiche Links zu nützlichen Unterseiten

Verwendung in



Schnelle Übersicht und Bereitstellung von organisatorisch nützlichen

Inhalten

Enthaltene Elemente

2 Tabs

Linkliste mit Icons

Funktionalität

Klick auf Reiter oben wechselt zwischen „Dienste“ und „Formulare“


S e i t e 89 | 142

Klick auf Link öffnet hinterlegte Seite


320: Marginalspalte rutscht ein-/ausklappbar unter den Content


Passendes Icon für Links auswählen, Default-Icon wie übergeordneter

Reiter

Icons für Dienste und Formulare sind, siehe Anhang: Icons

Nur kurze Begriffe für Reiter verwenden, im Idealfall nicht länger als

„Formulare“, da Reiter in kleineren Breakpoints schmaler werden

können. (also ca. 10-12 Zeichen)

Textlinks brechen um, jedoch kann eine maximale Wortlänge von ca.

30 Zeichen nicht überschritten werden.


Abbildung 82 Servicebox Marginalspalte 1280 oder Mobile (Darstellung gleich)

04.16 Sitemap

Die Sitemap bietet einen Überblick über alle enthaltenen Seiten bis zur 2. Ebene ab der

aktuellen Seite.

Verwendung in

Startseite

Inhaltsseite



S e i t e 90 | 142

Schnelle Übersicht aller Unterseiten der aktuellen Seite

Enthaltene Elemente

Button „alles ein-/ ausklappen“

Strukturbaum der Unterseiten

+/- Button zum ein-/ ausklappen der Unterseiten der jeweiligen Seite

Funktionalität

Klick auf „alles ein-/ausklappen“ wechselt zwischen kleinst- und

größtmöglicher Anzeige

Klick auf +/- Button klappt die Unterseiten der gewählten Seite aus

bzw. ein.

Klick auf Textlink öffnet die jeweilige Seite


Textlinks brechen um


CMS befüllt Sitemap automatisch (verschachtelte Liste)


S e i t e 91 | 142


Abbildung 83 Sitemap Darstellung für alle Breakpoints

04.17 Tabbox am Beispiel Kontaktdaten

Ähnlich wie das Akkordeon bietet die Tabbox die Möglichkeit zusätzliche Informationen zu

dem Inhalt einer Seite platzsparend unterzubringen. Hier können mehrere Elemente wie z.B.

Bilder, Kontaktinformationen oder Download-Listen eingefügt werden. Die Tabbox kann

somit redaktionell beliebig befüllt werden, es ist jedoch genauso wie beim Akkordeon darauf

zu achten, dass nur begrenzt Platz bereitsteht.


S e i t e 92 | 142

Beispielhaft wurde die Anzeige von Kontaktdaten mit zwei Tab-Typen bereitgestellt, ähnlich

aufgebaut wie eine Visitenkarte:

Tab „Text / Dateiliste“

Tab „Kontakt“

Diese Darstellung ist bitte zu übernehmen, wenn Kontaktdaten aufbereitet werden.

Verwendung in




Platzsparende Darstellung von (Zusatz-) Informationen

Elemente der Visitenkarten-Ansicht

Überschrift pro Tab

Tab „Text / Dateiliste“

Überschrift

Text

Link

Download-Liste (s. Download-Liste) mit Angabe von Dateityp und -

größe

Tab „Kontakt“

Bild: feste Größe 140 x 140 px

Name

Funktion + Dienststelle

Anschrift

Links zu Website und Kontaktmöglichkeit

Funktionalität

Der erste Tab ist standardmäßig geöffnet; Klick auf einen

geschlossenen Tab zeigt dessen Inhalt an.

Ist ein Tab nicht befüllt, wird der entsprechende Reiter nicht

angezeigt


Bei Viewports kleiner 1024px wird die Tabbox zu einem Akkordeon

Bei Viewports kleiner 768 Darstellung von Inhaltsmodulen in den Tabs

einspaltig


S e i t e 93 | 142


Bei der Benennung von Tabs darauf achten die Namen nicht zu lang

zu wählen.

Unter 1024 gelten dieselben Richtlinien wie im Akkordeon:

Überschriften nicht mit zu langen Begriffen füllen (max. ca. 20

Zeichen), da diese nicht getrennt werden und in kleineren

Breakpoints (320 px) in den Pfeil hineinragen können oder

abgeschnitten werden. Überschriften brechen um und können

theoretisch unbegrenzt lang sein, sollten aber der Verständlichkeit

und Übersichtlichkeit wegen so knapp und prägnant wie möglich

gehalten werden.

Es sollten mehrere Tabs vorhanden sein bzw. befüllt werden, sonst

sollte evtl. ein anderes Modul benutzt werden.


Abbildung 84 Tabbox in 1280 linker Tab

Abbildung 85 Tabbox in 1280 rechter Tab


S e i t e 94 | 142

Abbildung 86 Tabbox in 768

Abbildung 87 Tabbox in 320 rechter und linker Tab in Akkordeon-Ansicht (oben und unten)

04.18 Tabellen

Es gibt verschiedene Typen von Tabellen (siehe Screenshots). Die Typen unterscheiden sich

durch:

Abwechselnd eingefärbte Zeilen oder Spalten

Durchgezogene oder unterbrochene oder fehlende Trennlinien

Verwendung in (z.B. Startseite Content oder Inhaltsseite Marginalspalte)





S e i t e 95 | 142

tabellarische Darstellung von Daten, um diese übersichtlich

anzuzeigen

Elemente

(optional) Caption

(optional) Kopfzeile, Hintergrundfarbe fix dunkelblau

(optional) Kopfspalte, Hintergrundfarbe fix dunkelblau

Tabelleninhalte, wie z.B. Textlinks

(optional) Autorenhinweis rechts unterhalb der Tabelle

Funktionalität

keine


Die Tabellenbreite wird durch die Anzahl Spalten und die Breite der

jeweiligen Spalten bestimmt. Die Spaltenbreite wird durch das längste Wort

bestimmt, damit es lesbar bleibt. Ist auf den Viewports größer gleich

560px horizontal nicht mehr genügend Platz zur Darstellung der

Tabelle vorhanden, wird die Tabelle scrollbar gemacht. Hierbei wird

nur noch ein gut lesbarer Ausschnitt der Tabelle angezeigt und es

werden transparente Leisten mit Richtungspfeilen „<“ und „>“

eingeblendet, die den Nutzer darauf hinweisen, dass die Tabelle

weitere Spalten enthält. Durch einen Klick auf die Leisten wird der

angezeigte Ausschnitt der Tabelle schrittweise 100px nach rechts

(Klick auf „>“) oder 100px nach links (Klick auf „<“) verschoben. Ist

durch das Scrollen in der Tabelle der Anfang oder das Ende der

Tabelle erreicht, wird die entsprechende Leiste ausgeblendet.

Bei Viewports kleiner als 560px ist die Darstellung grundlegend

anderes: Die Tabellen unterscheiden sich nicht mehr im Aussehen, es

gibt nur noch eine Spalte und die Zeilen werden abwechselnd

eingefärbt untereinander dargestellt. Die betreffenden Überschriften

aus der Kopfzeile und -spalte werden in den jeweiligen Tabellenzellen

mitangezeigt.


Sehr große Tabellen können in der Mobileansicht den gegenteiligen

gewünschten Effekt auslösen und nicht mehr übersichtlich sein.

Daher sollte grundsätzlich überprüft werden, ob die tabellarische

Darstellung die geeignetste Variante zur Präsentation der Daten ist


S e i t e 96 | 142

oder ob ggf. eine andere Darstellung gewählt werden sollte, z.B. eine

Definitionsliste (s. Definitionslisten) oder Aufzählung (s. Aufzählungen

und Auflistungen), ein Akkordeon (s. Akkordeon), eine filterbare Liste

(s. Listen (filter- und blätterbar)) o.ä.

Die Spaltenbreite richtet sich nach dem längsten Wort, daher sollte

eine maximale Wortlänge von 30 Zeichen nicht überschritten werden.


Abbildung 88 Beispieltabelle in 1280


S e i t e 97 | 142

Abbildung 89 Beispieltabelle in Viewport 1280 mit allen möglichen Formatierungen (Kopfzeile oben und links, Trennlinien und Hintergundfarbe)


S e i t e 98 | 142

Abbildung 90 Beispieltabellen größer oder gleich 560 und 320 mit Responsive-Veränderungen. Pfeile links und rechts an der Tabelle weisen auf die Spalten hin, die aktuell nicht im Sichtfeld zu sehen sind. Der Nutzer wird durch die Pfeile aufgefordert

den verborgenen Inhalt mit Klick auf die Pfeile sichtbar zu machen.

04.19 Teaser

Teaser allgemein

Für alle Teaservarianten gilt: um ein sauberes Raster zu ermöglichen, haben alle

Teaser-Module in unterschiedlichen Breakpoints auch unterschiedliche

Mindesthöhen (min-height). Deswegen muss hier von der Redaktion oder Technik

darauf geachtet werden, dass die im Klickmodell verwendeten Beispieltextlängen

nicht überschritten werden.

Alle Bilder sollten hier im für die Teaserart festgelegten Format verwendet werden,

sonst kann es zu unschönen Konstellationen kommen.


S e i t e 99 | 142

04.19.1 Dateline-Teaser

Werden bisher lediglich im Teaserslider verwendet

Verwendung in




Platzsparendes Anteasern von Themen

Elemente

Bild: festes Format 3:2

Funktionalität

Klick öffnet verlinkte Seite

Hover invertiert Farben


Siehe Teaserslider


Dachzeile max. 20-25 Zeichen

Headline max. 40 Zeichen in 2 Zeilen


S e i t e 100 | 142


Abbildung 91 Datelineteaser 1280 3-spaltig

Abbildung 92 Datelineteaser 768 (2-spaltig) und 320 (einspaltig)


S e i t e 101 | 142

04.19.2 Exzellenzteaser

Der Exzellenzeaser hat eine ähnliche Wichtigkeit wie der News-Teaser, wurde aber speziell

für die Exzellenz-Initiative entwickelt. Er kann aber auch für andere Zwecke benutzt werden,

z.B. als Navigationsweiche für Microsites.

Verwendung in



Anteasern der Maßnahmen zur Exzellenzinitiative (nur auf UzK Home)

bzw. zu anderen wichtigen Themen (andere Startseiten)

Elemente

Headline

Text

Teaserelemente

Bild: festes Format 16:9

Headline

Text

Icon (nur auf UzK Home, kann entfallen)

Link (der gesamte Teaser ist verlinkt)

Funktionalität

Hover invertiert Farben (auch Icon)

Klick auf einen Teaser öffnet die verlinkte Seite


Unter 1024 Pixeln Anzeige zweispaltig

Unter 768 Anzeige einspaltig, Button ohne Umrandung darunter


Headline Wortlänge max. ca. 25 Zeichen, max. 2 Zeilen, damit es im

320-er Layout passt, da sonst der Text abgeschnitten wird

Teasertext max. 60-70 Zeichen in 2 Zeilen


S e i t e 102 | 142


Abbildung 93 Exzellenzteaser 1280 (3-spaltig), 768 (2-spaltig), 320 (1-spaltig)


S e i t e 103 | 142

04.19.3 Multi-Teaser

Dieses Modul basiert auf der Teaser-Linkliste, erweitert durch ein Bild und einen Teasertext.

Es wurde ursprünglich für das International Portal entwickelt, kann aber auf allen Seiten

eingesetzt werden. Es empfiehlt sich aber der Einsatz auf Startseiten.

Verwendung in




Anteasern von verschiedenen Seiten und Inhalten, die einem

übergeordneten Thema zugeordnet sind.

Elemente

Überschrift

Teasertext

Bild (optional)

Dreispaltiges Layout (Bild und zweispaltiges Teasermodul oder

dreispaltiges Teasermodul ohne Bild)

Teaserlinkliste mit oder ohne Bild

Funktionalität

Klick auf übergeordnete Headline oder Bild öffnet Übersichtsseite

(wenn vorhanden)

Klick auf Teaserlement öffnet hinterlegte Seite


768: Wechsel auf zweispaltiges Layout, Bild rutscht nach oben, Bild,

Headline und Teasertext über komplette Breite

320: Wechsel auf einspaltiges Layout


Teaser können theoretisch beliebig lang sein, es wird aber eine kurze

und prägnante Headline empfohlen.


S e i t e 104 | 142


Abbildung 94 Multiteaser in 1280 mit Bild

Abbildung 95 Multiteaser in 1280 ohne Topic-Bild und Multiteaser in 320

04.19.4 News-Teaser

Der News-Teaser ist das erste Inhalts-Modul, welches auf Startseiten untergebracht wird.

Hier werden wichtige Neuigkeiten untergebracht, wegen denen der User wahrscheinlich auf

die Seite kommt.


S e i t e 105 | 142

Verwendung in

Startseite Content-Bereich


Abbildung von zentralen, akuten und wichtigen Neuigkeiten

Enthaltene Elemente

3 Teaserelemente mit den Elementen

Bild

Headline

Subline

Button zum Anzeigen weiterer Teaserelemente

Funktionalität

Hover invertiert Farben im Textblock (weiß <> blau)

Klick auf Teaserelement öffnet hinterlegte Inhaltsseite

Klick auf Button „weitere anzeigen“ öffnet drei weitere

Teaserelemente darunter, optional kann auch die News-

Übersichtsseite geöffnet werden.


768: Anordnung innerhalb der Teaserelemente von übereinander auf

nebeneinander, Teaserelemente floaten untereinander

320: Anordnung innerhalb der Teaserelemente von nebeneinander

zurück auf übereinander


Platzierung direkt unter Main-Slider

Bildformat 3:2

Sechs Teaserelemente müssen ständig redaktionell vorgehalten

werden

Kann mehrfach eingebunden werden


S e i t e 106 | 142


Abbildung 96 Newsteaser 3er in 1280



S e i t e 107 | 142



04.19.5 Next-Level-Teaser

Next-Level-Teaser sind eine Möglichkeit die Unterseiten der aktuellen Seite anzuteasern. Sie

können optional eingesetzt werden, um der nächsten Ebene hierarchisch mehr Gewicht zu

geben als durch die normale Navigation. Sie eignen sich für Übersichtsseiten, z.B. bei

Studienangeboten.

Verwendung in

Startseite Content-Bereich


S e i t e 108 | 142

Inhaltsseite Content-Bereich


Deutliches Verweisen auf Unterseiten der aktuellen Seite

Enthaltene Elemente

Text

Bild (optional)

Funktionalität

Hover invertiert Farben

Klick auf Teaserelement öffnet hinterlegte Inhaltsseite


Die Einzelelemente dieses Moduls richten sich nach ihrem Inhalt und

werden je nach Inhalt neben- oder untereinander gesetzt, so dass

redaktionell eine einheitliche Zeichenanzahl verwendet werden sollte.

Bsp.: 1.Element enthält viel Text, der über drei Zeilen geht, so wird

das Element größer sein als z.B. das 2., das nur Text über zwei Zeilen

enthält. Im 3-spaltigen Layout kann dies dazu führen, dass das

4.Element nicht unter dem 1.Element landet, sondern unterhalb des

2.

768: Wechsel von 3-spaltig auf 2-spaltig

320: Wechsel von 2-spaltig auf 1-spaltig


Bildformat 16:9

Teaserelemente haben entweder alle ein Bild oder keines, sie können

nicht gemischt werden.

Die Anzeige des Moduls wird redaktionell entschieden, die Befüllung

sollte allerdings vom CMS automatisch erfolgen, um sicherzustellen,

dass das Modul immer alle vorhandenen Unterseiten anzeigt, da

sonst bei Hinzu- oder Wegnahme einer Unterseite die Befüllung der

Next-Level-Teaser überprüft werden muss.

Die Befüllung kann z.B. über Sitemap (Unterseiten der aktuellen Seite)

abgeleitet werden.

Der Text, also der Seitentitel, sollte für alle Unterseiten möglichst

dieselbe Zeichenanzahl aufweisen, so dass die Elemente gleich groß

angezeigt werden, z.B. minimale Zeichenanzahl 30 Zeichen (entspricht


S e i t e 109 | 142

etwa einer Zeile) und maximale Zeichenanzahl 90 Zeichen. Siehe

hierzu auch das Kapitel Seitentitel.


Abbildung 100 Next-Level-Teaser mit Bild in 1280

Abbildung 101 Next-Level-Teaser ohne Bild in 1280


S e i t e 110 | 142

Abbildung 102 Next-Level-Teaser in 768 (2-spaltig) und 320 (einspaltig)

04.19.6 Kontextteaser

Wichtige Seiten oder Portale können mit diesem Element prominent in der Marginalspalte

angeteasert werden.

Verwendung in





S e i t e 111 | 142

Es können bestimmte Seiten, Themen, Inhalte angeteasert und

verlinkt werden.

Elemente

Bild: empfohlenes Bildformat 3:2; andere Formate jedoch möglich

Überschrift

Text

Link (das gesamte Element ist verlinkt)

Funktionalität

Klick auf das Element führt zu verlinkter Seite


Bei Viewports kleiner als 1280 wird aus der zweispaltigen Darstellung

eine einspaltige


Empfohlenes Bildformat 3:2

Andere Formate möglich

Headline und Teasertext theoretisch unbegrenzt, sollte aber kurz und

prägnant gewählt werden

Analog zu diesen Teasern gehören auch:

04.19.7 Teaser zweispaltig

Allgemeine Beschreibung

Verwendung in




Platzsparende Darstellung von Teasern

Elemente

Bild mit Text

Bild


S e i t e 112 | 142

Überschrift

Text


Nur Text

Überschrift

Text


Funktionalität

Klick öffnet verlinkte Seite


Bei Viewports kleiner als 1024 wird aus der zweispaltigen Darstellung

eine einspaltige


Headline max. 40 Zeichen in 2 Zeilen, besser 20 in einer Zeile

Wortlänge von ca. 20 zeichen nicht überschreiten

Teasertext theoretisch unbegrenzt, jedoch sollte eine Zeichenanzahl

von 50 nicht (oder zumindest nur im Ausnahmefall) überschritten

werden.

Bildformat 16:9, 3:2 oder 1:1, kein Hochformat

keine zu langen Begriffe in Überschriften verwenden, sie könnten in

kleinen Breakpoints teilweise abgeschnitten werden.


S e i t e 113 | 142


Abbildung 103 Kontextteaser 1280 (ein- oder zweispaltig), 768 und 320 (einspaltig)

04.19.8 Teaser-Linkliste

Verwendung in






Wird verwendet um bestimmte Themen-(bereiche) zu verlinken, wird

beispielsweise auch verwendet, um "weitere Informationen“ und

„Direktzugriff“ zu verlinken


S e i t e 114 | 142

Elemente

Überschrift

Teaser mit

Bild (optional); feste Größe 50px x 50px

Text

Funktionalität

Klick auf Teaser öffnet verlinkte Seite


1280: kann im Inhaltsbereich 2-spaltig verwendet werden, in der

Marginalspalte 1-spaltig

768: kann im Inhaltsbereich 1- oder 2-spaltig verwendet werden, in

der Marginalspalte 1-spaltig

320: 1-spaltig


Teaser können theoretisch beliebig lang sein, es wird aber eine kurze

und prägnante Headline empfohlen. Die maximale Wortlänge beträgt

ca. 30-35 Zeichen, da Wörter sonst abgeschnitten werden könnten.


Abbildung 104 Teaser Linkliste 2-spaltig im Content-Bereich, einspaltig Marginalspalte (Bild optional)


S e i t e 115 | 142

Abbildung 105 Teaser Linkliste in 768

04.19.9 Veranstaltungs-Teaser

Der Veranstaltungsteaser ist ein Marginalspaltenelement, womit wichtige Termine kurz

angeteasert werden können.

Verwendung in




Übersichtliches Bekanntmachen von Veranstaltungen

Elemente

Headline „Veranstaltungen“ (nicht editierbar)

Datum (Tag, Monat als Abk.)

Ein Farbbalken visualisiert, welche Fakultät die Veranstaltung

veranstaltet

(default: UzK-Blau)

Titel

Untertitel

Button „weitere Veranstaltungen“ (nicht editierbar)


S e i t e 116 | 142

Funktionalität

Ein Klick auf einen Veranstaltungsteaser öffnet eine Seite, die

Informationen zur entsprechenden Veranstaltung enthält.

Klick auf Button „weitere Veranstaltungen“ öffnet eine

Übersichtsseite mit Veranstaltungen


Bleibt 100% der Marginalspalte


Titel und Untertitel jeweils max. ca. 25 Zeichen Wortlänge


Abbildung 106 Veranstaltungsliste Marginalspalte mit Fakultätsfarben

04.20 Text-Block

Verwendung in




Darstellung von Textinhalten

Elemente (alle optional)

Überschriften

H1: Darstellung des zentralen Seitentitels/Inhaltsüberschrift

H2: Headline von eingebundenen Modulen im Contentbereich

H3: nächste Textüberschrift nach H1


S e i t e 117 | 142

H4, H5, H6 weitere Gliederung von Texten

Text(blöcke)

Hervorhebung (fett oder Kursiv)

Link

Hochgestellter Text

Tiefgestellter Text

Bilder ( Bild)

Bilderslider (s. Bilderslider)

Listen ( Listen / Aufzählungen)

Dachzeile

Teasertext

Zitat im Text (nicht zu verwecheln mit Modul „Zitat“)

Downloadliste ( Downloadliste)

Texte mit Rahmen / Hintergrundfarbe / Einrückung


Headlines können mehrzeilig sein; wir raten jedoch dazu, Headlines

maximal zweizeilig werden zu lassen


Abbildung 107 Textblock mit Headlines, Dachzeile, Teasertext, Fließtext und Auszeichnungen


S e i t e 118 | 142

04.20.1 Text mit Rahmen / Hintergrundfarbe / Einrückung

Das Modul „Text mit Rahmen“ gibt es in zwei Varianten.

Variante 1) Grau hinterlegter Kasten (wird nicht mitgedruckt)

Variante 2) Rahmen

Verwendung in




Hervorhebung von Inhalten

Elemente

Text (mit Hervorhebungen, Links etc.)

Background oder Rahmen


Textumbruch (Modul wird höher)


Text kann wie in allen Textmodulen mit allen im WYSIWYG-Editor

bereitgestellten Möglichkeiten formatiert werden.


Abbildung 108 Text mit Rahmen und Hintergrundfarbe


S e i t e 119 | 142

04.20.2 Aufzählungen und Auflistungen

Aufzählungen und Listen dienen der Gliederung innerhalb eines Textes. Bei Aufzählungen

handelt es sich um „geordnete Listen“ bei Auflistungen oder Listen um „ungeordnete

Listen“.

Sie können bis zu sechs Ebenen enthalten, die jeweils 30 Pixel eingerückt werden.

geordnete Listen:

Erste Ebene : 1. / 2. / 3.

Zweite Ebene: A. / B. / C.

Dritte Ebene bis x Ebenen: a. / b. / c.

Ungeordnete Listen:

■ Erste Ebene: Gefülltes Quadrat (square)

● Zweite Ebene: Gefüllter Kreis (bullet)

○ Dritte Ebene bis x Ebenen: Nicht gefüllter Kreis (circle)

Ein Mix dieser beiden Listentypen ist in der Darstellung möglich. Die Darstellung der

Listenart (z.B. ungeordnet) beginnt immer mit der 1.Ebenen-Darstellung, also z.B. mit

gefüllten Quadraten, egal auf welcher Ebene die vorige Listenart (in dem Fall geordnete

Liste) unterbrochen wurde. Die Listenart-Darstellung der unterbrochenen Liste setzt sich

entsprechend für die Ebene fort, s.u. die Screenshots.

Optional gibt es die Möglichkeit Textbausteine mit der Farbe UzK Heller Fond zu hinterlegen.

Diese Formatierung erfolgt i.d.R. über ein Texteditor-Modul, s. hierzu auch s. Text-Block.

Verwendung in




Visuelles Ordnen von Informationen als Listen

Elemente

Text mit Aufzählungen und Links

Farbiger Hintergrund (UzK Heller Fond)


Normaler Textumbruch in kleineren Breakpoints, Einrückung bleibt,

was bei sehr tiefen Ebenen zu vermehrten Umbrüchen führt



S e i t e 120 | 142

Bei vielen Ebenen kann es in kleinen Breakpoints zu unschönen

Darstellungen kommen. Deshalb die Anzahl der Ebenen möglichst

gering halten.

Zur Darstellung von Menüs wie z.B. einer Sitemap bitte das dafür

vorgesehene Modul verwenden (s. Sitemap).


Abbildung 109 Ungeordnete Liste mit Einrückung und Hintergrund sowie einer Unterbrechung durch eine geordnete Liste


S e i t e 121 | 142

Abbildung 110 Geordnete Liste mit Unterbrechung durch eine ungeordnete Liste

04.20.3 Definitionslisten

Eine Definitionsliste ist quasi eine einfache Auflistung ohne vorangestellte Punkte und

Einrückungen.

Verwendung in




Visuelles Ordnen von Informationen als Liste

Elemente

Gefetteter Text als Überschrift pro Listenelement (optional als Link)

Standardtext pro Listenelement mit detaillierten Informationen


Diese Auflistung eignet sich nicht für mehrstufige Aufzählungen.

Die Detailinformationen pro Listenelement sollten überschaubar

bleiben, damit die Liste als solches noch erkennbar ist, z.B. in der

Mobileansicht nicht mehr als vier Zeilen einnehmen.


S e i t e 122 | 142


Abbildung 111 Definitionslisten

04.21 Trenner

Der Trenner ist ein Modul zur optischen Abgrenzung verschiedener Inhalte.

Verwendung in






Wird zwischen zwei Inhaltsmodulen eingefügt um sie optisch

voneinander abzugrenzen

Elemente

Linie


Möglichst nur sparsam zur Abgrenzung verschiedener Bereiche

einsetzen. Die einzelnen Module bilden optische Einheiten und

müssen nicht unbedingt extra abgegrenzt werden.


Abbildung 112 Trenner

04.22 Video

Das Video-Embed-Modul stellt Youtube-Videos auf der Website dar.


S e i t e 123 | 142

Verwendung in




Einbindung von Videos

Elemente

Youtube-Embed

Unterschrift mit Hervorhebung und Link

Video (iframe)

Filmbeschreibung analog zu Bildbeschreibung

Funktionalität

Funktionen (Play, Pause, Link zu Youtube) werden von Youtube

vorgegeben


Normale Skalierung auf 100% Content-Breite


Alle Videos sollten durch die Redaktion über die dafür vorgesehene

Domain //www.youtube-nocookie.com geladen werden, um das

Setzen von Cookies durch Youtube zu verhindern.



S e i t e 124 | 142

04.23 Zitat

Das Zitat-Modul ermöglicht das Herausstellen wichtiger Aussagen in einem Text.

Verwendung in




Zitate von Personen besonders hervorheben

Elemente

Bild; feste Größe (min. 155x155 px)

Zitat

Person und Funktion

Funktionalität

Keine Funktion, nur Anzeige



S e i t e 125 | 142

320: Zitat rutscht nach oben, Bild und Person nach unten


Nur einsetzen, wenn Bild vorhanden


Abbildung 113 Zitat Contentbereich 1280

Abbildung 114 Zitat Contentbereich 768 und mit anderer Anordnung in 320


S e i t e 126 | 142

05 Magazin-Module

Allgemein gilt, dass das Layout des UzK-Magazins ein eigenständiger Entwurf auf Basis des

UzK-Layouts ist. Es werden Elemente wie Schriften und Farben wiederverwendet, die jedoch

in eigenen und dem Magazin vorbehaltenen Modulen zu finden sind.

05.1 Magazin-Startseite

Das Magazin der UzK dient als losgelöste Newsplattform der Universität zu Köln. Daher

kommt hier ein anderes Layout zum Einsatz, welches aber die Zugehörigkeit zur UzK durch

Schriften und Farbgebung wiederspiegelt.

Ähnlich wie auf den UzK-Seiten wir der Nutzer von Header und Mainslider abgeholt. Diese

basieren auf den UzK-Entwürfen, sind aber leicht abgewandelt. So verzichtet man hier auf

eine Navigation zugunsten einer Suchfunktion. Der Mainslider unterscheidet sich in einer

abgewandelten Textgestaltung.

Darunter folgen sogenannte Teaser. Sie leiten auf einzelne Artikel weiter, können durch den

Einsatz von Bildern und der daraus resultierenden Teasergröße in ihrer Gewichtung

unterschieden werden.

05.1.1 Magazin-Main-Slider

Der Main-Slider dient demselben Zweck wie auf der UzK-Home (s. Main-Slider), dem

zentralen Transport von wichtigen und aktuellen Informationen und von Markenbotschaften

Verwendung in

Startseite


Auffälliger Transport von Informationen und Botschaften

Elemente

Bild

Dachzeile, Headline,Teasertext

Navigationspfeile

Paginationspunkte

Funktionalität

Klick auf Textelemente öffnet hinterlegte Seite

Klick auf Pfeile oder Paginationspunkte navigiert zwischen den Slides

Auf Touch-Devices navigiert man per Swipe durch die Slides


S e i t e 127 | 142


Unter 768 entfallen die Navigationspfeile (Touch-Swipe)

320: Textelemente rutschen unter das Bild

Paginationspunkte nach oben rechts


Bildformat 12:5

Nur geeignetes Bildmaterial verwenden (ausreichende Auflösung,

qualitativ hochwertige Bilder)


Abbildung 115 Mainslider Magazin

05.1.2 Magazin Startseitenteaser

Die Startseitenteaser dienen als Navigation durch das Magazin. Sie teasern Artikel an.

Verwendung in

Startseite


Anteasern und Weiternavigieren von einzelnen Artikeln

Sie können als große Teaser (quer: mit Bild, 66% Breite oder hoch: mit

Bild 33% Breite) oder kleine Teaser (ohne Bild, 33% Breite) benutzt

werden

Elemente


S e i t e 128 | 142

Bild (optional)

Kategorie, Headline,Teasertext

Funktionalität

Hover invertiert Farben des Textbereichs

Klick öffnet verlinkten Artikel


Unter 768 Wechsel auf einspaltiges Layout, nur noch hochformatige

Bild-Teaser


Bildformat 3:2

Nicht zu lange Begriffe wählen (max. ca. 35 Zeichen), da diese aus den

Teaserelementen hinausragen können

Kurze Kategorientitel wählen


Abbildung 116 Magazin Startseitenteaser mit und ohne Bild in 1280


S e i t e 129 | 142

Abbildung 117 Magazin Startseitenteaser in 768 und 320

05.2 Magazin-Detailseite

Die Magazin-Detailseite funktioniert als Artikelseite, die genauso funktioniert wie eine

Inhaltsseite im normalen UzK-Layout mit kleinen Unterschieden.

Die Dachzeile entfällt zu Gunsten der Kategorien-Zeile

Am Ende des Artikels befindet sich ein Link „zur Startseite des

Magazins“

Es können nur die Text- und Bildmodule sowie das Autor-Social-

Sharing-Modul benutzt werden.

In der Marginalspalte befindet sich der spezielle Magazin Marginalspaltenteaser.

05.2.1 Magazin Marginalspaltenteaser

Dies ist ein Teasermodul, das ähnliche und interessante Artikel des Magazins anteasert.

Verwendung in

Magazin Detailseite Marginalspalte


Bewerben von anderen und möglicherweise interessanten anderen

Artikeln

Elemente

Bild (optional)


S e i t e 130 | 142

Kategorie, Headline

Funktionalität



Unter 1024 rutschen Teaser nach unten unter den Artikel

(zweispaltige Anordnung)

Unter 768 einspaltige Anordnung


Kategorientitel nicht zu lang wählen (ca. 30-35 Zeichen)


Abbildung 118 Magazin Detailseite mit Marginalspaltenteaser in 1280


S e i t e 131 | 142

Abbildung 119 Magazin Detailseite mit Marginalspaltenteasern unter Content-Bereich

05.3 Magazin-Suchergebnisseite

Nach einer Suche auf der Magazinstartseite werden hier Suchergebnisse angezeigt. Sie

werden in Teaserelementen dargestellt, die durch eine Filterung (s. unten) verfeinert

werden können.

Am unteren Ende der Seite befindet sich eine Pagination für große Listen (s. Pagination)

05.3.1 Magazin-Suchergebnisfilter

Hier können Suchergebnisse verfeinert werden

Verwendung in

Magazin Suchergebnisseite


Verfeinern und Filtern von Suchergebnissen

Elemente

Headline und Angabe der gefundene Treffer


S e i t e 132 | 142

Dropdowns für Kategorien, Jahreszahl und Monat

Filtern-Button

Funktionalität

Klick auf Dropdown öffnet mögliche Kriterien, Klick auf diese wählt sie

aus

Klick auf Filtern-Button filtert die Suchergebnisliste


Unter 768 rutschen die Dropdowns in ein Aufklappmenü


Abbildung 120 Magazin Suche und Ergebnisfilter in 1280



05.3.2 Magazin Suchergebnisteaser

Hier werden die einzelnen Suchergebnisse angezeigt.

Verwendung in

Magazin Suchergebnisseite


S e i t e 133 | 142


Anteasern und Darstellen von Suchergebnissen

Elemente

Bild (optional)

Kategorie, Headline und Teasertext

Funktionalität

Hover auf Teaserelement invertiert Farben



In kleineren Viewports verkleinern sich die Bilder, Layout bleibt gleich


Bildformat 3:2


Abbildung 123 Magazin Suchergebnisteaser in 1280



S e i t e 134 | 142



S e i t e 135 | 142

ANHANG

A Glossar

Buchstabennavigation

Siehe Kapitel Alphabetische Suchnavigation

Beschreibt die Gliederung und Verlinkung langer Listen über einzelne Buchstaben

und Zahlen. Klick springt an die entsprechende Stelle der Liste.

Column Drop (s. Kap. Raster, Responsive Verhalten, Column Drop)

Beschreibt die Neuanordnung von Inhaltsspalten in Mobile-Ansichten. Die

Marginalspalte ist nicht mehr rechts angeordnet, sondern rutscht unter den

Inhaltsbereich.

Hamburger-Menü (s. Kap. Mobile Navigation – Hamburger-Menü)

Ein Hamburger-Menü ist ein ein Off-Canvas-Menü (ausserhalb des sichtbaren

Bereichs), welches auf Knopfdruck mittels > Overlay eingeblendet wird.

Üblicherweise besteht das Icon, welches solch ein Menü einblendet, aus drei

horizontalen Strichen, die an einen Hamburger erinnern.

Hauptnavigation (s. Kap. Hauptnavigationsleiste)

Die Hauptnavigation beschreibt die wichtigste navigationsebene einer Website.

Üblicherweise wird sie horizontal oben auf der Seite angezeigt und besteht aus

den wichtigsten Navigationspunkten.

Hover

Auch als Mouseover bekannt. Beschreibt den Zustand eines Buttons beim

Überfahren mit der Maus.

Overlay (s. Kap. Mega-Flyout und Kap. Kap. Mobile Navigation – Hamburger-Menü)

Ein Overlay beschreibt ein Element, das sich über die aktuell angezeigte Seite legt.

Es verdeckt dann den Inhalt und kann durch einen Close-Button wieder

geschlossen werden.

Der eventuell sichtbare Restbereich der Seite wird ausgegraut und ist nur noch

schemenhaft zu erkennen.


S e i t e 136 | 142

B Vorlage für Instituts-/Kooperationslogo

Für die im Header untergebrachten Logos gibt es eine Photoshop-Vorlage. Die Bilddateien

müssen eine Größe von 200 x 200 Pixeln haben und als transparente PNGs bereitgestellt

werden. Dieses quadratische Format entspricht dem Logo-Bereich in den Mobile-Ansichten.

In höheren Viewports werden die Logos vergrößert und laufen oben und unten aus dem

vorgesehenen Bereich heraus (deshalb transparenter Hintergrund). Um zu verhindern, dass

auch die Logos an sich aus dem Bereich herauslaufen, muss das Logo im vorgesehenen

Bereich in der Mitte untergebracht werden.

Für ein Kooperationslogo muss die entsprechende Textebene im PSD eingeblendet werden.


S e i t e 137 | 142

C Icon-Liste

Auf den Seiten der UzK benutzte Icons: (siehe 2.2.8. Icons)


S e i t e 138 | 142

D Fav-Icon

Es gibt nur ein Fav-Icon für alle UzK-Seiten. Auf eine farbliche Einfärbung pro Fakultät wurde

zu Gunsten der besseren Erkennbarkeit verzichtet.


S e i t e 139 | 142

ABBILDUNGS- UND TABELLENVERZEICHNIS

Abbildung 1 UzK-Home-Header in 1280 _________________________________________ 27

Abbildung 2 Uzk-Home-Header in 768 __________________________________________ 27

Abbildung 3 UzK-Home-Header in 320 __________________________________________ 27

Abbildung 4Magazin-Header in 1280 ___________________________________________ 28

Abbildung 5 Magazin-Header in 768 ____________________________________________ 28

Abbildung 6 Magazin-Header in 320 ____________________________________________ 28

Abbildung 7 Header International in 1280 _______________________________________ 28

Abbildung 8 Header International in 768 ________________________________________ 28

Abbildung 9 Header International in 320 ________________________________________ 28

Abbildung 10 Header Unisport in 1280 __________________________________________ 28

Abbildung 11 Header Unisport in 768 ___________________________________________ 28

Abbildung 12 Header Unisport in 320 ___________________________________________ 29

Abbildung 13 Sticky-Header in 1280 ____________________________________________ 30

Abbildung 14 Sticky-Header von Unilauf in 1280 __________________________________ 30

Abbildung 15 Sticky-Header in 768 _____________________________________________ 30

Abbildung 16 Sticky-Header von Unilauf in 768 ___________________________________ 30

Abbildung 17 Sticky-Header in 320 _____________________________________________ 31

Abbildung 18 Sticky-Header von Unilauf in 320 ___________________________________ 31

Abbildung 19 Zielgruppen-Header in 1280 _______________________________________ 33

Abbildung 20 Zielgruppen-Header in 768 ________________________________________ 33

Abbildung 21 Zielgruppen-Header in 320 ________________________________________ 33

Abbildung 22 Header Medizinische Fakultät in 1280 _______________________________ 33

Abbildung 23 Header Medizinische Fakultät in 768 ________________________________ 34

Abbildung 24 Header Medizinische Fakultät in 320 ________________________________ 34

Abbildung 25 Fakultäts-Header mit Institutslogo __________________________________ 34

Abbildung 26 Microsite-Header UniFit __________________________________________ 35

Abbildung 27 Microsite-Sticky-Header UniFit _____________________________________ 35

Abbildung 28 Footer 1280 px mit geschlossenem portalspezifischem Bereich ___________ 39

Abbildung 29 Footer 1280 px mit geöffnetem portalspezifischem Bereich ______________ 39

Abbildung 30 Footer UniSport ________________________________________________ 39

Abbildung 31 Hauptnavigationsleiste in 1280 ____________________________________ 41

Abbildung 32 Hauptnavigationsleiste in 768 _____________________________________ 42

Abbildung 33 Hauptnavigation in 320 hinter Hamburger-Icon versteckt _______________ 42

Abbildung 34 Marginalspalten Subemü in Viewport 1280 und 320 (inkl. aufgeklappter

Collapse-Sidebar und Kooperationslogo) ________________________________________ 46

Abbildung 35 Breadcrumb in 1280px mit Flyout-Buttons ___________________________ 48

Abbildung 36 Breadcrumb in 1280px mit Flyout-Buttons und geöffnetem Flyout ________ 48

Abbildung 37 Breadcrumb in 768px ohne Flyout-Buttons ___________________________ 48

Abbildung 38 Abbildung 33 Breadcrumb in 768px ohne Flyout-Buttons ________________ 48

Abbildung 39 Navigation eingeklappt hinter Hamburger-Icon ________________________ 50

Abbildung 40 Mobile-Navigation Overlay ________________________________________ 51


S e i t e 140 | 142

Abbildung 41 Adressblöcke in 1280 Contentbereich mit und ohne Bild ________________ 53

Abbildung 42 Adressblöcke Marginalspalte ohne Bilder ____________________________ 53

Abbildung 43 Akkordeon geschlossen __________________________________________ 56

Abbildung 44 Akkordeon geöffnet _____________________________________________ 56

Abbildung 45 Audio-Modul in 1280 bei 100% Content-Bereich _______________________ 58

Abbildung 46Audio-Modul in 1280 bei 50% Content-Bereich ________________________ 58

Abbildung 47 Autor-Social-Sharing in Breakpoint 1280 – verkleinerte Darstellung ________ 60

Abbildung 48 Autor-Social-Sharing im Breakpoint 768 _____________________________ 60

Abbildung 49 Autor-Social-Sharing im Breakpoint 320 _____________________________ 60

Abbildung 50 Bildmodul in 480 px mit und ohne Bildunterschrift und Lightbox-Button (weiss:

hover) ___________________________________________________________________ 63

Abbildung 51 Bildmodul in 50% mit Bildunterschrift und Lightbox-Button im Text _______ 63

Abbildung 52 Kopfbild _______________________________________________________ 64

Abbildung 53 Bilderslider in 1280px in Contentbereich und Marginalspalte _____________ 65

Abbildung 54 Download-Liste _________________________________________________ 66

Abbildung 55 Besipielhafte Druckansicht der Textblockseite _________________________ 68

Abbildung 56 Formularelement 2-spaltig (1280_Content-Bereich) und 1-spaltig (Mobile) _ 70

Abbildung 57 Kalender Aktueller Tag in Monatsansicht 1280 Content und 320 __________ 73

Abbildung 58 Aktueller Tag in Monatsansicht 768 _________________________________ 74

Abbildung 59 Tagesansicht in 1280 _____________________________________________ 74

Abbildung 60 Wochenansicht in 1280 __________________________________________ 75

Abbildung 61 Jahresansicht in 1280 ____________________________________________ 75

Abbildung 62 Alphabetische Suchnavigation 1280 _________________________________ 77

Abbildung 63 Alphabetische Suchnavigation 768 __________________________________ 77

Abbildung 64 Alphabetische Suchnavigation 320 __________________________________ 77

Abbildung 65 Newsliste in 1280 _______________________________________________ 79

Abbildung 66 Newsliste in 768 und 320 _________________________________________ 80

Abbildung 67 Suchfeld und Filter-Dropdowns in 1280 ______________________________ 81

Abbildung 68 Suchfeld und Filter-Dropdowns in 768 _______________________________ 81

Abbildung 69 Suchfeld und Filter-Dropdown in 320 ________________________________ 82

Abbildung 70 Pagination in 1280 ______________________________________________ 82

Abbildung 71 Pagination in 768 _______________________________________________ 83

Abbildung 72 Pagination in 320 _______________________________________________ 83

Abbildung 73 Mainslider UzK-Home in 1280, Badge links, Schnittkanten für Mobile-Ansicht 85

Abbildung 74 Mainslider UzK-Home in 768, Badge wird zu Kasten, Schnittkanten für Mobile-

Ansicht ___________________________________________________________________ 85

Abbildung 75Mainslider UzK-Home 320, Badge unter Bild __________________________ 85

Abbildung 76 Mainslider UzK-Home, Badge mitte links _____________________________ 86

Abbildung 77 Mainslider UzK-Home, Badge rechts ________________________________ 86

Abbildung 78 Mainslider Fakultäts- oder Themenstartseiten ________________________ 86

Abbildung 79 Mainslider Magazin ______________________________________________ 87

Abbildung 80 Mainslider Instituts- oder Inhaltsseiten (75%) _________________________ 87

Abbildung 81 Notfallzeile 1280 ________________________________________________ 88


S e i t e 141 | 142

Abbildung 82 Servicebox Marginalspalte 1280 oder Mobile (Darstellung gleich) _________ 89

Abbildung 83 Sitemap Darstellung für alle Breakpoints _____________________________ 91

Abbildung 84 Tabbox in 1280 linker Tab _________________________________________ 93

Abbildung 85 Tabbox in 1280 rechter Tab _______________________________________ 93

Abbildung 86 Tabbox in 768 __________________________________________________ 94

Abbildung 87 Tabbox in 320 rechter und linker Tab in Akkordeon-Ansicht (oben und unten)

_________________________________________________________________________ 94

Abbildung 88 Beispieltabelle in 1280 ___________________________________________ 96

Abbildung 89 Beispieltabelle in Viewport 1280 mit allen möglichen Formatierungen

(Kopfzeile oben und links, Trennlinien und Hintergundfarbe) ________________________ 97

Abbildung 90 Beispieltabellen größer oder gleich 560 und 320 mit Responsive-

Veränderungen. Pfeile links und rechts an der Tabelle weisen auf die Spalten hin, die aktuell

nicht im Sichtfeld zu sehen sind. Der Nutzer wird durch die Pfeile aufgefordert den

verborgenen Inhalt mit Klick auf die Pfeile sichtbar zu machen. ______________________ 98

Abbildung 91 Datelineteaser 1280 3-spaltig _____________________________________ 100

Abbildung 92 Datelineteaser 768 (2-spaltig) und 320 (einspaltig) ____________________ 100

Abbildung 93 Exzellenzteaser 1280 (3-spaltig), 768 (2-spaltig), 320 (1-spaltig) __________ 102

Abbildung 94 Multiteaser in 1280 mit Bild ______________________________________ 104

Abbildung 95 Multiteaser in 1280 ohne Topic-Bild und Multiteaser in 320 ____________ 104

Abbildung 96 Newsteaser 3er in 1280 _________________________________________ 106

Abbildung 97 Newsteaser 6er in 1280 _________________________________________ 106

Abbildung 98 Newsteaser 3er in 768 __________________________________________ 107

Abbildung 99 Newsteaser 1er in 320 __________________________________________ 107

Abbildung 100 Next-Level-Teaser mit Bild in 1280 ________________________________ 109

Abbildung 101 Next-Level-Teaser ohne Bild in 1280 ______________________________ 109

Abbildung 102 Next-Level-Teaser in 768 (2-spaltig) und 320 (einspaltig) ______________ 110

Abbildung 103 Kontextteaser 1280 (ein- oder zweispaltig), 768 und 320 (einspaltig) ____ 113

Abbildung 104 Teaser Linkliste 2-spaltig im Content-Bereich, einspaltig Marginalspalte (Bild

optional) ________________________________________________________________ 114

Abbildung 105 Teaser Linkliste in 768 __________________________________________ 115

Abbildung 106 Veranstaltungsliste Marginalspalte mit Fakultätsfarben _______________ 116

Abbildung 107 Textblock mit Headlines, Dachzeile, Teasertext, Fließtext und Auszeichnungen

________________________________________________________________________ 117

Abbildung 108 Text mit Rahmen und Hintergrundfarbe ___________________________ 118

Abbildung 109 Ungeordnete Liste mit Einrückung und Hintergrund sowie einer

Unterbrechung durch eine geordnete Liste _____________________________________ 120

Abbildung 110 Geordnete Liste mit Unterbrechung durch eine ungeordnete Liste ______ 121

Abbildung 111 Definitionslisten ______________________________________________ 122

Abbildung 112 Trenner _____________________________________________________ 122

Abbildung 113 Zitat Contentbereich 1280 ______________________________________ 125

Abbildung 114 Zitat Contentbereich 768 und mit anderer Anordnung in 320 __________ 125

Abbildung 115 Mainslider Magazin ____________________________________________ 127

Abbildung 116 Magazin Startseitenteaser mit und ohne Bild in 1280 _________________ 128


S e i t e 142 | 142

Abbildung 117 Magazin Startseitenteaser in 768 und 320 __________________________ 129

Abbildung 118 Magazin Detailseite mit Marginalspaltenteaser in 1280 _______________ 130

Abbildung 119 Magazin Detailseite mit Marginalspaltenteasern unter Content-Bereich __ 131

Abbildung 120 Magazin Suche und Ergebnisfilter in 1280 __________________________ 132

Abbildung 121 Magazin Suche und Ergebnisfilter in 768 ___________________________ 132

Abbildung 122 Magazin Suche und Ergebnisfilter in 320 ___________________________ 132

Abbildung 123 Magazin Suchergebnisteaser in 1280 ______________________________ 133

Abbildung 124 Magazin Suchergebnisteaser in 768 _______________________________ 133

Abbildung 125 Magazin Suchergebnisteaser in 320 _______________________________ 134

Tabelle 1 Siegel ____________________________________________________________ 14

Tabelle 2 Farbschema _______________________________________________________ 16

Documents

Redaktions- und Gestaltungsleitfaden Webdesign … · Anpassung des Kapitels für Next-Level-Teaser, s. ... 05.1 Magazin-Startseite ... Mit dem vorliegenden Layout wird den von der