Anlage_4_Leistungsbeschreibung.pdf

Leistungsbeschreibung

Relaunch und Redesign der Bundesjugendkuratorium-Webseiten (BJK) Aktenzeichen: 26-1300-IL-I-OeA – Los-Nr. 1 Stand: 02.09.2026

Inhalt

Auftraggeber und Projektüberblick......................................................................................... 2 Ausgangssituation .......................................................................................................... 3 Leistungsumfang ............................................................................................................ 6 Redesign ........................................................................................................................ 7 3.1.1. Hierarchieebenen und Menüführung ...................................................................... 7 3.1.2. Design und Farbgestaltung .................................................................................... 7 3.1.2.1 Beispiel: The Atlantic (https://www.theatlantic.com/world/)......................................... 9 3.1.2.2 Beispiel: Soziopolis (https://www.soziopolis.de/) .......................................................10 3.1.2.3 Beispiel: Uni-Weimar (https://www.uni-weimar.de/de/universitaet/start/) ...................11 3.1.3. Fotos/ Grafiken .....................................................................................................12 3.1.4. Schrift ............................................................................................................12 3.1.5. Barrierefreiheit ...............................................................................................12 3.1.6. Mockups ...............................................................................................................12 3.2. Funktionale Anforderungen: Test und Abnahmefähigkeit ......................................12 Leistungsumfang Relaunch ...........................................................................................14 4.1 Inhalte und Funktionalitäten ..............................................................................14 4.2 Technische Anforderungen ...............................................................................15 4.3 Sicherheit und Datenschutz ..............................................................................15 4.4 Performance ............................................................................................................16 4.5 Tests und Abnahme ..........................................................................................16 4.6 Schulung ...........................................................................................................16 Zu liefernde Leistungen .................................................................................................17 Mitwirkungspflichten des Auftraggebers ........................................................................17 Projektplan und –zeitraum .............................................................................................17 Kommunikation und Umsetzung ....................................................................................18 Abgrenzung des Leistungsumfangs...............................................................................18

Seite 1 von 18

Leistungsbeschreibung

Relaunch und Redesign der Bundesjugendkuratorium-Webseiten (BJK) Aktenzeichen: 26-1300-IL-I-OeA – Los-Nr. 1 Stand: 02.09.2026

Auftraggeber und Projektüberblick Das Deutsche Jugendinstitut e. V. (DJI) ist eines der größten sozialwissenschaftlichen Forschungsinstitute Europas. In fünf Fachabteilungen sowie Fachgruppen, den eigenständigen Arbeitseinheiten der Abteilungen, untersuchen Forscherinnen und Forscher die Lebenslagen von Kindern, Jugendlichen und Familien sowie die damit zusammenhängenden sozialstaatlichen Angebote und Maßnahmen. Seit über 60 Jahren beraten die Expertinnen und Experten des DJI Politik und Verwaltung von Bund, Ländern und Kommunen. Sie analysieren gesellschaftliche Trends, begleiten neue fachliche Entwicklungen wissenschaftlich, erarbeiten Prognosen für die Zukunft und liefern wichtige Impulse für die Fachpraxis.

Die Arbeitsstelle Kinder- und Jugendpolitik am DJI lässt sich im Spannungsfeld von Wissenschaft, Politik und Praxis verorten. In diesem Rahmen dient sie als Korrespondenzpartnerin für die institutionellen Akteure der Kinder- und Jugendpolitik auf Bundesebene, insbesondere für das Bundesjugendkuratorium (BJK). Zur Aufgabe der Arbeitsstelle zählen neben der Beobachtung der einschlägigen Praxisfelder und der Akteure der Kinder- und Jugendpolitik auch die Unterstützung bei der Erstellung von Publikationen und die Öffentlichkeitsarbeit, einschließlich der BJK-Homepage und weiteren Medien.

Als Sachverständigengremium mit bis zu 15 unabhängigen Expert*innen aus Politik, Verwaltung, Verbänden und Wissenschaft, berät das Bundesjugendkuratorium die Bundesregierung in grundsätzlichen Fragen der Kinder- und Jugendhilfe und in Querschnittsfragen der Kinder- und Jugendpolitik. Im Zentrum der Beratungstätigkeiten stehen gesellschaftliche Veränderungsprozesse und ihre Auswirkungen auf die Lebenswirklichkeiten von Kindern, Jugendlichen und jungen Erwachsenen. Dabei legt das Sachverständigengremium besonderen Wert darauf, die Perspektive junger Menschen in die Beratungen einzubeziehen.1

Die Beratungsergebnisse des Bundesjugendkuratoriums werden der Bundesregierung, dem Bundesministerium für Bildung, Familie, Senioren, Frauen und Jugend sowie der (Fach-) Öffentlichkeit zur Verfügung gestellt. Die BJK-Homepage dient der Verbreitung der Arbeitsergebnisse des Bundesjugendkuratoriums.

1 https://bundesjugendkuratorium.de/data/pdf/Verwaltungsvorschrift_BJK.pdf

Seite 2 von 18

Leistungsbeschreibung

Relaunch und Redesign der Bundesjugendkuratorium-Webseiten (BJK) Aktenzeichen: 26-1300-IL-I-OeA – Los-Nr. 1 Stand: 02.09.2026

Ausgangssituation Aktuell umfasst die BJK-Homepage drei auf MODX Revolution basierte BJK-Webseiten (Domain und Subdomains):

• https://bundesjugendkuratorium.de

• https://leicht.bundesjugendkuratorium.de/

• https://en.bundesjugendkuratorium.de/

Die Webseiten bestehen aus einer öffentlich zugänglichen redaktionell gepflegten Inhaltsstruktur und einem Bestellformular (Kontaktformular mit Transaktionsmails über CleverReach) sowie weiterer Software wie Google reCAPTCHAV2 zum Schutz des Datenverkehrs und der datenschutzrechtlich korrekten Einbettung von Google Maps und YouTube-Videos sowie der Buttons zum Instagram-Account und YouTube-Kanal. Weiteres zum Datenschutz findet sich unter: https://bundesjugendkuratorium.de/datenschutzerklaerung.html (siehe Vergabeunterlagen: Anlage 4.1 Datenschutzerklärung)

Mehrsprachigkeit / Leichte Sprache Die Seite ist nicht klassisch "multilingual" mit DE/ EN-Switch, sondern nutzt ein Subdomain- Konzept für Leichte Sprache: leicht.bundesjugendkuratorium.de • Mediopunkt-Notation (·) für Silbentrennung schwieriger Wörter • Inline-Glossar auf jeder Seite mit Erklärungen schwieriger Begriffe direkt im Fließtext • Vereinfachte Navigation: "Texte von uns" statt "Publikationen", "Arbeits-stelle" statt "Arbeitsstelle" • Eigene Inhalte, bzw. Content-Aufbereitung: die Texte in leichter Sprache sind neu verfasst und werden weiterhin gänzlich neu im eigenen Stil geschrieben.

Des Weiteren befinden sich englische Inhalte – English Content – als eigene Tag-Kategorie auf der Publikationsseite (ausgewählte Stellungnahmen auf Englisch), aber keine vollständige englische Seitenversion.

CMS/ Tech-Stack Die Seite läuft auf MODX Revolution, und ist mit Tailwind CSS und GSAP umgesetzt. Bilder werden automatisch über pthumb als WebP ausgeliefert, folglich erfolgt eine serverseitige Bildoptimierung mit Format-Konvertierung.

Bestellfunktion für Druckpublikationen Auf der Publikationsseite gibt es ein Modal-Formular zum kostenlosen Bestellen von Print- Broschüren.

Seite 3 von 18

Leistungsbeschreibung

Relaunch und Redesign der Bundesjugendkuratorium-Webseiten (BJK) Aktenzeichen: 26-1300-IL-I-OeA – Los-Nr. 1 Stand: 02.09.2026

• Adressformular (Vorname, Nachname, Straße, Hausnummer, PLZ, Stadt, Land, Institution, E-Mail, Rückrufnummer, Kommentar) • Dropdown-Auswahl aller bestellbaren Stellungnahmen (automatisch generiert aus MODX, keine doppelte Pflege nötig) • Mengenangabe pro Publikation • Mehrere Bestellungen in einem Vorgang möglich ("Bestellung hinzufügen/ entfernen") • Kein Warenkorb/ Shop-System, sondern ein reines Bestellformular; die Broschüren sind kostenlos

Publikations-Bereich • Tag-basiertes Filtersystem mit Kategorien: Aktivitäten, Appell, bestellbar, English Content, Impulspapier, Offene Briefe, Pressemitteilungen, Stellungnahmen, Veranstaltungen, Zwischenrufe • PDF-Downloads direkt auf den Detailseite • Cookie-Consent • Eigene Implementation (kein Cookiebot/ OneTrust), zweistufig: "Alle Cookies akzeptieren"/ "Nur notwendige Cookies akzeptieren" • "Cookie Einstellungen" -Link im Footer zum nachträglichen Ändern

Infrastruktur Das System läuft auf Docker-Containern; für den Login auf den Serversystemen ist ein Client- Zertifikat notwendig. Backups werden vollautomatisch wöchentlich erstellt, weiterhin gibt es eine interne Versionierung auf atomarer Basis, sodass jeder durchgeführte Schritt ggf. rückgängig gemacht werden könnte. Die bestehenden BJK-Webseiten • https://bundesjugendkuratorium.de/ • https://leicht.bundesjugendkuratorium.de/ • https://en.bundesjugendkuratorium.de/ basieren auf dem MODX Revolution Content Management System (CMS) Version 3.1.2-pl (traditional) und werden aktuell von netcup GmbH in Nürnberg gehostet).

Aktuell laufen folgende Versionen: • ExtJS-Version: 3.4.1 • Smarty-Version: 4.5.5 • PHPMailer-Version: 6.9.3 • MagpieRSS-Version: 0.72 • MySQL Datenbank-Version: 5.7.38

Seite 4 von 18

Leistungsbeschreibung

Relaunch und Redesign der Bundesjugendkuratorium-Webseiten (BJK) Aktenzeichen: 26-1300-IL-I-OeA – Los-Nr. 1 Stand: 02.09.2026

Die drei Webseiten umfassen folgende Architektur (Bereitstellung, Backups und Security) • Dockerized environment: Die Umgebung befindet sich aktuell in einer virtuellen kleinen Umgebung mit vollständiger Kontrolle über die Architektur. Dazu gehört die PHP- Version, SQL, etc. -einmal in der Woche wird ein hartes Backup vom Docker-Image erstellt. • nginx reverse proxy: Die Umgebung beinhaltet einen kleinen Apache-Webserver, der die Seite ausliefert. An der Front befindet sich allerdings ein nginx, der die Requests lokal delegiert. Dementsprechend ist sichergestellt, dass IP-Adressen nach außen anonymisiert werden und keinerlei Angriffe auf die direkte Webserver-Ebene möglich sind. • MODX Architektur: Core-Verzeichnis mit allen PHP-Dateien aus dem MODX Kern ist aus dem web-accesible root entfernt. • Versionierung: Innerhalb von MODX besteht aktuell eine Versionierung auf Element- Ebene. • Native Backups: Über die harten Backups hinaus gibt es Backups von Datenbank und Dateisystem, die regelmäßig erstellt werden und zweiwöchentlich rotieren. Diese werden zusätzlich auf einer mit der DJI-Administration geteilten Cloud-Space gesichert, auf der man sich unabhängig von der aktuellen Agentur ein vollständiges, installierbares Backup der Webseite herunterladen kann. • maldet, fail2ban und weitere Sicherheitsmaßnahmen laufen auf dem Host-System. Auf diesem ist außerdem eine volle Dokumentation über externe Zugriffe, Zugriff durch Mitarbeiter und Audit-Logging gewährleistet. • Die Anwendungsprogrammierschnittstelle ist JSON API, d. h. JavaScript Object Notation-basiert.

Das aktuelle MODX Setup ist wie folgt: • Frontend: Das Frontend ist mit Tailwind CSS und entsprechenden Spezialkomponenten gebaut. Aktuell wird ein von der Agentur eigenes Cookie- Management verwendet, weil aus Sicht der Agentur "installierbare" Tools wie Usercentrics, Borlabs, Cookiebot, etc. die Anforderungen nicht erfüllen. Mit den Tools sind hart bestimmte Inhaltstypen kategorisiert; diese werden nicht geladen, sodass ein nachträgliches Blockieren nicht notwendig ist. Demnach ist sichergestellt, dass zum Beispiel kein Google Maps Code geladen wird, bevor den Cookies nicht zugestimmt wurde. Der Cookie-Manager ist in seiner Gestaltung auf einem alten Stand, weil nicht nach unterschiedlichen Kategorisierungen gearbeitet wird. • Weiterhin wird AlpineJS für Iterationen, GSAP für Animationen und lozad für Lazy- Loading verwendet, um Pagespeed-Anforderungen gerecht zu werden. • Architektur: Die Seite unterstützt Deutsch, Englisch und „Leichte Sprache“. Es besteht ein Kontextgraph, sodass Google bestimmte Inhalte nicht als Duplicate Content wahrnimmt; es wird klargestellt, dass es sich nur um einen alternativen Inhalt in einer anderen Sprache handelt. Des Weiteren gibt es Funktionen zur Bestellung von Inhalten, eine nach Tags gesteuerte Verwaltung für Publikationen, Filtermöglichkeiten, eine Suchfunktion u. a. m. Bilder werden im System automatisch skaliert, ggf. in kompaktere Formate konvertiert und automatisch zugeschnitten.

Seite 5 von 18

Leistungsbeschreibung

Relaunch und Redesign der Bundesjugendkuratorium-Webseiten (BJK) Aktenzeichen: 26-1300-IL-I-OeA – Los-Nr. 1 Stand: 02.09.2026

• Der E-Mail-Versand ist aktuell durch CleverReach gewährleistet.

Leistungsumfang Der Auftragsgegenstand umfasst folgende Leistungen:

− Technischer Relaunch der drei Webseiten einschließlich Migration der Inhalte

− Gestalterisches Redesign der drei Webseiten. Ziele sind ein Relaunch und ein Redesign der Webseite. Diese umfassen die technische und gestalterische Weiterentwicklung der bestehenden BJK-Webseiten:

• Migration auf MODX Revolution 3.2.0 oder ein anderes CMS auf aktuellen technischen Stand
• Barrierefreiheit gem. WCA 2.2 AA-Standard
• Verbesserte Nutzerführung nach DIN EN ISO 9241-110
• SEO-Anpassungen, damit die Webseiten nicht nur in den klassischen Suchmaschinen wie Bing, Google u. a., sondern auch in KI wie ChatGPT, Google Gemini, Microsoft Copilot, Perplexity u. a. gut zu finden und sichtbar sind. Als Kriterienkatalog für SEO-Anpassungen kann die von der Webseite https://www.ralfdodler.de/wie-ranke-ich-bei-gemini/ übernommene Übersicht verwendet werden:

Für die verbesserte Nutzerführung gem. DIN EN ISO 9241-110 sollen folgende Kriterien berücksichtigt werden: Aufgabenangemessenheit, Selbstbeschreibungsfähigkeit, Erwartungskonformität, Erlernbarkeit, Steuerbarkeit, Robustheit gegen Nutzungsfehler und Benutzer-Bindung Ausführungen dazu finden sich z. B. unter:

Seite 6 von 18

Leistungsbeschreibung

Relaunch und Redesign der Bundesjugendkuratorium-Webseiten (BJK) Aktenzeichen: 26-1300-IL-I-OeA – Los-Nr. 1 Stand: 02.09.2026

https://www.soultank.ch/blog/die-7-interaktionsprinzipien-der-iso-norm-9241-110

Hinweis: Zu erstellende, bzw. dem Auftraggeber zu übermittelnde Unterlagen (Protokolle, Dokumentationen, Präsentationen u. a.) sind in deutscher Sprache zu verfassen. Schulungen, sowie jegliche Kommunikation sind – insofern nicht anderes vereinbart – deutschsprachig zu gestalten.

Redesign Ziel des Redesigns ist es, das Design hinsichtlich Schrift, Farben und Grafiken neu zu gestalten. Das neue Design soll klar und schlicht sein –dies gilt dann auch für die Auswahl der Schrift, Farben und möglicher neuer Grafiken. Die Grafiken sollen nur gezielt aktualisiert werden. Um Mehraufwand zu vermeiden und die Wiederfindung bisher veröffentlichte Publikationsmeldungen im Original sicherzustellen, soll der Maßstab der bisherigen Grafiken beibehalten werden und lediglich je nach dem Design bei den neuen aktualisiert werden. Das Design soll für die gesamte Homepage überarbeitet und aktualisiert werden.

3.1. Benutzeroberfläche und Design

3.1.1. Hierarchieebenen und Menüführung

− Klare, schlichte Gestaltung der BJK-Startseite (siehe zum Beispiel die Webseiten weiter unten: The Atlantic oder Soziopolis), unter Berücksichtigung, dass der Fokus nicht auf dem journalistischen Aspekt liegt (zu viele Texte) oder zu kreativ/ verspielt gestaltet wird.

− Einheitliches, benutzerfreundliches Navigationskonzept mit verschiedenen Hierarchieebenen wie z. B. Startseite, Produkte, Inhalte und Unterseiten -gut klickbar und ohne hovern oder Ähnliches auswählbar.

− Übersichtliche Gestaltung der Landing Page, so dass die zentralen Inhalte (Was ist das BJK und was sind aktuelle Publikationen/ Aktivitäten) direkt ersichtlich und weitere Inhalte (z. B. die Arbeitsstelle Kinder- und Jugendpolitik) durch wenige Klicks erreichbar sind.

− Lebendigere Gestaltung der Webseite, ggf. über Fotos oder dynamische Elemente.

− Gestaltung sollte dem Ziel dienen, das Gremium bekannter zu machen und mehr in den Fokus zu rücken.

− Sehr gute on-page-Navigation zwischen Artikeln/ Rubriken; Infinite-Scroll/ Weiterlese- Elemente.

− Berücksichtigung aktueller Webstandards (inkl. WCA 2.2 AA Standard) in Abstimmung mit dem Auftraggeber.

3.1.2. Design und Farbgestaltung Das Design und die Farbgestaltung sollen gem. folgenden Anforderungen und Kriterien umgesetzt werden:

− Entwicklung eines neuen, responsiven Webdesigns auf Grundlage der bestehenden Inhalte.

Seite 7 von 18

Leistungsbeschreibung

Relaunch und Redesign der Bundesjugendkuratorium-Webseiten (BJK) Aktenzeichen: 26-1300-IL-I-OeA – Los-Nr. 1 Stand: 02.09.2026

− Das BJK-Logo mit seinen Farben soll dabei als Corporate Design zur Wiedererkennung beibehalten werden.

− Klare, schlichte, barrierearme Gestaltung des Designs.

− Dynamisches und modernes Design, klare Farbgestaltung (schlicht, aber ansprechend).

− Publikationen sollten nicht nur archiviert, sondern editorisch und ansprechend (als hochwertiges Editorialdesign) strukturiert sein, um Nutzer zum Lesen zu motivieren.

− Markante Typografie, starke Bildsprache.

− Ausgewogene Motion und schnelle Wahrnehmung zentraler Inhalte.

− Gut kuratierte Performance -auch bei vorherrschender Medienfülle.

− Keine leeren Ränder; Ausfüllen der Seite.

Die Seite kann beispielsweise Elemente enthalten wie eine Bühne (Beispiel 3.1.2.3: Website Bauhaus Universität Weimar), Effektboxen, Schattenbilder, CSS-Effekte (z. B. Hoverelemente) oder ein Laufband. Die Hoverelemente sollen sodann gut bedienbar und sichtbar sein. Alle Elemente sollten gezielt und tendenziell zurückhaltend eingesetzt, und die Seite damit nicht überladen werden. Folgende Webseiten enthalten Webdesgins, die als Grundlage für ein künftiges Webdesign der BJK-Webseiten dienen könnten. Die folgenden Screenshots und Beschreibungen können hierfür zur Orientierung dienen:

Seite 8 von 18

Leistungsbeschreibung

Relaunch und Redesign der Bundesjugendkuratorium-Webseiten (BJK) Aktenzeichen: 26-1300-IL-I-OeA – Los-Nr. 1 Stand: 02.09.2026

3.1.2.1 Beispiel: The Atlantic (https://www.theatlantic.com/world/)

• Hochwertiges Editorial-Design, markante Typografie, starke Bildsprache. Ausgewogene Motion und schnelle Wahrnehmung zentraler Inhalte; Performance trotz Medienfülle gut kuratiert.
• „Anti-Maximalismus“: Während viele Nachrichtenseiten den Bildschirm mit Widgets, Teasern und blinkenden Elementen überladen, setzt The Atlantic konsequent auf Restraint (Zurückhaltung). Der Fokus liegt ganz klar auf dem Text und der Typografie.
• Negativraum als Stilelement: Der großzügige Einsatz von leerem (weißem) Raum führt das Auge des Lesers gezielt und unaufgeregt durch die Artikel. Es wirkt anspruchsvoll und beruhigend, fast wie ein edles Buch-Layout.
• Illustrationen statt Stockfotos: Im World-Ressort fällt auf, dass anstelle austauschbarer Presse- und Stockfotos sehr oft hochwertige Vektorgrafiken, Collagen oder stark kuratierte, dramatische Fotografien genutzt werden. Das verleiht der politischen Berichterstattung eine intellektuelle, nahezu zeitlose Note.
• Strikte visuelle Hierarchie: Die Startseite des World-Ressorts bricht mit typischen Grid- Layouts (Raster-Layouts) und nutzt asymmetrische Spalten, um Hauptgeschichten sofort von kürzeren Analysen oder Kolumnen zu trennen.

Seite 9 von 18

Leistungsbeschreibung

Relaunch und Redesign der Bundesjugendkuratorium-Webseiten (BJK) Aktenzeichen: 26-1300-IL-I-OeA – Los-Nr. 1 Stand: 02.09.2026

3.1.2.2 Beispiel: Soziopolis (https://www.soziopolis.de/)

• Die Schriftarten sind für das Lesen am Bildschirm – sowohl Desktop, als auch auf einem mobilen Gerät, beispielsweise Smartphone – optimal gewählt und entsprechend leserfreundlich und -geeignet. Der Weißraum (White Space) wird großräumig genutzt, wodurch die Texte trotz ihrer Länge strukturiert wirken und den Leser aufgrund ihres Umfanges nicht überlasten und zum Weiterlesen anregen. Die Zeilenabstände und Textbreiten sind ergonomisch gut gewählt.
• Neben Essays bietet Soziopolis einen umfangreichen Servicebereich mit Stellenausschreibungen, Veranstaltungskalendern, „Calls for Papers“ und einer Zeitschriftenschau.
• Die Herausforderung bei wissenschaftlichen Plattformen ist oft die Verschachtelung. Die Trennung zwischen dem redaktionellen Magazinteil (Besprechungen und Essays) und dem Servicebereich ist hier visuell klar gelöst, sodass sich sowohl Gelegenheitsleser als auch Forschende, die gezielt nach Textpassagen suchen, schnell zurechtfinden.
• Das Design nutzt eine reduzierte, aber prägnante Farbpalette. Häufig dominieren gedeckte, akademisch-seriöse Töne, kombiniert mit klaren Akzenten zur Nutzerführung (z. B. für Kategorisierungen oder Buttons). Das Branding wirkt intellektuell und unaufgeregt, und repräsentiert die Trägerschaft des Hamburger Instituts für Sozialforschung sehr passend.

Das Design drängt sich nicht in den Vordergrund, sondern stellt die Inhalte und die wissenschaftliche Kommunikation in den Mittelpunkt, folglich funktional, ästhetisch langlebig und handwerklich sauber umgesetzt.

Seite 10 von 18

Leistungsbeschreibung

Relaunch und Redesign der Bundesjugendkuratorium-Webseiten (BJK) Aktenzeichen: 26-1300-IL-I-OeA – Los-Nr. 1 Stand: 02.09.2026

3.1.2.3 Beispiel: Uni-Weimar (https://www.uni-weimar.de/de/universitaet/start/)

• Ästhetisch anspruchsvoll, minimalistisch und typografisch stark –passend zum kreativen Profil der Universität. Herausragende Barrierefreiheit und Inklusion (Accessibility): Die Integration eines separaten Bedienbereichs für Barrierefreiheit direkt in der Menüstruktur ist vorbildlich. Optionen wie der Darkmode, die Kontrast- Einstellungen sowie das Klick- und Fokus-Feedback zeigen, dass die Seite hochgradig barrierefrei, nutzerzentriert und gesetzeskonform entwickelt wurde.
• Klare Zielgruppen-Strukturierung: Im Footer und in den Menüs werden die Inhalte logisch nach Nutzertypen separiert (Studierende, Beschäftigte, Alumni, Forschende, Gäste). Das erleichtert die Navigation auf einer historisch gewachsenen, komplexen Universitäts-Plattform enorm.
• Fokus auf visuelle Lebendigkeit: Das Design setzt stark auf großflächiges Bildmaterial, um das kreative und experimentelle Leben der Universität (wie die Jahresschau summaery nahbar und dynamisch zu transportieren: https://www.uni-weimar.de/de/universitaet/aktuell/veranstaltungskalender/highlights- des-jahres/2026/summaery/)

Seite 11 von 18

Leistungsbeschreibung

Relaunch und Redesign der Bundesjugendkuratorium-Webseiten (BJK) Aktenzeichen: 26-1300-IL-I-OeA – Los-Nr. 1 Stand: 02.09.2026

3.1.3. Fotos/ Grafiken Recherche und Bereitstellung von 10 passenden hochwertigen Fotos/ Grafiken für die Website

− BJK (3 Fotos)

− Editorial Publikationen (6 Fotos),

− Arbeitsstelle Kinder- und Jugendpolitik (1 Foto)

3.1.4. Schrift Als Schrift kann z. B. eine klassische Barock-Antiqua mit hohem Strichkontrast, ausgeprägten Serifen und offenen Punzen gewählt werden, die eine seröse und hochgradig lesbare Wirkung für redaktionelle Inhalte erzielt. Beispiele dafür finden sich zum Beispiel unter 3.1.2.1 (Websitee: The Atlantic).

3.1.5. Barrierefreiheit

− Umsetzung der Barrierefreiheit gem. WCAG 2.1, Stufe AA

− Die Barrierefreiheit soll auch im Falle einer Prüfung den geltenden Regelungen der Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik (BFIT-Bund) entsprechen und die Vorgaben erfüllen.

− Alle Navigations- und Inhaltsbereiche müssen mit Tastatur und Screenreader bedienbar sein.

− Farben, Bilder und Grafiken sollen auf Barrierefreiheit überprüft, und sofern es keine bereits veröffentlichten Publikationen oder Meldungen sind, entsprechend aktualisiert werden.

− Die Seite in leichter Sprache soll hinsichtlich der grafischen Umsetzung der Texte das bisherige Textlayout beibehalten.

− Alle drei Seiten (deutsche, englische und leichte Sprache) sollen leicht und gut sichtbar aufrufbar und navigierbar sein.

3.1.6. Mockups Dem Angebot sind zwei Beispielmockups von Webseiten beizulegen, die die beschriebene Leistung aufgreifen, bzw. dieser entsprechen. Die Konkretisierung der genauen Ausgestaltung des Webdesigns erfolgt sodann im Bearbeitungsprozess nach Abstimmung von Auftragnehmer und Auftraggeber, nach der Zuschlagserteilung.

3.2. Funktionale Anforderungen: Test und Abnahmefähigkeit

− Der Auftragnehmer testet die Anwendung nach der Migration vollständig funktional sowie technisch. Das ausführliche Testprotokoll in deutscher Sprache wird dem Auftragnehmer zur Prüfung und Abnahme bis 1. Dezember 2026 bereitgestellt.

− Die drei Webseiten gelten als erfolgreich migriert, wenn alle bisherigen Funktionen ohne Einschränkungen nutzbar sind, keine Funktions-, Script- oder Darstellungsfehler auftreten,

Seite 12 von 18

Leistungsbeschreibung

Relaunch und Redesign der Bundesjugendkuratorium-Webseiten (BJK) Aktenzeichen: 26-1300-IL-I-OeA – Los-Nr. 1 Stand: 02.09.2026

alle Daten vollständig und korrekt übernommen wurden und die in der Leistungsbeschreibung definierten Tests (Punkt 4.5) erfolgreich abgeschlossen sind. Zur Konkretisierung der Abnahmeanforderungen sind nachfolgend konkret messbare Kriterien und Nachweisverfahren aufgeführt. Die drei Webseiten müssen in der Desktop- und Mobilansicht alle Inhalte korrekt darstellen und alle interaktiven Funktionen vollständig bereitstellen. Insbesondere gilt: o Responsives Design: Texte und Grafiken müssen in den gängigen Browsern und bei den definierten Viewports nach aktuellem Standard gut lesbar und vollständig sichtbar sein. Texte und Grafiken sollen vollständig sichtbar und gut lesbar sein und kein Layoutbruch entstehen. Die Verwendung von Breakpoints und Container Queries z. B. zur Anpassung von Bildern soll erfolgen, um Layoutbrüche zu vermeiden. Pixelgrößen sollen wie folgt sein: Darstellung Desktop (ab 1200 px Breite), Darstellung Tablet (768–1199 px Breite) und Darstellung Mobil (320–767 px Breite). o Mobile First beachten, d. h. die BJK-Homepage mit Domain und Subdomain muss für das Smartphone geeignet sein, da hier die Ladezeit in der Regel am längsten ist. Zur Orientierung kann die untenstehende Metrik dienen. o Alle Videos und Audiodateien müssen abspielbar sein (Play/ Pause/ Lautstärke/ Vollbild, Alternativtext ausklappbar) und dürfen keine Playback-Fehler zeigen. o Alle dynamischen UI-Elemente (z. B. Akkordeons, Slider, Tabs) müssen funktionsfähig sein. o Interne Querverlinkungen innerhalb der drei Webseiten sowie externe Links müssen korrekt auflösen; externe Links sollen in einem neuen Tab geöffnet werden. o Fehlfunktionen, Darstellungsfehler oder fehlende Inhalte sind als Mängel zu dokumentieren und vor Abnahme zu beheben. o Die Bestellfunktion „Formular hier anklicken: Stellungnahmen bestellen“ unter https://bundesjugendkuratorium.de/presse/ muss funktionsfähig und ein Versand von Mails als interne Bestellmail an bjk@dji.de möglich sein. o Die Sicherheit der Webseiten muss nach OWASP Application Security Verification Standard (ASVS) gewährleistet sein. o Die Funktionen wie reCAPTCHA oder Google Maps für den Standort der AST KJP müssen eingebunden sein.

Metrik2 Was sie misst Gut Schlecht

LCP (Largest Contentful Paint) Wie schnell das größte sichtbare Element lädt < 2,5 s > 4,0 s

INP (Interaction to Next Paint) Wie schnell die Seite auf Eingaben reagiert < 200 ms > 500 ms

2 Metrik übernommen aus: https://huchel-medienagentur.de/wissen/responsive-design-2026

Seite 13 von 18

Leistungsbeschreibung

Relaunch und Redesign der Bundesjugendkuratorium-Webseiten (BJK) Aktenzeichen: 26-1300-IL-I-OeA – Los-Nr. 1 Stand: 02.09.2026

CLS (Cumulative Layout Shift) Wie stark das Layout beim Laden springt < 0,1 > 0,25

Leistungsumfang Relaunch Der bestehende Internetauftritt ist technisch in Absprache mit dem Auftraggeber vollständig zu überarbeiten. Die modernisierten drei Webseiten müssen alle bisherigen Inhalte und Funktionen in überarbeiteter, zeitgemäßer und barrierefreier Form bereitstellen. Der Auftragnehmer übernimmt in Abstimmung mit dem Auftraggeber folgende Leistungen für den Auftraggeber.

4.1 Inhalte und Funktionalitäten Navigation und Menüstruktur Übernahme aller Inhalte der bestehenden drei Webseiten (Texte, Medien, Seitenstrukturen der Webseite in deutscher, in englischer und in leichter Seite)

− Strukturierung in Navigationsmenüs gemäß bestehender Seitenhierarchie

− Sicherzustellen ist auch, dass automatisch Kopien der deutschen Seite auf der Webseite in englischer und in leichter Sprache erstellt werden können. Dies beinhaltet auch eine Lexikon-Verwaltung mit einem Lexikon-Editor zur Anpassung aller drei Webseiten.

− Migration bestehender redaktioneller Inhalte in das neue System

− Formularfunktionen mit Validierung und DSGVO-konformer Verarbeitung

Redaktion

− Redaktion der Texte im CMS-Editor soll einfach und intuitiv durchführbar sein

− Bilder sollen leicht hochzuladen sein

− Redakteur:innen sollen bei der Veröffentlichung zu erkennen sein

− Eine nachträgliche Bearbeitung der Texte soll jederzeit möglich sein.

− Unterscheidung zwischen mehreren Überschriftsebenen, Textebenen, Bildern usw.

Suchfunktionen Frontend (Beispiele)

− Format Veröffentlichung

− Thema

− Zielgruppen der Veröffentlichungen (z.B. Politik, Wissenschaft, Kommunen usw.)

Suchfunktion Backend (Beispiele)

− Ressourcen-Titel

Seite 14 von 18

Leistungsbeschreibung

Relaunch und Redesign der Bundesjugendkuratorium-Webseiten (BJK) Aktenzeichen: 26-1300-IL-I-OeA – Los-Nr. 1 Stand: 02.09.2026

− Langer Titel

− Zusammenfassung

− Beschreibung:

− Alias

− Menü-Titel

− ID

− Veröffentlicht

− Zurückgezogen

− Eltern-Element

− Gelöscht

− Nicht gelöscht

Bestellfunktion Publikationen Die BJK-Publikationen sollen über die BJK-Webseite wie bisher bestellbar sein.

4.2 Technische Anforderungen

− Verwendung einer aktuellen gängigen CMS-Version, die die Leistungsbeschreibung qualitativ angemessen und auf einem aktuellen Stand der Technik (state of the art) umsetzen kann. Das CMS soll auf dem EU-Markt etabliert sein und eine entsprechend weitläufige User-Community aufweisen; es wird sichergestellt, dass entsprechende Funktionen und Weiterentwicklungen zukünftig gewährleistet sind und ggf. Systemupgrades/ -dates bezogen werden können.

− Trennung von Code, Konfiguration und Inhalten

− Bereitstellung eines Code-Repository zum Auslesen des Quellcodes

− Verwendung eines Template-Systems zur Trennung von Logik und Darstellung

− Die Verwendung proprietärer oder lizenzpflichtiger Drittkomponenten ohne Zustimmung des Auftraggebers ist nicht gestattet.

− Unterstützung aktuell verfügbarer Browser (z. B. Edge, Chrome, Firefox, Safari u. a.)

4.3 Sicherheit und Datenschutz

− Die Struktur der Webseite muss gewährleisten, dass Drittanbieter wie die genannten eingebettet werden können. Sicherzustellen ist, dass der Datenverkehr datenschutzkonform geschützt wird und die verwendete Software barrierefrei ist. Die dafür zu verwendende Software soll vom Auftragnehmer bereitgestellt werden.

− Der Cookiemanager ist zu aktualisieren und der Datenschutz zu berücksichtigen und zu gewährleisten (siehe Punkt 4.2 Sicherheit und Datenschutz, sowie entsprechend Vergabeunterlagen: Anlage 4.1) und wenn notwendig durch den Auftragnehmer mit Hilfe von Consent-Management-Tools wie Usercentrics, Brolabs etc. anzupassen. Alternativ

Seite 15 von 18

Leistungsbeschreibung

Relaunch und Redesign der Bundesjugendkuratorium-Webseiten (BJK) Aktenzeichen: 26-1300-IL-I-OeA – Los-Nr. 1 Stand: 02.09.2026

kann der Auftragnehmer auch rechtssicher formulierte Texte eigenständig zur Verfügung stellen; diese müssen ebenfalls den geltenden Regularien entsprechen.

− Der Betrieb der drei Webseiten ist ausschließlich über HTTPS zu gewährleisten.

− Umsetzung von CSRF-Schutz, XSS-Prävention, SQL-Injektion und sicherer Formularverarbeitung.

− Keine Verwendung von extern eingebundenen Skripten ohne ausdrückliche Freigabe durch den Auftraggeber/ den Nutzer.

− Umsetzung eines rechtskonformen Cookie-Consent-Managements gem. gesetzlicher Vorgaben wie DSGVO, ePrivacy, TDDDG u. a. mit gut sichtbarem Banner (nicht versteckt oder am Rand) und laufende Aktualisierung. Das Consent-Management muss abhängig von der Ausgestaltung der Webseite die verschiedenen Ebenen der Zustimmung unterscheiden, die jeweils separat genauer zu erläutern und anzunehmen oder abzulehnen sind. Der Auftragnehmer stellt den datenschutzkonformen Einsatz von etwaigen Programmen sicher.

− Rechtskonforme Einbindung einer Datenschutzerklärung und Bereitstellung der hierfür benötigten Informationen

− Der Auftragnehmer übernimmt in Abstimmung mit dem Auftraggeber Anpassungen und ggf. Ergänzungen der bestehenden Datenschutzerklärung an die neue Umgebung. Die Anwendung muss frei von bekannten Sicherheitslücken sein -gemäß OWASP Top 10 oder in gängigen CVE-Datenbanken gelistete Sicherheitslücken.

4.4 Performance

− Die Ladezeit der Startseite sollte unter einer Sekunde liegen und 1 Sekunde nicht überschreiten (z. B. bei 50 Mbit/s Leitung)

− Die drei Webseiten müssen bei gleichzeitiger Nutzung durch 1.000 Nutzer in einer Minute voll funktionsfähig bleiben.

4.5 Tests und Abnahme Die Anwendung ist abnahmefähig, wenn alle in der Leistungsbeschreibung genannten Anforderungen vollständig erfüllt sind. Vorgehen:

− Funktionale Tests – alle Seiten und Funktionen – erfolgen durch den Auftragnehmer.

− Barrierefreiheitstest (Tastaturbedienung, Kontraste, Screenreader-Kompatibilität) Für dieses Vorgehen soll die Vorlage des Testprotokolls (siehe Datei im Anhang) vom Auftraggeber verwendet werden. Anpassungen durch den Auftragnehmer am Testprotokoll erfolgen nur durch Abstimmungen mit dem Auftraggeber.

4.6 Schulung Im ersten Monat nach der Abnahme ist eine zweistündige Online-Schulung mit sechs Mitarbeitenden der Arbeitsstelle Kinder- und Jugendpolitik über den Relaunch der Homepage

Seite 16 von 18

Leistungsbeschreibung

Relaunch und Redesign der Bundesjugendkuratorium-Webseiten (BJK) Aktenzeichen: 26-1300-IL-I-OeA – Los-Nr. 1 Stand: 02.09.2026

sowie die Nutzung des CMS und der Funktionen der BJK-Homepage mit Hilfe einer Präsentation durchzuführen, die dem Auftragnehmer zur Verfügung gestellt wird. Dafür ist zusätzlich nach spätestens einer Woche ein Protokoll mit den wichtigen Aktualisierungen und wichtigen Punkten der neuen Funktionen zu erstellen und dem Auftraggeber zu übermitteln.

Zu liefernde Leistungen Der Auftragnehmer hat folgende Leistungen dem Auftraggeber zu übergeben:

− Lauffähige CMS-Webanwendung auf dem Server

− Vollständiger Quellcode inkl. aller Projektdateien an einen vom Auftraggeber benannten Ort: Die Übergabe erfolgt als vollständiger Git-Mirror-Export des Repositories inklusive aller Branches, Trunk und der kompletten Commit-Historie (kein Shallow-/Squash-Export). Dies wird als Archiv-Datei (tar.gz oder zip) geliefert. Zusätzlich sind sämtliche Projekt- Metadaten (Issues, Merge Requests, Wiki, CI/CD-Konfiguration) in exportierbarer Form bereitzustellen. Eine selektive oder unvollständige Übergabe – etwa ohne Versionshistorie – ist nicht zulässig.

− Datenbank-Dump (Import auf Zielsystem und zugreifbar für Auftraggeber)

− Technische Dokumentation (Code, Systemkonfiguration, Deployment-Schritte)

− Schulung mit Protokoll (siehe Punkt 4.5)

− Einpflegen von Inhalten (Texte, Bilder, etc.)

− Protokollierte Testergebnisse

− Bereitstellung eines Code-Repository Leistungsort: Die Leistungen werden remote erbracht (Deutsches Jugendinstitut e. V., Nockherstraße 2, 81541 München)

Mitwirkungspflichten des Auftraggebers Der Auftraggeber verpflichtet sich zur umfassenden Ausführung der Arbeiten des Auftragnehmers folgende Leistungen bereitzustellen:

− Bestehende Inhalte und Materialien zur Verwendung im Relaunch

− Ansprechpartner für Rückfragen und fachliche Abnahmen einschließlich Austauschmeetings (Onlineformat), die von Auftragnehmer und Auftraggeber zeitlich abgestimmt werden. Vom Aufraggeber entsprechend angesetzte Austauschmeetings müssen sodann innerhalb einer Arbeitswoche erfolgen.

− Erstellung und Aktualisierung der Datenschutzerklärung (siehe Los 2: Aufgabe des Auftragnehmers und Übermittlung durch den Auftraggeber, sofern zwei unterschiedliche Anbieter den Zuschlag erhalten sollten.).

Projektplan und –zeitraum Die Leistung wird aufgrund des begrenzten Projektzeitraums innerhalb folgenden Zeitraums erbracht:

Seite 17 von 18

Leistungsbeschreibung

Relaunch und Redesign der Bundesjugendkuratorium-Webseiten (BJK) Aktenzeichen: 26-1300-IL-I-OeA – Los-Nr. 1 Stand: 02.09.2026

Meilensteine Umzug und Relaunch

Der Relaunch der drei Webseiten erfolgt spätestens bis zum 01.12.2026. Der Auftragnehmer verantwortet eine reibungslose Systemübergabe, sodass das Hosting, sowie die Wartungs- und Supportleistungen (siehe auch Verfahren 26-1300-IL-I-OeA – Los-Nr. 2) ggf. durch eine andere Partei erfolgen können. Die damit verbundene Absprache, sowie Übergabe erfolgt im Zeitraum von Mitte/ Ende November bis spätestens 01.12.2026.

Kommunikation und Umsetzung Durch den Auftragnehmer ist eine Ansprechperson zur Verfügung zu stellen, die sich mit dem Auftraggeber abstimmt und die durchzuführenden Arbeiten auf Seiten des Auftragnehmers koordiniert. Der Ansprechpartner muss während der üblichen Arbeitszeiten (Montag bis Freitag, jeweils mindestens von 09:00 bis 17:00 Uhr) regelmäßig telefonisch und per E-Mail erreichbar sein. Sollte der Ansprechpartner der Auftragnehmerin verhindert sein, muss eine Vertretung be- nannt werden. Ein Kick-Off-Onlinemeeting zur grundsätzlichen Abstimmung des Gesamtprojekts muss direkt wenige Tage nach Zuschlagserteilung erfolgen. Absprachen, bzw. die daraus resultierenden Arbeiten, werden innerhalb eines Zeitraums von ein bis zwei Wochen insbesondere im Rahmen des Projektzeitraums (Punkt 7) vom Auftragnehmer umgesetzt.

Abgrenzung des Leistungsumfangs Nicht Bestandteil der Leistung sind: Fachliche und inhaltliche Redaktion neuer Texte und Medien (Texterstellung, Medienproduktion im Rahmen des Projektes/ Ausnahme ist die Datenschutzerklärung).

Seite 18 von 18