Responsive Design
Responsive design means one website that rearranges itself to suit whatever screen it lands on, rather than separate versions for desktop and mobile.
In plain English
The same HTML goes to every device. What changes is how it is laid out: three columns become one, the menu folds into a button, the headline shrinks.
The alternative, which the web tried and abandoned, was a separate mobile site. Two sites to update, two sets of URLs, two places for things to go wrong.
Why it matters
Most of your traffic is on a phone, and the phone is where people are most impatient. A layout that needs pinching and sideways scrolling loses them in seconds.
Google also ranks on the mobile version of your page. If the phone layout is broken, that is the version being judged.
How it works
-
The layout uses flexible widthsPercentages and flexible grids rather than fixed pixel columns.
-
Breakpoints change the arrangementAt set widths, rows stack, sidebars move below, spacing tightens.
-
Images scale with their containerSo a picture never forces the page wider than the screen.
-
Touch is assumedButtons big enough for a thumb, no hover only menus, nothing that needs a mouse.
Test on a real phone
The browser’s device preview is close, but it is not the same as holding it. Load the page on your own phone before you call it finished.