The classic Kopage website builder creates responsive websites whose display can adapt to different screen sizes.
Nevertheless, you should not check your website exclusively on a desktop PC. Texts, images, navigation, forms, external content, or custom-inserted code can appear different on a smartphone than on a large screen.
In this guide, we explain what responsive design means, which areas of your Kopage website you should pay special attention to, and how you can identify typical display issues on smartphones and tablets.
Briefly explained: Responsive design means that the layout and presentation of a website adapt to the available screen size. For example, a multi-column desktop layout can transform into a single-column layout stacked vertically on a smartphone.
Why is the mobile display important? #
Websites are visited today on very different devices.
This includes desktop PCs and notebooks as well as tablets and smartphones with various screen sizes.
Therefore, a website should not only work at the exact screen size it was created with.
A typical change might look like this, for example:
Desktop
┌──────────┬──────────┬──────────┐
│ Content 1 │ Content 2 │ Content 3 │
└──────────┴──────────┴──────────┘
Smartphone
┌────────────────────┐
│ Content 1 │
├────────────────────┤
│ Content 2 │
├────────────────────┤
│ Content 3 │
└────────────────────┘This also keeps the content usable on a narrower screen.
What does Kopage do automatically? #
The classic Kopage website builder is designed for responsive websites. Many layouts and content blocks can therefore automatically adapt to different screen sizes.
However, that does not mean you no longer need to check the result.
The technical adaptation of a layout can work while, for example, a very long headline, an unsuitable image, or an external widget still leads to a poor mobile display.
Important: „Responsive does not automatically mean perfect on every device. Automatic adaptation forms the technical foundation—quality control remains the responsibility of the website operator.
Do not judge the website solely in the editor #
While editing a website, you quickly focus on the rendering within the editor.
However, the crucial factor is what the published website looks like to an actual visitor.
Therefore, additionally check important changes outside the editor on the publicly accessible website.
Check desktop, tablet, and smartphone #
For a basic inspection, you should consider at least three display areas:
Desktop / Notebook
Tablet
SmartphoneThis is not about testing every existing device model individually.
Much more important is to check whether the website behaves sensibly at various available widths.
Use a real smartphone #
A preview function in the website builder or browser is helpful, but it does not replace every test on a real device.
Therefore, also open your website on your own smartphone.
For example, this is how you can identify usability issues that are less noticeable in a scaled-down desktop preview.
Practical Tip: Test important pages occasionally the way a new visitor would: open the website on your smartphone and try to find information, use the menu, or fill out a form without any editor knowledge.
Check navigation on the smartphone #
Navigation is one of the most important areas of a mobile website.
On a desktop, there is enough space to display multiple menu items side by side. On a smartphone, significantly less width is available.
Responsive websites therefore often use a more compact mobile navigation.
Check whether the menu can be opened and closed smoothly and whether all important menu items are accessible.
Test submenus as well #
If your website uses subpages and submenus, you shouldn't test just the main menu.
Also check whether sub-navigation levels are intuitively usable on a touchscreen.
We explain how to manage the basic page structure under Managing pages, navigation, and submenus in Kopage.
Avoid menu items that are too long #
Very long page names can appear cluttered, especially on small screens.
A menu item should be as brief as possible while still clearly describing where it leads.
Instead of a long phrase like:
Here you can find out all about the services we offer
is for example:
Services
much more suitable as navigation.
Check headings on small screens #
Large headings that easily fit on a single line on a desktop may require multiple lines on a smartphone.
That is basically normal.
It becomes problematic when individual words protrude beyond the screen, the heading takes up a disproportionately large amount of space, or covers other content.
Therefore, pay special attention to very large main headings and longer subheadings.
Texts must be readable without zooming #
Visitors should be able to read standard website texts on a smartphone without having to manually zoom in on the page.
Very small font sizes make usage just as difficult as extremely long lines of text on large screens.
Therefore, a good responsive design considers not only the width of the layout, but also the readability of the content.
Do not make paragraphs unnecessarily long on mobile #
A paragraph that looks relatively compact on a large screen can appear very long on a smartphone.
Therefore, structure extensive content with meaningful paragraphs and subheadings.
This improves orientation on small screens and also helps desktop visitors.
Control Content Blocks #
Content blocks can display multiple pieces of content side by side on larger screens and arrange them differently on smaller devices.
Therefore, after inserting or modifying a block, check whether the order of the content still makes sense on a smartphone.
Especially with combinations of image and text, it should still be clear after mobile rearrangement which image belongs to which text.
We explain how to work with content blocks under Create content with Kopage: editing content blocks, texts, and images.
Control images responsively #
Images are a common cause of problems on small screens.
Check if images remain within the available area and if important image content remains visible even after potential adjustment or cropping.
A very wide image can look completely different on a smartphone than on a desktop.
Choose the image format to match the application #
An extremely wide panoramic image can work well as a large desktop area, while the actual subject is barely recognizable on a narrow smartphone.
Therefore, when selecting images, consider where and how the image will be used.
You can find further information at Creating images, photo galleries, and sliders in Kopage.
Test galleries on smartphone #
When using a photo gallery, you should check how many images are displayed simultaneously on a small screen and how individual images open or can be viewed.
A gallery should also be easy to operate via touchscreen.
Check slider not only on desktop #
Sliders can also appear differently on smaller screens.
Check in particular whether images are displayed sensibly and any existing texts or controls remain readable and accessible.
If a slider on a smartphone is more annoying than helpful, you should check whether the content used or its structure can be adapted.
Buttons must be easy to use #
Buttons and other clickable elements are operated on smartphones with a finger.
They should therefore not be unnecessarily small or positioned so closely together that the wrong element is accidentally touched.
Also check the labeling.
A very long button text can wrap awkwardly on a narrow screen.
Links in running text #
Even regular text links should be easy to select on a touchscreen.
When numerous different links are placed directly next to each other, operation on small devices can become more difficult.
Therefore, place links where they make sense in terms of content, and avoid unnecessary accumulations of links.
Test mobile forms especially thoroughly #
Contact forms are particularly important on smartphones because many visitors get in touch directly via a mobile device.
Test a form completely and check not only its visual appearance.
Check, for example:
Are all field labels legible?
Are input fields wide enough?
Can every field be selected?
Are selection options operable?
Is the submit button visible?
Can the form be completely submitted?
Does the expected confirmation appear?We cover the setup of forms under Create forms and contact forms with Kopage.
Contact information on the smartphone #
Phone numbers, email addresses, and postal addresses should be fully readable even on small screens.
Particularly long e-mail addresses or other character strings can overflow an area if the design is unfavorable.
Therefore, check even supposedly simple contact pages on a 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 Embed Google Maps, YouTube, and social media into Kopage.
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.
You can find further information at How to use custom HTML, CSS, and JavaScript in Kopage.
Attention: 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.
Possible causes include, for example:
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.
You can find further information at Manage files and offer downloads on the website.
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 Create an online store with Kopage and manage products.
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 Create a multilingual website with Kopage.
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 Customizing Kopage template and design: Colors, fonts, header, and 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.
Note: 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.
We cover the general SEO basics under SEO with Kopage: Page titles, metadata, URLs, and search engine optimization.
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.
Practical Tip: 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.
What's next? #
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.
Therefore, we continue with Publish Kopage website and fix typical issues.
Summary #
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.
