What is responsive design
Responsive design means a website that automatically adapts to the screen size: one view on a phone, another on a tablet, a third on a computer.
It is not a separate mobile site but one site that rearranges itself. Text, images and menu adapt to the screen.
Today responsive design is the standard. Any proper website must work well on both phone and computer.
Why responsive design matters
Most visitors open sites on a phone. If the site does not adapt, you lose much of your audience. Google also evaluates the mobile version of a site first.
How responsive design works
A responsive page is not drawn to a fixed width. Columns are defined as fractions of the screen, images shrink with their container, and CSS media queries switch the layout at set breakpoints. Three service cards in a row, for example, become a stacked list on a narrow screen.
Most teams design the mobile view first and the wider views after it. That way the small screen gets the essentials and the desktop version gains extra room, rather than the other way round.
Example: a restaurant menu on a phone
A restaurant site shows its menu as a wide table: dish, description, allergens, price. On a computer it looks tidy. On a phone the table does not fit, the price column slides off the edge and the guest has to scroll sideways.
In a responsive version each row turns into a card on the phone: name and price on top, description below. The booking button stays fixed at the bottom of the screen and tapping the phone number starts a call.
Common mobile mistakes
A site can be technically responsive and still be awkward on a phone.
- Buttons and links are so small or so close together that a finger hits the wrong one.
- Part of the content is hidden on mobile. Google indexes the mobile version, so text missing there may not count in search.
- A pop-up covers the whole screen and the close button is out of view.
- The site is tested only on a computer by narrowing the browser window, never on a real phone.
How to check your own site
Open the site on your phone and walk through the whole customer journey: find a service, look at the price, fill in the form. Try both Android and iPhone, since browsers behave differently.
On a computer, Chrome's developer tools have a device mode that shows the page at different screen widths. The mobile report in PageSpeed Insights also tells you whether the site is fast enough on a phone.
Frequently asked questions
What is the difference between responsive design and a separate mobile site?
A separate mobile site is a second website on its own address that has to be maintained separately. Responsive design is one site and one set of content that rearranges itself. New websites today are built responsive.
Can an old website be made responsive?
Sometimes the theme can be adapted, but for a very old site a redesign is often the more sensible route, because the code, the speed and the content structure all need updating at once.
Does responsive design affect SEO?
Yes. Google indexes and evaluates pages based on their mobile version. If the site is hard to use on a phone or some content is missing there, rankings suffer in desktop search too.