Responsive Design
Short definition
Responsive design means a website automatically adjusts its layout, text size and navigation to fit phone, tablet and desktop screens.
The same page code shows a single column on a phone, two columns on a tablet and a wide grid on desktop. Flexible CSS grids and screen-width rules called media queries make this possible. Images, buttons and text scale with the screen, so visitors never scroll sideways.
Responsive design is now standard because most visitors arrive on a phone, and Google ranks sites primarily by how they look on mobile.
It is often confused with adaptive design. Adaptive design builds a separate fixed layout for each device, while responsive design uses one flexible layout that reshapes itself, which is simpler to maintain.
The most common mistake is building the layout for desktop first and squeezing it onto mobile afterwards, which produces cramped tap targets and menus that nest awkwardly inside each other. The correct approach is mobile first: design for the narrow screen first, then add columns as width increases, so every element a visitor taps remains large enough and properly spaced.
Why it matters
A visitor who opens your site on a phone and finds a broken layout leaves. Responsive design prevents that loss: one website works on every screen, removing the cost of building and maintaining a separate mobile site.
Illustrative example
A flooring manufacturer's product catalogue shows a wide grid on desktop and a single column on a phone, same page, same content, no separate layout to build or maintain.
