Responsive web design (often abbreviated to RWD) is an approach to building websites that deliver an optimal viewing experience across every device: easy reading and easy navigation with a minimum of resizing, panning and scrolling — whether your visitor is on a desktop monitor, a tablet or a mobile phone.
With mobile devices generating more than half of all web traffic, a responsive website is no longer a nice-to-have. It is the baseline for reaching your audience, and search engines rank mobile-friendly sites higher for mobile searches.
How does it work?
A responsive site rests on three technical pillars working together:
- Media queries — CSS3 rules that apply different styling based on the device's characteristics, particularly the browser width. One codebase, many layouts.
- Fluid grid layouts — page elements are sized in relative units such as percentages or ems rather than fixed pixels, so the layout flexes smoothly between screen sizes instead of jumping between rigid versions.
- Flexible images — images scale proportionally, up to 100% of their container, so they never overflow or force horizontal scrolling on a small screen.
Mobile first and progressive enhancement
Rather than building a complex desktop site and then trying to squeeze it onto basic devices, best practice works the other way around: build the foundational experience first, then enhance it for more capable platforms. This philosophy — progressive enhancement — matters because the simplest mobile browsers cannot process JavaScript or media queries at all; a well-built responsive site still serves them something usable.
Is your website responsive?
If your site was built more than a few years ago, there is a good chance it isn't serving mobile visitors well. We convert existing websites to fully responsive ones — keeping your design and content, and upgrading the foundations. Ask us for a free website evaluation.