Responsive HTML-Website-Vorlagen

Responsive HTML-Vorlagen. Erstelle eine Website, die deine Kunden bequem auf dem Smartphone und am Computer ansehen können.

Wähle ein Layout für echte Inhalte und prüfe es in schmalen und breiten Browserfenstern. Teste Navigation, Bildausschnitte und längere Texte vor deiner Veröffentlichung.

Beobachtete Layoutprüfungen vergleichen Prüfungen für meine Inhalte planen

Relayline

Offset

Primefolio

Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.

AI ChatBeispielablauf

Beobachtete Prüfungen

Zeige die Prüfung des Projekts bei Handy-, Tablet- und Desktopbreiten.

KI · Beispielantwort

Ich kann das Projekt bei 390, 768 und 1440 CSS-Pixeln öffnen und überlaufenden Text, Bildausschnitte und Menüprobleme suchen. Nach Änderungen prüfen wir deine Version, statt uns auf die ursprünglichen Screenshots zu verlassen.

Handy, Tablet und Desktop prüfen

Handy und Desktop öffnen
Prüfe Überschrift, Bildausschnitt, Menü und Hauptbutton in beiden Größen.
Sichtbares Problem nennen
Nenne KI die Bildschirmgröße und zeige etwa abgeschnittenen Text oder zu viel Leerraum im Screenshot.
Geänderte Vorschau prüfen
Wiederhole die Bedienung in beiden Breiten und auf der veröffentlichten Website.

Danach: geänderte Seite auf den Geräten deiner Besucher öffnen.

Beispieldialog, keine Live-KI-Sitzung.

01 / Beobachtete Prüfungen

Was wurde bei dieser Relayline-Version geprüft?

Relayline wurde in Handy-, Tablet- und Desktopbreiten geöffnet: 390, 768 und 1440 CSS-Pixel. In diesen Browserprüfungen blieb die Seite ohne horizontales Überlaufen im Bildschirm. Die Bilder unten zeigen diese Version. Wiederhole die Prüfung nach deinen Änderungen.

Quelle und Bedingungen

Aktuelles Paket 14080be0…13ca · geprüft am 2. Oktober 2026. Desktop-Fenstergrößen, keine echten Telefone; die Browserversion war nicht verfügbar.

Umfang der Prüfung

Originallayout und Bildladen, Öffnen per Zeiger, Escape, Dialogfortschritt und Fokusrückkehr. Keine vollständige Barrierefreiheits- oder Katalogzertifizierung.

Relayline original · 1440 × 900 Desktop-Fenster · dasselbe aktuelle Paket

Relayline original · 768 × 900 Desktop-Fenster · dasselbe aktuelle Paket

Relayline original · 390 × 900 Desktop-Fenster · dasselbe aktuelle Paket

02 / Layout-Kandidaten

Welche Layouts solltest du genauer prüfen?

Wähle Bildrahmen und Textflächen passend zu deinen Inhalten und öffne die Seite auf Handy und Desktop. Probiere lange Überschrift, eigenes Foto und Menü. Die Vorschauen helfen dir beim Vergleich vor der Anpassung.

Relayline

Produkterklärung mit Drei-Kachel-Einstieg und detaillierter Navigation zur Prüfung.

Preis und Dateien ansehen ↗

Dateien prüfen

Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.

index.html
RECREATE.md
assets/relayline-focus.png
assets/relayline-portrait.png

Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.

Offset

Projektbilder und große Typografie: prüfe hohe Arbeiten und längere Titel.

Preis und Dateien ansehen ↗

Dateien prüfen

Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.

index.html
RECREATE.md
assets/contour.svg
assets/fern.png
assets/form-poster.svg
assets/geometric-print.svg
assets/glass.png
assets/packaging.png
assets/ribbon.png

Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.

Primefolio

Studiokarten und Projektdialoge: prüfe Tastaturzugang und Fokusrückkehr.

Preis und Dateien ansehen ↗

Dateien prüfen

Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.

index.html
RECREATE.md
assets/current-product.png
assets/hero-form.png
assets/serein-brand.png

Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.

VYNE

Markanter Titel und Effekte: prüfe Bewegungseinstellungen und schmale Ansichten.

Preis und Dateien ansehen ↗

Dateien prüfen

Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.

index.html
RECREATE.md
assets/vyne-clay-glass-still-life.png
assets/vyne-cobalt-editorial.png
assets/vyne-ivory-portrait.png

Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.

Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.

AI ChatBeispielablauf

Langer Text und hohes Bild

Das Porträt ist auf dem Handy zu stark beschnitten. Zeige das Gesicht ganz ohne Desktopänderung.

KI · Beispielantwort

Schicke Screenshot und betroffene Breite. Ich kann Überschrift, Abstände oder Bildausschnitt im CSS dort anpassen und das gewünschte Desktop-Layout beibehalten. Danach vergleichen wir beide Vorschauen.

Handy-Layout anpassen

Handy und Desktop öffnen
Prüfe Überschrift, Bildausschnitt, Menü und Hauptbutton in beiden Größen.
Sichtbares Problem nennen
Nenne KI die Bildschirmgröße und zeige etwa abgeschnittenen Text oder zu viel Leerraum im Screenshot.
Geänderte Vorschau prüfen
Wiederhole die Bedienung in beiden Breiten und auf der veröffentlichten Website.

Danach: geänderte Seite auf den Geräten deiner Besucher öffnen.

Beispieldialog, keine Live-KI-Sitzung.

03 / Langer Text und hohes Bild

Was geschah mit längerem Text und einem hohen Bild?

In einer separaten Testkopie brach die längere Überschrift ohne Überlaufen um. Ein Hochformatbild wurde je nach Breite anders beschnitten. Lass KI Umbruch und Bildanpassung für deine Inhalte ändern. Die Screenshots zeigen, warum diese Details in die Vorschau gehören.

Deine Entscheidung	Originalpaket	Geänderte Testkopie
390 × 900	Kein seitenweiter horizontaler Überlauf beobachtet.	Die längere Überschrift brach um; das erste Porträt wurde durch vorhandenes CSS ausgeblendet.
768 × 900	Kein seitenweiter horizontaler Überlauf beobachtet.	Das hohe Porträt wurde mit cover in ein Quadrat von 236 × 236 beschnitten.
1440 × 900	Kein seitenweiter horizontaler Überlauf beobachtet.	Das hohe Porträt wurde mit cover in ein Quadrat von 460 × 460 beschnitten.

Relayline-Testkopie · 1440 × 900 · längere Überschrift und 1:3-Porträt; nicht das Kunden-ZIP

Relayline-Testkopie · 768 × 900 · längere Überschrift und 1:3-Porträt; nicht das Kunden-ZIP

Relayline-Testkopie · 390 × 900 · längere Überschrift und 1:3-Porträt; nicht das Kunden-ZIP

AI ChatBeispielablauf

Bedienelemente nutzen

Prüfe Menü, Details und Escape nach diesen responsiven Änderungen.

KI · Beispielantwort

Ich kann Menülinks und Detailfenster prüfen: richtiges Ziel, Schließen und Rückkehr zum öffnenden Element. Benötigt ein Projekt einen eigenen teilbaren Link, können wir eine zusätzliche HTML-Seite erstellen.

Menü und Details bedienbar machen

Menü nutzen
Prüfe den sichtbaren Abschnitt ohne Überdeckung durch den Header.
Details öffnen und schließen
Prüfe Schließen, Escape und Rückkehr zum Projektbutton.
Bei Bedarf Adresse ergänzen
Lass eine eigene Projektseite erstellen, wenn ein eigener Link nötig ist.

Danach: Menü und Details auf Handy und Desktop bedienen.

Beispieldialog, keine Live-KI-Sitzung.

04 / Bedienelemente nutzen

Können Besucher Menüs und Details bedienen?

In der geprüften Relayline-Version reagierten Menü und Detailfenster auf Klicks, Escape schloss das Fenster. Öffne bei deiner Website das Menü, folge einem Link und schließe Details auf den vorgesehenen Geräten. Lass KI nach Änderungen auftretende Bedienprobleme beheben.

01
Menü
Öffne es, folge einem Link und prüfe den sichtbaren Abschnitt.
02
Details
Öffne ein Projektfenster und teste Schließen sowie Escape.
03
Nach Änderungen
Wiederhole auf Handy und Desktop und gib KI bei Problemen einen Screenshot.

AI ChatBeispielablauf

Anpassen und prüfen

Verringere den Hero-Abstand auf Handys und behalte Desktopabstände bei.

KI · Beispielantwort

Handy-Layout anpassen

Handy und Desktop öffnen
Prüfe Überschrift, Bildausschnitt, Menü und Hauptbutton in beiden Größen.
Sichtbares Problem nennen
Nenne KI die Bildschirmgröße und zeige etwa abgeschnittenen Text oder zu viel Leerraum im Screenshot.
Geänderte Vorschau prüfen
Wiederhole die Bedienung in beiden Breiten und auf der veröffentlichten Website.

Danach: geänderte Seite auf den Geräten deiner Besucher öffnen.

Beispieldialog, keine Live-KI-Sitzung.

05 / Anpassen und prüfen

Kann ich Abstände mit meiner KI anpassen?

Ja. Sage der KI, was bei welcher Breite zu eng oder groß wirkt, etwa den Hero-Abstand auf dem Handy ohne Desktopänderung. Lass beide Breiten anzeigen. So passt du Abstände und Schriftgrößen an deine Texte an.

Vorbereitetes Template-Beispiel ansehen

Beispiel für KI-BearbeitungFormwell

Passe die Abschnittsabstände an und behalte Inhalte und Stil.

KI · Beispielantwort

Das vorbereitete Formwell-Beispiel ändert Layoutabstände. Prüfe nach jeder Änderung deine Überschriften, Bilder, Bedienelemente und schmalen Ansichten erneut.

index.html · RECREATE.md

Formwell · vorbereitete HTML-Vorschau

Ganze Vorschau öffnen ↗

Vorbereiteter Dialog und Projektversionen. Keine Live-Verbindung zu einer KI.

AI ChatBeispielablauf

Bewegung und Ressourcen

Komprimiere große Bilder und reduziere Animationen ohne Inhalte zu entfernen.

KI · Beispielantwort

Ich kann Bildgrößen und Animationsregeln prüfen. Bitte um komprimierte Bilder und weniger Bewegung beim Lesen. Danach prüfen wir Bildqualität und Bedienung in der Seite.

Große Bilder und störende Bewegung ändern

Medien prüfen
Finde zu große Bilder und zu ändernde Animationen.
Anpassung beauftragen
Skaliere und komprimiere Bilder und reduziere oder entferne ausgewählte Bewegung.
Ergebnis ansehen
Prüfe scharfe Bilder, lesbaren Text und funktionierende Bedienung.

Danach: öffentliche Website mit den aktualisierten Dateien prüfen.

Beispieldialog, keine Live-KI-Sitzung.

06 / Bewegung und Ressourcen

Was ist mit Animation, Laden und fehlenden Ressourcen?

Bei langsamen Bildern lasse KI Größe und Kompression anpassen. Störende Animationen kannst du reduzieren oder entfernen lassen. Prüfe nach dem Veröffentlichen Bilder und Schriften. Der Relayline-Test bestätigte das Laden der Bilder, maß aber weder Tempo noch Offline- oder Bewegungspräferenzen.

Website-Dateien + Designanweisungen

Bilder

Lass große Bilder skalieren und komprimieren und prüfe das Laden online.

Bewegung

Lass unerwünschte Animationen auf deiner Website reduzieren oder entfernen.

Ressourcen

Prüfe die öffentliche Seite auf fehlende Bilder oder Schriften und lasse Pfade korrigieren.

AI ChatBeispielablauf

Wählen und erneut prüfen

Hilf beim Prüfen meiner bearbeiteten Website auf Handy, Desktop und Hosting-Adresse.

KI · Beispielantwort

Website vor Veröffentlichung prüfen

Handy und Desktop öffnen
Prüfe Überschrift, Bildausschnitt, Menü und Hauptbutton in beiden Größen.
Sichtbares Problem nennen
Nenne KI die Bildschirmgröße und zeige etwa abgeschnittenen Text oder zu viel Leerraum im Screenshot.
Geänderte Vorschau prüfen
Wiederhole die Bedienung in beiden Breiten und auf der veröffentlichten Website.

Danach: geänderte Seite auf den Geräten deiner Besucher öffnen.

Beispieldialog, keine Live-KI-Sitzung.

07 / Wählen und erneut prüfen

Was bestätige ich vor der Veröffentlichung?

Prüfe die bearbeitete Website auf Handy und Desktop: Überschriften, Bildausschnitte, Menü, Buttons und Kontakt. Wiederhole das nach der Veröffentlichung an der öffentlichen Version. Bei Unterschieden gib KI einen Screenshot und lasse das konkrete Problem beheben.

Deine Markenanpassung planen Veröffentlichung und Live-Prüfung planen

Handy und Desktop öffnen

Prüfe Überschrift, Bildausschnitt, Menü und Hauptbutton in beiden Größen.

Sichtbares Problem nennen

Nenne KI die Bildschirmgröße und zeige etwa abgeschnittenen Text oder zu viel Leerraum im Screenshot.

Geänderte Vorschau prüfen

Wiederhole die Bedienung in beiden Breiten und auf der veröffentlichten Website.

Dateien und Bedingungen von Relayline ansehen

Formwell / Website-Dateien + Designanweisungen

Teste ein echtes Template, bevor du dich entscheidest.

Lade das originale Formwell-Projekt herunter. Gib die Dateien und RECREATE.md an ein geeignetes KI-Tool, probiere eine kleine Änderung und prüfe das Ergebnis.

Das kostenlose Beispiel ist Formwell. Originaldesign und Anleitung sind auf Englisch. Die Produktpreise bleiben unverändert.

Formwell-ZIP herunterladen RECREATE.md herunterladen ↗

Wähle mit den Bildschirmen deiner Besucher im Blick.

Das geprüfte Paket gibt dir ein konkretes Layout zur Beurteilung. Prüfe eigene Inhalte und die veröffentlichte Version erneut, bevor du dich auf Originalbeobachtungen verlässt.

Mein responsives Layout wählen