What is responsive design?

Why responsive design is essential

With so many people now browsing on phones, responsive design is not a luxury. A site that doesn't work well on mobile is effectively invisible to a large share of visitors, and people are quick to leave a mobile page that loads slowly or is hard to use.

Reach all your visitors

Your customers use a variety of devices. Some check your site on their phone during a commute, others browse on a tablet in the evening, and some use a desktop computer at work. A responsive website gives every visitor a good experience, however they reach you.

Google requires it

Google uses mobile-first indexing, meaning it primarily looks at the mobile version of your website when deciding how to rank it. Google has said that mobile-friendliness is a ranking factor, so a site that isn't mobile-friendly will struggle in search results.

Cheaper to maintain

With responsive design, you maintain one website instead of separate desktop and mobile versions. Updates only need to be made once, which keeps costs down and keeps everything consistent.

Better conversion rates

Visitors who have a good mobile experience are more likely to become customers. When forms are easy to fill in, navigation is obvious and text is readable, more visitors get in touch or buy.

Ready for new devices

New screen sizes keep appearing, from foldable phones to large monitors. Responsive design adapts to any screen size, so your website is ready for devices that haven't been released yet.

The building blocks of responsive design

Fluid grid layouts

Instead of fixed pixel widths, responsive designs use percentage-based widths that let content expand or contract with the screen.

Example: a three-column layout on desktop might become a single column on mobile, with content stacking vertically for easier reading.

Flexible images

Images scale to fit their container while keeping their proportions, so they don't overflow or cause sideways scrolling.

Example: a hero image that spans the full width of a desktop screen shrinks on smaller screens without distortion.

CSS media queries

Conditional CSS rules apply different styles depending on the device, such as its screen width, orientation or resolution.

Example: @media (max-width: 768px) { ... } applies styles only when the screen is 768 pixels wide or smaller.

Responsive typography

Text sizes adjust with the screen using relative units (em, rem) or viewport units (vw), so text stays readable on every device.

Example: headlines might be 48px on desktop but scale down to 28px on mobile.

Touch-friendly navigation

Mobile navigation uses larger touch targets, collapsible menus and thumb-friendly positioning.

Example: a horizontal menu bar on desktop becomes a collapsible "hamburger" menu on mobile with larger links that are easy to tap.

Responsive tables

Data tables reorganise for small screens by turning into cards, scrolling sideways, or hiding less important columns.

Example: a five-column comparison table might show only the key columns on mobile, with an option to see the rest.

Mobile-first design

Mobile-first is the modern approach to responsive design: you start with the mobile layout and progressively enhance it for larger screens. Mobile visitors get a properly designed experience rather than a squashed desktop layout.

Why mobile-first?

1. It matches Google. Mobile-first indexing means Google sees your mobile site first, so design for what search engines look at.
2. It forces you to prioritise. Limited space makes you focus on what really matters, which leads to cleaner designs.
3. It performs better. Starting small means adding features for larger screens rather than stripping them away, which usually results in a faster site.
4. It serves the majority. Most people browse on their phones, so it makes sense to design for them first.

How I approach it

I design every website mobile-first. I get the mobile experience right, then add enhancements for tablets and desktops, so your most common visitors always have a good experience.

Is your website truly responsive?

Use this checklist to see whether your website gives people a good mobile experience.

• Text is readable without zooming. Body text should be at least 16px on mobile. Nobody should need to pinch-zoom to read your content.
• Buttons and links are easy to tap. Touch targets should be at least 44 by 44 pixels with enough space between them. Fingers are less precise than a mouse.
• No sideways scrolling. Content should fit within the screen width. Scrolling sideways is disorienting on a phone.
• Images scale properly. Images should resize to fit the screen without overflowing.
• Navigation works on mobile. The menu should be easy to open and use on a small screen.
• Forms are easy to fill in. Fields should be a sensible size and use the right input types (email, phone) so the right keyboard appears.
• Content is prioritised. The most important information should be visible without lots of scrolling.
• Pages load quickly on mobile. Optimise images, keep code lean and consider lazy loading.

Tip: to test your own site, run the Lighthouse report in Chrome's developer tools. It checks mobile usability and speed and tells you what to fix.

Common responsive design mistakes

These can undermine your mobile experience even if you think your site is responsive.

Fixed-width layouts

Problem: pixel widths that don't adapt make content overflow on smaller screens, forcing sideways scrolling.

Solution: use relative units (%, em, rem, vw) and max-width so content can flex within its container.

Tiny tap targets

Problem: buttons and links that are too small or too close together are hard to tap accurately.

Solution: make touch targets at least 44 by 44 pixels, with space between them.

Unoptimised images

Problem: serving large desktop images to phones wastes data and slows pages down.

Solution: use responsive images with srcset so each device gets an appropriately sized image.

Hiding content on mobile

Problem: hiding too much on mobile gives a worse experience and may hide information people need.

Solution: reorganise and prioritise content rather than hiding it, and use expandable sections for secondary information.

Forgetting landscape orientation

Problem: sites designed only for portrait phones can break or look odd when the phone is turned sideways.

Solution: test in both orientations and make sure the layout adapts.

Ignoring in-between sizes

Problem: designing only for phones and desktops ignores tablets and unusual screen sizes, where the design may break.

Solution: add breakpoints where the content needs them rather than for specific devices.

Every website I build is responsive

Responsive design isn't an optional extra with me, it's standard. Every site I build includes:

• A mobile-first design approach
• Fluid layouts that adapt to any screen
• Touch-friendly navigation and buttons
• Optimised images for fast mobile loading
• Text that's readable without zooming
• Forms designed to be filled in on a phone
• Testing across real devices
• Work on Core Web Vitals, Google's measures of page speed and stability

See how I build websites or the prices.