validdata GmbH | Website-Relaunch: Strategie, Design, Kirby-CMS und SEO aus einer Hand
2025 – heute
validdata ist ein IT-Lösungsanbieter aus Hamminkeln am Niederrhein: Systemtechnik, IT-Consulting und Softwareentwicklung für den Mittelstand, seit über 20 Jahren am Markt, gewachsen über Empfehlungen und praktisch ohne Suchmaschinen-Traffic.
Was entstanden ist: eine komplett neue validdata.de aus einer Hand, von der Strategie über Design und Technik bis zur SEO. Im Kern ein Redaktionssystem auf Kirby-Basis, in dem zwei Marketingkräfte selbstständig Landingpages, Kampagnen und Stellenanzeigen veröffentlichen, ohne Entwickler-Warteschleife und ohne gestalterischen Wildwuchs. Das Team hat darin schon Monate vor dem Launch produktiv gearbeitet; inzwischen ist die Seite live.
„Ehrlich gesagt war ich skeptisch, ob unser Marketing wirklich ohne Dienstleister Seiten bauen kann, die nach validdata aussehen. Heute passiert genau das: Landingpages, Stellenanzeigen, Kampagnen – alles aus dem eigenen Team, und es sieht aus wie aus einem Guss. Christopher hat erst verstanden, wie wir arbeiten, und dann das System darum gebaut. Jetzt holen wir uns die Anfragen und Bewerber, für die diese Website gemacht ist.“
Maurice HessingGeschäftsführer, validdata GmbH
Relaunch der Webseite: erst der Mensch, dann die Maschine
01Ausgangslage
Die alte Webseite
01
blieb weit hinter dem Unternehmen zurück: lange Ladezeiten, zeitweise mit megabytegroßen Bildern, und kaum On-Site-Optimierung. Für einen IT-Dienstleister ist das ein Glaubwürdigkeitsproblem. validdata selbst hat sich mit der Seite nie recht identifiziert; inzwischen ist sie abgeschaltet.
Der Relaunch stand schon länger im Raum. Mit zwei Vollzeitkräften im Marketing wurde die Umsetzung dann konkret: Kampagnen fahren, Landingpages bauen, Stellen ausschreiben. Die alte Seite gab davon nichts her. Gebraucht wurde also mehr als ein neues Design, nämlich ein System für die tägliche Arbeit des Teams, dazu Sichtbarkeit für die Suchanfragen, über die validdata Aufträge und Bewerber gewinnt. Die Leitlinie für alles Weitere: erst der Mensch, dann die Maschine. SEO von Beginn an mitgeplant, geschrieben und gestaltet für Menschen.
02Das Redaktionssystem
Der Kern des Projekts ist das Redaktionssystem. Es muss zwei Dinge gleichzeitig können, die sich in der Praxis meist ausschließen: Tempo für die Redaktion und ein verlässliches Erscheinungsbild.
Starre Templates schaffen das eine, freie Page-Builder das andere. Page-Builder-Seiten driften mit der Zeit auseinander, weil täglich Dutzende kleiner Designentscheidungen anfallen. Nach einem Jahr hat so eine Seite zehn Blautöne.
Das Marketing-Team baut Landingpages, Kampagnenseiten und Stellenanzeigen, ohne auf einen Entwickler zu warten, und jede Seite sieht aus, als hätte ein Designer sie abgenommen.
Die Lösung liegt eine Ebene höher. Seiten entstehen im Kirby-Panel aus
Layouts, Spalten und rund 40 Bausteinen
02
. Die Redaktion bestimmt, was auf die Seite kommt und in welcher Reihenfolge; das Aussehen bringt jeder Baustein selbst mit. Farben, Schriften und Abstände kommen aus dem festen Set an Gestaltungswerten, Hintergründe und Scroll-Animationen sind
pro Sektion einstellbar
03
, in kuratierten Stufen. Eine falsche Farbe lässt sich schlicht nicht auswählen. Wie so ein Baustein dann aussieht, zeigt
ein Ausschnitt aus dem Styleguide
04
: jeder Block hell und dunkel, mit Inhalt und leer.
Die Redaktion entscheidet
Das System entscheidet
Inhalte und ihre Reihenfolge
Typografie
Spalten und Layouts
Farben und Kontraste
helle oder dunkle Sektion
passende Schrift- und Flächenfarben
Animation aus kuratierten Stufen
responsives Verhalten und Technik
Warum rund 40 Bausteine und keine 400? Jeder Baustein ist ein Wartungsversprechen: Er muss hell und dunkel funktionieren, in jeder Spaltenbreite, auf jedem Gerät, bei jedem Update. Mit rund 40 sorgfältig gebauten Bausteinen entstehen sehr unterschiedliche Seitentypen, ohne dass eine davon gestalterisch neu erfunden werden muss. Und alle sehen nach validdata aus.
Als Nachschlagewerk dient eine Styleguide-Seite im CMS:
Farben und Typografie als festes Set
05
. Die Beispiele werden aus den echten Bausteinen gerendert. Der Styleguide veraltet nicht, ein neuer Baustein taucht von selbst auf.
Dazu eigene Plugins:
ein Formular-Builder
06
, mit dem die Redaktion Kampagnen-Formulare selbst baut (gestaltete HTML-Mails, Posteingang direkt im Panel),
eine gemeinsame Medienbibliothek
07
mit Auswahl-Pools und
ein Glossar
08
, das Fachbegriffe im Fließtext per Tooltip erklärt.
Vom Marketing-Team selbst gebaut
Das ist der Test für so ein System: Was kommt heraus, wenn niemand mehr daneben sitzt? Diese vier Seiten sind nach dem Onboarding im System entstanden, ohne mein Zutun. Eine Lösungsseite, eine Stellenanzeige, der Karriere-Bereich, die Ausbildungsseite. Vier verschiedene Aufgaben, dieselben Bausteine, ein Erscheinungsbild.
Ausschnitte der Live-Seite: Lösungsseite, Stellenanzeige, Karriere und Ausbildung.
03Discovery & Strategie
Vor der Gestaltung stand eine Discovery-Phase: strukturierte Fragen, die alle Beteiligten schriftlich beantwortet haben, auch ich. Wen wollen wir erreichen? Wie sprechen wir? Was soll jede einzelne Seite bewirken?
Geklärt wurde das schriftlich und für alle verbindlich, auf zwei Boards:
Mitbewerber und Referenzseiten
09
, Seite für Seite bewertet, und die
Tonalitätsachsen
10
, beide mit klaren Dos und Don'ts.
Die Tonalität hat validdata dabei selbst geliefert, abgefragt statt vorgeschlagen. Die Du-Ansprache gab es im Unternehmen längst, hier wurde sie festgeschrieben, zusammen mit einem Leitfaden: Benefits vor Features, konkrete Sprache, ein paar Wörter, die wir lieber meiden. Entstanden ist das gemeinsam am Tisch, und genau deshalb trifft es den Ton des Unternehmens.
Dazu kam der Seitenbaum: welche Seiten es überhaupt gibt und wie sie heißen, aufgebaut nach dem, wonach Kunden und Bewerber wirklich googeln, und danach, wie das Unternehmen tatsächlich arbeitet. Lösungsbereiche, Referenzen, Blog, ein eigener Karriere-Bereich. Hier kam SEO zum ersten Mal ins Spiel; was dahintersteckt, steht in Kapitel 05.
Ein Wort zur Zeit aller Beteiligten. Die Entwickler bei validdata stecken in bezahlten Kundenprojekten, für Discovery-Hausaufgaben kann ich ihnen keine Tage blocken. Und eine Geschäftsführung gehört nicht in jede Mikroentscheidung. Ein dedizierter Ansprechpartner im Marketing hielt die Wege kurz und holte die Geschäftsführung genau dann an den Tisch, wenn Weichen gestellt wurden.
Wireframes: die Struktur vor der Gestaltung
Bevor irgendetwas gestaltet war, standen die Wireframes: Seitenaufbau, Reihenfolge, Textmenge, Desktop und Mobil, ganz ohne Grafik. Was gehört auf welche Seite? Wie liest sich die Tonalität im Zusammenhang? Wie werden aus SEO-Anforderungen Seiten, die Menschen gerne lesen? Ein Meeting, und diese Grundsatzfragen waren entschieden.
Gezeichnet wurde je ein Beispiel pro Seitentyp: die Startseite samt Navigation, eine Unterseite aus dem Lösungsbereich und eine aus dem Unternehmens- und Karrierebereich. Daraus ließen sich die Grundsätze für Aufbau und Textmenge ableiten, die dann für die übrigen Seiten getragen haben. Für jede einzelne Seite ein Wireframe zu zeichnen wäre verlorene Zeit gewesen: Im Projektverlauf verschieben sich Entscheidungen ohnehin.
Sechs Wireframes aus Figma, mit den Kommentaren aus der Abstimmung.
04Gestaltung
Das Design ist zuerst komplett in Figma entstanden: drei Seiten durchgestaltet, Desktop und Mobil, in dem Detailgrad, in dem ich sie guten Gewissens beinahe veröffentlichen würde. Daraus wurden interaktive Clickdummys zum Durchklicken. Keine Stilproben, keine halbfertigen Varianten.
Hero, früher Stand: Die Karte lag hier noch oben im Hero, und die Überschrift lautete völlig anders. An dieser Stelle hat sich bis zum Launch am meisten getan.
Team- und Ergebnis-Sektion: hat vom ersten Entwurf an funktioniert. Die Team-Sektion steht heute beinahe unverändert live, und der Bereich darunter mit den Referenzen sieht dem Entwurf sehr ähnlich.
Auf einen fertigen Eindruck reagieren Menschen ehrlich, und genau diese Reaktion brauchte ich.
Ein Geschäftsführer kennt sein Unternehmen und seine Kunden besser als jeder Dienstleister. Meine Aufgabe in diesem Meeting war zuzuhören und zu übersetzen: Was begeistert, und lässt sich das übertragen?
Was gefällt nicht, als harte Regel oder nur in diesem einen Kontext? Aus den Antworten wurde das Design-System, und die Entwicklung konnte früh starten. Am Konzept änderte sich danach wenig; der erste Entwurf stand stilistisch bereits sehr stabil.
Ein Beispiel: die wichtigste Überschrift der Seite
Die H1 der Startseite gehört zu den prominentesten Stellen einer Seite, für Besucher wie für Suchmaschinen. Bis zur ersten Präsentation stand dort das wichtigste Money-Keyword, also der Suchbegriff, der am direktesten neue Aufträge bringen würde: Systemhaus. Die Geschäftsführung lehnte ab. Heute steht auf der Startseite ein Satz aus vier Wörtern:
Wir machen IT einfach.
Der Vorschlag kam von mir, in Anlehnung an den Marken-Claim „we make IT simple". Den Claim selbst als Überschrift zu setzen wäre zu plakativ gewesen, und ein englischer Einstieg passt für meinen Geschmack nicht zu einer deutschen Firma. Die deutsche Fassung lässt zwei Lesarten zu, und beide sind gewollt:
- Wir machen IT einfach. validdata nimmt Komplexität heraus. Systemtechnik, Software und KI aus einer Hand, statt vier Dienstleister zu koordinieren. Das ist das Nutzenversprechen.
- Wir machen IT, einfach so. Anpacken, ohne viel Drumherum. Das ist die Haltung, mit der das Unternehmen arbeitet, und genau der Ton, der in der Discovery festgeschrieben wurde.
Warum die Überschrift funktioniert: Sie ist in einer Sekunde gelesen und verspricht einen Nutzen statt einer Branchenbezeichnung. Und sie knüpft an einen Claim an, den Kunden seit Jahren kennen. Das Money-Keyword steht weiterhin dort, wo es wirkt: im Seitentitel („IT-Dienstleister am Niederrhein"), in der Zeile direkt unter der Überschrift, die Systemtechnik, Software und KI für den Mittelstand in Bocholt, Wesel und Umgebung benennt, und auf den Lösungsseiten, die genau diese Suchanfragen beantworten. Die prominenteste Stelle der Seite gehört dem Menschen.
Kein volles Rebranding: Logo und Farbwelt sind seit Jahren im Markt. Auf Kundenwunsch wurden lediglich einzelne Farbwerte und Logo-Varianten angepasst. Aus dieser Farbwelt habe ich ein festes Set an Gestaltungswerten abgeleitet. Jede Farbe, jede Schriftgröße, jeder Abstand ist genau einmal definiert, und die ganze Seite bedient sich daraus. Dazu kennt die Seite helle und dunkle Bereiche, und jeder Inhaltsbaustein ist für beide gebaut. Die Redaktion wählt hell oder dunkel, die Farben stellen sich passend um. Unlesbare Kombinationen entstehen gar nicht erst.
Eine interaktive Karte
11
liegt als scrollender Hintergrund unter mehreren Sektionen, mit eigenen Markern, selbst gehosteten Kartenkacheln (kein externer Kartendienst liest mit) und einem eigenen Editor für die Pflege. Ihr eigentlicher Job ist Vertrauen: Jeder Punkt ist ein Kundenstandort. Wer aus Wesel, Moers oder Dinslaken auf die Seite kommt, sieht auf einen Blick, wie dicht die Nachbarschaft hier schon vertreten ist. Das wirkt stärker als jeder Satz über Regionalität.
Bis die Staging-Umgebung an die Redaktion übergeben wurde, diente der Figma-Prototyp als Referenz: Jede Seite wurde Sektion für Sektion dagegen abgeglichen, Desktop und Mobil, bis Abstände, Typografie und Interaktionen saßen. Danach drehte sich das Verhältnis um, weitergearbeitet wurde am lebenden Stand, der Staging-Umgebung selbst.
05Performance & SEO
SEO begann nicht beim Text, sondern beim Seitenbaum. Um bei einem stark umkämpften Oberbegriff wie „IT-Dienstleister" auf Seite 1 zu landen, konkurriert man mit bundesweiten Anbietern, deren Budgets und deren Domain-Historie. Das kostet Jahre an Inhalten und Verlinkungen, und dieser Aufwand hätte für validdata in keinem Verhältnis zum Ertrag gestanden. Deshalb konzentriert sich die Seitenstruktur auf konkrete Leistungen, Probleme, Branchen und regionale Suchanfragen, bei denen eine realistische Chance auf qualifizierte Sichtbarkeit besteht. Wer so konkret sucht, steht kurz vor einer Entscheidung.
Was Menschen durch ein Thema führt, versteht auch Google.
Sichtbarkeit entsteht über Seiten, die eine konkrete Suchabsicht vollständig und verständlich beantworten. Eine Seite, die nur für die Maschine gebaut ist, erkennt man an ihrer Überschriftstruktur: Sie stapelt Suchbegriffe, statt Leser zu führen, und vergrault damit genau die Besucher, die sie anlocken soll. Auf validdata.de führen die Überschriften deshalb durch das Thema. Was Suchmaschinen zusätzlich brauchen, liefert die Seite auf technischer Ebene, wo es keinem Leser im Weg steht: JobPosting-Schema für Stellenanzeigen (Google Jobs), LocalBusiness-Daten, XML- und Bild-Sitemap. Alle Alt-URLs laufen über
301-Weiterleitungen
12
, die solide Grundlage dafür, dass vorhandene Rankings und Links den Relaunch überleben.
Und Geschwindigkeit: Menschen warten nicht, Google misst das. Lighthouse lief während der gesamten Entwicklung mit, und zwar in allen vier Kategorien. Die Live-Startseite liegt überall oberhalb von 90: mobil 96 für Performance, am Desktop 97, dazu jeweils 96 für Accessibility, 100 für Best Practices und 100 für SEO.
Live-Startseite, mobil gemessen: 96 Performance, 96 Accessibility, 100 Best Practices, 100 SEO.
Dieselbe Seite am Desktop: 97 Performance, in den übrigen Kategorien dieselben Werte.
Dahinter steckt Handwerk: kritisches CSS inline, JavaScript-Bundles pro Seite aus den tatsächlich verwendeten Bausteinen (eine Seite ohne Karte lädt keinen Karten-Code), WebP mit Größen-Presets, reservierte Layoutflächen gegen Springen beim Laden, vorgeladenes Hero-Bild, lokal gehostete und beschnittene Schriften.
An einer Stelle endet die Optimierung bewusst, und das ist die Bildqualität. Lighthouse hält Kompressionsstufen für sinnvoll, die sichtbare Artefakte erzeugen. Kleine Grafiken wie Logos und Avatare reagieren darauf überproportional, während dieselbe Stufe einem großen Foto kaum etwas antut. Umgekehrt beschwert sich Lighthouse, wenn kleine Grafiken zu großzügig ausgeliefert werden. Für diese Feinarbeit gibt es im Panel eine eigene Einstellung: fünf Qualitätsstufen, getrennt für kleine und große Bilder, site-weit oder pro Seite justierbar.
Fünf Qualitätsstufen im Panel, für kleine und große Bilder getrennt. Übliche Kompressionsverfahren liefern gerade bei kleinen Grafiken sichtbar schlechte Ergebnisse; werden dieselben Grafiken zu großzügig ausgeliefert, beschwert sich Lighthouse.
Die Abwägung dahinter: Ein Bild below the fold, das am Desktop ohnehin nachrangig lädt, wiegt weit weniger als das erste Bild above the fold auf einem Handy im schlechten Netz. So fein misst der Score das nicht. Deshalb sind die Werte hier durchweg exzellent und ohne Ranking-Risiko, ohne auf den letzten Punkt hyperoptimiert zu sein. Erst der Mensch, dann die Maschine: Fünf Punkte im Score sind gut angelegt, wenn die Seite dafür scharf aussieht.
06Zusammenarbeit & Launch
Das Marketing-Team hat monatelang in diesem System gearbeitet, während die Entwicklung parallel lief, mit eigener Editor-Rolle auf einer Staging-Umgebung. Ein Content-Sync hielt beide Stände zusammen. So wurde bis zum Launch beides fertig: Technik und Inhalt.
Über 40 versionierte Releases dokumentieren den Weg. Jeder eingefrorene Stand bekam
einen Report in Klartext
13
: was sich im Panel ändert, was Besucher sehen. Der Kunde wusste jederzeit, wo sein Projekt steht, ohne eine Zeile Code zu lesen.
40+versionierte Releases, jeder mit einem Report in Klartext
~40kuratierte Bausteine, aus denen jede Seite entsteht
1 Aufrufbringt den kompletten Redaktionsstand von Staging nach Live
~30kritische Abnahmepunkte auf der Go-Live-Checkliste, einzeln geprüft und erfüllt
Der Launch lief reibungslos, weil er vorbereitet war. Für den Umzug von Staging auf Live stand ein eigenes Transfer-Werkzeug bereit: ein Aufruf, und der komplette Redaktionsstand samt Produktions-Konfiguration liegt in der Produktionsumgebung. Selbst der Indexierungs-Schutz der Vorschau-Umgebung schaltet sich auf der Live-Domain von allein ab. So vorbereitet ging die Seite in meiner Abwesenheit live.
Zur Ehrlichkeit gehört die letzte Meile. Als die Seite technisch abgenommen war, kamen beim gemeinsamen Testen noch gut zwei Dutzend Punkte zusammen, etwa zur Hälfte echte Bugs, zur Hälfte Wünsche, die sich erst beim Arbeiten mit dem System zeigen. Die Bugs wurden gefixt, die Wünsche priorisiert und umgesetzt oder eingeplant. Seit dem Launch läuft die Hypercare-Phase: Kleinere Anpassungen werden direkt umgesetzt, größere Wünsche sauber eingeplant, und auch an den Texten wird weiter gefeilt.
Der Vorlauf hat sich genau hier ausgezahlt: Die Seite ging mit fertigen Inhalten live, und das Team kannte sein Werkzeug aus Monaten echter Arbeit. Jeder offene Punkt stand mit Priorität auf einer Liste.
Impressionen der Webseite
Frontend – Desktop:
Frontend – Mobile:
Backend – Kirby-Panel:
Zur Webseite:
validdata.de
Stand zum Launch & nächste Phase
Das direkte Ergebnis: Die neue validdata.de ist live, das Redaktionssystem ist im täglichen Einsatz, das Team geschult, die SEO-Grundlage gelegt.
Das geschäftliche Ziel: qualifizierte Anfragen und überzeugte Bewerber, über die konkreten Suchanfragen von Menschen mit einem bestimmten Problem, oft aus der Region. Das Rennen um große Begriffe wie „IT-Systemhaus" überlassen wir anderen; wer konkret sucht, ist schon fast Kunde.
Gemessen wird ab jetzt: Rankings, Anfragen, Bewerbungen und die redaktionelle Nutzung.
Was als Nächstes folgt: die SEO-Strategie für die kommenden sechs Monate. Sie ist Teil desselben Auftrags, und ihr erster Teil steht längst: Seitenbaum, Themenzuordnung und Keyword-Struktur sind entstanden, bevor eine Zeile Code geschrieben war. Jetzt wird die Strategie an den realen Inhalten geschärft: Lücken schließen, Themen ergänzen, gute Verlinkungsmöglichkeiten von außen finden, dazu realistische und messbare Ranking-Ziele mit den passenden Maßnahmen.
Meine Rolle darin ist beratend. Die Inhalte schreibt das Team selbst. Ich übersetze die Sistrix-Reports in Aufgaben, die am Montagmorgen jemand anfassen kann, und baue daraus einen Ablauf, den Redaktion und Marketing allein tragen: eigene Annahmen über Kampagnenziele treffen, diese Ziele messbar machen und die Kampagnen anschließend selbst umsetzen. Das Ziel ist dasselbe wie beim Redaktionssystem, eine Etage höher: Für die eigentliche Arbeit im SEO-Workflow braucht es mich am Ende nicht mehr.
Meine Rolle
- Discovery & Strategie, die Frage-Phase am Anfang, inklusive Moderation von Tonalität und Seitenbaum
- Design in Figma, vom Wireframe bis zu fertig gestalteten Seiten
- Frontend, also alles, was Besucher sehen und anklicken: HTML, CSS, JavaScript
- CMS-Architektur und eigene Plugins, das Redaktionssystem auf Kirby-Basis (PHP)
- SEO und Performance: Suchstrategie, Technik und Ladezeit
- Redaktions-Onboarding, Schulung und Begleitung des Marketing-Teams
- Hypercare nach dem Launch
Das gesamte Projekt kam aus einer Hand, im engen Sparring mit Geschäftsführung und Marketing-Team. So entsteht die fachliche Breite eines interdisziplinären Projekts, ohne Übergabeverluste zwischen Strategie, Design, Entwicklung und Redaktion.
„Ich war im Projekt der kurze Draht zu Christopher: Wünsche wurden geklärt, Fragen wurden beantwortet, bevor sie zu Problemen wurden, und was wir uns beim Arbeiten gewünscht haben, war oft im nächsten Stand schon drin. Wir haben Monate vor dem Launch im echten System Inhalte gebaut; beim Livegang war unser Content einfach da.“
David LensingMarketing-Verantwortlicher, validdata GmbH
Weitere Case-Studies
Mehr als ein neues Webdesign?
Wenn ein Marketing-Team selbstständig arbeiten soll, ohne dass Gestaltung, Technik und SEO mit jeder neuen Seite auseinanderdriften, baue ich Systeme wie dieses. Der Einstieg ist ein Gespräch und ein erstes Assessment: Wo steht die Seite heute, und welche Potenziale liegen offen? Was genau zu tun ist, klärt danach eine unverbindliche Discovery-Phase. So hat auch dieses Projekt angefangen.