How responsive web design works: layout, images and testing

One set of content, different layouts

A responsive website uses the same URL and HTML while CSS adapts the presentation to the available space. Three desktop cards can become a single column on a phone. Content need not disappear, but its order should remain logical when items no longer sit next to each other.

Choose breakpoints around content

Change the layout when navigation, text or controls no longer fit, not just at the sizes of popular phones. Flexible widths and grids handle part of the work; media queries introduce changes at selected widths. The MDN responsive design guide explains this approach.

A layout example: accommodation cards

Imagine a page showing three apartments, each with a photograph, name, capacity and details link. The cards can share one row on a large screen and stack vertically on a phone. Each name, capacity and link stays with the correct image. A longer property name or translation must not cover the button. This illustrates layout planning; our accommodation website service explains the content needed for such a project.

Images should not shift the content

Reserve space with dimensions or an aspect ratio. Distinguish a decorative background that can be cropped from a product photograph whose details must remain visible. Review both orientations: a crop that works on a narrow phone may not work on a tablet.

Test more than window width

• Long headings and real translations, not only short placeholder text.
• Navigation, tables, galleries and forms with visible errors.
• Enlarged text, keyboard focus and reading order.
• Slow image loading and button positions before and after loading.
• A real phone, touch interaction and an open keyboard.

A responsive layout does not guarantee search rankings. It should provide usable access to the same helpful content. Review our responsive web design service and actual CMS examples.

Check the transition between layouts

Test narrow and wide screens, plus widths immediately before and after the number of columns changes. Compare card order, complete headings and visible links. If the layout looks right but visitors still cannot send an inquiry, continue with our practical mobile usability checklist.