Warum ist das responsive Design einer KI-gestützten Website auf dem Smartphone verschoben?

Eine am Computer ordentlich aussehende Seite kann auf dem Smartphone plötzlich horizontal scrollbar sein, von Bildern überdeckten Text oder einen Anfrage-Button außerhalb des Bildschirms aufweisen. Meist liegt das nicht daran, dass die „KI kein responsives Design beherrscht“, sondern daran, dass das generierte Layout noch feste Breiten, Positionierungen für Desktop-Geräte oder für kleine Bildschirme ungeeignete Inhaltsgrößen verwendet. Responsives Design beim KI-gestützten Website-Aufbau kann eine erste Anpassung ermöglichen. Nach dem Austausch von Bildern, dem Hinzufügen von Texten oder dem Einbetten von Plugins gelten die ursprünglichen Regeln jedoch nicht unbedingt weiterhin.

Unterscheiden Sie zunächst, ob die gesamte Seite verbreitert wird, ein einzelner Bereich verrutscht oder sich die Position nach dem Laden ändert. Prüfen Sie dann die betreffenden Container, Breakpoints und Ressourcen. Verkleinern Sie nicht sofort sämtliche Schriftgrößen und blenden Sie den Überlauf nicht einfach aus: Das kann das Problem zwar verdecken, aber zugleich die Nutzung von Produktinformationen, Menüs und Formularen beeinträchtigen und dadurch Anfragen über Mobilgeräte erschweren.

Zuerst prüfen: Ist die Vorschau oder die veröffentlichte Seite fehlerhaft?

Öffnen Sie die veröffentlichte Seite im Browser eines Smartphones und vergleichen Sie sie mit der mobilen Vorschau im Editor. Der Vorschaubereich kann durch die Skalierung des Editors beeinflusst werden und ersetzt keinen Test auf einem echten Gerät. Notieren Sie die betroffene Seite, die Sprachversion und die Ausrichtung des Bildschirms. Halten Sie außerdem fest, ob der Fehler direkt beim Öffnen auftritt oder erst nach dem Laden eines Bildes beziehungsweise dem Ausklappen eines Menüs.

• Alle Seiten lassen sich horizontal scrollen: Prüfen Sie zuerst Kopf- und Fußzeile, globale Container und die Viewport-Einstellungen.
• Nur ein bestimmter Bereich ist fehlerhaft: Prüfen Sie Breite, Abstände, Positionierung und interne Inhalte dieses Moduls.
• Beim Öffnen ist zunächst alles in Ordnung, später springt die Seite: Untersuchen Sie insbesondere Bildabmessungen, den Austausch von Schriftarten und asynchron geladene Komponenten.

Erstellen Sie vor Änderungen eine Seitenkopie oder bewahren Sie den Versionsverlauf auf. Ändern Sie pro Durchgang nur eine Art von Einstellung. Wenn der Editor die Seite korrekt darstellt, sie online jedoch fehlerhaft ist, prüfen Sie zuerst, ob die Änderungen veröffentlicht wurden, und aktualisieren Sie den Cache. Ein dauerhaftes Darstellungsproblem lässt sich nicht durch wiederholtes Leeren des Caches beheben.

Wird die gesamte Seite verbreitert, suchen Sie nach Elementen, die über den Bildschirm hinausragen

Wechseln Sie in den Entwicklertools zu einer Smartphone-Ansicht und prüfen Sie nacheinander die Grenzen des äußersten Containers und der fehlerhaften Module. Häufig ist eine feste Pixelbreite für den Container eingestellt oder die Mindestbreite ist weiterhin auf die Desktop-Ansicht ausgelegt. Auch eingebettete Tabellen, Videos und Karten können eine eigene Breite mitbringen. Dadurch können interne Inhalte überlaufen, obwohl der übergeordnete Container bereits verkleinert wurde.

Stellen Sie im Website-Editor den Hauptcontainer so ein, dass er sich an den verfügbaren Platz anpasst. Begrenzen Sie das Layout auf Desktop-Geräten mit einer maximalen Breite und lassen Sie auf Smartphones ausreichend seitlichen Abstand. Prüfen Sie auch die untergeordneten Module: Kombinierte linke und rechte Innenabstände können zusammen mit einer festen Breite ebenfalls über den Bildschirm hinausragen. Bei benutzerdefinierten Styles sollten Sie das Box-Modell kontrollieren, damit Rahmen und Innenabstände nicht zusätzlich zur Breite gerechnet werden.

Wenn die gesamte Seite auf dem Smartphone wie eine verkleinerte Desktop-Website aussieht, prüfen Sie, ob der Viewport korrekt eingestellt ist, sodass die Layout-Viewport-Breite der Gerätebreite entspricht. Deaktivieren Sie weder das Zoomen durch Nutzer noch verbergen Sie das Problem durch ein globales Ausblenden horizontaler Überläufe. Abgeschnittene Buttons lassen sich dadurch weiterhin nicht anklicken.

Wenn Karten und Buttons zusammengedrängt werden, passen Breakpoints und Layout meist nicht zusammen

Breakpoints unterscheiden nicht einfach zwischen „Computer“ und „Smartphone“, sondern legen fest, wann Inhalte anders angeordnet werden müssen. Bleiben drei Produktkarten auch auf einem schmalen Bildschirm in drei Spalten angeordnet, wird der Titel auf mehrere Zeilen zusammengedrückt. Bei einer Navigation mit vielen Einträgen kann es bereits zu eng werden, bevor der Bildschirm den Smartphone-Breakpoint erreicht.

Verkleinern Sie den Darstellungsbereich schrittweise ausgehend von einer größeren Ansicht. Beobachten Sie, an welcher Stelle die Elemente erstmals überlappen, und passen Sie die Layoutregeln für diesen Bereich an. Produktlisten können schrittweise von drei auf zwei oder eine Spalte umgestellt werden. Bild-Text-Bereiche nebeneinander lassen sich untereinander anordnen. Button-Gruppen sollten umbrechen können, statt lediglich die Button-Beschriftung zu verkleinern.

Die Funktion „Position ziehen“ im Editor kann einer absoluten Positionierung entsprechen. Diese eignet sich für dekorative Elemente, jedoch nicht für Fließtext, der sich je nach Sprache und Bildschirmgröße verändert. Wird ein Button von einem längeren Titel überlagert, sollten Sie Text und Button zunächst wieder in den normalen Dokumentfluss einfügen. Steuern Sie ihre Anordnung anschließend mit Flexbox- oder Grid-Layout und prüfen Sie, ob eine feste Höhenbegrenzung eingestellt ist.

Verzerrte Bilder und abgeschnittenen Text getrennt behandeln

Bildabmessungen und Zuschnitt

Inhaltsbilder sollten in der Regel auf die Breite des Containers begrenzt werden und ihr ursprüngliches Seitenverhältnis beibehalten. Wird die Breite an den Bildschirm angepasst, die Höhe jedoch festgesetzt, kann das Bild verzerrt werden. Soll ein Produktbild vollständig sichtbar sein, wählen Sie eine Anpassungsmethode, die das ganze Bild erhält. Ein Banner kann den Bereich ausfüllen und dafür zugeschnitten werden; passen Sie dabei jedoch den Bildfokus an, damit das Motiv auf dem Smartphone nicht abgeschnitten wird.

Hintergrundbilder bestimmen nicht die Höhe eines Containers. Wird ein breites Desktop-Banner unverändert auf Smartphones übernommen, kann der Text zusammengedrängt werden oder eine große leere Fläche entstehen. Passen Sie die Höhe und die Position des Hintergrundbildes deshalb separat an. Ein reserviertes Seitenverhältnis oder festgelegte Abmessungen für Bilder verhindern zudem, dass der darunterliegende Inhalt beim Laden plötzlich nach unten verschoben wird.

Mehrsprachige Inhalte und lange Texte

Übersetzte Überschriften, Produktmodellnummern und E-Mail-Adressen können länger sein als der Originaltext. Prüfen Sie, ob Text umbrechen darf und ob die Text-Unterelemente in Flexbox-Layouts durch eine Mindestbreite eingeschränkt sind. Legen Sie für lange Links und Zeichenfolgen ohne Leerzeichen geeignete Umbruchregeln fest. Vergeben Sie nicht für den gesamten Bereich eine feste Höhe, nur damit eine einzelne Überschrift ordentlich aussieht.

Tabellen sollten in einen eigenen horizontal scrollbareren Container eingefügt werden, statt die gesamte Seite horizontal scrollen zu lassen. Wichtige Parameter können auch vertikal angeordnet werden. Dabei müssen jedoch die Zuordnung von Bezeichnungen und Werten erhalten bleiben; Spalten sollten nicht einfach ausgeblendet werden, um ein ordentliches Erscheinungsbild zu erzielen.

Bei schwebenden Buttons und Komponenten von Drittanbietern auch den ausgeklappten Zustand prüfen

Online-Chat, schwebende Anfrage-Buttons und Cookie-Hinweise können sich am unteren Bildschirmrand eines Smartphones gegenseitig überdecken. Prüfen Sie nicht nur die anfängliche Seitenansicht, sondern öffnen Sie auch das Menü und das Chatfenster und tippen Sie in ein Eingabefeld. Beobachten Sie, ob der Absende-Button nach dem Einblenden der Bildschirmtastatur noch erreichbar ist.

Passen Sie zuerst Größe und Position der Komponenten an und prüfen Sie anschließend ihre Ebenenreihenfolge. Eine höhere Ebenenreihenfolge allein kann dazu führen, dass das Chatfenster das Menü überdeckt. Bei einer fest am unteren Rand angeordneten Aktionsleiste muss außerdem der Sicherheitsbereich des Geräts berücksichtigt werden. Wenn ein Formular oder Video eines Drittanbieters nur mit festen Abmessungen verwendet werden kann, prüfen Sie dessen Einstellungen für Mobilgeräte und ändern Sie bei Bedarf die Art der Einbettung.

Nach der Fehlerbehebung den tatsächlichen Nutzungspfad überprüfen

Prüfen Sie mindestens schmale und breitere Smartphone-Bildschirme sowie die Querformatansicht. Testen Sie die Seite auf echten Geräten mit verschiedenen Browsern. Aktualisieren Sie zunächst die Seite und beobachten Sie den Ladevorgang. Navigieren Sie dann von der Startseite zu einer Produktseite, öffnen Sie das Menü, füllen Sie das Formular aus und senden Sie es ab. Vergewissern Sie sich, dass keine Inhalte abgeschnitten sind, Buttons angeklickt werden können und die Seite nicht unerwartet horizontal scrollbar ist.

Wählen Sie für mehrsprachige Seiten zur erneuten Prüfung Überschriften mit längeren Texten und Produkte mit zahlreichen technischen Parametern aus. Testen Sie nicht nur die Standardsprache. Wenn die Ursache in durch die Vorlage gesperrten Styles, überschriebenem benutzerdefiniertem Code nach der automatischen Generierung oder einer nicht anpassbaren eingebetteten Komponente liegt, geben Sie dem zuständigen Wartungsteam die Seitenadresse, die Geräteumgebung, die Schritte zur Reproduktion und Screenshots weiter. Legen Sie den Änderungsumfang klar fest, damit eine lokale Korrektur keine anderen Seiten beeinträchtigt.