Moderne Firmenhomepage gestalten: 6 Merkmale, die sich nachmessen lassen

1. Einführung: Modern ist kein Geschmacksurteil

41 Startseiten kleiner und mittlerer Betriebe, drei Prüfpunkte, ein Nachmittag Arbeit. 19 dieser Seiten binden eine Karussell-Bibliothek ein. Bei 19 Seiten fehlt jede Rücksicht auf die Systemeinstellung „Bewegung reduzieren“. Und nur 8 der 41 Startseiten bestehen alle drei Punkte. Wer eine moderne Firmenhomepage gestalten will, streitet deshalb selten über Geschmack. Es geht um Eigenschaften. Man kann sie nachsehen.

Auf einen Blick

• Von 41 geprüften Firmen-Startseiten binden 19 eine Karussell- oder Slider-Bibliothek ein, 19 berücksichtigen die Systemeinstellung „Bewegung reduzieren“ nicht (Kreativschock-Stichprobe, August 2026).
• Nur 8 dieser 41 Startseiten bestehen alle drei Prüfpunkte dieses Beitrags, 33 haben mindestens einen Befund (Kreativschock-Stichprobe, August 2026).
• Text mit zu geringem Kontrast findet sich auf 83,9 Prozent aller untersuchten Startseiten, im Schnitt 56,1 erkannte Barrieren pro Seite (WebAIM Million, Februar 2026).
• Bewegte Inhalte müssen nach dem BITV- und WCAG-Prüfschritt 2.2.2 innerhalb von 5 Sekunden von selbst aufhören oder abschaltbar sein (BIK BITV-Test).
• Die mittlere mobile Seite im Web fordert 22 JavaScript-Dateien an, im 90. Perzentil sind es 68 (Web Almanac, HTTP Archive).

Eine moderne Firmenhomepage ist ein Unternehmensauftritt, der auf jedem Bildschirm ohne Zoomen lesbar bleibt und in wenigen Sekunden nutzbar ist. Sie führt Besucher über eine klar strukturierte Navigation. Ihre Kontraste, Ladezeiten und Animationen bremsen niemanden aus. Modern meint messbare Eigenschaften, nicht einen aktuellen Stil.

Genau hier trennen sich zwei Welten. Die eine fragt nach dem Werkzeug, nach Vorlagen und nach der schnellsten Abkürzung. Die andere fragt nach Wirkung. Wer die Navigation und Seitenstruktur planen lässt, bevor über Farben gesprochen wird, spart sich später zwei Korrekturrunden. Und wer eine moderne Homepage gestalten lassen möchte, sollte die sechs Merkmale kennen, an denen das Ergebnis gemessen wird. Das gilt für den Baukasten genauso wie für eine professionelle Website vom Webdesigner.

2. Warum „sieht neu aus“ und „ist modern“ zwei verschiedene Dinge sind

Ein frisches Layout ist schnell gekauft. Vorlagen bringen große Bildflächen, viel Weißraum und eine Animation beim Scrollen mit. Der erste Eindruck sitzt. Zwei Jahre später sieht dieselbe Seite aus wie tausend andere, weil viele moderne Websites aus derselben Handvoll Templates entstehen.

Das eigentliche Problem liegt tiefer. Viele Elemente, die als modern verkauft werden, arbeiten gegen die Zahlen, an denen eine erfolgreiche Website hängt. Ein Karussell verschiebt Inhalte, während der Besucher liest. Eine große Animation kostet Ladezeit und verlangt Rechenleistung auf älteren Smartphones. Ein Schriftzug in hellgrau auf beige wirkt ruhig und ist für viele Augen kaum entzifferbar. Drei Effekte, drei Bremsen.

Wie verbreitet der letzte Punkt ist, zeigt der WebAIM Million Report, eine automatisierte Auswertung von einer Million Startseiten. Dort heißt es: „Low contrast text, below the WCAG 2 AA thresholds, was found on 83.9% of home pages“ (Text mit zu geringem Kontrast, unterhalb der Schwellen von WCAG 2 AA, fand sich auf 83,9 Prozent der Startseiten). Im Schnitt zählt der Bericht 56,1 erkannte Barrieren je Seite.

Kurz zusammengefasst: Modernes Webdesign zeigt sich nicht im Stil, sondern in der Nutzbarkeit. Kontrast, Bewegung, Tempo und Struktur lassen sich prüfen. Ein Geschmacksurteil nicht. Wer diese vier Größen im Griff hat, kann beim Aussehen frei entscheiden, ohne die Wirkung zu verlieren.

3. Voraussetzungen: Was vor dem Gestalten geklärt sein muss

Bevor die erste Farbe fällt, gehören vier Fragen auf den Tisch. Sie kosten eine Stunde. Und sie entscheiden über Wochen.

1. Ziel: Soll die Seite Anfragen bringen, Bewerbungen erzeugen oder ein Portfolio zeigen? Aus dem Ziel folgt, welche Art von Website passt, vom One-Pager bis zur mehrstufigen Firmenseite. Genau deshalb ist die Frage, warum die eigene Website wichtig ist, keine Floskel.
2. Zielgruppe: Wer liest mit, und auf welchem Gerät? Bei Handwerk und Handel kommt der größere Teil der Besucher über Smartphones und Tablets, nicht über den Desktop.
3. Technische Basis: Eine eigene Domain, verlässliches Webhosting und ein gültiges SSL-Zertifikat sind Pflicht, kein Feature. Freie Domains prüfen Sie beim Domain-Registrar oder direkt beim Hoster.
4. Pflegeweg: Wer ändert später Texte und Bilder? Diese Antwort entscheidet zwischen Homepage-Baukasten und einem Content-Management-System wie WordPress. Das System sollte für die Redaktion einfach zu bedienen sein.

Ein Wort zu Vorkenntnissen. Man muss nicht programmieren können, um eine eigene Website zu erstellen; ohne Programmierkenntnisse geht heute vieles. Nur ändert das nichts an den sechs Merkmalen weiter unten. Beim Erstellen bleiben die Entscheidungen über Struktur, Kontrast und Inhalt bei Ihnen, ein Baukasten nimmt Ihnen nur die Technik ab.

Kurz zusammengefasst: Ziel, Zielgruppe, Domain und Pflegeweg gehören vor die Gestaltung. Wer diese vier Punkte schriftlich hat, kann jedes Angebot zur Erstellung der Website vergleichen und erkennt sofort, ob ein Anbieter über Wirkung oder nur über Vorlagen spricht.

4. Schritt für Schritt: Moderne Firmenhomepage gestalten

Sechs Merkmale, sechs Prüfungen. Jede lässt sich am fertigen Ergebnis nachmessen. Jede hat eine klare Schwelle.

4.1 Struktur und Navigation begrenzen

Der Aufbau der Website entsteht aus dem Ziel, nicht aus dem Organigramm. Fünf bis sieben Punkte in der Hauptnavigation reichen für die meisten Betriebe, und jeder wichtige Inhalt sollte in zwei Klicks erreichbar sein. Am besten hält man die Menüpunkte kurz. Eine strukturiert aufgebaute Seite ist wie ein Wegweiser am Bahnhof: Er nennt vier Richtungen, nicht vierzig.

Prüfung: Zählen Sie die Einträge im Hauptmenü und klicken Sie zur wichtigsten Leistung. Mehr als sieben Einträge oder mehr als zwei Klicks sind ein Befund.

4.2 Den ersten Bildschirm belegen

Was ohne Scrollen zu sehen ist, entscheidet über den Rest. Dort gehören drei Dinge hin: was Sie anbieten, für wen und wo, sowie ein sichtbarer Handlungsaufruf. Mehr nicht. Ein großes Stimmungsbild ohne Aussage verschenkt diesen Platz, und die Fläche kann kein zweites Mal vergeben werden. Wie man den ersten Bildschirm gestalten kann, ohne ihn zu überladen, hängt vor allem an der Textlänge.

Prüfung: Öffnen Sie die Startseite auf einem Handy und scrollen Sie nicht. Stehen Angebot, Ort und Kontaktweg da?

4.3 Kontrast und Lesbarkeit sichern

Farben tragen die Marke. Kontrast trägt den Text. Für normalen Text gilt ein Verhältnis von mindestens 4,5 zu 1 gegen den Hintergrund, für große Schrift 3 zu 1. Hellgraue Schrift auf weiß ist das digitale Preisschild in Bleistift: technisch vorhanden, praktisch unlesbar. Beim Festlegen der Farben und beim Kontraste richtig prüfen helfen die kostenlosen Kontrast-Tools im Browser.

Dazu gehört die Schriftgröße. 16 Pixel im Fließtext sind die Untergrenze. Die Zeilenlänge sollte auf dem Desktop nicht über etwa 80 Zeichen laufen. Welche Schriftgrößen und Zeilenlängen sich bewährt haben, lässt sich vorab am Entwurf festlegen.

4.4 Bewegung mit Bremse einsetzen

Videos und Animationen sind erlaubt. Sie brauchen nur einen Aus-Schalter. Der Prüfschritt 2.2.2 des BIK BITV-Tests formuliert die Regel so: „Prüfen, ob die Bewegung innerhalb von 5 Sekunden nach Anzeige der Seite von selbst aufhört.“ Hört sie nicht auf, muss es eine sichtbare Schaltfläche zum Stoppen geben.

Zusätzlich kennen alle aktuellen Browser die Systemeinstellung „Bewegung reduzieren“. Wer sie im Betriebssystem aktiviert, möchte keine Animation sehen. Mit zwei Zeilen CSS kann diese Einstellung berücksichtigt werden, und der Aufwand ist damit erledigt.

Prüfung: Läuft eine Bewegung länger als 5 Sekunden ohne Stopp-Schalter? Und passiert etwas, wenn Sie im Betriebssystem „Bewegung reduzieren“ einschalten?

4.5 Ladezeiten und Ballast im Blick behalten

Schnelle Ladezeiten entstehen durch Weglassen. Jedes Werkzeug, jeder Slider und jede Schriftfamilie kostet eine Datei. Der Web Almanac des HTTP Archive hält den Normalfall fest: „the median mobile page is making 22 JavaScript requests, while those in the 90th percentile soar to 68“ (Die mittlere mobile Seite fordert 22 JavaScript-Dateien an, im 90. Perzentil sind es 68).

Ein Werkzeugkoffer, in dem für jeden Handgriff ein eigenes Werkzeug mitgeschleppt wird, wird irgendwann zu schwer zum Tragen. Bilder in modernen Formaten, ein Cache und das Entfernen überflüssiger Skripte bringen in unseren Projekten regelmäßig PageSpeed-Werte von 90 und mehr. Welche Schritte sich lohnen, um das Tempo der Startseite prüfen und verbessern zu können, hängt am Ausgangswert.

4.6 Technische Basis und Sichtbarkeit prüfen

Responsive Design ist kein Zusatz. Es ist der Ausgangspunkt. Die Seite muss auf 320 Pixel Breite ohne waagerechtes Scrollen funktionieren. Zoomen darf nie gesperrt sein. Dazu kommen Alternativtexte für Bilder, sprechende Seitentitel und eine saubere Überschriften-Hierarchie. Diese Punkte sind gleichzeitig die Grundlage für SEO, weil Suchmaschinen denselben Quelltext lesen wie ein Screenreader.

Ziel ist es also, Gestaltung und Technik nicht zu trennen. Suchmaschinenoptimierung beginnt genau hier, im Quelltext. Wer die Inhalte für Suchmaschinen optimieren will, verbessert mit derselben Maßnahme die Usability und die Sichtbarkeit. Bevor die Website live geht, gehört dieser Block noch einmal auf die Liste. Die Darstellung auf kleinen Displays gehört dabei zuerst geprüft, nicht zuletzt.

5. Unsere Position: Was 41 geprüfte Startseiten zeigen

Für diesen Beitrag haben wir im August 41 auswertbare Startseiten kleiner und mittlerer Betriebe geprüft. Die Auswahl kam über die Sponsoren- und Partnerlisten von fünf Tierschutzvereinen aus Niedersachsen, Sachsen, Baden-Württemberg und der Region Peine, also über einen bewusst gemischten Branchen-Querschnitt aus Handwerk, Handel, Praxen und Dienstleistung. Gemessen wurde ausschließlich das ausgelieferte HTML und CSS der Startseite, ohne Unterseiten. Eine kleine Momentaufnahme, keine repräsentative Studie.

• Karussell: 19 von 41 Seiten laden eine Slider-Bibliothek, am häufigsten Swiper und den Slider Revolution.
• Bewegung reduzieren: 19 von 41 Seiten berücksichtigen die Systemeinstellung nicht. Von den 19 Seiten mit Karussell tun es 6 nicht.
• Skript-Ballast: Der Median liegt bei 11 eingebundenen Skript-Dateien, die Spanne reicht von 0 bis 105. 12 Seiten laden 20 oder mehr.

Der Median von 11 liegt deutlich unter den 22 Dateien der mittleren mobilen Seite im Web Almanac. Kleine Firmenseiten sind also im Schnitt schlanker als der Durchschnitt des Netzes. Die Spanne verrät trotzdem, wo es kippt: Eine einzige Seite im Pool zieht 105 Dateien. Das ist kein Design mehr, das ist Ballast.

Die meisten Ratgeber zu diesem Thema erklären, modern werde eine Seite durch das richtige Werkzeug und durch aktuelle Design-Elemente, schnell und einfach und ganz ohne Programmierkenntnisse. Unsere Position: Das Werkzeug entscheidet fast nichts, und mehrere dieser „modernen“ Elemente arbeiten gegen die Messwerte, um die es geht. In unserer Stichprobe kommt die Bewegung ausgerechnet dort ins Spiel, wo die Rücksicht auf die Systemeinstellung fehlt.

6. Häufige Fehler und wie Sie sie vermeiden

Fünf Muster sehen wir in Projekten immer wieder.

• Das Karussell auf der Startseite. Ein Schaufenster, dessen Auslage sich alle vier Sekunden dreht, während der Kunde noch liest. Besser ein starkes Bild mit einer Aussage.
• Animation als Selbstzweck. Wenn beim Scrollen jedes Element einfliegt, wirkt die Seite unruhig und wird langsam. Bewegung sollte etwas erklären.
• Hamburger-Menü auf dem Desktop. Auf dem Handy erwartet es jeder. Am großen Bildschirm versteckt es die Navigation, die ohnehin Platz hätte.
• Vorlagen-Optik ohne eigene Inhalte. Templates und Vorlagen sind ein guter Start. Bleiben die Beispielbilder und Blindtexte stehen, wirkt der Auftritt beliebig.
• Kontakt hinter drei Klicks. Telefonnummer und Formular gehören in den Kopfbereich und in den Fuß, nicht nur auf eine eigene Unterseite.

Am besten prüft man diese fünf Punkte am eigenen Auftritt, bevor man über einen Relaunch nachdenkt, denn häufig genügt eine Korrektur an zwei Stellen, und die Seite fühlt sich danach sofort aufgeräumter an. Die Frage, wie ein Auftritt Hürden abbaut, ist dabei wichtiger als jede Trend-Liste.

7. Werkzeuge: Homepage-Baukasten, WordPress oder Agentur

Eine moderne Webseite entsteht auf allen drei Wegen, sofern die sechs Merkmale erfüllt sind. Die Wege unterscheiden sich in Aufwand, Freiheit und Betriebskosten.

7.1 Kostenlos, selbst bauen oder erstellen lassen

Wer eine eigene Website erstellen möchte, kann klein anfangen. Eine kostenlose Website gibt es bei mehreren Anbietern, meist mit Werbung und einer Adresse unterhalb der Anbieter-Domain. Eine Website kostenlos erstellen ist deshalb ein Testlauf, keine Lösung: Eine kostenlos erstellte Seite lässt sich später nur mit Aufwand umziehen, und mit einer benutzerdefinierten Domain wird das Paket ohnehin kostenpflichtig.

Der zweite Weg heißt Baukasten. Dort entsteht die eigene Homepage im Browser. Eine Homepage erstellen heißt dort: Vorlage wählen, Inhalte einsetzen, veröffentlichen. Wer die Website selbst bauen will, kommt so schnell zu einem Ergebnis, bleibt aber im Raster der Vorlage.

Der dritte Weg: die Firmenhomepage erstellen lassen. Dann übernimmt eine Agentur Struktur, Texte, Website Design und Technik, und Sie prüfen am Ende die sechs Merkmale ab. Wer die Website erstellen lassen möchte, sollte das Angebot genau daran messen und nicht an der Zahl der mitgelieferten Vorlagen.

Weg	Passt, wenn	Stärke	Grenze
Homepage-Baukasten	Wenige Seiten, Start ohne Vorkenntnisse	Schnell und einfach, Hosting und SSL enthalten	Layout an Vorlagen gebunden, Umzug später aufwendig
WordPress	Eigene Inhalte, Blog, Wachstum geplant	Freies Layout, große Auswahl an Erweiterungen	Braucht Pflege, Updates und Backups
Agentur	Individuelle Website mit Anspruch an Wirkung	Struktur, Texte und Technik aufeinander abgestimmt	Höherer Startaufwand als ein Baukasten

Die Anbieter von Homepage-Baukästen wie IONOS oder Jimdo werben inzwischen mit einem KI-Generator, der Texte und Bilder in Sekunden generieren kann. Als Startpunkt ist so ein Tool brauchbar. Als Endergebnis fehlt ihm alles, was Ihren Betrieb von anderen unterscheidet, und für die Kundengewinnung zählt genau das. Viele Homepages im Mittelstand sehen deshalb inzwischen aus wie derselbe Entwurf in zwei Farben.

Bei einer neuen Website lohnt es sich, die Reihenfolge zu drehen: erst die sechs Merkmale festlegen, dann das Werkzeug wählen. Hilfreiche Tipps zur Website-Erstellung gibt es reichlich; prüfbar wird die Sache erst durch Schwellenwerte.

Wer die Seite langfristig betreiben will, sollte die Pflege nach dem Livegang von Anfang an einplanen. Und wer die Umsetzung abgeben möchte, findet die Gestaltung aus einer Hand bei einem Webdesigner mit festen Preisen.

8. Fazit

Sechs Merkmale, sechs Prüfungen, kein Geschmacksstreit. Struktur, erster Bildschirm, Kontrast, Bewegung, Tempo und technische Basis entscheiden, ob eine Firmenhomepage modern wirkt und modern funktioniert. Die Werkzeugfrage kommt danach. Ziel ist es, das Ergebnis prüfbar zu machen, damit die Diskussion über Geschmack gar nicht erst aufkommen muss.

Das Ziel ist ein konkretes Bild. Sie öffnen die eigene Startseite auf dem Handy, und sie ist da, bevor Sie den Daumen bewegen. Nichts springt, nichts dreht sich, die Telefonnummer steht sofort im Blick, und der Text ist ohne Zoomen lesbar. Genau dieses ruhige Gefühl ist der Unterschied, den Besucher nicht benennen, aber merken.

9. Anhang: Checkliste zum Nachmessen

• Hauptnavigation mit maximal sieben Einträgen, wichtigste Leistung in zwei Klicks erreichbar
• Erster Bildschirm auf dem Handy nennt Angebot, Ort und einen Handlungsaufruf
• Kontrast mindestens 4,5 zu 1 im Fließtext, Schriftgröße ab 16 Pixel
• Bewegung endet nach 5 Sekunden oder ist abschaltbar, Systemeinstellung „Bewegung reduzieren“ wird beachtet
• Bilder in modernen Formaten, Cache aktiv, keine überflüssigen Skripte
• Responsives Design ab 320 Pixel Breite, Zoomen nicht gesperrt, SSL-Zertifikat gültig
• Alternativtexte für Bilder gesetzt, Seitentitel sprechend, eine H1 pro Seite
• Impressum und Datenschutzerklärung aus jeder Seite erreichbar

Kontakt aufnehmen

Sie möchten Ihre Firmenhomepage neu gestalten oder erst einmal wissen, wie sie in den sechs Prüfungen abschneidet? Schreiben Sie uns, wir melden uns innerhalb von 24 Stunden:

Disclaimer: Alle genannten Zeitangaben, Schwellenwerte und Bewertungen sind Erfahrungswerte aus der Agentur-Praxis und aus den genannten Quellen. Sie können je nach Branche, Anbieter und Projektumfang abweichen. Die Angaben zu Barrierefreiheit und Rechtspflichten ersetzen keine fachjuristische Beratung.