What is responsive design?

In plain English

A responsive website changes its layout to suit the space available. A row of three service cards might become one column on a phone. A photograph might scale to fit the screen, while text keeps a comfortable reading size. Think of arranging the same shop stock in a large showroom and a small stall: the items remain available, but the display changes so people can reach them.

Responsive design is usually built with flexible layout rules, images that can resize and breakpoints that change the arrangement when there is not enough room. MDN’s explanation describes it as a design approach for the range of devices and screen sizes people use. It is a way to build a website, not a special kind of phone app.

The aim is usability, not simply fitting everything inside a narrow screen. Tiny text, squeezed buttons and a menu that covers the page can all technically fit while still being hard to use. The actual words, pictures and forms must be tested in the layout.

Why it matters to a Jersey business

A person checking a Jersey restaurant’s menu, finding a trades business while away from home, or opening a booking link from an email may use a phone. The page should let them finish that task without zooming, sideways scrolling or fighting small controls. Business details such as opening hours, location and phone number should remain easy to find.

Responsive design also helps avoid maintaining different content for separate desktop and mobile sites. Google recommends responsive design as the easiest mobile configuration to implement and maintain, and says the mobile version of a site’s content is used for indexing and ranking. Important information should therefore be available on the phone layout, not quietly removed because space is tight.

Accessibility still needs its own check. Keyboard use, meaningful labels, colour contrast and readable content matter at every width. A flexible grid does not automatically make a form understandable or a menu usable for someone using assistive technology.

A Jersey example

Imagine a St Helier café with a desktop page showing the menu, opening hours and a map side by side. On a phone, the three columns could stack, with today’s opening hours and a clear directions link near the top. The menu could stay as text instead of becoming a picture that requires pinching and zooming. The customer gets the same information in a more useful order.

This is a hypothetical example. The right order depends on what customers need most. If booking a table is the main task, a clear booking route should be visible on both desktop and phone. Testing with actual menu items and long dish names will reveal problems that a neat sample template may hide.

What to do

Open the important pages at several widths and on at least one real phone. Read the headings, use the menu, tap the number, complete the form and check any embedded map or booking service. Turn the phone sideways. Increase text size. If a table is necessary, make it scroll within its own area instead of pushing the entire page wider than the screen.

Ask whether every important fact appears on mobile. If a desktop panel disappears, is the information available somewhere else? Check images and scripts as well: a responsive page can still be slow on mobile data. The video below gives six practical phone checks. Our accessibility guide covers keyboard, contrast and other needs that go beyond layout.

Common myths

Responsive means shrink the desktop site. A useful phone layout rearranges content and controls instead of making everything smaller.

A responsive template has solved mobile use. Real text, long menus, forms and third-party widgets can break the experience after a template is chosen.

Desktop content can be removed without consequence. Customers may need it on their phones, and Google uses the mobile version of a page when indexing it.

Our take

Jersey Web’s view is to test the task, not merely the width. If a visitor can read the key information and complete an enquiry on a phone, the layout is serving its purpose. Keep testing as content changes; a new promotion or gallery can expose a problem after launch.