The website looks tidy on the large screen. On the smartphone, navigation slides over the content, a form is covered by the keyboard and a table can only be read with a lot of patience. Such problems often arise when mobile display ends up being viewed as a scaled-down version of desktop design.

Responsive web design means adapting content and operation to the available space and usage options. This is more than just a technical breakthrough for a certain number of pixels. Text lengths, forms of interaction, image sections and priorities change. A good mobile experience therefore starts with the question of what task someone wants to complete on the site.

Content determines the sensible order

In a multi-column desktop view, multiple pieces of information can be visible at the same time. On a narrow screen, this becomes sequential sections. Their order must make technical sense. A contact button after a long, purely decorative graphic may come too late, while an important explanation should not be separated from its associated action.

The visual and technical reading order should match as much as possible. If elements are only moved visually, the keyboard operation can produce unexpected jumps. Aids also read content along the document structure. A flexible grid must therefore be combined with semantic HTML and an understandable structure. The W3C guidelines provide verifiable requirements for this.

Flexible grids instead of device drawers

There is no single smartphone screen. Windows can be split, font sizes changed and devices rotated. Breakpoints should therefore arise where content no longer works meaningfully. For example, a card overview can change from three to two and later to one column as soon as the readability of the cards suffers.

CSS Grid and Flexbox help express such relationships. Nevertheless, minimum widths, long words and large numbers must be taken into account. A single non-breaking URL can widen an entire page. Unusual content should therefore also be checked: long names, multi-line labels, additional error messages and translated texts. A layout with ideally short sample texts is not yet a reliable layout.

Typography can grow with you

Fonts that are too small do not make a page compact, but rather tiring. Continuous text needs a suitable size, sufficient line spacing and a limited line length. Headings can be smaller in small areas, but should retain their hierarchy. Otherwise, very large entry headings can take up the entire first screen.

Magnification is an important test. Content should not disappear just because users need a larger display. Fixed heights are particularly risky for text blocks: they often only fit a certain font size. Flexible areas whose height depends on the content are better. Buttons also need space for multi-line labels.

Think about your fingers, mouse and keyboard

A hover effect is not a reliable way to reveal important information on a touchscreen. Menus and actions must be explicitly operable. Contact surfaces should have enough space and distance. A small visible graphic can have a larger clickable area as long as the association remains clear.

Keyboards and other accessibility features can also be used on mobile devices. Visible focus states must therefore not be intended exclusively for the desktop. A dialog must be able to be closed and the operation must be meaningfully returned to the background. The requirements relate to the task, not a simplistic assumption about what input method someone is currently using.

Forms are often the decisive route

Suitable input types support operation: email, telephone and useful autocompletion can avoid unnecessary work. Every field needs a permanent, understandable label. A placeholder alone is not enough because it disappears as you type. Error messages should say what information is missing or what format is expected.

Conditional mandatory fields must be explained immediately. If a callback is selected, a telephone number may be required. This rule must be checked both in the browser and on the server. A visually blocked send button alone is not a security or validation measure. After an error, information that has already been entered should be retained as long as there is no protection requirement to the contrary.

Deliver images appropriately

An image that looks sharp on desktop doesn't need to be transmitted at full size to every mobile device. Different image sizes and suitable formats can avoid unnecessary amounts of data. At the same time, the selected section must retain the message of the image. A broad motif with important details at the edge cannot be squeezed arbitrarily into a narrow area.

Width and height should be reserved in markup or via a set aspect ratio. This means that the text jumps less when reloading. Lazy loading is particularly useful for images further down the page. The central image in the first visible area, on the other hand, should not be carelessly subject to the same rules. The loading priority depends on its actual role.

Tables and complex applications

Not every table can be meaningfully converted into cards. If values ​​are to be compared line by line, horizontal scrolling with clear labeling may be a better solution. It is important that the entire page is not expanded in an uncontrolled manner. A separate scrollable area can limit the table and maintain its function.

For extensive corporate applications, a task-specific mobile view is worthwhile. A stock withdrawal requires different information than master data maintenance at the workplace. Instead of pushing all functions equally onto a small screen, the relevant steps are designed specifically. The mobile version must not bypass any important technical tests.

Check performance under realistic conditions

A fast office connection hides many problems. Mobile use can involve intermittent connectivity, older hardware, and low battery performance. Large script packages not only burden the transmission, but also the processing in the browser. A restrained technical architecture can therefore achieve more than individual subsequent optimizations.

Check several situations: first visit without cache, new visit, slow connection and operation while content is still loading. Third-party providers are also relevant. A map or video can trigger additional effort, even if your site is small. External content should only be included if it supports a specific task and is loaded in accordance with data protection regulations.

Test not just screen widths, but states

A form can look good when empty and then suddenly widen the page after an error message. A menu may work the first time you open it, but lose its state after switching to landscape mode. Therefore, a mobile test should contain concrete state changes and not just look at several static screen sizes.

Helpful cases include a long error message, a form that has already been filled out after returning via browser navigation, and an open map with subsequent keyboard operation. You should also check whether a deactivated button explains what information is still missing. The visible feedback must match the actual form state.

Autofill is another important case. Browsers can use stored contact information without pressing each key individually. Dependent mandatory fields and button states must still be correct afterwards. Even a reset shape may not retain any outdated markings. Such situations are easily overlooked if development only follows an ideal input path.

If possible, the test should be completed on actual devices. A simulated view is useful, but does not fully represent the on-screen keyboard, scrolling behavior and performance limits. If problems are documented, the device, browser, condition and expected behavior should be mentioned. This means that the correction can be carried out in a targeted manner, instead of discussing a general note like mobile is broken.

A short mobile acceptance

  • Open navigation, select a sub-item and return again.
  • Read a longer text, enlarge it and switch between portrait and landscape format.
  • Fill out the contact form using the on-screen keyboard and correct errors.
  • Open and close dialogs with touch and keyboard.
  • Consider long names, additional clues and weak connections.

Responsive quality comes from these verifiable tasks. GRITTMANN takes flexible layouts and operation into account right from the conception stage. The article about professional business websites classifies mobile use into the other requirements for content, security and technical quality.

Sources and further documentation

Technical basics and additional information from the respective editors. Links last checked on 25.05.2026.