Handoff bis Launch: Der Agentur‑Leitfaden für die Zusammenarbeit mit JAR Media

Eine starke Frontend‑Vorlage aus Ihrer Agentur ist die halbe Miete. Je klarer die Übergabe, desto schneller und reibungsloser wird die technische Umsetzung im Backend und die Integration in CMS oder Shop. Nutzen Sie diese Checkliste als verbindliche Grundlage für den Handoff.

Checkliste Design- und Prototyping-Übergabe:

• Figma-Link mit festen Versionen/Tags, kommentierbar und mit klarer Seitenstruktur (Startseiten, Templates, Komponenten).
• Einheitliche Benennung und Struktur von Komponenten/Varianten; keine „Detach“-Fragmente.
• Dokumentierte Layout-Grids, Spacing‑Systeme, Typo‑Skalen, Schatten und Z‑Ebenen.
• Zustände für alle interaktiven Elemente: default, hover, focus, active, disabled, loading; Fehler-/Erfolgszustände.
• Breakpoints und Responsive-Regeln (z. B. 360/768/1024/1280/1440 px) inklusive Priorität der Content-Blöcke und Verhalten bei extremen Viewports.
• Interaktionen/Animationen (Timing, Easing, Dauer) mit Angaben zu „reduzierter Bewegung“ als Barrierefreiheitseinstellung.
• A11y-Festlegungen: semantische Struktur (H1–H6), Landmarks (header/nav/main/aside/footer), Fokus-Reihenfolge, sichtbarer Fokusstil, Farbkontrast (mind. 4.5:1), Tastaturbedienbarkeit, Skip-Links.
• Formulare: Feldtypen, Masken, Validierungsregeln, hilfreiche Fehlermeldungen, Inline-Feedback, Captcha-Strategie, Double‑Opt‑In bei Newsletter/Downloads.
• SEO-Bausteine im Layout: Platzierung für Title/Description, Open Graph/Twitter Cards, Breadcrumbs, strukturierte Daten (z. B. Article, Product, Organization).
• Bild-/Icon-Assets: Quellen/Lizenzen, Fokuspunkte, benötigte Varianten (1x/2x), bevorzugte Formate (SVG für Icons, AVIF/WebP/JPG für Bilder), maximale Breiten/Höhen.
• Content-Grundlage: finales oder finales-nahes Copydeck, Tonalität, Glossar, variable Platzhalter (z. B. Preise), rechtlich geprüfte Texte (Impressum, Datenschutz).

Technische Handoff-Ergänzungen:

• Priorisierte Feature-Liste und Muss-/Soll-/Kann‑Kriterien pro Scope.
• Definition, welche Teile im Frontend (Agentur) vs. Backend (JAR Media) entstehen.
• Drittsysteme und Skripte (Tag-Plan): Analytics, Consent/CMP, Chat, A/B‑Testing, Maps, Schriftanbieter, Fonts (Local Hosting bevorzugt).
• Performance-Vorgaben: Zielgrößen pro Seite/Template (z. B. JS ≤ 170 KB, CSS ≤ 80 KB, Bilder ≤ 500 KB initial).
• Barrierefreiheitsziel: WCAG 2.1 AA als Mindeststandard.

Damit schaffen Sie einen präzisen Projektstart, reduzieren Rückfragen und vermeiden kostspielige Schleifen.

2. Komponenten-Workflow und Verträge für Content-Modelle und APIs

Zwischen sauberem Design und stabilem Backend vermittelt ein konsistenter Komponenten‑Workflow. Gleichzeitig sichern Content‑ und API‑Verträge, dass Frontend, CMS/Shop und Schnittstellen perfekt zusammenpassen.

Checkliste Komponenten-Workflow:

• Design Tokens als Single Source of Truth: Farben, Typo, Spacing, Radius, Shadows, Z‑Index, Motion. Export als JSON und Mapping auf CSS‑Variablen.
• Variantendesign mit dokumentierten Zuständen und Barrierefreiheitsnotizen.
• Storybook für alle Bausteine:
  • Controls/Docs für Props, Slots, Events.
  • Beispiele für alle States/Breakpoints.
  • Accessibility-Checks (z. B. axe), visuelle Regressionstests.
• Datenentkopplung: Komponenten zeigen Mock-/Fixture-Daten; keine Hardcodings von Texten, sondern Bezug auf Content-Model Felder.
• Naming-Konventionen und Pfadregeln (BEM/utility-first oder komponentenbasiert) klar festlegen.

Content‑Model‑Verträge (CMS/Shop):

• Auflistung aller Content-Typen (z. B. Seite, Artikel, Landingpage, Produkt, Kategorie, FAQ, Teaser).
• Felder je Typ: Typ, Validierung (Pflicht, Länge, Regex), Hilfe-/Redaktionstexte, Defaults.
• Beziehungen/Referenzen (z. B. Produkt → Kategorie; Teaser → Zielseite).
• Global Fields: SEO‑Metadaten, Open Graph, Canonical, Indexierungsflags, Schema.org.
• Medienverwaltung: Fokuspunkte, Zuschnittsregeln, Derivate (Thumb/Medium/Large), AVIF/WebP‑Generierung.
• Lokalisierung: mindestens de-DE, optionale weitere Sprachen; Slug‑Regeln, Datum-/Zahlformat.
• Redaktions-Workflow & Rollen: Entwurf → Review → Freigabe; Rechte/Versionierung.
• Migrationsplan: Feldänderungen versioniert, Abwärtskompatibilität, Backups.

API‑Verträge (REST/GraphQL):

• Spezifikation: OpenAPI/Swagger oder GraphQL‑Schema als verbindliche Referenz, versioniert (z. B. /v1).
• Endpunkte/Queries mit Request-/Response-Beispielen, Pflichtparametern, Paginierung (cursorbasiert bevorzugt), Sortierung/Filter.
• Lokalisierung und Währungen (z. B. „de-DE“, EUR) konsistent in Responses.
• Fehlerhandling: standardisierte Codes, Fehlerobjekte, Korrelation-IDs, Idempotenz für schreibende Calls.
• Caching-Hinweise: ETag, Cache-Control, Stale‑While‑Revalidate; TTL-Vorgaben pro Ressource.
• Ratenbegrenzung und Fair Use; Webhook-Vertrag (Signaturen, Retries, Dead‑Letter‑Queue).

Mit diesen Verträgen vermeiden Sie Missverständnisse und sichern die Wiederverwendbarkeit von Komponenten im gesamten Projekt.

3. Backend-Integration: Endpoints, Webhooks, Auth, Datenflüsse

JAR Media übernimmt die robuste, sichere und performante Implementierung der Backend‑Logik und Integrationen in CMS/Shop‑Systeme sowie Drittsysteme.

Checkliste Endpoints und Datenflüsse:

• Produkt-/Katalogdaten: Produkte, Varianten, Preise, Verfügbarkeiten, Kategorien, Attribute/Filter.
• Checkout/Bestellung: Warenkorb, Versandarten, Zahlungsmittel, Steuerlogik (inkl. deutscher USt.-Regeln), Bestellstatus.
• Kundendaten: Registrierung, Login, Passwortrücksetzung, Profil, Adressen, DSGVO‑Auskunft/Löschung.
• Suche/Filter: serverseitige Suche, Synonyme, Facetten, Sortierung; Fallback bei leeren Ergebnissen.
• Content-Delivery: SSR/SSG/ISR‑Strategie, Edge‑Caching, Revalidierung nach Webhook‑Events.

Webhooks und Ereignisse:

• Auslöser: product.updated, inventory.changed, order.created, customer.updated, page.published.
• Sicherheit: Signierung (HMAC), Timestamps/Replay‑Schutz, mTLS optional.
• Zuverlässigkeit: Retries mit Exponential Backoff, DLQ, Idempotenz‑Keys.
• Verarbeitung: Event‑Router/Queue, Reihenfolgegarantie falls nötig.

Authentifizierung/Autorisierung:

• OAuth2/OIDC (Client Credentials/Authorization Code) oder signierte JWTs; API‑Keys nur für interne Systeme.
• Rollen und Scopes; Least‑Privilege für Maschinen‑ und Nutzerkonten.
• Geheimnisverwaltung (z. B. Vault/Key Management), Schlüsselrotation, IP‑Allowlist bei Bedarf.
• Browser-Sicherheit: CSRF‑Schutz, SameSite‑Cookies, Content Security Policy, sichere Headers (HSTS, X‑Frame‑Options).

Performance und Stabilität:

• Caching auf mehreren Ebenen (CDN/Edge, Reverse Proxy, Anwendung, Datenbank).
• Bild‑ und Asset‑Optimierung (AVIF/WebP, Responsive Images, Lazy Loading, Preload/Prefetch).
• Datenbankindizes, Query‑Budget, Metriken/Tracing (APM), Circuit Breaker/Retry‑Policies zu Drittsystemen.
• Warteschlangen für rechenintensive Aufgaben (Bildderivate, Exporte, Mails).

Diese Maßnahmen sorgen für schnelle Antwortzeiten, hohe Zuverlässigkeit und rechtskonforme Verarbeitung in deutschen/europäischen Umgebungen.

4. Zusammenarbeit, Qualitätssicherung, Performance-Budgets und Datenschutz

Transparente, agile Prozesse sind entscheidend, wenn Frontend bei der Agentur und Backend bei JAR Media liegt. Wir arbeiten inkrementell, mit klaren Kriterien für Abnahme und Qualität.

Arbeitsmodus und Akzeptanzkriterien:

• Gemeinsames Backlog mit priorisierten Epics/Stories; Refinement durch Agentur (Fach/Design) und JAR Media (Tech).
• Time‑&‑Material mit Sprint‑/Iterationsplanung; wöchentliche Reviews/Demos, Planungs‑ und Retro‑Slots.
• Definition of Ready (DoR): Ziele, Mockups/Tokens vorhanden, API/Content-Verträge geklärt, Abhängigkeiten benannt.
• Definition of Done (DoD): Code reviewed, getestet, dokumentiert, in Staging bereitgestellt, Akzeptanzkriterien erfüllt.
• Akzeptanzkriterien im Given‑When‑Then‑Stil, z. B.:
  • Gegeben eine Produktliste mit > 50 Artikeln, wenn ein Nutzer auf Mobile filtert, dann erscheint das Ergebnis in < 600 ms und der Fokus springt auf den Listenanfang.

Performance-Budgets und Core Web Vitals:

• Budgets (Startwerte, projektspezifisch zu schärfen):
  • JS initial ≤ 170 KB, CSS ≤ 80 KB, HTML ≤ 50 KB, Bilder ≤ 500 KB; Drittanbieter‑Skripte strikt kuratieren.
• Core Web Vitals (als Abnahmekriterium auf Staging/Produktiv):
  • LCP < 2,5 s, CLS < 0,1, INP < 200 ms, gemessen bei 75. Perzentil (mobil).
• Governance für Drittanbieter: Tag‑Plan, Consent‑Zustände, asynchrones Laden, Server‑Side‑Tagging wo sinnvoll.

Qualitätssicherung und CI:

• Automatisierte Checks in CI: Linting, Typprüfungen, Unit‑ und Integrations‑Tests, visuelle Regression, A11y‑Audit, Lighthouse‑Budgets.
• E2E‑Tests für kritische Flows (Checkout, Formularversand, Suche).
• Staging‑Umgebung mit realitätsnahen Daten (anonymisiert), Basic‑Auth/Noindex, Versions‑ und Migrationsstrategie.
• Preview‑Deployments pro Branch für Review durch die Agentur.

DSGVO/TTDSG und Consent-Setup (DE‑Fokus):

• Consent Management Platform (TCF 2.2‑konform oder maßgeschneidert), technische Blocks ohne Einwilligung, klare Kategorien.
• Datenverarbeitung in der EU/DE, AV‑Verträge, TOMs, Protokollierung der Einwilligungen.
• Analytics/Tracking nur nach Opt‑In; IP‑Anonymisierung, Serverstandort EU; Consent Mode v2, cookieloser Fallback für Basis‑Metriken.
• Formulare: zweckgebundene Einwilligungen, Double‑Opt‑In, revisionssichere Nachweise.
• Lösch-/Auskunftsprozesse, Log‑Rotation, minimalinvasive Datenspeicherung.

Sicherheit:

• Abdeckung OWASP Top 10, Dependency‑Scanning, SAST/DAST in CI, Security‑Headers, regelmäßige Updates.
• Rollen-/Rechtekonzept im CMS/Shop; 2FA für Admins; Backup‑/Restore‑Proben; Notfall‑/Rollback‑Plan.

5. Launch-Checkliste, Content-Befüllung, Abnahme und Betrieb

Vor dem Go‑Live sichern strukturierte Checklisten die Qualität. Nach dem Launch gewährleisten Monitoring und saubere Prozesse den stabilen Betrieb.

Content-Befüllung und Redaktions-Enablement:

• Redaktionsrechte und Workflows, Schulungen, Guidelines für Bildgrößen, Alt‑Texte, interne Verlinkung.
• Vollständige Befüllung aller Content‑Typen inkl. Fallbacks (z. B. Platzhalterbilder vermeiden).
• Qualitätssicherung: Rechtschreibung, Lesbarkeit, Konsistenz von Terminologie und Tonalität.
• Medienprüfung: Fokuspunkte, responsive Varianten, Kompression, Urheberrechte.
• Redirect‑Map (alte → neue URLs), Canonicals, Breadcrumbs, 404‑/410‑Strategie.

Technischer Launch:

• DNS‑Vorbereitung (niedrige TTL, geplantes Umschaltfenster), SSL/TLS‑Zertifikate, HSTS, HTTP/2/3.
• Caching/CDN aktiv, Cache‑Invalidierung, Warm‑Up kritischer Seiten.
• Robots.txt, XML‑Sitemaps, strukturierte Daten validiert; Search Console/Bing Webmaster eingereicht.
• Fehlerseiten (404/500) gestaltet und barrierefrei; Monitoring/Alerting (Uptime, Fehler, Logs).
• Security‑/Compliance‑Check: CSP, CORS, Cookie‑Einstellungen (Secure, HttpOnly, SameSite), CMP live.
• Performance‑Smoke‑Tests auf Prod kurz nach DNS‑Switch; Web Vitals RUM aktivieren.

SEO/Analytics/Tracking:

• Analytics‑Konfiguration mit Consent‑Signalen, Events/Conversions (E‑Commerce, Formularziele).
• Server‑Side‑Tagging, wo sinnvoll; Tag‑Plan gepflegt; DataLayer‑Konventionen dokumentiert.
• Meta‑Titel/Descriptions, Open‑Graph, Twitter Cards, Favicons/Manifest, hreflang (falls mehrsprachig).
• Core Web Vitals Monitoring kontinuierlich (RUM + periodische Lab‑Checks).

Abnahme und Hypercare:

• Formale Abnahme je Scope auf Staging, dann auf Produktion nach Launch‑Smoke‑Test.
• Hypercare‑Phase (z. B. 2–4 Wochen) mit schnellen Reaktionszeiten, priorisierter Bugfixing‑Lane.
• Betriebshandbuch/Runbooks: Deploy‑Prozess, Backups/Restores, Berechtigungen, On‑Call‑Regeln.

Langfristiger Betrieb und Weiterentwicklung:

• CI/CD‑Pflege, regelmäßige Dependency‑Updates und Sicherheits‑Patches.
• Roadmap‑Backlog mit datengetriebenen Prioritäten (Analysen, Nutzerfeedback, A/B‑Tests).
• Re‑Baselining der Performance‑Budgets nach größeren Features; Drittanbieter regelmäßig auditieren.
• Vereinbarte Service‑Zeiten und Kommunikationskanäle; transparente Stundenberichte und Budget‑Forecasts.

Mit diesen Checklisten und Verträgen liefern Agentur‑Frontend und JAR‑Media‑Backend gemeinsam belastbare, performante und rechtskonforme Websites und Shops für den deutschen Markt. Sie behalten kreative Steuerung und Kundennähe, während wir die technische Umsetzung, Integration und Qualitätssicherung agil und nachvollziehbar verantworten. So entstehen Projekte, die nicht nur schön aussehen, sondern messbar schnell, barrierefrei, wartbar und sicher sind.