Die Webseite der Universität Münster besteht aus vier Elementen: Dem Kopfbereich, dem Inhaltsbereich, dem Funktionsbereich und dem Fußbereich
Mittels eines modularen Systems können Seiteninhalte im Inhaltsbereich laut dem unten abgebildeten Schema ein- oder zweispaltig zusammengestellt werden. Die Höhe der Seite wird durch die Anzahl der eingesetzten Module bestimmt. Der Kopf- und Fußbereich des Webauftritts bleibt immer identisch und gewährleistet die Wiedererkennung. Der so genannte Funktionsbereich befindet sich im Desktop-Design rechts; in der Smartphone-Ansicht oder bei hochkant gestellten Tablets rutscht er unter den Inhaltsbereich. Der Funktionsbereich ist für die Navigation der 4. und 5. Ebene vorgesehen. Außerdem können dort Anwendungen und Links, die den Inhaltsbereich ergänzen, prominent platziert werden. Untenstehend finden Sie weitere Informationen zu den einzelnen Bereichen.
Bitte beachten Sie:
Die Maße und Abstände sind unveränderlich. Damit das Raster flexibel ist und intakt bleibt, sollten neben Texten, die sich automatisch anpassen, auch eingebundene Medien wie Bilder oder Videos anpassungsfähig sein. Je nach Endgerät werden Elemente in der Bildschirmausgabe nebeneinander oder untereinander angeordnet. Bilder müssen mit dem Content-Management-System Imperia nur einmalig in großer Auflösung hochgeladen werden, das System produziert automatisch die verschiedenen Bildgrößen. Wenn Sie nicht mit dem Content-Management-System Imperia arbeiten, wenden Sie sich bitte an das Team von Web und Design.
Der Kopfbereich enthält einen definierten Logobereich, die Hauptnavigation mit einblendbarer Subnavigation, das Suchfeld, die Zielgruppennavigation und auf gleicher Höhe die Sprachwechseloption. Der Hintergrund ist immer weiß.
Logos können an drei verschiedenen Stellen platziert werden:
Logo 1
Links oben wird ausschließlich das Logo der Universität Münster (Wort- und Bildmarke) positioniert. Diese Positionierung gewährleistet, dass die Universität als Betreiberin der Webseite kenntlich gemacht wird. Auch auf allen Unterseiten und bei externen Anwendungen bleibt das Logo der Uni Münster oben links platziert. In der Webdesign-Variante für Smartphones und hochkant gestellte Tablets wird aufgrund des schmalen Displays die angeschnittene Bildmarke der Uni Münster verwendet.
Logo 2 (Sekundärlogo)
Fachbereiche und Institute positionieren ihre eigene Wort- bzw. Bildmarke rechtsbündig im Kopfbereich. Sie hält Linie mit dem Logo der Universität, sowohl oben (im Logo 3. Balken von oben) als auch unten.
Logo 3 (Tertiär-Logo)
In Ausnahmefällen wird vor dem Sekundärlogo ein weiteres Logo in Form von einer Wort- oder Bildmarke eingebunden (Logo 3). Zur Abgrenzung dient ein grauer Trennstrich zwischen Sekundär- und Tertiär-Logo. Bei kleineren Viewports (Tablet, Smartphone) entfällt dann Logo 2.
Bitte beachten Sie:
Wenn ein Bildmarke verwendet wird, nutzen Sie nach Möglichkeit eine Vektorgrafik im SVG-Format. Nur So sind Skalierbarkeit und Barrierefreiheit gewährleistet. Um Darstellungsprobleme zu vermeiden, wandeln Sie Text in SVG-Grafiken in Kurven um. Falls dies nicht realisierbar ist, verwenden Sie eine PNG-Datei, die gegenüber einer JPEG-Datei den Vorteil hat, einen transparenten Hintergrund zu ermöglichen. Mit einer Wortmarke sind Skalierbarkeit und Barrierefreiheit gewährleistet. Das Seitenverhältnis sollte 1,5:1 (bis max. 2:1) betragen. Die festgelegte Ausgabehöhe für Logos auf den Webseiten der WWU sind 81px in der Desktop-Ansicht und 97px in der mobilen Ansicht (Smartphone und Tablet). Das Logo sollte in diesen Höhenvorgaben visuell gut erfassbar sein (insb. auch eventuelle Schriftzüge). So stellen Sie insgesamt die Erkennbarkeit/Lesbarkeit und auch die Darstellung auf Smartphones sicher.
Fügen Sie in den Dateinamen die Zeichenkette .layout. ein. Aus bibelmuseum.png wird also bibelmuseum.layout.png. Das verbessert das Caching-Verhalten der Seiten und reduziert damit die Ladezeiten.
Suche
Die Suche wird mit einem Lupen-Icon dargestellt und befindet sich oben rechts in Höhe der Hauptnavigation. Fährt man mit dem Cursor über das Lupen-Symbol, erscheint ein graues Eingabefeld, in dem der Suchbegriff eingegeben werden kann. Klickt man auf die Lupe oder das nebenstehende Suchfeld, gelangt man zur Sucheingabe.
Sprachauswahl
Die Sprachauswahl befindet sich im Kopfbereich rechts unterhalb der Suche. Die verschiedenen Sprachen werden als Kürzel (nach ISO 639-1, z. B. "de","en") angeboten und sind beliebig erweiterbar. Getrennt werden sie durch graue Linien. Die jeweils aktive Sprache wird fett dargestellt. In der mobilen Version wandert die Sprachauswahl auf die Höhe der Suche und wird rechtsbündig positioniert. Wird eine Seite in Leichter Sprache angeboten, erscheint ein entsprechendes Piktogramm links neben den Kürzeln für den Sprachwechsel.
Inhaltsbereich
Der Inhaltsbereich schließt sich an den Kopfbereich an. Die Länge wird durch den Inhalt bestimmt. Im Inhaltsbereich werden alle redaktionellen Inhalte angeordnet. Hier ist es möglich, durch Kombination verschiedener Module Informationen individuell zu gestalten. Denkbar sind hier Texte, Tabellen, Bilder, Slideshows, Listen, Zitate und weitere Module. Eine Modulübersicht finden Sie im Imperia-Handbuch.
Schreiben und Layouten fürs Web erfordert gute Übersichtlichkeit, klare Struktur und bewusste Blickführung. Achten Sie bei der Gestaltung Ihrer Inhalte auf kurze Texte, schnörkellose Formulierungen und verwenden Sie Zwischenüberschriften. Aufzählungen lassen sich zudem gut als Listen darstellen. Layouten fürs Web heißt auch, nicht nur für den eigenen Bildschirm und nicht nur für die Darstellung am Desktop zu gestalten, sondern sich bewusst zu machen, dass wir mit fluiden Layouts arbeiten, die je nach Endgerät (zum Beispiel Smartphone) unterschiedlich aussehen.
Der richtige Einsatz der Module und der Strukturelemente wie Überschriften oder Listen sind für die automatisierte Auswertung von Webseiten durch Suchmaschinen oder für das an der inhaltlichen Struktur eines Textes orientierte Vorlesen von Seiten durch Screenreader notwendig. Sie dürfen deshalb nur als Strukturelemente und nicht als Gestaltungselemente verwendet werden. Damit haben sie in der Regel allerdings auch einen gestalterischen Wert, denn sie erleichtern es auch Sehenden, sich zu orientieren. Es ist daher wichtig, Strukturelemente und Module nur ihrer Bestimmung entsprechend zu verwenden.
Funktionsbereich
Der Funktionsbereich übernimmt zwei Aufgaben: Zum einen bietet er Platz für die Navigation der 3., 4. und 5. Ebene, falls diese vorhanden sind. Zum anderen werden hier bestimmte Anwendungen und Links prominent präsentiert. Im Desktop-Design befindet sich der Funktionsbereich rechts. In der Design-Variante für Smartphones rutscht der Funktionsbereich unter den Inhaltsbereich. Lediglich die Navigation wandert direkt über den Inhaltsbereich.
Navigation
Gibt es Navigationspunkte der 3., und tieferer Ebenen, werden diese im oberen Funktionsbereich angezeigt. Das Erscheinungsbild orientiert sich an der ausfahrbaren Hauptnavigation. Diese Navigation im Funktionsbereich bildet kontextbezogen die Subnavigation der aktuellen Seite ab. Eine Seite der 3. Navigationsebene enthält hier also die Navigationselemente der 4. und 5. Ebene.
Mehr Informationen zum Layout und Aufbau der Navigation
Anwendungen und Links
Der Funktionsbereich eignet sich gut, um dort bestimmte Anwendungen und Links prominent zu platzieren. Es gibt zwei Arten von Anwendungen: solche, die sich innerhalb der Spalte ausklappen können (z. B. Termine oder Top-Links) und mit einem Pfeil-nach-unten-Icon markiert sind, und solche, die mit einem Pfeil-nach-rechts-Icon darauf hinweisen, dass der Besucher eine neue Webseite aufruft. Anwendungen und Links können beim Seitenaufruf ein- oder ausgeklappt sein, dies ist eine redaktionelle Entscheidung.
Der Fußbereich erstreckt sich über die komplette Webseitenbreite und bildet gemeinsam mit dem Kopfbereich einen Rahmen. Der Bereich hat die Hintergrundfarbe dunkelgrau (#3e3e3c / RGB 62,62,60) und enthält die Kontaktdaten der Einrichtung, verlinkte Social Media-Logos der Einrichtung und den Claim der WWU Münster. Der Seitenfuß schließt mit einem weißen Balken ab. Er enthält den Link zur Startseite (Index), den Link zu einer Sitemap, den Impressums-Link, den Link zum Datenschutzhinweis, die Barrierefreiheitserklärung und den Urheberrechtshinweis. Im Sonderlayout "Startseite" können dort auch Top-Links untergebracht werden (Bild unten). Der farbige Balken darüber bildet eine Sprungmarke "nach oben" zum Anfang der Webseite.
