Jargon Buster / Responsive Design
Responsive Design.
Brand, Web & DesignDesigning a website so its layout adapts to any screen size, from a phone to a large desktop monitor.
What is responsive design?
Responsive design is an approach to building websites so that layout, images and navigation adapt automatically to the size of the screen, from a small phone to a large desktop monitor. One site with one set of content reshapes itself using flexible grids and CSS rules called media queries. The term was coined by Ethan Marcotte in 2010 and it is now the standard way websites are built.
Why it matters
Many buyers will judge you on a phone, often on a job site or between meetings. If text needs pinching, buttons are too small to tap or forms are painful on a small screen, they leave and call someone else. Google also completed its move to mobile-first indexing in 2024, meaning it crawls and indexes the mobile version of your site, so a poor mobile experience can hold back search visibility as well as enquiries.
What good looks like
- Mobile-first planning Design for the smallest screen first, then add layout for larger ones.
- Readable text Body text that is comfortable to read without zooming, with sensible line lengths.
- Tappable targets Buttons and links large enough and spaced enough to hit with a thumb. WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels at level AA, with some exceptions.
- Optimised images Images served at sizes suited to each device, so phones do not download desktop-sized files.
- Usable forms Short forms that bring up the right mobile keyboard for phone numbers and email addresses.
The honest view
Almost every modern theme claims to be responsive, so the label tells you very little. The real question is whether the mobile experience is good. Many sites technically reflow on a phone but bury the phone number, stack a desktop layout into an endless scroll or load huge images over a weak signal. Designers often review work on large monitors, which makes mobile an afterthought. For most SMEs, the phone is where design decisions should be made and checked first.
What to do about it
Open your website on your own phone and try the three things customers do most: find a service, find your number and send an enquiry. Do it on mobile data, away from the office wifi. Note every moment of frustration. Then check the Core Web Vitals report in Google Search Console for problems flagged on mobile. Fix the enquiry path first, then the slowest pages.
Related terms.
UX Design
Designing how a website or product works for the people using it, so tasks feel clear and easy to complete.
Brand, Web & DesignSee more CCore Web Vitals
Google's three measures of real-world page experience: loading speed, responsiveness and visual stability.
Search & AI VisibilitySee more UUI Design
The design of the visual and interactive parts of a website or app: layout, type, buttons, forms and states.
Brand, Web & DesignSee more TTechnical SEO
The behind-the-scenes work that lets search engines crawl, render, understand and index your website.
Search & AI VisibilitySee moreGot a question about your own setup? Let's talk.
Your first call is with our founder, Rhodri Williams.