TYPO3 - Website-Relaunch: Übergangslayout auf Endlayout umstellen

ZIM HilfeWiki - das Wiki

Allgemeine Informationen
Anleitung
Informationen
BetriebssystemAlle
ServiceTYPO3
Interessant fürGäste, Angestellte und Studierende
HilfeWiki des ZIM der Uni Paderborn

set displaytitle to TYPO3 - Website-Relaunch: Übergangslayout auf Endlayout umstellen

Hintergrund der Webseiten-Umstellung[Bearbeiten | Quelltext bearbeiten]

Mit dem Website-Relaunch 2023 wurden alle Web-Seiten in TYPO3 automatisch in ein Übergangsdesign ("Migrationsdesign") überführt. Um die neuen Inhaltselemente nutzen zu können, müssen Sie das Layout Ihrer bestehenden Seiten ändern. Da die neuen Webseiten jedoch eine andere Logik hinsichtlich Ansprache, Design und Struktur verfolgen, wollen wir Sie ermutigen, die Chance für eine Neustrukturierung und -gestaltung Ihrer Webseiten zu nutzen.

Alle Seiten, die aktuell im Migrationsdesign angezeigt werden (Anleitung, wie Sie überprüfen können, welche Seiten sich im Migrationsdesign befinden) müssen umgestellt oder gelöscht werden, falls Sie nicht mehr relevant sind.  

Das erwartet Sie auf dieser Seite[Bearbeiten | Quelltext bearbeiten]

Mit dieser Seite wollen wir Ihnen helfen, Ihre Webseiten bestmöglich umzustellen. Deshalb hier eine Übersicht, was Sie für Inhalte auf dieser Seite finden.

  1. Die neue Logik, Optik und Zielgruppe der Webseiten verstehen
  2. Ihre Vorteile durch die Umstellung
  3. Die Umstellung – ein Prozess in zwei Schritten
    1. Die Umstellung inhaltlich vorbereiten
    2. Die technische Umstellung
  4. Leitfaden zur Überprüfung der Qualität Ihrer neuen Seiten
  5. Kontakt und Hilfe
  6. Schritt-für-Schritt Anleitungen  

Die neue Logik, Optik und Zielgruppe der Webseiten verstehen[Bearbeiten | Quelltext bearbeiten]

Für die Umgestaltung hilft es Ihnen, die Design-Ansätze der neuen Seiten zu verstehen:

  • Single-Page-Design (“Onepager”): Ziel ist es, alle relevanten Inhalte auf einer einzigen Seite zu präsentieren, anstatt sie auf mehrere Unterseiten zu verteilen. Dies wird oft durch ein langes Scroll-Layout erreicht. Das Scrollen entspricht den mobilen Nutzungserfahrungen.
  • Externe Zielgruppe: Ziel ist es, dass sich die Webseiten der Universität langfristig hauptsächlich an externe Personen richten, also beispielweise interessierte Schüler*innen, potenzielle Mitarbeiter*innen, Gutachter*innen aus der Forschung oder die allgemeine Öffentlichkeit. Webseiten sollten sich deshalb auf das Wesentliche fokussieren. Interne Informationen sollten Sie in andere Systeme wie z.B. Wiki, Confluence, Teams oder Sharepoint auslagern. Gerne beraten wir Sie, wie Sie interne Informationen bestmöglich darstellen können.
  • Mehrsprachigkeit: Die Universität Paderborn strebt an, auf ihren Webseiten alle Inhalte durchgängig sowohl auf Deutsch als auch auf Englisch anzubieten (Informationen zur Mehrsprachigkeit), weshalb unter anderem das Übersetzungstool DeepL in TYPO3 integriert wurde.
  • Mobile First: Alle Inhalte sollen insbesondere auf mobilen Geräten gut lesbar sein. Statt wie bisher Inhalte in Spalten nebeneinander anzuordnen, werden inhaltliche Abschnitte untereinander dargestellt.  
  • Vertikale Navigation und Burger-Menü: Die Navigation innerhalb einer Seite erfolgt über Sprungmarken (Ankern) zu bestimmten Abschnitten unterhalb des Headers, die sogenannte “Sticky Navigation”, da Sie beim Scrollen oben “kleben” bleibt. Um zwischen Seiten zu navigieren wird das große Burger Menü eingesetzt oder Verlinkungen auf den Seiten genutzt.
  • Bildfokus: Viele Inhaltselemente werden in Verbindung mit Bildern genutzt. Auch die großen Headerbilder erfordern qualitativ hochwertige Bilder. Das Design ist also wesentlich visueller als vorher. Ihnen steht inzwischen auch eine Bilddatenbank zur Verfügung, um den hohen Bildbedarf zu decken.
  • Mehrfachnutzung von Inhalten:  Ein Ziel des neuen Systems ist es, redundante und sich teilweise widersprechende Inhalte zu vermeiden. Deshalb sollen Inhalte verstärkt mehrfach genutzt werden, das heißt Elemente werden an einer zentralen Stelle angelegt und können dann an mehreren Stellen ausgegeben werden bzw. von mehreren Redakteur*innen genutzt werden. Dies ist über verschiedene Funktionen möglich:
    • Datenbanken: Mit dem Profilmanager, der Projektdatenbank, dem FIS und dem RIS haben wir inzwischen einige Datenbanken etabliert, die es Ihnen und anderen Redakteur*innen ermöglichen Ihre persönlichen Daten und Forschungsdaten an einem Ort zentral zu hinterlegen, aber an zahlreichen anderen Orten in unterschiedlicher Form auszugeben. Das neue Design bietet hier zahlreiche Webelemente mit diversen Darstellungs- und Filtermöglichkeiten.
    • Datensammlungen: Ein ähnliches Prinzip wurde auch für einige andere Elemente in TYPO3 übernommen. Inhalte wie Topics, Schlüsselkennzahlen, Testimonial-Zitate werden in Datensammlungen angelegt. Auf die einzelnen Datenelemente kann dann über Inhaltselemente zugegriffen werden.
    • Datensätze: Sie können auch einmal erstellte Web-Elemente über die Datensatz-Funktion auf andere Seiten spiegeln. Verändern Sie etwas an dem originären Web-Element werden alle Änderungen bei den Spiegelungen übernommen (Anleitung TYPO3 - Inhaltselement Datensätze einfügen ).
    • Kategorien: Uniweit wurde ein neues Kategoriensystem angelegt (z. B. Themen, Zielgruppen, Veranstaltungstyp, Arbeitsbereich, etc.). Nachrichten und Veranstaltungen können damit kategorisiert werden. Dies erlaubt das Filtern von Inhalten und vermeidet das Veranstaltungen und Nachrichten in mehreren Bereichen angelegt werden müssen.

Kurz zusammengefasst: schlank, vertikal, mobil, visuell, aktivierend

Die Umstellung – ein Prozess in zwei Schritten[Bearbeiten | Quelltext bearbeiten]

Wir empfehlen Ihnen bei der Umstellung in zwei Schritten zu arbeiten. Setzen Sie sich zunächst kritisch mit Ihren bestehenden Inhalten auseinander und prüfen Sie, wie Sie die Umstellung nutzen können, um Ihre Inhalte noch prägnanter und ansprechender für Ihre Zielgruppen darzustellen. Erst wenn Sie sich darüber im Klaren sind, welche Inhalte Sie darstellen möchten, sollten Sie sich mit der technischen Umstellung in TYPO3 auseinandersetzen.  

Ein Leitfaden für zukünftige Überprüfungen und zur Qualitätssicherung hilft Ihnen am Ende des Umstellungsprozesses und die Zeit danach.

Die Umstellung inhaltlich vorbereiten[Bearbeiten | Quelltext bearbeiten]

Aufgrund der neuen Design-Ansätze empfehlen wir Ihnen vor der technischen Umstellung, die folgenden inhaltlichen Schritte vorzunehmen:

Klären Sie innerhalb Ihres Bereichs, wer für die Überarbeitung und Neustrukturierung der Inhalte zuständig ist und wer die neuen Inhalte technisch in TYPO3 umsetzt. Eine Neustrukturierung von Inhalten, zum Beispiel, das Auslagern von internen Informationen in andere Systeme oder das Nutzen von Datenbanken zur Darstellung von Informationen (z. B. Projekte oder Publikationen), ist dabei häufig eine strategische Entscheidung. Eventuell müssen Sie dafür die Unterstützung Ihrer Vorgesetzten einholen. Gerne unterstützen wir Sie dabei argumentativ.

Bedenken Sie, wie Sie eine Abnahme der inhaltlichen Neugestaltung und der späteren technischen Darstellung in TYPO3 gestalten.

Wir möchten Sie ermutigen, die Umstellung zu nutzen, um auch langfristige Prozesse der Qualitätssicherung in Ihren Bereichen zu etablieren. Anregungen dazu finden Sie in unserem Leitfaden zur Webseitenüberprüfung und Qualitätssicherung.

Verschaffen Sie sich einen Überblick über Ihre aktuellen Inhalte

  • Inhalte sichten: Welche Seiten, Menüpunkte, Texte und Medien gibt es?
  • Relevanz prüfen: Welche Inhalte werden noch benötigt? Welche sind noch aktuell? Welche müssen überarbeitet werden?
  • Zielgruppe prüfen: Welche Inhalte richten sich eher nur an UPB-Mitglieder und können eventuell über andere Systeme wie z. B. KOMO, PANDA oder Teams abgebildet werden?
  • Inhalte kategorisieren: Wie können Inhalte thematisch gruppiert werden? Welche Seiteninhalte können auf einer Seite zusammengeführt werden?
  • Mehrfachnutzung überprüfen: Welche Inhalte können inzwischen über eine Datenbank abgebildet werden? Wo bieten sich Datensammlungen, Datensätze oder eine Mehrfachnutzung über Kategorien an?

Neue Webelemente sichten: Machen Sie sich mit den neuen zur Verfügung stehenden Web-Elementen vertraut.

Beispiele sichten: Schauen Sie sich andere UPB-Webseiten an, um die neuen Design-Ansätze zu verstehen. Wir empfehlen beispielsweise die folgenden Seiten:

Als Redakteur*in finden Sie in TYPO3 im Ordner CMS sowohl einige dieser Beispielseiten als auch die Übersicht mit allen Web-Elementen. Sie können die Seiten kopieren und bei Ihnen als Vorschauseiten einfügen oder einzelne Inhaltselemente daraus kopieren und einfügen.

  • Unterseiten und Seitenabschnitte festlegen: Zusammenhängende Themen werden auf einer Seite zusammengefasst und als Abschnitte dargestellt. Die Navigation erfolgt durch Sprungmarken.
  • Inhaltselemente für Abschnitte auswählen: Nutzen Sie die neuen Web-Elemente um Ihre Inhalte visueller und aktivierender darzustellen. Suchen Sie für jeden Inhalt das passende Element aus. Dies erfordert manchmal ausprobieren.


  • Handlungsaufforderungen und visuelle Elemente einbauen: Fordern Sie Ihre Webseitenbesucher*innen mit sogenannten Call-to-Actions auf, aktiv zu werden (z. B. "Jetzt anmelden", "Jetzt kontaktieren") oder nutzen Sie Fotos und Videos, um Ihre Botschaften zu unterstreichen. Manche Elemente erfordern Call-to-Actions oder Videos/Fotos.

Die technische Umstellung[Bearbeiten | Quelltext bearbeiten]

Wenn Sie sich nun mit der Umstellung Ihrer Webseiten in TYPO3 auseinandersetzen, empfehlen wir Ihnen die folgenden Schritte und die Grundprämisse zu berücksichtigen.

Grundprämissen[Bearbeiten | Quelltext bearbeiten]

Ziel sollte es sein, so viele Seiten-URLs und Seiten-IDs zu erhalten wie möglich. So bleiben Lesezeichen erhalten und die Links auf anderen Seiten, die auf Ihre Seiten verweisen, funktionieren weiterhin. Sie erreichen dies, indem Sie die alten Seiten erhalten, auf das neue Erscheinungsbild umstellen und mit neuen Inhalten befüllen. Insbesondere die Startseite von Bereichen sollte erhalten bleiben, da dies zudem den Vorteil hat, dass bestehende Berechtigungen erhalten bleiben, da sie mit der Startseite verknüpft sind. Zudem richtet das IMT im Hintergrund auch Komforteigenschaften für Bereiche ein. So ist zum Beispiel die ID der Kontaktseiten mit dem Symbol oben im Header verknüpft. Wenn die vorhandenen Seiten und damit die IDs bestehen bleiben, funktionieren diese Komforteigenschaften auch weiterhin.
Wir empfehlen Ihnen mit Vorschauseiten zu arbeiten und die neuen Elemente bei der Umstellung auf die alten Seiten zu verschieben, nachdem Sie dort das Layout verändert haben. Mehr dazu in den folgenden Schritten.

Technische Schritte der Umstellung[Bearbeiten | Quelltext bearbeiten]

Sichern Sie Ihre Texte und Tabellen in einem Dokument. Ihre Bilder bleiben – sofern Sie sie nicht löschen – weiterhin im TYPO3-Backend gespeichert. Auch Ihre Nachrichten bleiben – sofern Sie die entsprechenden Ordner nicht löschen – im TYPO3-Backend bestehen und Sie können Sie weiterhin über neue News-Elemente abbilden.

Legen Sie Vorschauseiten, die Ihre neue Struktur abbilden, unterhalb der bestehenden Seiten an. Falls für Sie passend, können Sie auch die Beispielseiten aus dem Ordner “CMS” als Vorschauseiten kopieren. Kennzeichnen Sie die Seiten im Backend über den Seitentitel als Vorschau. Deaktivieren Sie die Seiten und nutzen Sie die Vorschaufunktion, um sich Ihre Seiten anzusehen. Achtung: Die Vorschaufunktion funktioniert nur, wenn Sie in der richtigen Subdomain angemeldet sind. Wenn Ihre Seite also beispielsweise zu den Kulturwissenschaften gehört, melden Sie sich bitte unter kw.upb.de/typo3 ins TYPO3-System ein.

Wenn Personen Ihre Vorschauseiten abnehmen sollen, stellen Sie über die Seiteneigenschaften ein, dass die Seiten nur im Uni-Netz sichtbar sind (Anleitung für Beschränkung von Seiten auf Uninetz)und aktivieren Sie für den Zeitraum der Abnahme die Seiten.

Alternativ können Sie auch direkt in den “alten” Seiten arbeiten und mit Schritt 5 fortfahren.

Hinweis für Redakteur*innen, die übergeordnete Bereiche verwalten mit vielen Untereinheiten: Wenn Sie für Unterbereiche Vorschauseiten anlegen, legen Sie diese bitte immer unter den bestehenden Seiten an, damit die Rechte weiterhin bestehen. Parallelstrukturen sollten vermieden werden.

Setzen Sie nun Ihre Vorüberlegungen im Backend um und gestalten Sie Ihre neuen Seiten. Ein Hinweis zu Verlinkungen: Ziel ist es, final Ihre bestehenden Seiten weiter zu nutzen, und die neuen Elemente von den Vorschauseiten auf die bestehenden Seiten zu verschieben. Wenn Sie nun Web-Elemente mit internen Links anlegen, geben Sie deshalb am besten die IDs der bestehenden Seiten an (Anleitung TYPO3 Interne Verlinkungen). Wenn Sie auf die Vorschauseiten verlinken, müssen Sie sonst nach dem Verschieben der Elemente auf die bestehenden Seiten, alle Links erneut setzen.

Wenn Sie mit Ihrer Vorschauseite zufrieden sind, gehen Sie zu Ihrer “alten” Seiten und stellen dort das Erscheinungsbild um (#Schritt-für-Schritt Anleitung). Dadurch ändern sich einige Dinge:

  • Die Aufteilung in Spalten verschwindet und damit auch die Box “Sie interessieren sich für”.
  • Im Backend wird zwischen “Inhalt” und “verknüpften Inhaltselementen” unterschieden.
  • Ihnen stehen neue Inhaltselemente zur Verfügung.
  • Inhaltselemente aus dem Migrationsdesign erscheinen als "unbenutzte Elemente" im Backend.

Wenn der Standard nicht passend ist, bearbeiten Sie die Seiteneigenschaften wie Footer, Bühne und Titel.


Achtung: dies muss für die deutsche und die englische Seite jeweils getrennt gemacht werden.

Damit Sie die neuen Elemente von der Vorschauseite auf die “alte” Seite verschieben können, schaffen Sie am besten Platz und löschen/deaktivieren Sie die alten Elemente. Nur zwei Element-Typen können auf das neue Design umgestellt werden (#Web-Elemente umstellen), sodass Sie theoretisch keine neuen Elemente anlegen müssten. Es handelt sich um:

  • "UPB Content - Text" wird zu "Text und Medien"
  • News-Plug-In


Achtung: auch dies muss jeweils für die deutsche und englische Seite getan werden oder Sie erledigen dies in der deutschen Sprache, löschen oder deaktivieren in Englisch und übersetzen dann neu.

Wenn Sie mit Vorschauseiten gearbeitet haben, können Sie nun die Elemente von Ihren Vorschauseiten auf die “alten” Seiten verschieben (Anleitung Inhaltselemente verschieben). Wenn Sie nicht mit Vorschauseiten gearbeitet haben, legen Sie Elemente auf Ihren umgestellten “alten” Seiten neu an (TYPO3 Übersicht über alle Hilfe-Seiten).
Wenn Sie alle Seiten umgestellt haben, das heißt alle Seiten nutzen eines der neuen Backend-Layouts, sollten Sie noch garantieren, dass neue Seiten, die Sie zukünftig anlegen werden, automatisch ebenfalls ein neues Layout nutzen. Gehen Sie dazu auf Ihrer Startseite in die Seiteneigenschaften und wählen Sie im Reiter Erscheinungsbild bei Backend-Layout ein passendes Seitentemplate.
Damit Ihr Backend schlank bleibt, löschen Sie deaktivierte Elemente, nicht mehr benötigte Seiten und Vorschauseiten nach der Umstellung.

Leitfaden zur Überprüfung der Qualität Ihrer neuen Seite[Bearbeiten | Quelltext bearbeiten]

Um die Qualität Ihrer neuen Seiten zu gewährleisten, haben wir Ihnen einen Leitfaden für zukünftige Überprüfungen und zur Qualitätssicherung erstellt. Eine kontinuierliche Pflege stellt sicher, dass Ihre Inhalte für Nutzer*innen verständlich, aktuell und korrekt sind – und dass technische sowie gestalterische Standards eingehalten werden. Der Leitfaden enthält Tipps zur sprachlichen Inhaltsgestaltung, Barrierearmut, Navigation und zur Reduktion Ihres Pflegeaufwandes.

Kontakt und Hilfe[Bearbeiten | Quelltext bearbeiten]

Gerne unterstützen wir Sie beim Umstellungsprozess! Wir bitten Sie, uns Ihre Herausforderungen und Fragen per Mail an zim@uni-paderborn.de zukommen zu lassen. Wir werden für einen gewissen Zeitraum die Anfragen sammeln und je nach Umfang einzeln auf Sie zukommen oder Themen in gezielten Sprechstunden in größeren Gruppen adressieren.  

Bitte nutzen Sie auch unsere TYPO3 Hilfe-Seiten.

Schritt-für-Schritt Anleitung[Bearbeiten | Quelltext bearbeiten]

Erscheinungsbild umstellen[Bearbeiten | Quelltext bearbeiten]

Öffnen Sie in TYPO3 die Seite, die Sie umstellen möchten.

Seiteneigenschaften bearbeiten


  • Klicken Sie in der linken Spalte auf "Seite"
  • Klicken Sie auf die Seite im Seitenverzeichnis, für die Sie das Layout umstellen möchten
  • Wählen Sie "Layout" aus
  • Klicken Sie auf "Seiteneigenschaften bearbeiten".



Seitenlayout auswählen


  1. Wechseln Sie auf den Tab "Erscheinungsbild".
  2. Klappen Sie das Menü "Backend-Layout" auf.
  3. Wählen Sie ein passendes Layout aus - In diesem Beispiel eine Informationsseite, die nicht zu einem Institut oder einer Arbeitsgruppe gehört - Also "Inhaltsseite".
  4. Klicken Sie auf "Speichern".
  • Mit "Schließen" verlassen Sie die aktuelle Ansicht.



Warnhinweis: Unbenutzte Elemente


  1. Wir erhalten nun einen Warnhinweis, dass unbenutzte Elemente auf dieser Seite vorhanden sind. Hier erscheinen Inhalte, die auf der Webseite angezeigt werden - Die Darstellung kann aber inkorrekt sein.


Web-Elemente umstellen[Bearbeiten | Quelltext bearbeiten]

UPB Content - Text[Bearbeiten | Quelltext bearbeiten]

Das Web-Element "UPB Content - Text"' kann durch die Änderung des Typs auf das neue Design umgestellt werden. Dabei bleibt jedoch nur der Text erhalten. Die Bilder gehen verloren und müssen erneut eingebunden werden. Merken Sie sich den Pfad der genutzten Bilder oder speichern Sie diese vorher separat zwischen.

Inhaltselement bearbeiten


  • Öffnen Sie das Inhaltselement über die Schaltfläche "bearbeiten".


Typ auswählen


  • Prüfen Sie im Tab "Allgemein" , ob der korrekte "Typ" ausgewählt ist.
  • Wählen Sie "Text und Medien" aus.
  • Anschließend klicken Sie auf "Speichern".


Nun sollte der Text korrekt dargestellt werden. Bilder müssen Sie anschließend neu einbinden.

Weitere Inhaltselemente umstellen[Bearbeiten | Quelltext bearbeiten]

Web-Elemente die nicht vom Typ "UPB Content - Text" sind, können nicht direkt umgestellt werden. Sie können jedoch Textinhalte in ein neues Inhaltselement kopieren.

Inhaltselement bearbeiten


  • Öffnen Sie dazu das unbenutzte Element über "Bearbeiten".
  • Kopieren Sie dort die Inhalte, die Sie weiterverwenden möchten.


  • Sie können den kopierten Inhalt nun in vorhandene Elemente einfügen.
  • Oder Sie legen über + Inhalt ein neues Inhaltselement dafür an.
  • Sie können sich auch die Sicherheitskopie im Web anzeigen lassen, dort Inhalte, z. B. Text oder Tabellen, markieren, dann die Inhalte in die Zwischenablage kopieren und in TYPO3 wieder einfügen. Bei den meisten Inhaltselementen ist ein solches Kopieren von Inhalten in die Zwischenablage möglich.

Siehe auch[Bearbeiten | Quelltext bearbeiten]


Bei Fragen oder Problemen wenden Sie sich bitte telefonisch oder per E-Mail an uns:

Tel. IT: +49 (5251) 60-5544 Tel. Medien: +49 (5251) 60-2821 E-Mail: zim@uni-paderborn.de

Wir sind umgezogen. Sie finden das Notebook-Café gemeinsam mit dem Servicecenter Medien in H1.201.

Wir sind zu folgenden Zeiten erreichbar:

Mo Di - Do Fr
NBC Vor-Ort-Support Geschlossen 09:00 - 13:00 Geschlossen
Helpdesk Telefonsupport 08:30 - 15:00 08:30 - 15:00 08:30 - 13:00
Servicecenter Medien 09:00 - 14:00 09:00 - 14:00 09:00 - 13:00


Cookies helfen uns bei der Bereitstellung des ZIM HilfeWikis. Bei der Nutzung vom ZIM HilfeWiki werden die in der Datenschutzerklärung beschriebenen Cookies gespeichert.