Responsive web design is a development approach in which a website's layout, typography, and media automatically adjust to fit the screen on which they are displayed. The term was introduced by web designer Ethan Marcotte in 2010, and it fundamentally changed how developers think about building for the web. Rather than creating separate sites for desktop and mobile, responsive design uses a single codebase that reshapes itself based on the device's viewport dimensions.
At its core, responsive design rests on three technical pillars: fluid grids, flexible media, and CSS media queries. Fluid grids use proportional units like percentages instead of fixed pixel widths, so columns and containers resize relative to the screen. Flexible media ensures that images and videos scale within their containers without overflowing. Media queries allow developers to write conditional CSS rules that apply only when the screen meets certain conditions, such as a minimum width or a specific orientation.
The viewport is the visible area of a web page within the browser window. On a desktop, the viewport is typically wide. On a phone, it is narrow. Without responsive techniques, a page designed for a wide viewport will appear miniaturized or cropped on a small screen. The HTML meta viewport tag, placed in the document head, instructs the browser to set the viewport width equal to the device's screen width and to start at a zoom level of one. This tag is the starting point for every responsive project.
Understanding the difference between a responsive site and an adaptive site is useful. A responsive site uses fluid, percentage-based layouts that scale continuously. An adaptive site uses several fixed layouts, each triggered at specific breakpoints. Responsive design is more flexible and requires less maintenance because a single layout stretches and compresses continuously rather than snapping between rigid states. Most modern development practices favor the responsive approach for this reason.
A regional news publisher originally had a fixed-width website set at 1200 pixels. When users opened the site on smartphones, they had to pinch and zoom to read articles. After rebuilding the site using responsive techniques, including percentage-based column widths and the viewport meta tag, the layout automatically condensed into a single-column view on small screens. Bounce rates from mobile visitors dropped significantly within the first month after launch, because users could read content without manual zooming.
- Responsive web design uses one codebase that adapts to any screen size.
- The three pillars are fluid grids, flexible media, and CSS media queries.
- The HTML viewport meta tag is required for responsive behavior on mobile devices.
- Responsive design scales continuously; adaptive design snaps between fixed layouts.
- Fixed-width layouts break on small screens, making the viewport tag and fluid units essential.