A flexible multi-column layout

A desktop page might show three cards side by side, with each card containing an image, heading and short description. On a tablet, the same cards could form two columns; on a phone, they could stack in a single column.

This pattern works well for product listings, blog articles, services and team profiles. The content stays the same, but the layout changes to make it easier to read and interact with on a smaller screen.

A flexible grid can be created with CSS Grid or Flexbox. Instead of assigning every element a fixed width, the design allows items to grow, shrink or wrap as space changes.

Navigation that adapts to mobile

A wide desktop navigation bar may have room for several links, a search box and a prominent call-to-action button. On a phone, that arrangement can become crowded. A responsive design might show a menu button, keep the most important action visible, or place navigation links in a compact panel.

For example, an online shop could display its logo, search and basket controls at the top of the mobile page, while moving less frequently used links into a menu. This keeps essential tasks easy to find without squeezing every desktop link into a narrow space.

Good mobile navigation should be easy to open, close and use with a finger. Buttons need enough space around them, and the menu should not obscure important content unnecessarily.

Responsive images

Images need to fit different screen sizes without looking distorted or slowing the page down. A responsive image might scale within its container, crop differently at a particular screen width, or use a smaller image file on mobile.

Consider a travel website with a wide landscape photograph on a desktop homepage. On a phone, the image could use a closer crop that keeps the subject visible. The image should retain its proportions, and important details should not disappear beyond the edges.

Image formats and file sizes matter too. Serving appropriately sized images can make pages quicker to load, particularly for people using mobile data.

Content that reorders on smaller screens

Some desktop layouts place content in a main column alongside a sidebar. On a phone, the sidebar can move below the main content, or its most useful information can appear nearer the top.

A news article, for instance, might show the headline, author and article text before related stories and promotional panels. This gives readers a clearer path through the page and prevents secondary content from interrupting the main task.

Responsive design is not simply about shrinking everything. It is also an opportunity to decide what matters most at each screen size.

Forms designed for touchscreens

A form that works well with a mouse may be frustrating on a phone if its fields are too small or packed too closely together. A responsive form can use full-width fields on mobile, clear labels and appropriately sized buttons.

For example, a booking form might display several fields in a row on a desktop but stack them vertically on a phone. The input types should match the information requested, such as showing a number keypad for a telephone number where supported.

Helpful error messages and visible focus states also make forms easier to use across devices.

Responsive tables and data

Tables can be difficult to view on narrow screens because their columns may not fit. A responsive approach could allow horizontal scrolling, reduce non-essential columns or present each row as a compact card on mobile.

For a comparison table, the key details could remain visible while less important information is moved into expandable sections. The best option depends on the purpose of the data: visitors should still be able to understand and compare it accurately.

Typography that scales comfortably

Text should remain readable at every viewport width. A responsive design may adjust heading sizes and spacing while keeping body text comfortable to read. Line length is important too: very long lines can be tiring on a desktop, while narrow columns can make text feel cramped.

Rather than setting every font size in fixed pixels, designers can use flexible CSS units and sensible minimum and maximum sizes. The result is a page that feels balanced across different screens.

What makes these examples effective?

• Flexible layouts: Columns and components adapt instead of relying on fixed page widths.
• Clear priorities: The most important content and actions remain easy to find.
• Touch-friendly controls: Links, buttons and form fields are comfortable to use on a touchscreen.
• Readable content: Text, images and spacing remain clear at different sizes.
• Useful performance: Images and other assets are delivered efficiently, especially on mobile connections.
• Real-device testing: Pages are checked at a range of viewport sizes and with different input methods.

How to test a responsive website

Start by resizing the browser window to see how the layout changes. Then test the site using browser developer tools and, where possible, real phones and tablets. Check that navigation works, text does not overflow, images remain clear and forms are usable.

It is also worth testing with a keyboard and screen reader. Responsive design should support accessibility as well as different screen sizes, so visitors can navigate and understand the content in the way that suits them.

Conclusion

The best responsive web design examples do more than fit a page onto a smaller screen. They adapt the layout and experience to make the content useful and comfortable on every device. Flexible grids, adaptable navigation, well-sized images and touch-friendly forms are practical starting points for building a website that works wherever it is viewed.