Websites
What is responsive web design?
What responsive means
Responsive design is an approach to building layouts that work across different viewport sizes and resolutions. The goal is not to create a separate desktop site and mobile site, but to make the same experience adapt appropriately.
A responsive page may change its columns, spacing, typography, navigation, and media treatment as the available space changes.
How it is built
Modern responsive sites commonly use flexible layouts such as CSS Grid and Flexbox, relative sizing, responsive images, and media queries where different rules are needed at different viewport conditions.
A mobile-first approach starts with a simple narrow-screen layout and progressively adds layout complexity when more space is available. It is one practical way to avoid treating mobile as an afterthought.
Why it matters
People use websites on phones, tablets, laptops, and large screens. A page that requires horizontal scrolling or makes controls difficult to use creates unnecessary friction.
Responsive design is also connected to accessibility and performance: readable text, usable controls, sensible image sizes, and layouts that do not force unnecessary downloads all improve the experience.
What to test
Do not test only one phone and one desktop width. Resize the page, test real devices when possible, check navigation and forms, and look for content that becomes clipped, tiny, or difficult to interact with.
Sources and further reading
Frequently asked questions
What is responsive web design?
A layout that fits the screen in front of the reader. The same page should be readable on a phone and on a large monitor.
Do I need a separate mobile site?
Usually no. One responsive site is easier to keep. A separate mobile address is an old pattern.
How do I test a responsive page?
Narrow the browser, then open the page on a real phone. Check type size, buttons, and whether text runs off the edge.
What is a common beginner mistake?
Fixed widths that only fit one laptop. Let text wrap and let images shrink with the screen.
Does responsive design affect search?
People search on phones. A page that is hard to use there loses the visit. Google also cares that the page works on mobile.
Should menus change on a phone?
Yes if the desktop menu does not fit. The pages should still be reachable. Do not hide the main task.
Related guides
Continue
Website vs web app