Redesign Integration in ProcessWire

Komplettes Redesign für 130 Seiten mit modernem Design-System

130
Seiten gesamt
5
Sprachen
30+
Komponenten
5
Templates
📋

Projektübersicht

Komplette Template-Integration und Redesign von ca. 130 Seiten für die Website sales-job.com. Entwicklung eines modernen, responsiven Design-Systems mit über 30 wiederverwendbaren Komponenten und 5 Haupttemplates, vollständig integriert in ProcessWire CMS mit Twig Template Engine.

Dieses Angebot umfasst die gemeinsame Leistung von Thomas Weber (Programmierung & technische Umsetzung) und Daniela Loibl (Content-Management & SEO) für den erfolgreichen Relaunch der salesjob Website. Als eingespieltes Freelancer-Team begleiten wir salesjob von der technischen Entwicklung über die Content-Migration bis zum Go-Live und darüber hinaus.

Projektdauer
12 - 14 Wochen
Gesamtseiten
130
Komponenten
30+
Templates
5

Kernziele

  • Modernes, responsives Design-System mit Custom Grid (14/10/6 Spalten)
  • Nahtlose Integration in bestehendes ProcessWire CMS
  • Migration und Optimierung von 130 mehrsprachigen Seiten
  • SEO-Erhalt und Performance-Optimierung
  • Wiederverwendbare Komponenten-Architektur
  • Zukunftssichere und wartbare Code-Basis

Besondere Herausforderungen

  • Content-Migration für alle Seiten
  • Mehrsprachige Einpflege lt. aktuellem Status
  • SEO-Erhalt bei großem Seitenumfang
  • Performance-Optimierung für alle Seiten
  • Konsistente User Experience über alle Sprachen
🎨

Phase 1: Design System & Framework

Tom

Custom Grid System Entwicklung

  • 14 Spalten Desktop (xl: >1582px, lg: >1140px)
  • 10 Spalten Tablet (md: >992px)
  • 6 Spalten Mobile (sm: >768px)
  • Flexible Container und Spacing-System
  • Responsive Breakpoints und Media Queries

Design Tokens & Variablen

  • Farb-System (Primary, Secondary, Graustufen)
  • Typography-Scale (Schriftgrößen, Line-Heights)
  • Spacing-System (Margins, Paddings)
  • Shadow-System (Elevation Levels)
  • Border-Radius Definitionen
  • Animation Timings & Easings

Utility-Klassen

  • Display & Visibility Utilities
  • Flexbox & Grid Helpers
  • Spacing Utilities (m-*, p-*)
  • Text Utilities (Alignment, Transform)
  • Color & Background Utilities
  • Responsive Modifiers
🧩

Phase 2: Basis-Komponenten

Tom
Desktop Navigation
Desktop Navigation
Mobile Navigation Closed
Mobile Navigation (geschlossen)
Mobile Navigation Open
Mobile Navigation (offen)
Modal/Overlay
Modal/Overlay System

Header Varianten

Desktop Header Home
Header Home Desktop
Base Header 1
Base Header Variante 1
Base Header 2
Base Header Variante 2
Industry Header
Industry Header
Mobile Header
Mobile Header

Footer

Desktop Footer
Footer Desktop
Mobile Footer
Footer Mobile

Entwickelte Komponenten

  • Hauptnavigation mit Mega-Menu
  • Mobile Navigation mit Slide-In Menu
  • Sticky Header mit Scroll-Behavior
  • Footer mit mehreren Bereichen
  • Modal/Overlay System
  • Cookie-Consent Integration
📝

Phase 3: Content-Komponenten

Tom

Text-Bild Kombinationen

Text-Bild CTA
Text-Bild mit CTA
Text-Bild Liste
Text-Bild mit Liste
Text-Bild Cards
Text-Bild mit Cards
Image Cloud
Image Cloud CTA
Image CTA
Vollbild mit CTA
Text Element
Text Element CTA
Home Start
Zentrierter Text CTA

Card Komponenten

Teaser Cards
Teaser Cards
Team Cards
Team Cards
Text CTA Cards
Text CTA Cards
Cards Teaser
Cards Teaser

Weitere Content-Elemente

Akkordeon
Akkordeon
Filler Text
Text Sections
Steps
Steps/Prozess

Mobile Varianten

Mobile Home
Zentrierter Text CTA
Mobile Text
Text Element
Mobile Cards
Teaser Cards
Mobile Image
Text-Bild
Mobile Cloud
Image Cloud
Mobile Cards CTA
Cards CTA
Mobile Image CTA
Image CTA
⚡

Phase 4: Spezial-Komponenten

Tom
Services Slider
Services Slider
Services Slider Mobile
Services Slider Mobile
Trust Signals
Trust Signals Desktop
Trust Signals Mobile
Trust Signals Mobile
Vorteile Section
Vorteile mit Illustration
Vorteile Mobile
Vorteile Mobile
Phases Section
3-Phasen Prozess
Job Listing
Job Listing mit Filter
Industry Teaser
Industry Teaser

Entwickelte Spezial-Komponenten

  • Job-Listing mit erweiterten Filteroptionen
  • Services-Slider (Swiper.js Integration)
  • Trust-Signale (Netzwerk, Kontakte, Erfahrung)
  • Vorteile-Section mit animierten Illustrationen
  • 3-Phasen Prozess-Darstellung
  • Industry-Teaser mit Hover-Effekten
  • Interaktive Karten-Integration
  • Timeline-Komponente
📄

Phase 5: Template-Integration

Tom
Job Single Template
Job-Single Template
Industry Detail Template
Industry-Detail Template
Industry List Template
Industry-List Template
Blog List Template
Blog-List Template
Blog Post Template
Blog-Post Template

Template-Struktur

  • Job-Single: Stellendetailseite mit Bewerbungsformular
  • Industry-Detail: Branchendetailseite mit Referenzen
  • Industry-List: Branchenübersicht mit Filterung
  • Blog-List: Blog-Übersicht mit Pagination
  • Blog-Post: Artikel-Detailseite mit Sidebar
  • Basic-Page: Flexible Seite für statische Inhalte
  • Contact: Kontaktseite mit mehreren Formularen
  • Home: Startseite mit allen Komponenten
🔧

Phase 6: Twig Integration

Tom

Twig-Anpassungen

  • Anpassung der bestehenden Twig-Templates
  • Integration des neuen Design-Systems
  • Base-Layout für Header/Footer-Vererbung
  • Komponenten als Twig-Makros
  • Include-Struktur für Wiederverwendbarkeit
  • Conditional Loading für Performance
  • Cache-Optimierung

Template-Hierarchie

  • base.twig (Hauptlayout)
  • components/ (Wiederverwendbare Komponenten)
  • templates/ (Seitentemplates)
  • partials/ (Header, Footer, Navigation)
  • macros/ (Helper-Funktionen)
📚

Phase 7: Content-Management

Dani

Migration und Aufbereitung von ca. 130 Seiten

Content-Migration

  • Übertragung aller Texte
  • Strukturelle Aufbereitung der Inhalte
  • Formatierung nach neuem Design-System
  • Bildoptimierung und -einbindung
  • Interne Verlinkungen gemäß SEO-Vorgaben

Content-Typen

  • Statische Seiten (Über uns, Leistungen)
  • Dynamische Inhalte (Jobs, News)
  • Formulare und Kontaktbereiche
  • Landing Pages
  • 30 Standortseiten
  • Rechtliche Seiten (Impressum, Datenschutz)
🌐

Phase 8: Mehrsprachigkeit

Dani

Einpflege der Texte in allen relevanten Sprachen

Sprach-Integration

  • Einpflege aller Übersetzungen (EN, IT, ES, FR)
  • Überprüfung der Sprachumschaltung
  • Kontrolle der übersetzten Inhalte
  • Sprachspezifische Menüs und Navigation

Qualitätssicherung

  • Konsistenz-Check über alle Sprachen
  • Formatierungs-Anpassungen pro Sprache
  • Link-Validierung in allen Sprachversionen
  • SEO-Tags in allen Sprachen
  • Formular-Funktionalität pro Sprache
✉️

Phase 9: E-Mail-Templates & Autoresponder

Dani Tom

E-Mail-Template Entwicklung

  • Anpassung aller E-Mail-Templates an neues Design
  • Responsive E-Mail-Layouts
  • Inhaltliche Überarbeitung der Autoresponder
  • Mehrsprachige E-Mail-Versionen
  • Testing in verschiedenen E-Mail-Clients

Template-Typen

  • Kontakt- / Anfragebestätigung
  • Termin-Bestätigungen
  • Termin-Storno
  • Termin-Erinnerung 24h
  • Termin-Erinnerung 1h
  • Termin-Umbuchung
  • Rückruf-Anfragen
  • Feedback Einladung
📝

Phase 10: Formular-Styling

Dani Tom
Desktop Formular
Desktop Formular
Mobile Formular
Mobile Formular

CSS-Styling aller Formular-Typen:

  • Kontaktformular
  • Rückruf-Formular
  • Termin-Buchen Formular
  • CSS-Anpassung des externen Initiativbewerbungsformulars
  • Visuelle Validierungs-Feedbacks
  • Responsive Formular-Layouts
  • Accessibility-Optimierung
  • Spam-Prävention
  • LLM Optimierung
✨

Phase 11: Interaktivität & Animationen

Tom

Navigation-Animationen

  • Mobile Menu Slide-In/Out Transitions
  • Desktop Dropdown-Effekte
  • Sticky Header mit Scroll-Verhalten

Scroll-Animationen

  • Parallax-Effekte für Hero-Sections
  • Fade-In/Slide-In für Content-Blöcke
  • Progress-Indicators (Lesefortschritt)
  • Scroll-triggered Animations

Interaktive Elemente

  • Hover-States für alle interaktiven Elemente
  • Form-Validierung mit visuellen Feedbacks
  • Loading-States und Skeleton Screens
  • Smooth-Scroll Implementierung
  • Tab-Navigation für Akkordeons
  • Slider-Interaktionen
🚀

Phase 12: SEO & Performance

Dani Tom

Optimierung für 130 Seiten

Hinweis: On-Page-Optimierung (Content, Struktur, Verlinkung) erfolgt im Vorfeld gemeinsam mit der Texterin und wird als optimierte Vorlage geliefert. Der Aufwand hierfür wird separat in Rechnung gestellt.

Content SEO

  • Überprüfung und Übernahme bestehender SEO-Titles und Meta-Descriptions
  • Korrekte Implementierung im CMS sicherstellen
  • Alt-Texte für alle Bilder einpflegen und optimieren
  • Barrierefreiheit: Mindestanforderungen (Alt-Texte, Bildoptimierung, grundlegende Accessibility-Checks)
  • Stichproben-Kontrolle der hX-Struktur

Technisches SEO

  • Meta-Daten Pflege
  • Strukturierte Daten (Schema.org) Implementierung
  • XML-Sitemap Generation
  • Canonical-URLs für alle Seiten
  • 301-Redirects Mapping
  • Robots.txt Optimierung
  • Open Graph Tags
  • llms.txt Generierung

Performance-Optimierung

  • Critical CSS Extraction
  • Lazy Loading für Bilder und Komponenten
  • Code-Splitting und Bundle-Optimierung
  • Asset-Minifizierung (CSS, JS)
  • Bild-Optimierung (WebP, Responsive Images)
  • CDN-Integration (bei Bedarf)
  • Browser-Caching Strategien
  • GZIP-Komprimierung

Tracking & Analytics

  • Anpassung des Tracking-Setups (GTM)
  • Google Analytics 4 Konfiguration
  • Conversion-Tracking einrichten
  • Testing aller Tracking-Events
🔍

Phase 13: Browser-Testing & Qualitätssicherung

Dani Tom

Systematisches Testing aller 130 Seiten

Test-Umfang

  • Cross-Browser Testing (Chrome, Firefox, Safari, Edge)
  • Device-Testing (Desktop, Tablet, Mobile)
  • Testing aller 130 Seiten individuell
  • Mehrsprachigkeits-Testing (5 Sprachen)
  • Performance-Testing pro Seite
  • Accessibility-Testing (WCAG 2.1 Level AA)
  • SEO-Audit für alle Seiten
  • Formular-Funktionalitäts-Tests

Browser-Kompatibilität

  • Chrome (letzte 2 Versionen)
  • Firefox (letzte 2 Versionen)
  • Safari (letzte 2 Versionen)
  • Edge (letzte 2 Versionen)
  • Mobile Browser (iOS Safari, Chrome Mobile)

Test-Dokumentation

  • Test-Protokolle für alle Seiten
  • Bug-Tracking und Priorisierung
  • Performance-Reports
  • Accessibility-Reports
  • SEO-Audit-Berichte
📊

Phase 14: Projektmanagement & Deployment

Dani Tom

Projektkoordination

  • Koordination mit Grafik-Team
  • Abstimmung mit SEO / Programmierung
  • Meilenstein-Tracking
  • Änderungs-Management

Deployment & Go-Live

  • Staging-Deployment und finale Tests
  • Go-Live Vorbereitung
  • Post-Launch Monitoring (erste 72h)
  • Performance- & SEO-Monitoring (erste 14 Tage)
  • Error-Tracking Setup
💼

Leistungsumfang

Im Angebot enthalten

  • Vollständiges Design-System mit Custom Grid
  • 30+ UI-Komponenten als wiederverwendbare Module
  • 5 Haupttemplates vollständig integriert
  • Migration von allen Hauptseiten
  • Mehrsprachige Pflege
  • E-Mail-Templates und Autoresponder
  • SEO- & Performance-Optimierung für alle Seiten
  • Umfangreiche Browser- und Device-Tests
  • Projektmanagement und Koordination
  • Support bei kritischen Bugs innerhalb von 24h

Nicht im Angebot enthalten

  • Erstellung neuer Inhalte oder Texte
  • Übersetzungsleistungen
  • Grafik-Design/Bildbearbeitung
  • Externe Schnittstellen-Entwicklung
  • Branchen / Industrie Listung ohne dynamische Funktionen bzw. Salesforce Abgleich
  • Hosting und Domain-Kosten
  • Lizenzen für externe Dienste
💼

Konditionen

Frühester Startzeitpunkt: KW45 2025

Wichtiger Hinweis zu Urlaubszeiten:
Sowohl Programmierung (Tom) als auch SEO/Content (Dani) sind vom 20.12.2025 bis 07.01.2026 in Weihnachtsurlaub. In diesem Zeitraum findet kein operatives Geschäft statt (Bereitschaft für Notfälle natürlich gegeben)

Zahlungsbedingungen

  • 40% bei Auftragserteilung (9.996 € netto)
  • 40% nach Abschluss Phase 6 (9.996 € netto)
  • 20% nach erfolgreicher Abnahme (4.998 € netto)

Projektzeitplan

  • Wochen 1-6: Phase 1 - 6, 10, 11
  • Wochen 7-9: Phase 7 - 9
  • Woche 10-14: Phase 12 - 14
🤝

Partner

Dienstleister

In Kooperation mit