Responsives Design: Was ändert sich in der Redaktion?

Das Update der Webauftritte wird im laufenden Betrieb vorbereitet und durchgeführt. Redakteure können ihre Webseiten im CMS wie gewohnt bearbeiten und publizieren. Es lohnt sich in jedem Fall, schon vor dem Update größere Bilder ins CMS zu importieren und sich die Tabellen anzuschauen, die vielleicht abgelöst werden könnten. Nach dem Update können Sie Ihre Webseiten auf verschiedenen Geräten kontrollieren und ggf. Änderungen vornehmen.
Der Zugang zum CMS und die Bedienung im Redaktionssystem bleiben ohne Änderung.

Die folgenden Informationen helfen bei der Orientierung auf Ihren Webseiten nach dem Update.

Alles ausblendenAlles einblenden
Flexible zeilenbasierte Startseiten
Flexible zeilenbasierte Startseiten

Die größte redaktionelle Änderung betrifft den Aufbau der flexiblen Startseiten.

Bisher wurden Elemente, aus denen eine Startseite bestand, in einem "Sammelordner für Inhaltselemente" und mehreren darunterliegenden "Ordnern für Inhaltselemente" gesammelt. Diese Funktion ist nach dem Update nicht mehr vorhanden. Stattdessen werden Inhaltselemente in Startseiten-Ordner verlinkt, und man kann für sie ein flexibles zeilenbasiertes Layout auswählen.

Lesen Sie weiter...

Direktlink
  • Slideshow
    Neu. Inhaltselement der Startseiten mit zeilenbasiertem und Standardlayout

  • Aufmacherliste Karussell
    Neu. Inhaltselement der Startseiten mit zeilenbasiertem Layout

  • Aufmacherliste
    Änderung: Die Darstellungsoptionen "Slideshow" und "Slideshow, Breitbild" werden nicht mehr unterstützt (neue Vorlagen: "Slideshow" und "Aufmacherliste Karussell"). Aufmacherliste mit der Darstellungsoption "Teaserliste" bleibt ohne Änderung und wird als Inhaltselement der Startseiten im Standardlayout unterstützt.

  • RSS-Box
    Änderungen: Neue Darstellungsoption "Vorgestellt", Unterstützung von Publikationslisten und Feeds der zentralen campus.leben-Webseite mit Schlagwörtern.

  • Schlagzeilen
    Neu. Inhaltselement der Startseiten mit zeilenbasiertem Layout

  • Vorgestellt-Box animiert
    Neu. Inhaltselement der Startseiten mit zeilenbasiertem Layout

  • Banner-Text
    Neu. Textbanner für die Startseiten, Fußzeile und rechte Spalte

  • Social Media
    Änderung: Anstelle der Vorlage "Social Media" gibt es eine neue Linkliste "Social Media" im Footer der Webseite. Die Linkliste finden Sie im Startseiten-Ordner unter "Alle bearbeiten" > Feldgruppe: "Erscheinungsbild" > "Links auf Soziale Netzwerke im Footer".

  • Vorgestellt-Box
    Änderung: Das Layout mit drei Elementen wird nicht mehr unterstützt

  • Sammelbox und Verknüpfung
    Änderung: Statt der beiden Vorlagen gibt es nun eine direkte Verlinkung der entsprechenden Seiten in der Linkliste "Inhaltselemente"

Unterstützte Vorlagen für Inhaltselemente der Startseiten (Zeilenlayout):

Unterstützte Vorlagen für Inhaltselemente der Startseiten (Standardlayout):

Unterstützte Vorlagen für Inhaltselemente der rechten Spalte (Standardlayout):

Direktlink

In der horizontalen Navigation werden nicht mehr nur die Startseiten-Ordner angezeigt, sondern alle Seiten mit aktivierter Anzeige in der Navigation.

Die Webseiten, die vor dem Update keine horizontale Navigation hatten, bekommen automatisch eine horizontale Navigation, die bei vielen Navigationspunkten oder bei langen Titeln scrollbar ist. Redaktionelle Anpassungen (Gruppierung der Seiten, Kürzung der Titel, alternative Anzeige in der Service-Navigation, Aktivierung des Inhaltsverzeichnisses) können sich in diesem Fall lohnen.

Direktlink
  • Im Content-Bereich: empfohlen 4.000 Pixel, mind. jedoch 1.400 Pixel (für Retina-Displays mind. 2.800 Pixel).
  • In Slideshows: mind. 900 Pixel (Retina-Displays: mind. 1.800 Pixel). Slideshows in voller Breite: mind. 1.400 Pixel bzw. mind. 2.800 Pixel
  • In Teasern: mind. 500 Pixel (Retina-Displays: mind. 1.000 Pixel).
  • Auf Mitarbeiter/innen-Seiten: mind. 350 Pixel (Retina-Displays: mind. 700 Pixel).
Unterstützte Dateigröße einzelner Bilder: unter 8 MB
Direktlink

Der Titel einer Webseite wird als Hauptüberschrift ausgegeben, optional kann dafür auch das Feld Titel, Langform genutzt werden.

Verwenden Sie die Formatierung Überschrift 1 nicht im Hauptinhalt und weiteren HTML-Feldern, da sie aus Gründen der Barrierefreiheit genau einmal auf einer Webseite genutzt werden soll. Im Responsiven Design können Sie Texte mit den Formatierungen Überschrift 2 und Überschrift 3 sehr gut akzentuieren, da diese mit größerer Schriftgröße als bislang dargestellt werden, vgl. die goldenen Regeln der Textformatierung.

Hinweis: Bei älteren Standardseiten beginnt der Hauptinhalt möglicherweise mit einer Überschrift 1. Um doppelte Überschriften zu vermeiden entfernen Sie die Überschrift selbst bzw. die Formatierung Überschrift 1 im Editor TinyMCE.

Direktlink

Tabellen im Hauptinhalt werden auf mobilen Geräten nicht optimal dargestellt und sollten, wenn möglich, nicht verwendet werden.

Wenn eine Tabelle doch notwendig ist, setzen Sie bitte die Breite der Tabellen auf 100% und geben Sie keine Spaltenbreiten an (s. "Tabelle erstellen und bearbeiten").

Bei ungünstiger Darstellung der Tabellen auf Kleingeräten sollte der Text umformatiert werden.

Direktlink

Im neuen Footer werden bis zu vier Linklisten angezeigt:

  1. Eigene Linkliste (optional)
    Die Links und die Überschrift der Linkliste tragen Sie bitte in der Startseite Ihrer Einrichtung unter
    "Alle bearbeiten" > Feldgruppe "Erscheinungsbild (Teilbaum)" > "Links im Footer" bzw.
    "Alle bearbeiten" > Feldgruppe "Erscheinungsbild (Teilbaum)" > "Titel der Linkliste im Footer" ein.

  2. Linkliste "Service-Navigation"
    In dieser Liste werden die Links der Servicenavigation (Startseite, Kontakt, Impressum, ...) wiederholt.

  3. Linkliste "Soziale Medien" (optional)
    Wenn Ihre Einrichtung eine Social Media Präsenz hat, können Sie diese unter
    "Alle bearbeiten" > Feldgruppe "Erscheinungsbild (Teilbaum)" > "Links auf Soziale Netzwerke im Footer" verlinken.

  4. Linkliste "Diese Seite"
    Hier werden die Links "Drucken", "RSS-Feed abonnieren", "Feedback" und Sprachversionen automatisch angezeigt.

Beispiel: http://www.fu-berlin.de/

Direktlink

Damit Banner-Bilder (Vorlage "Banner-Bild") auf allen Bildschirmen, auch auf Retina-Displays eine passende Größe haben, verwenden Sie bitte Bilder (i.d.R. Logos) in der besten verfügbaren Auflösung. Alternativ steht Ihnen die neue Vorlage "Banner-Text" zur Verfügung, die aus dem Titel und einem Link ein Banner generiert.

Einbindung der Banner in der Fußzeile

  • für die Startseite und alle Unterseiten:
    Ihre Startseite > "Alle bearbeiten" > "Erscheinungsbild (Teilbaum)" > "Banner unterhalb der Navigation"

  • nur für die Startseite:
    Ihre Startseite > "Alle bearbeiten" > "Anzeigeoptionen (diese Seite)" > "Banner in der Fußzeile (diese Seite)"

Direktlink
request.remote_ip=54.156.69.204
request.port=80