Responsive Design

What responsive design really means

Responsive design means a website adapts its layout to the screen it is viewed on, from a small phone to a wide desktop monitor. But fitting on the screen is only the start. A page can technically fit a phone and still be frustrating: text too small to read, buttons too close together to tap accurately, forms that trigger the wrong keyboard, or menus that are hard to open with one thumb.

We treat those usability details as requirements. Mobile-first design means we start with the smallest screen and the most important content, then expand the layout for larger screens, rather than squeezing a desktop design down.

Signs your site isn’t really responsive

• Visitors need to pinch and zoom to read text or tap links.
• Parts of the page scroll sideways on a phone.
• The phone number is not tappable, or WhatsApp links fail on mobile.
• Forms are painful to complete on a small screen.
• Images or tables overflow their containers.
• Pop-ups cover the whole screen and are hard to close.

For a clinic, a restaurant or a local service business, many first visits happen on a phone while someone is deciding whether to call. A frustrating mobile experience sends them to the next result.

What we focus on

• Layout: fluid grids and breakpoints based on content, not just popular device sizes.
• Typography: readable base sizes and line lengths on every screen.
• Touch targets: buttons and links large enough and spaced far enough apart to tap reliably.
• Navigation: menus designed for one-handed use on phones.
• Forms: correct input types so phones show the right keyboard, with autofill support and clear errors.
• Images: responsive sizes so phones do not download desktop-sized files.
• Tables and data: readable on small screens through stacking or horizontal scroll within the table.
• Accessibility basics: colour contrast, focus states and zoom that is not blocked.

How we design and test

1. Content priorities. Decide what matters most on the smallest screen.
2. Mobile-first design. Design the phone layout first, then tablet and desktop.
3. Build with flexible components that adapt rather than separate mobile and desktop versions.
4. Real-device testing on a range of Android phones, iPhones and tablets, including smaller and older models.
5. Browser testing across Chrome, Safari, Samsung Internet, Firefox and Edge.
6. Fix and re-test until every key page works on every target device.

Technology

We build responsive layouts with CSS Grid, Flexbox and Tailwind CSS, using container queries where components need to adapt to their own space. Images are served at the right size with responsive image markup and modern formats. We verify results with Chrome DevTools, Lighthouse and, most importantly, physical devices.

If your existing site is not responsive, retrofitting may be possible, but for older sites a website redesign is often cleaner. Responsive design is also the foundation for a progressive web app.

Why real devices matter

Browser tools that simulate a phone are useful during development, but they do not show everything. A real phone has a real touch screen, a smaller processor, an on-screen keyboard that covers half the page, browser toolbars that appear and disappear, and sometimes a notch or rounded corners. Many problems only appear under those conditions.

Your customers also do not all carry the latest flagship phone. Many use mid-range or older Android devices with smaller screens and slower processors, often with larger system font sizes set for comfortable reading. A layout that looks perfect on a new iPhone can break in surprising ways on those devices.

• Forms where the keyboard hides the submit button or error messages.
• Sticky headers and bottom bars that eat most of a small screen.
• Text that overflows buttons when the phone’s font size is increased.
• Animations that stutter on slower processors.
• Tap targets that work with a mouse but not a thumb.

That is why sign-off always happens on physical devices, not only on a desktop screen.

What affects timeline and cost

• New build versus making an existing site responsive.
• The number of unique page templates.
• Complex components such as data tables, calculators or maps.
• The range of devices and browsers you need supported.

Common responsive design mistakes

• Approving designs only on a large desktop monitor.
• Hiding important content on mobile instead of reorganising it.
• Disabling pinch-to-zoom.
• Testing only in a desktop browser’s device mode and never on a real phone.
• Letting large sticky headers and chat widgets cover the content on small screens.

Browse all web development services, read the web development guide, or contact us to review your site on mobile.

Frequently asked questions