h-imports: B2B-Onepager für die Schweiz mit Startup-Budget

Diese Case Study richtet sich an Agenturen, Designer und Solo-Devs, die wissen wollen wie ein Onepager-Projekt aussehen kann wenn man es ernst nimmt, ohne ein Enterprise-Budget zu haben. Endkunden lesen das eher als Einblick in den Prozess hinter ihrer eigenen Website.

Die Ausgangslage

h-imports ist ein junges Schweizer Unternehmen im B2B-Handel mit Fast-Moving-Consumer-Goods (FMCG). Die These dahinter: Viele Trends kommen in der Schweiz später an als in der EU. Diese Lücke füllen.

Klassische Startup-Situation. Keine eigenen Bilder, kein Content, keine Erfahrung mit dem Aufsetzen eigener Kanäle, und ein Budget das sich zwischen Verzollung, Logistik und Buchhaltung aufteilen muss. Trotzdem brauchte es eine professionelle Online-Präsenz, sonst nehmen Schweizer B2B-Einkäufer das Unternehmen nicht ernst.

Vereinbart wurde ein Onepager in WordPress plus ein kleiner Guide für die ersten Schritte (Mail-Signatur, LinkedIn, was am Anfang professionell wirken muss).

Was die Schweizer Zielgruppe erwartet

B2B-Kunden in der Schweiz ticken anders als Endkunden in Deutschland. Die Zielgruppe von h-imports sind Einkäufer in Handelsketten, Distributoren, mittelständische Importeure. Die wollen Vertrauen sehen, nicht Verspieltheit.

Die Anforderung war klar: Clean, neutral, professionell. Vertrauen suggerieren. Kein crazy stuff. Aber gleichzeitig genug Charakter, damit die Seite nicht austauschbar wirkt.

Das ist eine Gratwanderung. Zu nüchtern und die Marke verschwindet zwischen 50 anderen B2B-Sites. Zu auffällig und der Schweizer Einkäufer klickt nach drei Sekunden weiter.

Discovery: Referenzen zerlegen

Vier Wunsch-Referenzen lagen auf dem Tisch: webstar.ch, hubspot.com, axongarside.com/winnow und redwaynetworks.com. Bevor ich auch nur einen Pixel skizziert habe, habe ich jede Referenz systematisch analysiert.

Pro Referenz:

Fullpage-Screenshot
Rohdaten (HTML, Stylesheets, computed styles)
Markdown-Analyse zu Farben, Typografie, Animationen, Tech-Stack, CTAs
Bewertung was davon zu h-imports passt

Der gemeinsame Nenner war klar: clean, neutral, viel Weißraum, klare Hierarchien. Aber jede der vier hatte einen eigenen Spin. Den brauchen wir ja auch.

Drei Entwürfe parallel

Aus der Discovery-Phase kamen drei mögliche Brand-Richtungen heraus: Editorial Premium, Swiss Modern und Bold Industrial. Mein Bauchgefühl ging zu Swiss Modern, aber das wirkte zu kalt-kantig. Bold Industrial brachte die Wärme rein. Eine Mischung aus beiden wurde die finale Brand-Richtung.

Statt jetzt einen Onepager auszubauen und in Korrekturschleifen zu iterieren, habe ich erstmal drei Entwürfe parallel skizziert:

A — Catalogue: Ruhig, Werkverzeichnis-Ästhetik, Brand-Index als Hauptsection
B — Live Terminal: Lebendig, Frachtterminal-Vibe, Currently-Shipping-Table mit Live-Status
C — Editorial: Mutig, Magazin-Ästhetik, Hero mit Wort-Rotation und Wind-Rose im Footer

Drei Skizzen parallel sind weniger Aufwand als man denkt, weil die Discovery-Arbeit für alle dieselbe ist. Und es spart später Iterationsrunden, weil der Kunde direkt sieht in welche Richtung er will, statt an einer Variante herumzukorrigieren.

Warum Variante C gewann

Die Entscheidung fiel auf die Editorial-Variante. Die Magazin-Ästhetik wirkt selbstbewusst ohne marktschreierisch zu sein, der Wort-Rotator im Hero gibt der Seite einen Anker, die Wind-Rose im Footer ist ein dezentes Symbol für Internationalität.

Wichtiger als die Optik: Diese Variante hatte den klarsten Charakter. Und genau das fehlt bei vielen B2B-Sites in der Schweiz. Die wirken alle gleich.

Vom statischen HTML in WordPress

Variante C war zunächst ein reines HTML/CSS/JS-Setup. Für die finale Site brauchte der Kunde aber etwas das er selbst pflegen kann, ohne mich für jede Textänderung anschreiben zu müssen. Also: WordPress.

Statt eines Classic Themes mit ACF und Page-Builder bin ich auf FSE (Full Site Editing) mit einem Block Theme gegangen. Elf eigene Custom Blocks, alle als dynamic render (save: () => null + render.php), keine Plugin-Lizenzen, kein Yoast.

Warum Block Theme:

Der Kunde editiert direkt im WordPress-Editor, der ihm das Design zeigt
Keine monatlichen Plugin-Kosten für SEO, Caching oder Page-Building
Alles im Theme-Repo versioniert, sauber deploybar
FSE ist 2026 endlich an dem Punkt wo es ohne Workarounds funktioniert

Die elf Blocks decken die komplette Seite ab: site-header, hero, marquee, why-grid, brand-list, process-steps, routes-map, story, faq-list, contact-cta, footer-windrose. Jeder Block hat seine eigenen Attribute, die im Editor anpassbar sind.

Custom SVG-Weltkarte statt Stock-Foto

Im ursprünglichen Design war eine "Erde-mit-Pfeilen"-Grafik geplant. Stock-Fotos sahen entweder kitschig aus oder hätten Lizenzgebühren gekostet die das Projekt nicht rechtfertigte.

Stattdessen habe ich eine eigene Weltkarte gebaut. Ein Build-Script lädt Natural Earth 50m-Daten (Public Domain), projiziert sie equirectangular und vereinfacht die Pfade. Output ist eine inline-SVG die direkt im Block landet.

Inline deshalb, weil ich einen eigenen IntersectionObserver an die SVG hängen wollte, der die Routen-Animation triggert wenn der Block sichtbar wird. Sieben dicke EU-Routen werden mit stroke-dashoffset und gestaffelten Delays gezeichnet wie Flugzeug-Landungen, vier ferne Routen (New York, Dubai, Shanghai, Singapur) verlaufen subtiler im Hintergrund.

prefers-reduced-motion wird respektiert: keine Animation, Linien sofort sichtbar.

Mittelweg an mehreren Stellen

Bei einem Startup, das gerade die ersten Rechnungen schreibt, ist Budget knapp. Das ist nicht dramatisch wenn man weiß wo man kürzt und wo nicht. Konkrete Beispiele aus dem Projekt:

SEO: Keine Yoast- oder RankMath-Premium-Lizenz, sondern ein eigenes inc/seo.php Modul im Theme. Liefert Meta-Tags, Canonical, OG-Tags und einen JSON-LD-Graph mit Organization, LocalBusiness, WebSite, WebPage, Service, BreadcrumbList und FAQPage. Alle Firmendaten kommen aus einer einzigen business_data() Funktion. Das ist kein RankMath mit hundert Features, aber für einen Onepager braucht es das auch nicht. Spart laufende Lizenzkosten und ist sauber im Theme-Repo versioniert.
Hosting: Schweizer Hosting bei Infomaniak im Standardpaket statt Managed-WordPress mit Profi-Backup-Suite. Die kritischen Punkte (HTTPS, Mail, Domain, Cron) sind dabei, der Rest läuft per WP-CLI von außen.
Bilder: Custom SVG-Weltkarte aus Public-Domain-Daten statt Stock-Foto-Abo. Hero-Bild mit One-Time-Lizenz statt monatlichem Stock-Abo.
Plugins: Minimal. Caching, Honeypot, Login-URL-Schutz. Kein Page-Builder, kein SEO-Plugin, kein Backup-Plugin (Backup läuft über den Hoster).
Mailbox: Infomaniak-Mailpaket "Kostenlos", reicht für den Start bis fünf Adressen. Upgrade ist später ein Klick wenn es nötig wird.

Wichtig dabei: kürzen, ja. Aber nicht an Stellen die Sicherheit oder Wartbarkeit kosten. Eigene SEO statt Plugin ist Mehraufwand bei mir, aber kein Nachteil für den Kunden. Kostenloses Mailpaket statt Profi-Suite ist eine bewusste Entscheidung, kein Pfusch.

Schweizer Details die niemand sieht

Die Schweiz hat eigene Regeln. Ein paar Sachen die beim ersten DE-Projekt nicht auf dem Schirm sind:

Hosting in der Schweiz: Infomaniak betreibt Schweizer Rechenzentren (Genf, Winterthur), klimaneutral, kein Lock-in. Für CH-B2B-Kunden ein implizites Vertrauenssignal.
html lang="de-CH": Das Frontend ist Schweizerdeutsch (ss statt ß), das WP-Backend bleibt de_DE für Bedienkomfort. Ein einzeiliger Filter.
Reverse-Charge: Bei B2B-Leistungen DE → CH geht die Steuerschuld auf den Leistungsempfänger über. Rechnung enthält keinen MwSt.-Ausweis, sondern den Hinweis "Steuerschuldnerschaft des Leistungsempfängers" plus die UID-Nummer des Empfängers.
Sitemap-Cleanup: WordPress generiert automatisch eine /wp-sitemap.xml. Die enthält standardmäßig auch eine Users-Sitemap, die den Admin-Slug leaked. Für einen Onepager ohne Blog gefiltert: nur Pages bleiben drin.

Was ich aus dem Projekt mitnehme

Drei Sachen die ich beim nächsten ähnlichen Projekt wieder so machen würde:

Drei Skizzen statt einer, wenn der Kunde keine klare Vorstellung hat. Aufwand bleibt überschaubar weil die Discovery-Phase für alle Varianten dieselbe ist, und die Entscheidung wird für beide Seiten klarer. Iteration auf einer Variante ist oft ineffizienter als Auswahl zwischen drei Richtungen.

FSE + Custom Blocks statt Plugin-Wildwuchs. Block Theme braucht initial mehr Setup, aber das Ergebnis ist wartbarer, schneller und sauberer als ein WordPress mit zwölf Plugins die alle ein Stück Frontend mitliefern. Und es spart dem Startup laufende Lizenzkosten.

Kürzen am richtigen Ende. Bei knappem Budget ist die Frage nicht "wo sparen wir", sondern "wo darf gespart werden". Eigene SEO statt Plugin: ja. Schwächere Hardware oder unsauberes Markup: nein.

Die Seite ist seit ein paar Wochen live unter www.h-imports.ch. Mobile-Optimierung ist durch, Desktop ist durch, der Kunde pflegt selbst.