Webdesign & Landingpages (HTML + JS)
Ultraleichte **One‑Pager & Kampagnen‑Landingpages** ohne schweres CMS – **schnell, konversionsstark, DSGVO‑freundlich**. Fokus auf **Core Web Vitals**, Accessibility, saubere **Copy/Micro‑Copy** und **klare Call‑to‑Actions**.
Warum HTML + JS?
Blitzschnell
Keine CMS‑Overhead, minimale Abhängigkeiten, **95+ Lighthouse** realistisch erreichbar.
Datenschutzfreundlich
**Keine externen Fonts**, 2‑Klick‑Einbindungen, Consent‑sauberes Tracking – TDDDG/DSGVO‑bewusst.
Wartungsarm
Statische Auslieferung, weniger Updates, klare Doku – ideal für Kampagnen & MVPs.
Leistungen
Alles, was eine konvertierende Landingpage braucht – von Storyline bis Performance‑Feinschliff.
Konzept & Storyline
- ✔Value Proposition, Target Audience, Einwandbehandlung
- ✔Wireframes, Hierarchie, Above‑the‑Fold‑Impact
- ✔Copy & **Micro‑Copy** (Buttons, Form‑Labels, Error‑Texte)
Design & Komponenten
- ✔System‑Fonts **oder** lokale Subsets, Farb‑/Kontrast‑Check (WCAG)
- ✔Responsive Grid, Icons/SVG, Animations mit Bedacht
- ✔Komponenten‑Baukasten für spätere Wiederverwendung
Umsetzung (HTML + JS)
- ✔Critical CSS inline, **deferred JS**, **Lazy‑Loading** für Medien
- ✔Bild‑Optimierung (AVIF/WebP), **preload/preconnect** wo sinnvoll
- ✔Formulare mit Honeypot & Server‑Validierung (ohne Tracking)
SEO & Social
- ✔Title/Description, Open Graph, strukturierte Daten
- ✔Saubere Headings, Sitemap/Robots, kanonische Links
- ✔UTM‑Konventionen für Kampagnen
Barrierefreiheit (a11y)
- ✔Kontraste, Fokus‑Stile, Tastatur‑Nutzung
- ✔ARIA‑Labels/Live‑Regions, Skip‑Links
- ✔Form‑Fehlerzustände korrekt ausgezeichnet
Einbindungen & Consent
- ✔**2‑Klick**‑Platzhalter für YouTube/Maps
- ✔Consent‑freundliches Analytics (GA4/Matomo je nach Wunsch)
- ✔Ohne Third‑Party‑Tracker als Default
Varianten & Pakete (ohne Preisangaben)
One‑Pager
- ✔1 Seite, bis 5 Sektionen (Hero, Nutzen, Features, Social Proof, CTA)
- ✔Kontaktformular + DSGVO‑Hinweise
- ✔Basis‑SEO & Performance‑Tuning
Kampagnen‑Landingpage
- ✔UTM‑Tracking, Varianten für Zielgruppen
- ✔A/B‑Tests (Headline/CTA/Formular‑Felder)
- ✔Integration: E‑Mail/CRM (z. B. Brevo), Webhooks
Micro‑Site
- ✔Bis 3 Seiten (LP + Danke + Info), Navigation/Anker
- ✔Mehr Content/FAQs, Downloads (ohne Tracking)
- ✔Erweiterbar zu CMS/Headless bei Wachstum
Prozess
1 · Briefing
Ziel, Zielgruppe, AngebotWir schärfen Nutzenversprechen, Botschaften und gewünschte Aktion.
2 · Wireframe & Copy
Story & StrukturSkizzen, Hierarchie, erste Texte & Micro‑Copy, Freigabe.
3 · Design Preview
Stil & KomponentenVisuelles Konzept, Komponenten, Farb‑/Kontrast‑Checks (WCAG).
4 · Build & QA
HTML+JSUmsetzung mit Performance‑Budget, a11y‑Checks, Browser/Device‑Tests.
5 · Launch & Tracking
Go‑LiveDeployment, Consent‑konformes Analytics, Report nach 2 Wochen.
Technik & Hosting
Technische Basis
- ✔Semantisches HTML5, modulare CSS‑Utilitys, Vanilla JS
- ✔Critical CSS inline, Minify, HTTP/2/3, Caching‑Header
- ✔2‑Klick‑Platzhalter, lokale Assets, system‑Font‑Stack
Hosting‑Optionen
- ✔Statisches Hosting (EU), CDN, SSL/HSTS
- ✔Form‑Endpunkte (Server/Serverless) in der EU
- ✔Monitoring & Error‑Logs optional
Live-Demo: Conversion-Hero + Code
Landingpage, die konvertiert
Schnell, leicht, DSGVO-freundlich. In 14 Tagen live – mit klarer Story & messbarer Conversion.
- Critical CSS, deferred JS, Bild-Optimierung (AVIF/WebP)
- WCAG-Kontraste, 2-Klick-Einbindungen, lokale Fonts
- Consent-konformes Tracking & UTM-Konventionen
<section class="hero">
<span class="badge">Neu</span>
<h1>Landingpage, die konvertiert</h1>
<p>Schnell, leicht, DSGVO-freundlich. In <strong>14 Tagen</strong> live.</p>
<a class="cta" href="#kontakt">Kostenloses Angebot</a>
</section>
<style>
.hero{padding:48px;border-radius:16px;background:linear-gradient(90deg,#eff6ff,#ecfeff);border:1px solid rgba(15,23,42,.1)}
.badge{display:inline-block;padding:6px 12px;border-radius:999px;background:#e0e7ff;color:#1e3a8a;font-size:12px}
.cta{display:inline-block;margin-top:10px;padding:12px 16px;border-radius:12px;background:#2563eb;color:#fff;font-weight:700;text-decoration:none}
.cta:focus{outline:3px solid #bae6fd;outline-offset:2px}
</style>
