Die meisten KMU-Websites haben nicht zu wenig Design — sie haben die falschen Prioritäten. Ein Handwerker braucht keine Parallax-Animationen. Eine Praxis braucht kein Bento-Grid. Was beide brauchen: eine Website, die schnell lädt, auf dem Smartphone funktioniert und Besucher zu Kunden macht.
Inhaltsverzeichnis
- Navigation (Tipps 1-3)
- Content (Tipps 4-6)
- Performance (Tipps 7-9)
- Mobile (Tipps 10-11)
- Conversion (Tipps 12-14)
- Barrierefreiheit (Tipp 15)
- FAQ Diese 15 Tipps basieren auf über 50 Website-Projekten, die wir seit 2019 für KMU umgesetzt haben — Webdesign made in Erfurt, im Einsatz im gesamten DACH-Raum. Gruppiert nach den sechs Bereichen, die den grössten Unterschied machen.
Navigation (Tipps 1–3)
Tipp 1: Maximal 7 Hauptnavigationspunkte
Je weniger Hauptpunkte, desto schneller finden Nutzer ihr Ziel. Als Faustregel haben sich 5–7 Punkte bewährt. Die oft zitierte Miller’sche Zahl (7 ± 2) ist dafür allerdings kein Beleg: Sie beschreibt das Kurzzeitgedächtnis, und ein sichtbares Menü muss niemand auswendig behalten. Typische KMU-Struktur:
- Startseite
- Leistungen
- Über uns
- Referenzen
- Blog/Ratgeber
- Kontakt
Unterseiten gehören in Dropdown-Menüs, nicht in die Hauptnavigation.
Tipp 2: CTA-Button in der Navigation
Der wichtigste Call-to-Action gehört in die Hauptnavigation — als visuell hervorgehobener Button. Nicht als normaler Link.
Beispiele:
- Handwerker: “Angebot anfragen”
- Praxis: “Termin buchen”
- Agentur: “Projekt starten”
- SaaS: “Kostenlos testen”
Dieser Button sollte auf jeder Seite sichtbar sein, auch beim Scrollen (Sticky Navigation).
Tipp 3: Breadcrumbs auf Unterseiten
Breadcrumbs zeigen dem Nutzer, wo er sich befindet: Startseite > Leistungen > Webdesign. Sie verbessern:
- Navigation: Nutzer springt direkt zur Kategorie zurück
- SEO: Google zeigt Breadcrumbs in den Desktop-Suchergebnissen (mobil seit Januar 2025 nur noch die Domain) und versteht damit die Seitenstruktur besser
- Barrierefreiheit: Screenreader nutzen Breadcrumbs zur Orientierung
Auf der Startseite sind Breadcrumbs unnötig. Auf Unterseiten sind sie fast immer sinnvoll.
Content (Tipps 4–6)
Tipp 4: Ein Ziel pro Seite
Jede Seite braucht genau ein primäres Ziel. Nicht zwei, nicht drei. Eins.
| Seite | Primäres Ziel |
|---|---|
| Startseite | Zum Leistungsbereich weiterleiten |
| Leistungsseite | Kontaktanfrage auslösen |
| Über uns | Vertrauen aufbauen |
| Blog-Artikel | Newsletter-Anmeldung oder Kontakt |
| Kontakt | Formular absenden |
Wenn du nicht in einem Satz sagen kannst, was eine Seite bezweckt, hat sie keinen klaren Zweck.
Tipp 5: Above the Fold entscheidet
Der sichtbare Bereich ohne Scrollen (Above the Fold) hat nur wenige Sekunden, um den Nutzer zu überzeugen. Dort müssen stehen:
- Was du tust (Headline)
- Für wen (Subheadline)
- Was als Nächstes passiert (CTA-Button)
Kein Slider. Kein Video. Keine Animation. Eine klare Botschaft.
Schlecht: “Willkommen auf unserer Website” Gut: “Dachdecker in Hamburg. Dachsanierung in 5 Tagen. Kostenlos beraten lassen.”
Tipp 6: Texte für Scanner schreiben
In der klassischen Studie der Nielsen Norman Group scannten 79 % der Testpersonen neue Seiten, statt sie Wort für Wort zu lesen. Schreib entsprechend:
- Kurze Absätze (maximal 3–4 Zeilen)
- Aussagekräftige Zwischenüberschriften (H2, H3)
- Fettdruck für Schlüsselbegriffe
- Aufzählungen statt Fliesstexte
- Tabellen für Vergleiche und Daten
Jede Zwischenüberschrift sollte für sich verständlich sein. Wer nur die H2-Headings liest, muss den Kern des Artikels verstehen.
Performance (Tipps 7–9)
Tipp 7: Ladezeit unter 3 Sekunden
Laut einer Google-Auswertung (DoubleClick, 2016) wurden 53 % der mobilen Seitenbesuche abgebrochen, wenn das Laden länger als 3 Sekunden dauerte. Für KMU-Websites ist die Ladezeit eine der wichtigsten technischen Kennzahlen.
Quick Wins für schnellere Websites:
| Massnahme | Effekt | Aufwand |
|---|---|---|
| Bilder in WebP/AVIF konvertieren | Deutlich kleinere Bilddateien als JPEG/PNG | Gering |
| Lazy Loading für Bilder unterhalb des sichtbaren Bereichs | Weniger Daten beim ersten Laden | Gering |
| CSS/JS minifizieren | Kleinere Dateien | Gering |
| CDN verwenden | Kürzere Wege für weit entfernte Besucher | Mittel |
| Hosting upgraden | Schnellere Serverantwort (TTFB) | Mittel |
| Unused JavaScript entfernen | Weniger Rechenlast im Browser | Hoch |
Wie viel jede Massnahme bringt, hängt stark von der Ausgangslage ab. Miss vorher und nachher mit PageSpeed Insights.
Tipp 8: Core Web Vitals optimieren
Die drei Core Web Vitals messen die Nutzererfahrung. Google berücksichtigt sie als Teil der Page Experience, eines von vielen Ranking-Signalen:
| Metrik | Was sie misst | Zielwert („gut“) |
|---|---|---|
| LCP (Largest Contentful Paint) | Bis das grösste sichtbare Element geladen ist | ≤ 2,5 Sek. |
| INP (Interaction to Next Paint) | Reaktionszeit auf Klicks, Tippen und Tasten | ≤ 200 ms |
| CLS (Cumulative Layout Shift) | Visuelle Stabilität | ≤ 0,1 |
Prüfe deine Werte in der Google Search Console oder auf PageSpeed Insights.
Tipp 9: Kein unnötiges JavaScript
Jede KMU-Website, die wir auditieren, hat zu viel JavaScript. Häufige Übeltäter:
- jQuery (rund 30 KB komprimiert) — für neue Websites 2026 überflüssig, CSS und native JS können alles
- Slider-Libraries (50–150 KB) — für Inhalte, die niemand durchklickt
- Analytics-Overload — Google Analytics + Facebook Pixel + HotJar = 200+ KB
- Chat-Widgets (200–500 KB) — wenn sie niemand nutzt
Faustregel: Unter 100 KB JavaScript für eine KMU-Website. Alles darüber braucht eine Begründung.
Mobile (Tipps 10–11)
Tipp 10: Touch-Targets mindestens 48×48px
Auf Touchscreens brauchen Buttons, Links und interaktive Elemente genug Fläche. Google (Material Design) empfiehlt 48×48 dp, Apple 44×44 pt. WCAG 2.2 verlangt auf Stufe AA mindestens 24×24 CSS-Pixel oder ausreichend Abstand, auf Stufe AAA 44×44. Mit 48×48 Pixeln liegst du bei allen auf der sicheren Seite.
Häufige Verstösse:
- Textlinks im Footer (zu klein, zu eng beieinander)
- Social-Media-Icons (24px, ohne ausreichend Padding)
- Hamburger-Menu-Icon (zu kleiner Tap-Bereich)
- Tabellenzellen mit Links
Tipp 11: Click-to-Call auf Mobilgeräten
Für lokale KMU ist der Telefonanruf oft die wichtigste Conversion. Die Telefonnummer muss auf Mobilgeräten antippbar sein:
<a href="tel:+49123456789">0123 456789</a>Platzierung:
- Im Header (immer sichtbar)
- Im Hero-Bereich
- Im Footer
- Auf der Kontaktseite
Ein Floating-Button (“Jetzt anrufen”) am unteren Bildschirmrand funktioniert ebenfalls gut — aber nur auf Mobile anzeigen.
Conversion (Tipps 12–14)
Tipp 12: Kontaktformular auf maximal 5 Felder
Jedes zusätzliche Pflichtfeld ist eine Hürde, und nach unserer Erfahrung brechen bei langen Formularen spürbar mehr Besucher ab. Für KMU reichen:
- Name
- Telefon (optional)
- Nachricht
- Hinweis auf die Datenschutzerklärung (eine Einwilligungs-Checkbox ist für eine reine Anfrage in der Regel nicht nötig)
Alles Weitere klärst du im Erstgespräch. Kein “Firma”, kein “Betreff”, kein “Wie haben Sie uns gefunden”.
Tipp 13: Social Proof prominent platzieren
Vertrauenssignale gehören auf die Startseite, nicht versteckt auf eine Referenz-Seite:
- Google-Bewertungen mit Sternebewertung (Sterne-Snippets in den Suchergebnissen gibt Google für Bewertungen des eigenen Unternehmens allerdings nicht aus)
- Kundenstimmen mit Name und Foto (oder Initialen)
- Zahlen: “Seit 2019 | 50+ Projekte | 4.9 Sterne”
- Logos von Kunden oder Partnern
- Zertifizierungen und Gütesiegel
Reihenfolge nach Wirksamkeit (unsere Erfahrung): Google-Bewertungen > Kundenstimmen > Zahlen > Logos
Tipp 14: Mehrere Kontaktwege anbieten
Nicht jeder Nutzer möchte ein Formular ausfüllen. Biete an:
- Kontaktformular
- Telefon (Click-to-Call)
- E-Mail (Click-to-Mail)
- WhatsApp Business (für passende Branchen)
- Online-Terminbuchung (Calendly, Cal.com)
Mehrere Wege holen Besucher mit unterschiedlichen Vorlieben ab. Aber: Ein primärer Weg sollte visuell hervorgehoben sein.
Barrierefreiheit (Tipp 15)
Tipp 15: BFSG-konform gestalten
Seit dem 28.06.2025 gilt das Barrierefreiheitsstärkungsgesetz für Websites und Apps, über die Verbraucher einen Vertrag abschließen (Shop, Online-Buchung, Kundenkonto). Kleinstunternehmen (weniger als 10 Beschäftigte und höchstens 2 Mio. € Jahresumsatz oder Bilanzsumme) sind als Dienstleister ausgenommen, reine Präsentations-Websites in der Regel nicht erfasst. Prüfmaßstab ist WCAG 2.1 AA, und die lohnt sich auch ohne Pflicht. Die wichtigsten Anforderungen:
- Kontraste: 4.5:1 für Fliesstext, 3:1 für grossen Text
- Tastaturbedienbarkeit: Alle Funktionen per Tab, Enter, Escape erreichbar
- Focus-Styles: Sichtbare Fokus-Indikatoren (nicht mit
outline: noneentfernen!) - Alt-Texte: Für jedes informative Bild
- Semantisches HTML:
<nav>,<main>,<article>,<button>statt<div>für alles - Formulare: Jedes Feld hat ein
<label>, Fehlermeldungen sind klar formuliert - Animationen: Respektieren
prefers-reduced-motion
Tipp: Teste deine Website einmal komplett nur mit der Tastatur. Wenn du irgendwo steckenbleibst, hast du ein Problem.
Die 5 häufigsten Webdesign-Fehler bei KMU
- “Willkommen auf unserer Website”-Headline — Sagt nichts. Ersetzen durch: Was du tust + für wen + Nutzen.
- Slider auf der Startseite — In einer oft zitierten Messung der Universität Notre Dame (2013) klickte nur rund 1 % der Besucher überhaupt auf den Slider, davon 84 % auf das erste Bild. Slider verlangsamen die Seite und verwässern die Botschaft.
- Zu viel Text, zu wenig Struktur — Textwände ohne Zwischenüberschriften, Bilder oder Aufzählungen liest niemand.
- Kein klarer CTA — Wenn der Nutzer nicht weiss, was er tun soll, tut er nichts.
- Stock-Fotos statt echte Bilder — Nutzer erkennen Stock-Fotos sofort. Echte Team- und Projektfotos erzeugen Vertrauen.
Meine Einschätzung als Agenturinhaber: Von allen 15 Tipps ist der CTA above the fold der mit dem groessten sofortigen Impact. Ich habe KMU-Websites gesehen, die ihre Anfragen verdoppelt haben, nur indem sie die Telefonnummer und einen Jetzt-anfragen-Button sichtbar in den Header gepackt haben. Kein Redesign, kein SEO — einfach den Kontaktweg sichtbar machen.
FAQ
Wie viele Seiten braucht eine KMU-Website?
5–12 Seiten reichen für die meisten KMU. Startseite, 2–4 Leistungsseiten, Über uns, Referenzen, Kontakt. Jede Seite braucht echten Content — leere Seiten schaden dem SEO.
Lohnt sich ein Blog für KMU?
Ja, wenn du regelmässig (mindestens 2 Artikel/Monat) publizierst. Ein Blog verbessert SEO, baut Vertrauen auf und generiert langfristig organischen Traffic. Ohne regelmässige Pflege bringt ein Blog nichts.
Soll ich WordPress oder einen Baukasten verwenden?
Kommt drauf an. Baukästen (Wix, Squarespace) sind für einfache Websites ohne technische Kenntnisse geeignet. WordPress bietet mehr Flexibilität, braucht aber Wartung. Moderne Frameworks (Astro, Next.js) liefern die beste Performance, erfordern aber Entwickler-Know-how.
→ Webdesign-Tools im Vergleich
Was kostet eine KMU-Website?
Bei adfera als Festpreis-Projekt ab 1.200 € netto für einen Onepager, eine typische Firmenwebsite kostet 3.500–5.000 € netto. Als Website-Abo (WaaS): ab 69 € netto pro Monat plus einmalige Einrichtung. Die Kosten hängen von Seitenanzahl, Funktionen und Design-Anspruch ab.
→ Was kostet eine professionelle Website 2026?
Verwandte Ratgeber
- Was ist gutes Webdesign?
- Responsives Webdesign: Grundlagen und Best Practices
- 12 Webdesign-Beispiele nach Branche
- Webdesign-Kosten 2026: Was beeinflusst den Preis?
Professionelle Website für dein KMU?
Du möchtest eine Website, die nicht nur gut aussieht, sondern Kunden bringt? Wir setzen alle 15 Tipps für dich um — individuell für deine Branche.
Kostenloses Erstgespräch vereinbaren →
Website mieten ab 69 €/Monat →
Über den Autor: Moritz Lehmann ist Geschäftsführer von Adfera (M.Sc. Wirtschaftsinformatik) und hat seit 2019 über 50 Websites für KMU im DACH-Raum designed und entwickelt.
Quellen
- Google: „Web Vitals — Metriken für eine gute Nutzererfahrung” — web.dev/vitals
- Nielsen Norman Group: „How Users Read on the Web” — nngroup.com
- Smashing Magazine: „Web Design for Small Businesses” — smashingmagazine.com