Responsive design: build and test for real screen sizes

Responsive design should let a visitor complete the same useful task on a phone and a desktop. Shrinking a desktop layout is not enough. A customer still needs to understand the offer, inspect the work and find a clear next step.

Keep the content available

Google uses mobile content for indexing. Important text, links and resources should remain available, and primary content should not require an interaction to load. Google's mobile indexing guidance.

For a restaurant, keep the menu and opening hours. For a tradesperson, keep the services, service area and enquiry route. Reorganise the layout without removing the answers a customer came to find.

A catalogue example: LR Studios

The LR Studios website presents mobile games and links to their download platforms. I developed its responsive interface with HTML, CSS and Bootstrap. The task to preserve is recognising a game and finding the right store link.

That suggests a useful test: can the visitor identify the title, inspect the image, read the description and follow the download link on a narrow screen? The case study documents the delivered work, without claiming exhaustive device coverage or a measured commercial outcome.

Let the content determine your breakpoints

Start with one column. Add columns only when the cards have enough space. Avoid relying exclusively on named phone models: browsers can be resized, text can be enlarged and translated titles can be longer.

.cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

This is a starting point, not a complete layout. Test it with real content, long words and images. Limit the overall line width so paragraphs remain easy to read on a large display.

Render important links in the initial HTML. CSS can adapt their presentation to the available space. A collapsed menu needs a usable fallback if JavaScript fails. Check the language switch on a deep page: it should lead to the matching translation, preserving the visitor's place.

Fixed mobile controls also need testing with the on-screen keyboard. A dock that covers the enquiry button is a functional problem even if the page looks good in a screenshot.

Review images, type and forms together

Use suitable image variants and preserve their aspect ratio. Inspect crops in portrait and landscape. Enlarge text and check that titles, labels and buttons do not overlap. Keep touch controls comfortably spaced. The image guide and form guide provide more detailed checks.

Save a release test

At a narrow, medium and wide size, read the heading, use the menu, switch languages, open a project and complete a test form. Resize between those widths, too. Repeat with enlarged text and with JavaScript blocked. Record the URL and the exact failure instead of simply marking the page “mobile friendly”.

Those observations make a redesign brief concrete and give you a way to confirm the fix.