Der klassische Kopage Website Builder erstellt responsive Websites, deren Darstellung sich an unterschiedliche Bildschirmgrößen anpassen kann.
Trotzdem solltest du deine Website nicht ausschließlich am Desktop-PC kontrollieren. Texte, Bilder, Navigation, Formulare, externe Inhalte oder individuell eingefügter Code können auf einem Smartphone anders wirken als auf einem großen Bildschirm.
In dieser Anleitung erklären wir dir, was Responsive Design bedeutet, welche Bereiche deiner Kopage Website du besonders kontrollieren solltest und wie du typische Darstellungsprobleme auf Smartphone und Tablet erkennst.
Kurz erklärt: Responsive Design bedeutet, dass sich Aufbau und Darstellung einer Website an den verfügbaren Bildschirm anpassen. Aus einer mehrspaltigen Desktop-Darstellung kann auf einem Smartphone beispielsweise eine untereinander angeordnete Darstellung werden.
Warum ist die mobile Darstellung wichtig? #
Websites werden heute auf sehr unterschiedlichen Geräten besucht.
Dazu gehören Desktop-PCs und Notebooks ebenso wie Tablets und Smartphones mit verschiedenen Bildschirmgrößen.
Eine Website sollte deshalb nicht nur bei genau der Bildschirmgröße funktionieren, mit der sie erstellt wurde.
Ein typischer Wechsel kann beispielsweise so aussehen:
Desktop
┌──────────┬──────────┬──────────┐
│ Inhalt 1 │ Inhalt 2 │ Inhalt 3 │
└──────────┴──────────┴──────────┘
Smartphone
┌────────────────────┐
│ Inhalt 1 │
├────────────────────┤
│ Inhalt 2 │
├────────────────────┤
│ Inhalt 3 │
└────────────────────┘Dadurch bleibt der Inhalt auch auf einem schmaleren Bildschirm nutzbar.
Was macht Kopage automatisch? #
Der klassische Kopage Website Builder ist für responsive Websites ausgelegt. Viele Layouts und Content Blocks können sich deshalb automatisch an unterschiedliche Bildschirmgrößen anpassen.
Das bedeutet jedoch nicht, dass du das Ergebnis nicht mehr kontrollieren musst.
Die technische Anpassung eines Layouts kann funktionieren, während beispielsweise eine sehr lange Überschrift, ein ungeeignetes Bild oder ein externes Widget trotzdem zu einer schlechten mobilen Darstellung führt.
Wichtig: „Responsive“ bedeutet nicht automatisch „auf jedem Gerät perfekt“. Die automatische Anpassung bildet die technische Grundlage – die Qualitätskontrolle bleibt Aufgabe des Website-Betreibers.
Website nicht nur im Editor beurteilen #
Während du eine Website bearbeitest, konzentrierst du dich schnell auf die Darstellung innerhalb des Editors.
Entscheidend ist jedoch, wie die veröffentlichte Website für einen tatsächlichen Besucher aussieht.
Kontrolliere wichtige Änderungen deshalb zusätzlich außerhalb des Editors auf der öffentlich erreichbaren Website.
Desktop, Tablet und Smartphone prüfen #
Für eine grundlegende Kontrolle solltest du mindestens drei Darstellungsbereiche berücksichtigen:
Desktop / Notebook
Tablet
SmartphoneDabei geht es nicht darum, jedes existierende Gerätemodell einzeln zu testen.
Viel wichtiger ist zu prüfen, ob sich die Website bei unterschiedlichen verfügbaren Breiten sinnvoll verhält.
Ein echtes Smartphone verwenden #
Eine Vorschaufunktion im Website Builder oder Browser ist hilfreich, ersetzt aber nicht jeden Test auf einem realen Gerät.
Öffne deine Website deshalb zusätzlich auf deinem eigenen Smartphone.
So erkennst du beispielsweise Probleme bei der Bedienung, die in einer verkleinerten Desktop-Vorschau weniger auffallen.
Praxis-Tipp: Teste wichtige Seiten gelegentlich so, wie es ein neuer Besucher tun würde: Öffne die Website auf dem Smartphone und versuche ohne Editorwissen, eine Information zu finden, das Menü zu benutzen oder ein Formular auszufüllen.
Navigation auf dem Smartphone kontrollieren #
Die Navigation gehört zu den wichtigsten Bereichen einer mobilen Website.
Auf einem Desktop ist genügend Platz vorhanden, um mehrere Menüpunkte nebeneinander darzustellen. Auf einem Smartphone steht deutlich weniger Breite zur Verfügung.
Responsive Websites verwenden deshalb häufig eine kompaktere mobile Navigation.
Kontrolliere, ob sich das Menü problemlos öffnen und schließen lässt und ob alle wichtigen Menüpunkte erreichbar sind.
Untermenüs ebenfalls testen #
Wenn deine Website Unterseiten und Untermenüs verwendet, solltest du nicht nur das Hauptmenü testen.
Prüfe auch, ob untergeordnete Navigationsebenen auf einem Touchscreen verständlich bedienbar sind.
Wie du die Seitenstruktur grundsätzlich verwaltest, erklären wir unter Seiten, Navigation und Untermenüs in Kopage verwalten.
Zu lange Menüpunkte vermeiden #
Sehr lange Seitennamen können insbesondere auf kleinen Bildschirmen unübersichtlich wirken.
Ein Menüpunkt sollte möglichst kurz und trotzdem verständlich beschreiben, wohin er führt.
Statt einer langen Formulierung wie:
Hier erfahren Sie alles über unsere angebotenen Dienstleistungen
ist beispielsweise:
Dienstleistungen
als Navigation wesentlich geeigneter.
Überschriften auf kleinen Bildschirmen prüfen #
Große Überschriften, die auf einem Desktop problemlos in eine Zeile passen, können auf einem Smartphone mehrere Zeilen benötigen.
Das ist grundsätzlich normal.
Problematisch wird es, wenn einzelne Wörter über den Bildschirm hinausragen, die Überschrift unverhältnismäßig viel Platz beansprucht oder andere Inhalte überdeckt.
Kontrolliere deshalb besonders große Hauptüberschriften und längere Zwischenüberschriften.
Texte müssen ohne Zoomen lesbar sein #
Besucher sollten normale Website-Texte auf einem Smartphone lesen können, ohne die Seite manuell vergrößern zu müssen.
Sehr kleine Schriftgrößen erschweren die Nutzung ebenso wie extrem lange Textzeilen auf großen Bildschirmen.
Eine gute responsive Darstellung berücksichtigt deshalb nicht nur die Breite des Layouts, sondern auch die Lesbarkeit des Inhalts.
Absätze mobil nicht unnötig lang machen #
Ein Absatz, der auf einem großen Bildschirm relativ kompakt wirkt, kann auf einem Smartphone sehr lang erscheinen.
Strukturiere umfangreiche Inhalte deshalb mit sinnvollen Absätzen und Zwischenüberschriften.
Das verbessert die Orientierung auf kleinen Bildschirmen und hilft auch Desktop-Besuchern.
Content Blocks kontrollieren #
Content Blocks können auf größeren Bildschirmen mehrere Inhalte nebeneinander darstellen und diese auf kleineren Geräten anders anordnen.
Kontrolliere nach dem Einfügen oder Ändern eines Blocks deshalb, ob die Reihenfolge der Inhalte auf dem Smartphone weiterhin sinnvoll ist.
Besonders bei Kombinationen aus Bild und Text sollte nach der mobilen Umordnung noch klar sein, welches Bild zu welchem Text gehört.
Die Arbeit mit Content Blocks erklären wir unter Inhalte mit Kopage erstellen: Content Blocks, Texte und Bilder bearbeiten.
Bilder responsive kontrollieren #
Bilder sind eine häufige Ursache für Probleme auf kleinen Bildschirmen.
Prüfe, ob Bilder innerhalb des verfügbaren Bereichs bleiben und ob wichtige Bildinhalte auch nach einer möglichen Anpassung oder Beschneidung sichtbar sind.
Ein sehr breites Bild kann auf einem Smartphone völlig anders wirken als auf einem Desktop.
Bildformat passend zum Einsatz wählen #
Ein extrem breites Panoramabild kann als großer Desktop-Bereich gut funktionieren, während das eigentliche Motiv auf einem schmalen Smartphone kaum noch erkennbar ist.
Berücksichtige deshalb bereits bei der Bildauswahl, wo und wie das Bild verwendet wird.
Weitere Hinweise findest du unter Bilder, Fotogalerien und Slider in Kopage erstellen.
Galerien auf dem Smartphone testen #
Wenn du eine Fotogalerie verwendest, solltest du prüfen, wie viele Bilder auf einem kleinen Bildschirm gleichzeitig dargestellt werden und wie sich einzelne Bilder öffnen beziehungsweise betrachten lassen.
Eine Galerie sollte auch per Touchscreen komfortabel bedienbar sein.
Slider nicht nur am Desktop prüfen #
Auch Slider können auf kleineren Bildschirmen anders wirken.
Kontrolliere insbesondere, ob Bilder sinnvoll dargestellt werden und eventuell vorhandene Texte oder Bedienelemente lesbar und erreichbar bleiben.
Wenn ein Slider auf dem Smartphone mehr stört als hilft, solltest du prüfen, ob die verwendeten Inhalte oder deren Aufbau angepasst werden können.
Buttons müssen gut bedienbar sein #
Buttons und andere anklickbare Elemente werden auf Smartphones mit dem Finger bedient.
Sie sollten deshalb nicht unnötig klein sein oder so eng nebeneinander stehen, dass versehentlich das falsche Element berührt wird.
Kontrolliere außerdem die Beschriftung.
Ein sehr langer Buttontext kann auf einem schmalen Bildschirm ungünstig umbrechen.
Links im Fließtext #
Auch normale Textlinks sollten auf einem Touchscreen gut auswählbar sein.
Wenn zahlreiche unterschiedliche Links unmittelbar nebeneinander stehen, kann die Bedienung auf kleinen Geräten schwieriger werden.
Setze Links deshalb dort ein, wo sie inhaltlich sinnvoll sind, und vermeide unnötige Linkansammlungen.
Formulare mobil besonders sorgfältig testen #
Kontaktformulare sind auf Smartphones besonders wichtig, weil viele Besucher direkt über ein mobiles Gerät Kontakt aufnehmen.
Teste ein Formular vollständig und kontrolliere nicht nur dessen optische Darstellung.
Prüfe beispielsweise:
Sind alle Feldbezeichnungen lesbar?
Sind Eingabefelder breit genug?
Kann jedes Feld ausgewählt werden?
Sind Auswahlmöglichkeiten bedienbar?
Ist der Absende-Button sichtbar?
Kann das Formular vollständig abgeschickt werden?
Erscheint die erwartete Bestätigung?Die Einrichtung von Formularen behandeln wir unter Formulare und Kontaktformulare mit Kopage erstellen.
Kontaktinformationen auf dem Smartphone #
Telefonnummern, E-Mail-Adressen und Anschriften sollten auch auf kleinen Bildschirmen vollständig lesbar sein.
Besonders lange E-Mail-Adressen oder andere Zeichenfolgen können bei ungünstiger Gestaltung über einen Bereich hinausragen.
Kontrolliere deshalb auch vermeintlich einfache Kontaktseiten auf einem Smartphone.
Google Maps auf mobilen Geräten #
Eine eingebettete Karte kann auf einem Desktop viel Platz erhalten, auf einem Smartphone steht dagegen nur eine begrenzte Breite zur Verfügung.
Prüfe, ob die Karte korrekt dargestellt wird und die restliche Seite weiterhin problemlos bedient werden kann.
Google Maps und weitere externe Inhalte behandeln wir unter Google Maps, YouTube und Social Media in Kopage einbinden.
YouTube-Videos kontrollieren #
Eingebettete Videos sollten sich an die verfügbare Breite anpassen.
Kontrolliere, ob das Video auf dem Smartphone vollständig sichtbar ist und nicht über den Inhaltsbereich hinausragt.
Teste außerdem, ob sich die Wiedergabe wie erwartet starten lässt.
Externe Widgets sind eine häufige Problemquelle #
Kopage kann responsive aufgebaut sein, während ein eingebundener externer Dienst eine feste Breite oder eigene Darstellungsregeln verwendet.
Das kann beispielsweise bei Buchungssystemen, externen Formularen, Chat-Funktionen oder anderen Widgets auftreten.
Teste solche Integrationen deshalb besonders sorgfältig auf mehreren Bildschirmgrößen.
Eigenes HTML, CSS und JavaScript prüfen #
Individuell eingefügter Code wird nicht automatisch dadurch responsive, dass er innerhalb einer Kopage Website verwendet wird.
Besonders feste Breiten, feste Positionierungen und externe Elemente können auf kleinen Displays Probleme verursachen.
Wenn du individuellen Code verwendest, solltest du jede Änderung auch mobil kontrollieren.
Weitere Hinweise findest du unter Eigenes HTML, CSS und JavaScript in Kopage verwenden.
Achtung: Wenn ein einzelnes Element auf dem Smartphone seitlich aus der Website hinausragt, prüfe insbesondere individuell eingebettete Inhalte und eigenen Code. Die Ursache muss nicht im allgemeinen Kopage Layout liegen.
Was bedeutet horizontales Scrollen? #
Bei einer normalen mobilen Website sollte der Hauptinhalt grundsätzlich innerhalb der verfügbaren Bildschirmbreite dargestellt werden.
Wenn der Besucher die gesamte Seite seitlich verschieben muss, um Inhalte sehen zu können, ragt häufig ein Element über die vorgesehene Breite hinaus.
Mögliche Ursachen sind beispielsweise:
zu breites eingebettetes Element
feste Breitenangabe
sehr lange nicht umbrechbare Zeichenfolge
individuelles HTML oder CSS
externes WidgetTabellen können auf Smartphones schwierig sein #
Breite Tabellen mit vielen Spalten lassen sich auf kleinen Bildschirmen nur schwer darstellen.
Wenn du umfangreiche Informationen tabellarisch darstellen möchtest, solltest du deshalb prüfen, ob die Tabelle mobil tatsächlich verständlich bleibt.
In manchen Fällen kann eine andere Inhaltsstruktur für mobile Besucher leichter lesbar sein.
Downloads auf dem Smartphone testen #
Wenn du PDF-Dateien oder andere Dokumente anbietest, solltest du auch deren Nutzung auf mobilen Geräten kontrollieren.
Der Downloadlink selbst muss gut bedienbar sein und das Dokument sollte für Besucher sinnvoll nutzbar sein.
Weitere Hinweise findest du unter Dateien verwalten und Downloads auf der Website anbieten.
Online-Shop mobil vollständig testen #
Bei einem Online-Shop reicht es nicht, nur die Produktseite auf dem Smartphone anzusehen.
Teste den vollständigen Kaufprozess.
Produkt auswählen
↓
Produktdetails prüfen
↓
Warenkorb öffnen
↓
Menge und Preis kontrollieren
↓
Bestellinformationen eingeben
↓
verfügbare Optionen auswählen
↓
Bestellprozess abschließenWie du den Kopage Shop grundsätzlich einrichtest, erklären wir unter Online-Shop mit Kopage erstellen und Produkte verwalten.
Mehrsprachige Websites mobil prüfen #
Übersetzungen können erheblich länger oder kürzer als der ursprüngliche Text sein.
Dadurch kann eine Seite in einer Sprache auf dem Smartphone perfekt aussehen und in einer anderen Sprache Probleme verursachen.
Kontrolliere deshalb jede wichtige Sprachversion separat.
Besonders relevant sind Navigation, Sprachauswahl, Buttons und Überschriften.
Die Mehrsprachigkeit behandeln wir unter Mehrsprachige Website mit Kopage erstellen.
Header auf dem Smartphone prüfen #
Der Header enthält häufig Logo, Navigation und weitere wichtige Elemente.
Kontrolliere, ob das Logo in einer sinnvollen Größe erscheint und die Navigation weiterhin problemlos erreichbar ist.
Ein sehr großes Logo sollte nicht einen unverhältnismäßig großen Teil des Smartphone-Bildschirms einnehmen.
Footer nicht vergessen #
Der Footer wird bei der mobilen Kontrolle leicht übersehen, weil er erst am Ende einer Seite erscheint.
Prüfe auch dort Texte, Links, Kontaktinformationen und gegebenenfalls weitere Elemente.
Besonders mehrere nebeneinander angeordnete Footer-Bereiche können auf dem Smartphone untereinander dargestellt werden. Kontrolliere, ob die daraus entstehende Reihenfolge weiterhin sinnvoll ist.
Design und Responsive Design gehören zusammen #
Farben und Schriftarten können technisch korrekt dargestellt werden und trotzdem auf einem Smartphone ungünstig wirken.
Sehr große Schriften, geringe Kontraste oder aufwendige Layouts können die mobile Nutzung erschweren.
Die allgemeinen Design-Einstellungen behandeln wir unter Kopage Template und Design anpassen: Farben, Schriften, Header und Footer.
Hoch- und Querformat berücksichtigen #
Smartphones und Tablets können im Hoch- oder Querformat verwendet werden.
Du musst nicht jede Seite für jede denkbare Ausrichtung separat gestalten. Bei wichtigen oder komplexen Bereichen kann ein kurzer Test in beiden Ausrichtungen jedoch Probleme sichtbar machen.
Verschiedene Browser testen #
Moderne Browser stellen standardisierte Webtechnologien weitgehend einheitlich dar, dennoch können Unterschiede auftreten.
Bei wichtigen Websites oder nach größeren Änderungen kann es deshalb sinnvoll sein, die Seite in mehr als einem aktuellen Browser zu kontrollieren.
Das ist besonders bei externen Integrationen und individuellem Code hilfreich.
Browser-Vorschau am Computer nutzen #
Auch ohne mehrere Smartphones kannst du die Darstellung zunächst am Computer kontrollieren.
Viele moderne Browser besitzen Entwicklerwerkzeuge, mit denen sich verschiedene Bildschirmbreiten simulieren lassen.
Das ist hilfreich, um offensichtliche Layoutprobleme schnell zu erkennen.
Hinweis: Eine simulierte Bildschirmgröße ist ein gutes Testwerkzeug, ersetzt aber nicht vollständig die Bedienung auf einem echten Touch-Gerät.
Responsive Design und Ladezeit #
Eine mobile Website sollte nicht nur optisch passen, sondern auch praktikabel laden.
Smartphone-Besucher befinden sich nicht immer in einem schnellen WLAN.
Große Bilder, zahlreiche Videos und viele externe Widgets können deshalb besonders mobil auffallen.
Verwende Medien bewusst und optimiere unnötig große Dateien.
Mobile Darstellung und SEO #
Eine gut nutzbare mobile Website ist auch für die Qualität und Auffindbarkeit einer Website relevant.
Suchmaschinen müssen Inhalte auf mobilen Geräten technisch erfassen können, und Besucher sollten die Seite ohne unnötige Hindernisse verwenden können.
Die allgemeinen SEO-Grundlagen behandeln wir unter SEO mit Kopage: Seitentitel, Meta-Daten, URLs und Suchmaschinenoptimierung.
Keine separate mobile Website notwendig #
Bei einem responsiven Aufbau wird grundsätzlich dieselbe Website für unterschiedliche Bildschirmgrößen angepasst.
Du musst deshalb nicht für jede Desktop-Seite zusätzlich eine vollständig separate Smartphone-Seite mit denselben Inhalten pflegen.
Das reduziert den Pflegeaufwand und sorgt dafür, dass Änderungen nicht parallel in zwei getrennten Websites vorgenommen werden müssen.
Nach Inhaltsänderungen erneut mobil prüfen #
Eine Seite, die heute mobil gut aussieht, kann nach einer späteren Änderung wieder Probleme aufweisen.
Beispielsweise kann eine neue längere Überschrift, ein anderes Bild oder ein zusätzliches Widget die Darstellung verändern.
Kontrolliere deshalb insbesondere nach größeren Änderungen die wichtigsten Seiten erneut.
Besonders wichtige Seiten priorisieren #
Bei einer umfangreichen Website musst du nicht nach jeder kleinen Textkorrektur sämtliche Unterseiten auf mehreren Geräten vollständig testen.
Priorisiere Seiten und Funktionen, die für Besucher besonders wichtig sind.
Dazu gehören häufig:
Startseite
wichtige Leistungsseiten
Kontaktseite
Formulare
Shop und Bestellprozess
zentrale Landingpages
NavigationWas tun, wenn nur ein einzelner Bereich falsch dargestellt wird? #
Wenn der Rest der Website mobil korrekt funktioniert, solltest du zunächst den betroffenen Bereich untersuchen.
Prüfe beispielsweise, ob dort ein ungewöhnlich großes Bild, ein externes Widget, eigener HTML-Code oder individuelles CSS verwendet wird.
Verändere nicht sofort das gesamte Website-Design, wenn das Problem offensichtlich nur ein einzelnes Element betrifft.
Was tun, wenn die gesamte Website mobil problematisch ist? #
Wenn zahlreiche Bereiche betroffen sind, solltest du prüfen, ob größere Änderungen am Template, Design oder individuellem Code vorgenommen wurden.
Entferne nicht wahllos einzelne Inhalte, sondern versuche zunächst festzustellen, seit welcher Änderung das Problem besteht.
Bei individuell eingefügtem Code kann es sinnvoll sein, die letzte Änderung testweise rückgängig zu machen.
Typische Fehler bei der mobilen Darstellung #
Häufige Probleme sind zu lange Überschriften, übergroße Bilder, schlecht bedienbare Navigationen, zu kleine Schaltflächen und externe Widgets mit festen Breiten.
Auch lange Tabellen, nicht angepasste Formulare und individuell eingefügter Code können auf Smartphones Schwierigkeiten verursachen.
Ein besonders häufiger Fehler besteht darin, eine Website ausschließlich am Desktop zu erstellen und sie erst nach der vollständigen Fertigstellung erstmals auf einem Smartphone zu öffnen.
Praxis-Tipp: Kontrolliere die mobile Darstellung bereits während des Aufbaus. Probleme lassen sich wesentlich leichter beheben, wenn du sie direkt nach der betreffenden Änderung bemerkst.
Mobile Qualitätskontrolle vor der Veröffentlichung #
Startseite öffnen
↓
Navigation testen
↓
Untermenüs testen
↓
Überschriften kontrollieren
↓
Texte lesen
↓
Bilder und Slider prüfen
↓
Buttons und Links testen
↓
Formulare ausfüllen
↓
externe Inhalte kontrollieren
↓
Footer prüfen
↓
wichtige Unterseiten öffnen
↓
Shop / Downloads testen
↓
zweites Gerät oder Browser prüfenResponsive Design ist laufende Qualitätskontrolle #
Die mobile Optimierung ist keine einmalige Aufgabe, die nach der Erstellung der Website für immer abgeschlossen ist.
Neue Inhalte, Bilder, Module, externe Dienste und individuelle Anpassungen können die Darstellung verändern.
Ein kurzer mobiler Test sollte deshalb zu den normalen Kontrollen nach größeren Website-Änderungen gehören.
Wie geht es weiter? #
Wenn deine Website inhaltlich aufgebaut, gestaltet und auf unterschiedlichen Geräten geprüft wurde, folgt die abschließende Kontrolle vor beziehungsweise nach der Veröffentlichung.
Dabei solltest du nicht nur das Design, sondern auch Navigation, Links, Formulare und weitere wichtige Funktionen testen.
Weiter geht es deshalb mit Kopage Website veröffentlichen und typische Probleme beheben.
Zusammenfassung #
Der klassische Kopage Website Builder ist für responsive Websites ausgelegt und kann Inhalte an unterschiedliche Bildschirmgrößen anpassen.
Trotzdem solltest du deine Website auf Desktop, Tablet und insbesondere auf einem echten Smartphone kontrollieren.
Achte dabei auf Navigation, Überschriften, Texte, Bilder, Buttons, Formulare, externe Inhalte, Downloads und gegebenenfalls den vollständigen Bestellprozess deines Shops.
Besondere Aufmerksamkeit benötigen externe Widgets und eigener HTML-, CSS- oder JavaScript-Code, weil diese Elemente nicht automatisch optimal an die responsive Kopage-Darstellung angepasst sein müssen.
Kontrolliere die mobile Darstellung außerdem nach größeren Änderungen erneut.
Eine responsive Website ist nicht einfach eine verkleinerte Desktop-Seite. Inhalte, Navigation und Funktionen müssen auf jedem relevanten Bildschirm verständlich, lesbar und bedienbar bleiben.
