Absender und optional Absenderlogo
Studentinnen der RUB auf dem Campus
Studentinnen der RUB auf dem Campus
Audimax
Audimax der RUB
Das Audimax der RUB bildet den Mittelpunkt des Campus.
Studierenden-Service-Center der RUB
Studierenden-Service-Center der RUB
Förderprogramme für Studierende der RUB
Förderprogramme für Studierende der RUB
Studentin der RUB in der Bibliothek
Studentin der Ruhr Universität Bochum in der Bibliothek
/
 

Standard-Testseite - Das ist der Titel, aus dem sich die Überschrift der Seite und die Url generieren

Das ist ein Einleitungstext. Da der Einleitungstext in der mobilen Ansicht gegebenenfalls das einzig sichtbare Element ist, sollte er inhaltlich alle wichtigen Punkte umfassen, die auf der Seite abgehandelt werden – der Leser springt in der Regel nach wenigen Sekunden ab, wenn er nicht überzeugt ist, auf der richtigen Seite zu sein.

Ganz oben ist ein Bildslider eingefügt, natürlich ist auch ein einzelnes Bild (oder gar keines) möglich.

Überschrift H2 - eine große Themenüberschrift

Das ist normaler Text - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Klick hier

Überschrift H3 -Zwischenüberschriften lockern auf und strukturieren

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Überschrift H4 - und eine Liste von Elementen, die einen Texte strukturieren und leserfreundlicher machen können

  • Zwischenüberschriften
  • Aufzählungen
  • Infokästen
  • Bilder/ Infografiken
  • Zitate
  • knappe Textblöcke

Überschrift H2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

So sieht gefetteter Text aus, weiter unten wird zitiert

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Klug ist jener, der Schweres einfach sagt.

Albert Einstein

Überschrift H3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Infografik
Bitte klicken Sie auf das Bild, um es in einem neuen Fenster in voller Größe anzuzeigen.

Und der Text läuft weiter: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Kontakte einfügen und zentral pflegen

Das Kontaktelement sieht noch nicht ganz aus wie es soll – auch der Mix aus Deutsch und Englisch ist nicht gewollt. Generell aber werden Kontakte zentral gepflegt und aus allen Angaben zu einer Person können die anzuzeigenden Elemente ausgewählt werden, etwa nur Name und Mailadresse.

Meike
Driessen

Dezernat 8: Hochschulkommunikation
Adresse
UV 0/030

Das ist eine ausgeklappte Infobox

Bei jeder Infobox kann das Icon links oben verändert werden, standartmäßig ist das "Informations-i" gesetzt. Die aktuelle Icon-Liste gibt es kann hier angesehen und heruntergeladen werden.

Download Iconliste 9/2019

Diese Icons lassen sich sowohl bei den Infokästen als auch bei den Referenzbereichen (ganz unten auf dieser Seite) einfügen.

Dies ist eine eingeklappte Infobox

Hier können Informationen untergebracht werden, die etwa nur eine ganz spezielle Zielgruppe betreffen – so können alle anderen einfach darüber hinweg lesen.

Verlinkungen und Buttons (Überschrift 4)

Weiterführende Informationen zu einem Thema auf einer anderen Seite werden verlinkt – besonders animiert werden Leser über einen

Button

Bilder

Bei allen Infoboxen lässt sich auch ein Bild einfügen, das dann über dem Text steht. Ein Beispiel dafür unten auf dieser Seite.

Faltbox Download

Artikel als PDF Datei

  • RUB-Web Icons: Liste September 2019
In der Downloadbox lassen sich mehrere Objekte anwählen und herunterladen. Sie ist aus Nutzersicht jedoch etwas aufwändig: Anklicken, herunterladen, Datei öffnen – ohne das Dokument überhaupt gesehen zu haben. Ein Infokasten mit Downloadlinks funktioniert oft vermutlich besser.

Teaser- und Verweisflächen für Standardseiten

Als Verweis lassen sich unter jeden Seite weiterführenden Links setzen. Dies leitet den Nutzer, der ja nicht ständig die Navigation vor Augen hat, und bietet Orientierung über Hinweise wie „Das könnte Sie auch interessieren“ oder „Alle Informationen zum Thema XY“.

Verlinkt und eingebunden werden Seiten über Teaser und Referenzbereiche. Für Teaser werden jeder Seite entsprechende Teaser-Informationen eingegeben.

Teaser-Informationen

  • Titel (Pflicht)
  • Dachzeile (im Studierendenportal immer gesetzt)
  • Teasertext (optional, bei jeder Einbindung editierbar)
  • Teaserbild (optional)
  • Link (nur bei Verweis auf eine externe Seite)

Für den Verweis auf eine externe Seite werden nur die Teaserinformationen und der jeweilige Link benötigt.

Auf Standardseiten gehen die Teaser über den rechten Seitenrand. Aus diesem Grund sollten sie ausschließlich am Ende der Seite genutzt werden.

Beispiele für Teaser ohne Bild

Teaser C - Hier kommt immer ein zusammenfassender Titel hin

RUB-Guides erklären Schülern die wichtigsten Studienthemen.
Studierende aller Fachrichtungen können sich als RUB-Guides...
RUB-Guides zeigen Schülern den Campus der RUB.
Lehrer und Schüler können RUB-Guides einladen oder...

Teaser D - Hier kommt immer ein zusammenfassender Titel hin

RUB-Guides erklären Schülern die wichtigsten Studienthemen.
Hier kann ein Label hin

Teaser E verweist auf Fotostrecken

Als „RUB-Guides“ leisten Studierende der Ruhr-Uni ehrenamtlich Orientierungshilfe für Schüler an den Schulen der Umgebung und vermitteln ihnen ein persönliches Bild von ihrem Studienfach und dem Alltag an der Uni.

Referenzbereiche

Referenzbereiche binden Links direkt ein, ohne auf die Teaserinformationen einer Seite zuzugreifen.

Für eine Referenzierung sind vier Angaben erforderlich:

  • Überschrift
  • Buttontext
  • Bild oder Icon
  • Link oder (RUB-Web-interner) Seitentitel

Referenzbereiche soll es bald auch wahlweise in "kurz" geben. So lassen Sie sich diese im Gegensatz zu Teasern mitten auf der Seite platzieren.

Ein RUB-Guide erzählt einem Schüler über ihr Studium.
Das ist ein Referenzbereich Typ A
Das ist ein Referenzbereich Typ B
Nach oben