Responsive Web Design: What It Is and Why It Is the Standard

The principle

A single website adapts: on a phone, content is stacked; on a computer, it sits side by side. The menu becomes compact, images scale, and buttons are large enough to tap.

How to recognise good implementation

• No sideways scrolling, no need to zoom
• Readable type (at least around 16 pixels for body text)
• Large, easily reached buttons
• Key actions (calling, enquiring) can be found without searching
• Images load at a suitable size
• Tables and forms work on a small screen

Why it matters

Visitors leave pages that work badly on mobile. In addition, Google mainly assesses the mobile version, see Mobile-first indexing.

What is behind it technically

Three building blocks carry the principle. First, the viewport tag in the page head, which tells the phone to display the page at the device's width. If it is missing, the device renders a desktop width and shrinks it, so everything looks tiny. Second, flexible dimensions: columns and images adapt to the available width rather than to fixed pixel values. Third, breakpoints at which the layout changes, for instance from one column to two. Breakpoints make sense where the content becomes cramped, not at the dimensions of particular devices, because device sizes are constantly changing.

Typical mistakes

• Menu that works only with a mouse pointer: Drop-down menus that appear on hover do not work on a touchscreen, because there is no hovering.
• Links set too close together: Tap targets should generally measure around 44 to 48 pixels, otherwise a thumb hits the wrong item.
• Pop-ups that fill the screen: On a phone they are often hard to close and cover the content.
• Huge desktop images: They take needlessly long to load on mobile, see Optimising images.
• Text as an image: It does not scale, and can be neither searched nor read by screen readers.

Myth versus fact

Myth: A separate mobile version at its own address is better because it fits exactly. Fact: Two versions mean double the upkeep, and content soon drifts apart. A responsive site keeps everything in one place. For business websites, this is generally regarded as the more sensible route.

A practical example: a hair salon

Suppose a salon has an attractive home page, but the phone number appears only as an image in the header. On mobile it is hard to read and cannot be tapped. The fix is small: the number as real text with a phone link, a fixed call button at the bottom of the screen, and opening hours directly beneath. Little changes in the layout, but visitors' most common action takes one tap instead of three steps.

Checking steps

1. Open the device view in your browser's developer tools and go through widths of around 360, 768 and 1280 pixels.
2. Hold your phone in landscape: does anything break out of its frame?
3. Enlarge the type in the browser to 200 per cent and check whether text is cut off.
4. Actually fill in a form, using the on-screen keyboard.
5. Load the site on a real device on the mobile network, not just on Wi-Fi.

Deciding: rebuild or retrofit?

If your site is older and was built only with fixed widths, it often cannot be saved with individual fixes. Check three things: does the navigation work by touch? Can the text be read without zooming? Do tables and images break out of their frame? If more than one of these applies, rebuilding the layout is usually more economical than many individual fixes, because old fixed dimensions run through the whole code. If it affects only the menu or a few images, a targeted rework is often enough. How such a step fits into a larger fresh start is shown in Website relaunch.

Open your website on your own phone and try to complete your main task (call, request an appointment). If you cannot do it within a few seconds, action is needed. More under Websites.