The classic Kopage website builder creates responsive websites whose display can adapt to different screen sizes.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
\nBriefly explained:<\/strong> 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.<\/p>\n<\/blockquote>\n\n\n\n
Why is the mobile display important?<\/h2>\n\n\n\n
Websites are visited today on very different devices.<\/p>\n\n\n\n
This includes desktop PCs and notebooks as well as tablets and smartphones with various screen sizes.<\/p>\n\n\n\n
Therefore, a website should not only work at the exact screen size it was created with.<\/p>\n\n\n\n
A typical change might look like this, for example:<\/p>\n\n\n\n
Desktop\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 Content 1 \u2502 Content 2 \u2502 Content 3 \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n\nSmartphone\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 Content 1 \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502 Content 2 \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502 Content 3 \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/code><\/pre>\n\n\n\nThis also keeps the content usable on a narrower screen.<\/p>\n\n\n\n
What does Kopage do automatically?<\/h2>\n\n\n\n
The classic Kopage website builder is designed for responsive websites. Many layouts and content blocks can therefore automatically adapt to different screen sizes.<\/p>\n\n\n\n
However, that does not mean you no longer need to check the result.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
\nImportant:<\/strong> \u201eResponsive does not automatically mean perfect on every device. Automatic adaptation forms the technical foundation\u2014quality control remains the responsibility of the website operator.<\/p>\n<\/blockquote>\n\n\n\n
Do not judge the website solely in the editor<\/h2>\n\n\n\n
While editing a website, you quickly focus on the rendering within the editor.<\/p>\n\n\n\n
However, the crucial factor is what the published website looks like to an actual visitor.<\/p>\n\n\n\n
Therefore, additionally check important changes outside the editor on the publicly accessible website.<\/p>\n\n\n\n
Check desktop, tablet, and smartphone<\/h2>\n\n\n\n
For a basic inspection, you should consider at least three display areas:<\/p>\n\n\n\n
Desktop \/ Notebook\nTablet\nSmartphone<\/code><\/pre>\n\n\n\nThis is not about testing every existing device model individually.<\/p>\n\n\n\n
Much more important is to check whether the website behaves sensibly at various available widths.<\/p>\n\n\n\n
Use a real smartphone<\/h2>\n\n\n\n
A preview function in the website builder or browser is helpful, but it does not replace every test on a real device.<\/p>\n\n\n\n
Therefore, also open your website on your own smartphone.<\/p>\n\n\n\n
For example, this is how you can identify usability issues that are less noticeable in a scaled-down desktop preview.<\/p>\n\n\n\n
\nPractical Tip:<\/strong> 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.<\/p>\n<\/blockquote>\n\n\n\n
Check navigation on the smartphone<\/h2>\n\n\n\n
Navigation is one of the most important areas of a mobile website.<\/p>\n\n\n\n
On a desktop, there is enough space to display multiple menu items side by side. On a smartphone, significantly less width is available.<\/p>\n\n\n\n
Responsive websites therefore often use a more compact mobile navigation.<\/p>\n\n\n\n
Check whether the menu can be opened and closed smoothly and whether all important menu items are accessible.<\/p>\n\n\n\n
Test submenus as well<\/h2>\n\n\n\n
If your website uses subpages and submenus, you shouldn't test just the main menu.<\/p>\n\n\n\n
Also check whether sub-navigation levels are intuitively usable on a touchscreen.<\/p>\n\n\n\n
We explain how to manage the basic page structure under Managing pages, navigation, and submenus in Kopage<\/a>.<\/p>\n\n\n\n
Avoid menu items that are too long<\/h2>\n\n\n\n
Very long page names can appear cluttered, especially on small screens.<\/p>\n\n\n\n
A menu item should be as brief as possible while still clearly describing where it leads.<\/p>\n\n\n\n
Instead of a long phrase like:<\/p>\n\n\n\n
Here you can find out all about the services we offer<\/code><\/p>\n\n\n\nis for example:<\/p>\n\n\n\n
Services<\/code><\/p>\n\n\n\nmuch more suitable as navigation.<\/p>\n\n\n\n
Check headings on small screens<\/h2>\n\n\n\n
Large headings that easily fit on a single line on a desktop may require multiple lines on a smartphone.<\/p>\n\n\n\n
That is basically normal.<\/p>\n\n\n\n
It becomes problematic when individual words protrude beyond the screen, the heading takes up a disproportionately large amount of space, or covers other content.<\/p>\n\n\n\n
Therefore, pay special attention to very large main headings and longer subheadings.<\/p>\n\n\n\n
Texts must be readable without zooming<\/h2>\n\n\n\n
Visitors should be able to read standard website texts on a smartphone without having to manually zoom in on the page.<\/p>\n\n\n\n
Very small font sizes make usage just as difficult as extremely long lines of text on large screens.<\/p>\n\n\n\n
Therefore, a good responsive design considers not only the width of the layout, but also the readability of the content.<\/p>\n\n\n\n
Do not make paragraphs unnecessarily long on mobile<\/h2>\n\n\n\n
A paragraph that looks relatively compact on a large screen can appear very long on a smartphone.<\/p>\n\n\n\n
Therefore, structure extensive content with meaningful paragraphs and subheadings.<\/p>\n\n\n\n
This improves orientation on small screens and also helps desktop visitors.<\/p>\n\n\n\n
Control Content Blocks<\/h2>\n\n\n\n
Content blocks can display multiple pieces of content side by side on larger screens and arrange them differently on smaller devices.<\/p>\n\n\n\n
Therefore, after inserting or modifying a block, check whether the order of the content still makes sense on a smartphone.<\/p>\n\n\n\n
Especially with combinations of image and text, it should still be clear after mobile rearrangement which image belongs to which text.<\/p>\n\n\n\n
We explain how to work with content blocks under Create content with Kopage: editing content blocks, texts, and images<\/a>.<\/p>\n\n\n\n
Control images responsively<\/h2>\n\n\n\n
Images are a common cause of problems on small screens.<\/p>\n\n\n\n
Check if images remain within the available area and if important image content remains visible even after potential adjustment or cropping.<\/p>\n\n\n\n
A very wide image can look completely different on a smartphone than on a desktop.<\/p>\n\n\n\n
Choose the image format to match the application<\/h2>\n\n\n\n
An extremely wide panoramic image can work well as a large desktop area, while the actual subject is barely recognizable on a narrow smartphone.<\/p>\n\n\n\n
Therefore, when selecting images, consider where and how the image will be used.<\/p>\n\n\n\n
You can find further information at Creating images, photo galleries, and sliders in Kopage<\/a>.<\/p>\n\n\n\n
Test galleries on smartphone<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
A gallery should also be easy to operate via touchscreen.<\/p>\n\n\n\n
Check slider not only on desktop<\/h2>\n\n\n\n
Sliders can also appear differently on smaller screens.<\/p>\n\n\n\n
Check in particular whether images are displayed sensibly and any existing texts or controls remain readable and accessible.<\/p>\n\n\n\n
If a slider on a smartphone is more annoying than helpful, you should check whether the content used or its structure can be adapted.<\/p>\n\n\n\n
Buttons must be easy to use<\/h2>\n\n\n\n
Buttons and other clickable elements are operated on smartphones with a finger.<\/p>\n\n\n\n
They should therefore not be unnecessarily small or positioned so closely together that the wrong element is accidentally touched.<\/p>\n\n\n\n
Also check the labeling.<\/p>\n\n\n\n
A very long button text can wrap awkwardly on a narrow screen.<\/p>\n\n\n\n
Links in running text<\/h2>\n\n\n\n
Even regular text links should be easy to select on a touchscreen.<\/p>\n\n\n\n
When numerous different links are placed directly next to each other, operation on small devices can become more difficult.<\/p>\n\n\n\n
Therefore, place links where they make sense in terms of content, and avoid unnecessary accumulations of links.<\/p>\n\n\n\n
Test mobile forms especially thoroughly<\/h2>\n\n\n\n
Contact forms are particularly important on smartphones because many visitors get in touch directly via a mobile device.<\/p>\n\n\n\n
Test a form completely and check not only its visual appearance.<\/p>\n\n\n\n
Check, for example:<\/p>\n\n\n\n
Are all field labels legible?\nAre input fields wide enough?\nCan every field be selected?\nAre selection options operable?\nIs the submit button visible?\nCan the form be completely submitted?\nDoes the expected confirmation appear?<\/code><\/pre>\n\n\n\nWe cover the setup of forms under Create forms and contact forms with Kopage<\/a>.<\/p>\n\n\n\n
Contact information on the smartphone<\/h2>\n\n\n\n
Phone numbers, email addresses, and postal addresses should be fully readable even on small screens.<\/p>\n\n\n\n
Particularly long e-mail addresses or other character strings can overflow an area if the design is unfavorable.<\/p>\n\n\n\n
Therefore, check even supposedly simple contact pages on a smartphone.<\/p>\n\n\n\n
Google Maps on mobile devices<\/h2>\n\n\n\n
An embedded map can be given a lot of space on a desktop, whereas only a limited width is available on a smartphone.<\/p>\n\n\n\n
Check if the map is displayed correctly and the rest of the page can still be used without any problems.<\/p>\n\n\n\n
We handle Google Maps and other external content under Embed Google Maps, YouTube, and social media into Kopage<\/a>.<\/p>\n\n\n\n
Control YouTube videos<\/h2>\n\n\n\n
Embedded videos should adapt to the available width.<\/p>\n\n\n\n
Check that the video is fully visible on the smartphone and does not extend beyond the content area.<\/p>\n\n\n\n
Also test whether playback starts as expected.<\/p>\n\n\n\n
External widgets are a common source of problems<\/h2>\n\n\n\n
Kopage can be designed to be responsive, while an integrated external service uses a fixed width or its own display rules.<\/p>\n\n\n\n
This can occur, for example, with booking systems, external forms, chat functions, or other widgets.<\/p>\n\n\n\n
Therefore, test such integrations particularly carefully on multiple screen sizes.<\/p>\n\n\n\n
Check custom HTML, CSS, and JavaScript<\/h2>\n\n\n\n
Individually inserted code does not automatically become responsive just because it is used within a Kopage website.<\/p>\n\n\n\n
Especially fixed widths, fixed positions, and external elements can cause problems on small displays.<\/p>\n\n\n\n
When you use custom code, you should also check every change on mobile.<\/p>\n\n\n\n
You can find further information at How to use custom HTML, CSS, and JavaScript in Kopage<\/a>.<\/p>\n\n\n\n
\nAttention:<\/strong> If a single element on the smartphone protrudes laterally from the website, check individually embedded content and custom code in particular. The cause does not necessarily have to lie in the general layout of the page.<\/p>\n<\/blockquote>\n\n\n\n
What does horizontal scrolling mean?<\/h2>\n\n\n\n
On a normal mobile website, the main content should generally be displayed within the available screen width.<\/p>\n\n\n\n
If the visitor has to scroll the entire page sideways to be able to see content, an element is often protruding beyond the intended width.<\/p>\n\n\n\n
Possible causes include, for example:<\/p>\n\n\n\n
too wide embedded element\nfixed width specification\nvery long unbroken character string\ncustom HTML or CSS\nexternal widget<\/code><\/pre>\n\n\n\nTables can be difficult on smartphones<\/h2>\n\n\n\n
Wide tables with many columns are difficult to display on small screens.<\/p>\n\n\n\n
Therefore, if you want to present extensive information in a table, you should check whether the table actually remains understandable on mobile devices.<\/p>\n\n\n\n
In some cases, a different content structure can be easier to read for mobile visitors.<\/p>\n\n\n\n
Test downloads on the smartphone<\/h2>\n\n\n\n
When you offer PDF files or other documents, you should also control their usage on mobile devices.<\/p>\n\n\n\n
The download link itself must be easy to use, and the document should be usefully accessible for visitors.<\/p>\n\n\n\n
You can find further information at Manage files and offer downloads on the website<\/a>.<\/p>\n\n\n\n
Fully test online shop on mobile<\/h2>\n\n\n\n
For an online shop, it's not enough to just look at the product page on a smartphone.<\/p>\n\n\n\n
Test the complete purchase process.<\/p>\n\n\n\n
Select product\n \u2193\nCheck product details\n \u2193\nOpen shopping cart\n \u2193\nCheck quantity and price\n \u2193\nEnter order information\n \u2193\nSelect available options\n \u2193\nComplete order process<\/code><\/pre>\n\n\n\nWe explain how to set up your Kopage shop in general at Create an online store with Kopage and manage products<\/a>.<\/p>\n\n\n\n
Test multilingual websites on mobile<\/h2>\n\n\n\n
Translations can be significantly longer or shorter than the original text.<\/p>\n\n\n\n
This can cause a page to look perfect in one language on a smartphone and cause problems in another language.<\/p>\n\n\n\n
Therefore, check every important language version separately.<\/p>\n\n\n\n
Navigation, language selection, buttons, and headings are particularly relevant.<\/p>\n\n\n\n
We address multilingualism under Create a multilingual website with Kopage<\/a>.<\/p>\n\n\n\n
Check header on smartphone<\/h2>\n\n\n\n
The header frequently contains a logo, navigation, and other important elements.<\/p>\n\n\n\n
Check that the logo appears in a reasonable size and that the navigation remains easily accessible.<\/p>\n\n\n\n
A very large logo should not take up a disproportionately large portion of the smartphone screen.<\/p>\n\n\n\n
Don't forget the footer<\/h2>\n\n\n\n
The footer is easily overlooked during mobile inspection because it only appears at the end of a page.<\/p>\n\n\n\n
Also check texts, links, contact information and, if applicable, other elements there.<\/p>\n\n\n\n
Especially multiple footer areas arranged next to each other can be displayed stacked on top of each other on a smartphone. Check whether the resulting order still makes sense.<\/p>\n\n\n\n
Design and responsive design go together<\/h2>\n\n\n\n
Colors and fonts can be technically displayed correctly and still look awkward on a smartphone.<\/p>\n\n\n\n
Very large fonts, low contrast, or complex layouts can make mobile usage difficult.<\/p>\n\n\n\n
We will cover the general design settings under Customizing Kopage template and design: Colors, fonts, header, and footer<\/a>.<\/p>\n\n\n\n
Take portrait and landscape orientation into account<\/h2>\n\n\n\n
Smartphones and tablets can be used in portrait or landscape format.<\/p>\n\n\n\n
You don't have to design every page separately for every conceivable orientation. However, for important or complex areas, a quick test in both orientations can reveal problems.<\/p>\n\n\n\n
Test different browsers<\/h2>\n\n\n\n
Modern browsers render standardized web technologies largely consistently, yet differences may still occur.<\/p>\n\n\n\n
For important websites or after major changes, it can therefore make sense to check the page in more than one current browser.<\/p>\n\n\n\n
This is especially helpful for external integrations and custom code.<\/p>\n\n\n\n
Use browser preview on computer<\/h2>\n\n\n\n
Even without multiple smartphones, you can first check the display on a computer.<\/p>\n\n\n\n
Many modern browsers have developer tools that can be used to simulate different screen widths.<\/p>\n\n\n\n
This is helpful for quickly identifying obvious layout issues.<\/p>\n\n\n\n
\nNote:<\/strong> A simulated screen size is a good testing tool, but it does not completely replace operation on a real touch device.<\/p>\n<\/blockquote>\n\n\n\n
Responsive Design and Loading Time<\/h2>\n\n\n\n
A mobile website should not only look right, but also load efficiently.<\/p>\n\n\n\n
Smartphone visitors are not always on a fast Wi-Fi network.<\/p>\n\n\n\n
Large images, numerous videos, and many external widgets can therefore be particularly noticeable, especially on mobile devices.<\/p>\n\n\n\n
Use media consciously and optimize unnecessarily large files.<\/p>\n\n\n\n
Mobile display and SEO<\/h2>\n\n\n\n
A well-usable mobile website is also relevant for the quality and discoverability of a website.<\/p>\n\n\n\n
Search engines must be able to technically crawl content on mobile devices, and visitors should be able to use the site without unnecessary obstacles.<\/p>\n\n\n\n