Eine gewinnbringende B2B-Website
Könnt ihr auch Business-to-Business (kurz: B2B)? Die Antwort geben wir dir in dieser Referenz. Viel Spaß beim Lesen!
Unser Kunde: Cranes & Finance International
Die Cranes & Finance International GmbH & Co. KG (kurz: CFI) mit Sitz in Wilhelmshaven handelt seit 2004 mit gebrauchten Mobilkranen. Mittlerweile verkauft, vermietet und vermittelt das Unternehmen Krane in über 36 Länder. Die Zielgruppe sind Kranbetreiber, Bauunternehmer und Händler. Wir sprechen also von reinen B2B Kunden mit hohen technischen Ansprüchen und wenig Geduld für Umwege und Spielereien auf der Website.
Die Ausgangslage
Die ehemalige Website von CFI war eine in die Jahre gekommene und statische Website. Das Hauptproblem lag jedoch in der alltagsunfreundlichen Pflege der Seite und verbesserwürdigen Funktionen und Zielgruppenansprache. So gab es keine Mehrsprachigkeit und lediglich ein einfaches Kontaktformular für die Kundenanfragen.
Unser Auftrag
CFI wünschte eine moderne, mehrsprachige und übersichtliche Website, die sich klar an die spezielle B2B-Zielgruppe richtet. Der Kranbestand sollte strukturiert und international funktionierend abgebildet werden und vom Team selbst gepflegt werden können – und das so einfach und „laienfreundlich“ wie möglich!
Die neue Website und unsere innovative, userfreundliche Umsetzung
Achtung, nun könnte es etwas technisch werden. Doch sind die Hintergründe wichtig, um zu verstehen, wie sehr wir uns teilweise in die Themen hereindenken und lesen müssen, bevor wir mit dem ersten Schritt der eigentlichen Umsetzung starten. Genau dieser Schritt wird von vielen Übersprungen, da er häufig auch nicht im Angebot eingepreist wird, um die Kosten zu senken. Wir halten das für katastrophal, denn wer „blind“ in die Umsetzung einer Website geht, kann die Wünsche und Ziele der Kunden und dessen Zielgruppen gar nicht erfüllen. Eine intuitive und funktionelle Website ist als Ergebnis nahezu ausgeschlossen oder einfach ein Glücktreffer. Für manch eindeutige Zielgruppen und Kunden kann dies funktionieren, sobald Leistungen oder Angebot jedoch erklärungsbedürftig sind oder es sich um nischige Zielgruppen handelt, insbesondere B2B, sollte jeder Dienstleister hellhörig werden!
Nun zurück zum Thema: Das Herzstück der Seite ist ein eigener Inhaltstyp für Krane. Jeder Kran ist ein Datensatz mit rund 30 gepflegten Feldern, nicht ein Textblock. Hersteller, Modell, Baujahr, Tragkraft, Betriebsstunden und Antrieb bilden die technischen Basisdaten. Dazu kommt die komplette Ausstattung von der Hauptauslegerlänge über Hakenflaschen, Bommel, Gegengewicht und Schwerlastspitze bis zu Klimaanlage, Standheizung und Rückfahrkamera.
Datenblätter, die sich selbst schreiben
Aus diesen Feldern entstehen automatisch drei Dinge: die tabellarische Datenblatt-Ansicht auf der Kranseite, ein beschreibender Fließtext und der Seitentitel für Google. Leere Felder verschwinden. Felder, die nur ein Vorhandensein melden, zeigen statt eines Werts einen Haken in Krangelb.
Der praktische Effekt: Wenn das Team von CFI einen neuen Kran anlegt, ist die Seite mit dem Speichern vollständig, inklusive Suchmaschinen-Titel und Vorschaubild für soziale Netzwerke. Niemand muss an Metadaten denken.
Datenblatt als PDF, ohne PDF-Generator
Einkäufer wollen ein Blatt zum Ausdrucken und Mitnehmen. Statt einer zweiten Dateiverwaltung baut die Seite das PDF im Moment des Klicks selbst: Ein Skript sammelt die relevanten Bausteine, Logo, Hauptbild, technische Daten und Absenderblock, in eine Druckbühne, blendet den Rest der Seite aus und ordnet alles auf genau eine A4-Seite. Das Ergebnis ist immer aktuell, weil es keine gespeicherte Zweitversion gibt, die veralten könnte.
Bei uns sprichst du mit Designer und Entwickler
Du merkst: Eine solche Website bedarf Entwickler-Wissen und Code-Erfahrung. Wir haben die Expertise inhouse. Somit haben wir volle Kontrolle über alle Funktionen und Anwendungen, verlieren dabei jedoch nicht das Design und die Userführung aus den Augen (Stichwort: UI- und UX-Design).
Die Merkliste: eine Anfrage statt fünf E-Mails
Die auffälligste Funktion ist die Merkliste. Sie funktioniert wie ein Warenkorb, führt aber nicht zur Kasse, sondern zur Sammelanfrage.
Über jeder Krankarte sitzt ein Plus-Button. Ein Klick legt den Kran in die Merkliste, der Zähler in der Navigation springt hoch und pulsiert kurz. Die Auswahl liegt im lokalen Speicher des Browsers, überlebt also den Seitenwechsel und den nächsten Besuch, ohne dass sich jemand registrieren muss. Ein Klick auf den Zähler öffnet die Liste als Overlay, einzelne Positionen lassen sich entfernen, die Liste komplett leeren.
Am Ende steht ein Formular mit Name, Firma, Kontaktdaten und Nachricht. CFI bekommt eine E-Mail, in der alle gemerkten Krane mit Titel und Link stehen. Aus fünf Einzelmails ohne Kontext wird eine Anfrage mit klarer Liste. Für den Vertrieb ist das der Unterschied zwischen Rätselraten und Angebot schreiben.
Weil die Merkliste als Datenschutzthema zählt, ist sie in der Datenschutzerklärung eigens beschrieben. Sie kommt ohne Cookie und ohne Serverspeicher aus.
Button-Animationen und Mikrointeraktionen
Industrie muss nicht statisch aussehen. Die Buttons auf der Website CFI reagieren auf die Maus, bevor geklickt wird.
Magnetische Buttons
Bewegt sich der Zeiger über einen Button, wandert die Beschriftung ein Stück in seine Richtung, begrenzt auf acht Pixel. Gleichzeitig folgt ein weicher Lichtschein der Mausposition innerhalb der Fläche. Beim Verlassen federt alles zurück. Dazu kommt beim Hover ein leichter Lift nach oben mit einem farbigen Schatten in Krangelb. Der Effekt ist subtil genug für ein Industrieunternehmen und spürbar genug, dass die Seite lebendig wirkt.
Bewegung mit Funktion
Die übrigen Animationen erzählen jeweils etwas. Die Kennzahlen auf der Startseite zählen beim Erscheinen hoch und machen aus einer Zahl ein Argument. Der Krane-Slider zeigt aktuelle Maschinen mit Tragkraft, Baujahr und Betriebsstunden direkt auf der Karte. Ein Mehr-laden-Button blendet weitere Krane ein, ohne die Seite neu zu laden. Seitenwechsel laufen über View Transitions und wirken dadurch eher wie eine Anwendung als wie ein Klick ins Leere. Fragen und Antworten öffnen sich als Akkordeon.
Vier Sprachen ohne Übersetzungs-Plugin
CFI verkauft nach Frankreich, Spanien, Skandinavien und in den Nahen Osten. Die Seite gibt es auf Deutsch, Englisch, Französisch und Spanisch, mit übersetzten Adressen wie /de/kaufen/, /acheter/ oder /comprar/.
Wir haben bewusst kein Mehrsprachigkeits-Plugin eingesetzt, sondern die Sprachen direkt im Seitenbaum abgebildet und über eigene Regeln verknüpft. Das spart eine schwergewichtige Erweiterung, hält die Seite schnell und lässt sich vollständig kontrollieren. Suchmaschinen bekommen für jede Seite die vollständige Sprachfamilie per hreflang gemeldet, der Umschalter im Footer springt punktgenau auf die passende Übersetzung statt auf die Startseite, und Besucher aus dem Ausland werden einmal automatisch auf ihre Sprachfassung geleitet.
Formulare für alle drei Richtungen
Neben der Sammelanfrage gibt es zwei weitere Wege. Wer einen Kran verkaufen möchte, füllt ein Formular mit Krantyp, Hersteller, Baujahr, Betriebsstunden, Tragkraft, Standort und Preisvorstellung aus und lädt Fotos oder ein Datenblatt direkt hoch. Wer sich bewerben möchte, nutzt das Bewerbungsformular mit Dateianhang. Alle Formulare sind in allen vier Sprachen verfügbar und gegen Spam abgesichert.
Technik, Tempo und Datenschutz
Unter der Oberfläche arbeiten WordPress und Divi 5 auf einem eigens für CFI gebauten Theme. Der Code liegt in einem Git-Repository, jede Änderung geht automatisiert auf den Server. Formularmails laufen über den DKIM-signierten Mailserver der Firmendomain, landen also nicht im Spam. Statistiken laufen erst nach Einwilligung, und das Einwilligungsbanner spricht dieselben vier Sprachen wie die Seite.
Corporate Design: Stahlblau, Krangelb, Beton
Das Logo stammt nicht von uns, es war gesetzt. Alles darum herum haben wir entwickelt und abgestimmt, bevor die erste Zeile Code entstand.
Farbwelt
Die Palette kommt von der Baustelle, nicht aus dem Farbfächer. Jede Farbe existiert zusätzlich in einer Hover-Variante, damit Interaktionen im System bleiben.
Typografie
Drei Schriften mit klarer Aufgabenteilung:
- Barlow Condensed für Überschriften, Navigation, Buttons. Schmal laufend, versal und mit weiter Laufweite gesetzt, erinnert sie an Typenschilder und Beschriftungen an Maschinen.
- Inter für Fließtext und Bedienelemente: Neutral, exzellent lesbar, auch in kleinen Größen auf dem Handy.
- JetBrains Mono für technische Daten und Kennzahlen.
Die feste Zeichenbreite lässt Tragkraftangaben und Betriebsstunden in Tabellen sauber untereinander stehen. Alle Schriftgrößen wurden fließend von uns definiert und skalieren stufenlos vom Smartphone bis zum großen Monitor. Die Schriften liegen lokal auf dem Server, was Ladezeit spart und den Datenschutz vereinfacht.
Post-Vorlagen für Social Media
CFI ist auf Instagram, Facebook und LinkedIn aktiv. Damit dort dasselbe Unternehmen auftritt wie auf der Website, haben wir ein Vorlagenset entwickelt, das die Gestaltungsregeln der Seite auf die Kanäle überträgt.
Die Vorlagen sind so gebaut, dass ein neuer Kran in wenigen Minuten zum Post wird: Bild einsetzen, Modell und Baujahr eintragen, Tragkraft und Betriebsstunden in die Datenzeile, fertig. Krangelb markiert die Kennzahl, Stahlblau rahmt, die Schriftlogik bleibt dieselbe wie auf der Website. Neben den Angebotsposts gibt es Formate für Neuigkeiten, Messeauftritte und Stellenanzeigen sowie Varianten im Hochformat für Stories.
Was der Case für eine Website B2B Wilhelmshaven zeigt
Business-to-Business heißt nicht, dass eine Seite nüchtern sein muss. Es heißt, dass jede Funktion einen Arbeitsschritt abnehmen sollte. Die Merkliste ersetzt eine Mailkette. Das Datenblatt ersetzt den Anruf mit der Frage nach der Hakenflasche. Die vier Sprachen ersetzen das Rätselraten, ob eine Anfrage aus Marseille verstanden wird. Und die automatisch erzeugten Suchmaschinen-Angaben sorgen dafür, dass ein neuer Kran gefunden wird, ohne dass jemand daran denken muss.
Die Website CFI ist seit Juli 2026 unter cfi-whv.com online. Das Team pflegt den Kranbestand seither vollständig selbst.
Leistungen im Überblick
- Konzeption und Informationsarchitektur
- Corporate Design mit Farbwelt und Typografie, ohne Logo
- Webdesign und individuelle Entwicklung auf WordPress
- Krankatalog mit Merkliste, Datenblatt-PDF und Anfragesystem
- Mehrsprachigkeit in Deutsch, Englisch, Französisch und Spanisch, erweiterbar
- Suchmaschinenoptimierung, Analytics und Einwilligungsmanagement
- Social-Media-Vorlagen
- Betreuung und Sicherheitsmonitoring
Hier findest du alle unsere Leistungen im Detail!
Du benötigst oder planst etwas Ähnliches?
Ob Krane, Maschinen oder Ersatzteile: Wenn dein Produkt Datenblätter statt Warenkorb braucht, sind wir der richtige Ansprechpartner. Du bist in einer ganz anderen Branche unterwegs, erkennst Herausforderungen wieder? Hierfür finden wir ebenfalls die passende Lösung! Rufe uns an oder schreibe uns eine Nachricht. 📧
Diese Referenz wurde in Zusammenarbeit mit KI-Assistenz formuliert.
0 Kommentare