Jnk (Diskussion | Beiträge) (Bitte keine Überschriften in Accordions verwenden) |
Sbeeh (Diskussion | Beiträge) |
||
| Zeile 30: | Zeile 30: | ||
Wir empfehlen Ihnen, sich an den [https://www.uni-paderborn.de/universitaet/presse-kommunikation-marketing/brandportal/vorgaben-statute redaktionellen Leitfaden] zu halten, der konkrete Hinweise zur verständlichen, prägnanten und inklusiven Formulierung enthält. Ebenso wichtig sind die Vorgaben im Leitfaden zur Barrierefreiheit (folgt), der erklärt, wie Inhalte für Menschen mit Behinderungen bestmöglich gestaltet werden können. </bootstrap_panel> | Wir empfehlen Ihnen, sich an den [https://www.uni-paderborn.de/universitaet/presse-kommunikation-marketing/brandportal/vorgaben-statute redaktionellen Leitfaden] zu halten, der konkrete Hinweise zur verständlichen, prägnanten und inklusiven Formulierung enthält. Ebenso wichtig sind die Vorgaben im Leitfaden zur Barrierefreiheit (folgt), der erklärt, wie Inhalte für Menschen mit Behinderungen bestmöglich gestaltet werden können. </bootstrap_panel> | ||
| − | <bootstrap_panel heading=" | + | <bootstrap_panel heading="'''Inhaltliche Vorbereitung vor der technischen Umsetzung'''"> |
Bevor Sie mit der technischen Umsetzung inTYPO3 beginnen, ist es wichtig, sich intensiv und kritisch mit Ihren bestehenden Inhalten auseinanderzusetzen. Nutzen Sie diese Phase, um zu prüfen, welche Inhalte für Ihre Zielgruppen wirklich relevant und aktuell sind. Dabei empfiehlt es sich: | Bevor Sie mit der technischen Umsetzung inTYPO3 beginnen, ist es wichtig, sich intensiv und kritisch mit Ihren bestehenden Inhalten auseinanderzusetzen. Nutzen Sie diese Phase, um zu prüfen, welche Inhalte für Ihre Zielgruppen wirklich relevant und aktuell sind. Dabei empfiehlt es sich: | ||
| Zeile 43: | Zeile 43: | ||
Dieser Schritt stellt sicher, dass Sie Ihre Webseiten inhaltlich optimieren. Dadurch erreichen Sie eine prägnantere und ansprechendere Darstellung, die Ihre Nutzer*innen effizienter informiert und überzeugt. Unser [[TYPO3 - Inhalte vorbereiten und strukturieren|Leitfaden zur Inhaltlichen Vorbereitung]] hilft Ihnen bei diesem wichtigen Schritt.</bootstrap_panel> | Dieser Schritt stellt sicher, dass Sie Ihre Webseiten inhaltlich optimieren. Dadurch erreichen Sie eine prägnantere und ansprechendere Darstellung, die Ihre Nutzer*innen effizienter informiert und überzeugt. Unser [[TYPO3 - Inhalte vorbereiten und strukturieren|Leitfaden zur Inhaltlichen Vorbereitung]] hilft Ihnen bei diesem wichtigen Schritt.</bootstrap_panel> | ||
| − | <bootstrap_panel heading=" | + | <bootstrap_panel heading="'''Nachhaltige Qualitätssicherung'''"> |
Um die Qualität der Inhalte dauerhaft zu gewährleisten, sollten Sie vor der Veröffentlichung Ihre Texte auf Verständlichkeit, Rechtschreibung und korrekte Verlinkungen prüfen. Regelmäßige Pflege und Aktualisierung sind ebenso wichtig, um die Webseiten aktuell und vertrauenswürdig zu halten. | Um die Qualität der Inhalte dauerhaft zu gewährleisten, sollten Sie vor der Veröffentlichung Ihre Texte auf Verständlichkeit, Rechtschreibung und korrekte Verlinkungen prüfen. Regelmäßige Pflege und Aktualisierung sind ebenso wichtig, um die Webseiten aktuell und vertrauenswürdig zu halten. | ||
| Zeile 52: | Zeile 52: | ||
Diese Grundsätze helfen Ihnen, Inhalte klar, übersichtlich und mobilgerecht zu gestalten. Erfahren Sie mehr, indem Sie die einzelnen Punkte öffnen. | Diese Grundsätze helfen Ihnen, Inhalte klar, übersichtlich und mobilgerecht zu gestalten. Erfahren Sie mehr, indem Sie die einzelnen Punkte öffnen. | ||
<bootstrap_accordion> | <bootstrap_accordion> | ||
| − | <bootstrap_panel heading=' | + | <bootstrap_panel heading=''''Single-Page-Design ("Onepager")''''> |
Die Inhalte werden bevorzugt auf einer einzelnen, scrollbaren Seite dargestellt – das entspricht modernen Nutzungsgewohnheiten, vor allem auf mobilen Geräten. Statt viele kleine Unterseiten zu erstellen, bieten wir lange, inhaltlich gegliederte Seiten an, die Besucher*innen durch einfaches Scrollen erfassen können. </bootstrap_panel> | Die Inhalte werden bevorzugt auf einer einzelnen, scrollbaren Seite dargestellt – das entspricht modernen Nutzungsgewohnheiten, vor allem auf mobilen Geräten. Statt viele kleine Unterseiten zu erstellen, bieten wir lange, inhaltlich gegliederte Seiten an, die Besucher*innen durch einfaches Scrollen erfassen können. </bootstrap_panel> | ||
| − | <bootstrap_panel heading=" | + | <bootstrap_panel heading="'''Mobile First und Lesbarkeit'''"> |
Unsere Webseiten sind konsequent "mobile first" entwickelt. Das bedeutet: | Unsere Webseiten sind konsequent "mobile first" entwickelt. Das bedeutet: | ||
| Zeile 62: | Zeile 62: | ||
*Die Navigation ist übersichtlich gestaltet und unterstützt das leichte Navigieren auf kleinen Bildschirmen.</bootstrap_panel> | *Die Navigation ist übersichtlich gestaltet und unterstützt das leichte Navigieren auf kleinen Bildschirmen.</bootstrap_panel> | ||
| − | <bootstrap_panel heading=" | + | <bootstrap_panel heading="'''Navigation und Struktur'''"> |
*'''Vertikale Navigation mit Sticky-Menü:''' Innerhalb einer Seite wird die Navigation über Sprungmarken (Anker) realisiert. Diese "Sticky Navigation" bleibt beim Scrollen stets sichtbar und ermöglicht direkten Zugriff auf wichtige Seitenabschnitte. | *'''Vertikale Navigation mit Sticky-Menü:''' Innerhalb einer Seite wird die Navigation über Sprungmarken (Anker) realisiert. Diese "Sticky Navigation" bleibt beim Scrollen stets sichtbar und ermöglicht direkten Zugriff auf wichtige Seitenabschnitte. | ||
| Zeile 68: | Zeile 68: | ||
*Verschaffen Sie sich in unserer [[TYPO3 - Navigation|Übersicht über alle Navigationselemente]] einen Überblick über die weiteren Möglichkeiten, die sie nutzen können, um Besucher*innen durch die Webseite zu führen.</bootstrap_panel> | *Verschaffen Sie sich in unserer [[TYPO3 - Navigation|Übersicht über alle Navigationselemente]] einen Überblick über die weiteren Möglichkeiten, die sie nutzen können, um Besucher*innen durch die Webseite zu führen.</bootstrap_panel> | ||
| − | <bootstrap_panel heading=" | + | <bootstrap_panel heading="'''Bild- und Visueller Fokus'''"> |
Unser Design ist stark bildorientiert: Große Headerbilder und bildgebundene Inhaltselemente sorgen für eine visuelle Ansprache und unterstützen die Textinhalte. Deshalb verwenden wir hochwertige, professionelle Fotos, die über eine [https://confluence.uni-paderborn.de/spaces/BiDa/pages/74646701/Bilddatenbank+Startseite zentrale Bilddatenbank] verfügbar sind. | Unser Design ist stark bildorientiert: Große Headerbilder und bildgebundene Inhaltselemente sorgen für eine visuelle Ansprache und unterstützen die Textinhalte. Deshalb verwenden wir hochwertige, professionelle Fotos, die über eine [https://confluence.uni-paderborn.de/spaces/BiDa/pages/74646701/Bilddatenbank+Startseite zentrale Bilddatenbank] verfügbar sind. | ||
Zur besseren Orientierung auf den Webseiten hilft es zudem, wenn Sie versuchen, Ihre Abschnitte klar visuell zu gliedern. Eine beliebte Lösung dafür ist zum Beispiel, dass [[TYPO3 - Highlighted Section|Highlighted Sections]] und Abschnitte ohne Hintergrundfarbe sich abwechseln. | Zur besseren Orientierung auf den Webseiten hilft es zudem, wenn Sie versuchen, Ihre Abschnitte klar visuell zu gliedern. Eine beliebte Lösung dafür ist zum Beispiel, dass [[TYPO3 - Highlighted Section|Highlighted Sections]] und Abschnitte ohne Hintergrundfarbe sich abwechseln. | ||
Aktuelle Version vom 15. September 2025, 12:48 Uhr
Allgemeine Informationen
| Information | |
|---|---|
| Informationen | |
| Betriebssystem | Alle |
| Service | TYPO3 |
| Interessant für | Angestellte |
| HilfeWiki des ZIM der Uni Paderborn | |
Dieser Artikel vermittelt Ihnen die wichtigsten Grundlagen und Gestaltungsprinzipien unseres Webauftritts, damit Sie Inhalte zielgruppengerecht, übersichtlich und benutzerfreundlich gestalten können.
Zielgruppe und Inhalte[Bearbeiten | Quelltext bearbeiten]
Unsere Webseiten richten sich in erster Linie an externe Besucher*innen wie:
- Interessierte Schüler*innen und Studieninteressierte
- Potenzielle Mitarbeiter*innen und Bewerber*innen
- Gutachter*innen aus der Forschung
- Die allgemeine Öffentlichkeit\
Deshalb liegt der Fokus auf klaren, verständlichen und relevanten Informationen, die nach außen gut kommuniziert werden. Interne Informationen für Studierende, Mitarbeitende und Wissenschaftler*innen werden jedoch in separate, dafür vorgesehene Systeme ausgelagert (z. B. PANDA, Wiki, Confluence, Teams oder Sharepoint).
Zielgruppengerechte Inhalte und inklusive Sprache
Damit Ihre Inhalte für alle Nutzer*innen verständlich und ansprechend sind, ist eine zielgruppengerechte Aufbereitung essenziell. Dazu gehört eine aktive, moderne und inklusive Sprache, die niemanden ausschließt und den Prinzipien der Barrierefreiheit folgt.
Wir empfehlen Ihnen, sich an den redaktionellen Leitfaden zu halten, der konkrete Hinweise zur verständlichen, prägnanten und inklusiven Formulierung enthält. Ebenso wichtig sind die Vorgaben im Leitfaden zur Barrierefreiheit (folgt), der erklärt, wie Inhalte für Menschen mit Behinderungen bestmöglich gestaltet werden können.
Inhaltliche Vorbereitung vor der technischen Umsetzung
Bevor Sie mit der technischen Umsetzung inTYPO3 beginnen, ist es wichtig, sich intensiv und kritisch mit Ihren bestehenden Inhalten auseinanderzusetzen. Nutzen Sie diese Phase, um zu prüfen, welche Inhalte für Ihre Zielgruppen wirklich relevant und aktuell sind. Dabei empfiehlt es sich:
- Die Zuständigkeiten für Inhalte zu klären
- Die Zielgruppe klar zu definieren
- Eine Bestandsaufnahme (Content Audit) aller vorhandenen Seiten und Inhalte durchzuführen
- Die verschiedenen Systeme zur Darstellung und Verwaltung von Inhalten zu kennen.
- Das Design und seine gestalterischen Möglichkeiten kennenzulernen
- Die Seitenstruktur zu überdenken und übersichtlicher zu gestalten
- Inhalte zu kürzen, zu verdichten und klarer zu formulieren
Dieser Schritt stellt sicher, dass Sie Ihre Webseiten inhaltlich optimieren. Dadurch erreichen Sie eine prägnantere und ansprechendere Darstellung, die Ihre Nutzer*innen effizienter informiert und überzeugt. Unser Leitfaden zur Inhaltlichen Vorbereitung hilft Ihnen bei diesem wichtigen Schritt.
Nachhaltige Qualitätssicherung
Um die Qualität der Inhalte dauerhaft zu gewährleisten, sollten Sie vor der Veröffentlichung Ihre Texte auf Verständlichkeit, Rechtschreibung und korrekte Verlinkungen prüfen. Regelmäßige Pflege und Aktualisierung sind ebenso wichtig, um die Webseiten aktuell und vertrauenswürdig zu halten.
Zur Unterstützung empfehlen wir unseren Leitfadens zur Webseitenüberprüfung und Qualitätssicherung, der verschiedene Prüfpunkte bereitstellt und Ihnen hilft, Fehler zu vermeiden.
Design- und Gestaltungsprinzipien[Bearbeiten | Quelltext bearbeiten]
Diese Grundsätze helfen Ihnen, Inhalte klar, übersichtlich und mobilgerecht zu gestalten. Erfahren Sie mehr, indem Sie die einzelnen Punkte öffnen.
bsc_card_3
Mobile First und Lesbarkeit
Unsere Webseiten sind konsequent "mobile first" entwickelt. Das bedeutet:
- Inhalte sind vor allem für mobile Endgeräte optimiert und gut lesbar.
- Layouts verzichten auf nebeneinander angeordnete Spalten, stattdessen werden Elemente untereinander dargestellt.
- Die Navigation ist übersichtlich gestaltet und unterstützt das leichte Navigieren auf kleinen Bildschirmen.
Navigation und Struktur
- Vertikale Navigation mit Sticky-Menü: Innerhalb einer Seite wird die Navigation über Sprungmarken (Anker) realisiert. Diese "Sticky Navigation" bleibt beim Scrollen stets sichtbar und ermöglicht direkten Zugriff auf wichtige Seitenabschnitte.
- Burger-Menü für Seitenwechsel: Um zwischen verschiedenen Seiten zu wechseln, nutzen wir ein großes, gut sichtbares Burger-Menü sowie interne Verlinkungen.
- Verschaffen Sie sich in unserer Übersicht über alle Navigationselemente einen Überblick über die weiteren Möglichkeiten, die sie nutzen können, um Besucher*innen durch die Webseite zu führen.
Bild- und Visueller Fokus
Unser Design ist stark bildorientiert: Große Headerbilder und bildgebundene Inhaltselemente sorgen für eine visuelle Ansprache und unterstützen die Textinhalte. Deshalb verwenden wir hochwertige, professionelle Fotos, die über eine zentrale Bilddatenbank verfügbar sind. Zur besseren Orientierung auf den Webseiten hilft es zudem, wenn Sie versuchen, Ihre Abschnitte klar visuell zu gliedern. Eine beliebte Lösung dafür ist zum Beispiel, dass Highlighted Sections und Abschnitte ohne Hintergrundfarbe sich abwechseln.
Außerdem finden Sie Informationen zum allgemeinen Auftritt der Universität Paderborn im Brand Portal.
Mehrsprachigkeit[Bearbeiten | Quelltext bearbeiten]
Alle Webseiteninhalte sollen regelmäßig auf Deutsch und Englisch bereitgestellt werden. Ein in TYPO3 integriertes Übersetzungstool (DeepL) unterstützt Sie bei der Erstellung und Betreuung der englischen Inhalte, um eine durchgängige bilingualen Präsenz zu gewährleisten. Lesen Sie dazu auch unsere Informationen über Sprachen innerhalb der Webseiten der Universität Paderborn.
Effiziente Inhaltsarbeit: Mehrfachnutzung und zentrale Verwaltung[Bearbeiten | Quelltext bearbeiten]
Um den Pflegeaufwand zu reduzieren und Inkonsistenzen zu vermeiden, setzen wir auf eine intelligente Mehrfachnutzung von Inhalten:
- Zentrale Datenbanken: Persönliche Profile, Forschungsdaten und weitere relevante Informationen werden zentral gespeichert (z. B. im Profilmanager, FIS, RIS). Diese Daten können an unterschiedlichen Stellen auf der Webseite in verschiedenen Darstellungsformen genutzt werden.
- Datensammlungen: Sammeln von inhaltlichen Elementen wie Themen (Topics), Schlüsselkennzahlen oder Testimonials, auf die über Inhaltselemente flexibel zugegriffen werden kann.
- Datensatz-Funktion: Einmal erstellte Web-Elemente können an mehreren Stellen gespiegelt werden. Änderungen am Original-Element werden automatisch überall übernommen.
- Kategoriensystem: Kategorien wie Themenbereiche, Zielgruppen oder Veranstaltungstypen helfen, Inhalte logisch zu ordnen und zu filtern. Dies erleichtert sowohl die Pflege als auch die spätere Suche und Darstellung.
Webelemente und Beispiele kennenlernen[Bearbeiten | Quelltext bearbeiten]
Webelemente sichten: Machen Sie sich mit den zur Verfügung stehenden Web-Elementen vertraut.
Beispiele sichten: Schauen Sie sich andere UPB-Webseiten an, um die Design-Ansätze zu verstehen. Wir empfehlen beispielsweise die folgenden Seiten:
- Seiten für Arbeitsgruppen/Professuren
- Seiten für Bereiche (Institute/ Departments / Fakultäten / Fächer)
- Seiten für Projekte
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. Bitte beachten Sie, dass die kopierbaren Beispielseiten nicht fortlaufend aktualisiert wurden und sie nicht mit den aktuellen Webseiten übereinstimmen. Sie dienen Ihnen lediglich zur Orientierung, wie Sie die Elemente anordnen und nutzen können.
Zusammenfassung: Wichtige Prinzipien für Ihre Arbeit[Bearbeiten | Quelltext bearbeiten]
Prinzip[Bearbeiten | Quelltext bearbeiten] |
Beschreibung[Bearbeiten | Quelltext bearbeiten] |
||
|---|---|---|---|
| Fokus auf externe Zielgruppen | Inhalte richten sich hauptsächlich an externe Besucher*innen. | ||
| Zielgruppengerechte und inklusive Sprache | Inhalte werden klar, verständlich und aktiv verfasst, dabei inklusiv und barrierefrei. | ||
| Inhaltliche Vorbereitung vor technischer Umsetzung | Zielgruppen werden klar definiert, Inhalte kritisch geprüft und zielgruppengerecht und strukturiert aufbereitet, bevor eine Umsetzung in TYPO3 erfolgt. Schnittstellensysteme und interne Wissensmanagementsysteme werden von Anfang an mitgedacht. | ||
| Single-Page-Design | Lange, scrollbare Seiten statt vieler Unterseiten. | ||
| Mobile First | Optimierung der Darstellung für mobile Geräte, Verzicht auf Mehrspaltigkeit. | ||
| Visuelle Gestaltung | Großer Bildfokus mit hochwertigen Fotos und graphischen Elementen. | ||
| Flexible Navigation | Besucher*innen werden mit verschiedenen Navigationselementen durch die Webseite geführt. | ||
| Mehrsprachigkeit | Inhalte werden sowohl auf Deutsch als auch auf Englisch angeboten. | ||
| Zentrale Inhaltsverwaltung | Inhalte werden zentral angelegt, mehrfach genutzt und kategorisiert, um Redundanzen zu vermeiden und Pflegeaufwand zu minimieren. | ||
| Webelemente und Best-Practice | Webelemente, Templates und Beispielseiten stehen für Inspiration und effizientes Arbeiten zur Verfügung. | ||
| Qualitätssicherung | Inhalte werden sorgfältig geprüft, regelmäßig aktualisiert und inhaltlich sowie formal auf hohem Niveau gehalten. |
Ihre Unterstützung als Redakteur*in[Bearbeiten | Quelltext bearbeiten]
Als Redakteur*in helfen Sie mit, die Webseite aktuell, übersichtlich und attraktiv zu gestalten. Nutzen Sie dafür die vorhandenen Werkzeuge zur Mehrfachnutzung, beziehen Sie die Zielgruppe stets mit ein, und setzen Sie auf klare, fokussierte Informationen. Bei Fragen zur Bedienung von TYPO3 oder zum Umgang mit dem Bildmaterial sowie zur Mehrsprachigkeit stehen Ihnen Support und Beratung jederzeit gerne zur Verfügung.
Sollten Sie detaillierte Anleitungen zu einzelnen Funktionen oder Themen benötigen, finden Sie weitere Hilfeartikel und Tutorials in unserem Redaktionsbereich.