What does responsive design do?
Choose an answer, then check it.
UX/UI Design · Foundations
Responsive Design
On this page 9 sections
In 30 seconds
responsive design A design approach in which a website's layout adapts to the screen size and orientation of the device viewing it. Full entry → is a design approach in which a site's layout adapts to the screen size and orientation of the device viewing it, instead of offering one fixed arrangement. It solves a practical problem: the same content must work on phones, tablets, and desktops. Conceptually, it rests on flexible layouts, fluid images, and breakpoints where the layout rearranges. The same site, presented differently. Responsive layouts adjust continuously, unlike adaptive designs built for chosen sizes. Today, working on every screen is the default expectation, not a feature.
Why this matters
People open the web on whatever device is in hand: a phone on the bus, a tablet on the couch, a desktop at work. A site that ignores the screen it is shown on forces users to pinch, scroll sideways, and hunt for controls, and many simply leave. Responsive design is how one set of content serves all of those screens without separate sites to build, update, and keep in sync. It also meets accessibility where screens get small: layouts that reflow The way text and elements rearrange themselves to fit a narrower or wider window. Full entry → keep text readable and usable when zoomed. For a designer, treating responsive design as the baseline rather than an add-on is the difference between an expected experience and a broken one.
The college version
The working definition, attributed
This lesson’s working definition follows Nielsen Norman Group: responsive web design creates dynamic changes to the appearance of a website depending on the screen size and orientation of the device being used to view it. The term itself has a known birthday. Ethan Marcotte coined “responsive design” in his 2010 essay for A List Apart, describing a way of building one flexible experience instead of separate experiences for each device class, built from three technical ingredients: fluid grids, flexible images, and media queries. This lesson keeps that definition and explains the ideas behind the ingredients without any code, because the concepts are what a designer reasons with. The Interaction Design Foundation offers a similar working definition: an approach to web design in which the interface adapts to the device's layout to make usability, navigation, and information seeking easier. Across all three sources the idea is the same: the layout is the flexible part, and it answers to the screen that is showing it.
The problem it solves: one site, every screen
Responsive design is one answer to a specific problem: the same content has to be usable on devices that range from tiny phones to huge desktop monitors. Before it became the standard approach, teams often built separate sites for different device types, a desktop site, a phone site, sometimes a tablet site, each with its own codebase to build, update, and keep in sync. Responsive design replaces that pile of versions with a single site whose layout reshuffles as the viewport The visible area of a browser window on a device, the space a layout must fit. Full entry → grows or shrinks. Nielsen Norman Group notes that a three-column desktop layout may become two columns on a tablet and a single column on a phone, all from one set of content. That single version is also easier to maintain and relatively future-proof: when a new device size appears, the layout can support it without starting over. MDN makes the same point in one phrase: responsive design is the way to design for a multi-device web.
How it works conceptually: flexible layouts, fluid images, breakpoints
Three ideas do the work, and none of them requires code to understand. Flexible layouts are proportion-based: elements occupy a share of the available width rather than a fixed size, so columns stretch and squeeze with the screen. A community newsletter page, for example, might give its main article seventy percent of the width and a sidebar the rest; as the window narrows, those proportions compress, and at some point the arrangement gives up on side-by-side entirely. Fluid images follow the same logic: an image scales to fit the space its column gives it, shrinking when the column narrows and never overflowing its container. Breakpoints are the moments where the layout stops merely compressing and actually rearranges: below a certain screen width, a two-column layout becomes a single column, a navigation bar becomes a menu button, and elements stack in a new order. The Interaction Design Foundation lists these as the three core principles of responsive design: a fluid grid system, fluid images, and media queries with breakpoints. Between breakpoints the page stretches and squeezes; at breakpoints it rearranges.
Mobile and desktop: same content, different presentation
The mobile view of a responsive site is not a different website; it is the same content arranged for a narrower screen. What changes is presentation: order, density, and what appears without scrolling. Nielsen Norman Group highlights content prioritization as a key part of doing responsive design well, because far more content is visible without scrolling on a large monitor than on a small phone screen, and on a phone users may scroll past what they came for. A responsive site keeps the same information for everyone and arranges it so the important pieces surface first on every size of screen. That is also why responsive design is not the same as adaptive design An approach that serves fixed layouts built for specific screen sizes instead of one continuously flexible layout. Full entry →: responsive layouts adjust continuously as the screen changes, while adaptive design serves fixed layouts built for specific sizes, like separate outfits cut for a few known body shapes.
Responsive design, accessibility, and the honest framing
Responsive design and accessibility meet on small screens. The W3C's Web Accessibility Initiative describes mobile accessibility as making websites and applications more accessible to people with disabilities using phones and other devices, and the issues involved include small screen sizes, touchscreens, different input modalities, and use in bright sunlight. A responsive layout helps here: because content reflows to fit the viewport, text stays readable when users zoom in, and pages do not demand sideways scrolling. The formal requirements behind these benefits, such as the WCAG reflow rules, belong to the WCAG Basics lesson of this course; this lesson notes the connection only. The honest framing matters just as much. Responsive design is not a feature a team adds to a finished site; it is the default expectation for the web. The Interaction Design Foundation calls it a default for web design, and MDN calls it the way to design for a multi-device web. Users assume a site will work on whatever device they hold, so a team that treats responsiveness as an afterthought is not exceeding expectations, it is catching up to them.
Eli explains
The same idea, in plain words
Explain it like I’m 10
Responsive design means a website's layout bends to fit whatever screen is showing it. The same page that spreads across three columns on a computer screen stacks into one column on a phone, without the site's owner building a second website. It works through three simple ideas. Layouts use proportions, so columns shrink and stretch like elastic bands instead of keeping fixed sizes. Images scale down with their column, like a photo that shrinks to fit a frame. And at certain screen widths, called breakpoints, the page does more than squeeze, it rearranges, moving the navigation to a menu button and stacking sections that used to sit side by side. The content stays the same everywhere; only the arrangement changes. That is the deal: one design, every screen, and people expect it as the normal way websites behave.
Picture it like this
Think of a responsive site as a storyteller telling one story to three audiences: a long fireside version in a big living room, a tighter telling around a dinner table, and a short version whispered at the door. The story never changes; the telling reshapes itself to the room.
Where the picture stops working
A storyteller can cut and rewrite freely, but a responsive site keeps the same content for everyone and only changes the arrangement. A storyteller also improvises for each listener, while a responsive layout follows fixed rules decided and tested in advance, not choices made on the spot.
Worked example
A family-run bookstore with three shops wanted one website for its customers: a desktop catalog, a tablet-friendly events calendar, and a phone view for hours and directions. The team started with a single three-column desktop layout, then watched it on real devices and chose breakpoints where the layout began to feel cramped rather than at specific phone models. On tablets the catalog and events moved to two columns; below that, everything stacked into one column with a map button near the top. They tested the rearranged pages with a dozen customers across all three screen sizes and learned that phone users mostly wanted store hours, so the hours moved above the catalog. The site stayed one website; the presentation changed with the screen.
Key takeaway
Responsive design is one design that adapts to every screen through flexible layouts, fluid images, and breakpoints, and because users expect it, it is the baseline of the web, not a feature.
Quick check
3 questions here, of 5 in this lesson’s practice set. Answers stay hidden until you check.
According to this lesson's sources, who coined the term responsive design, and in what year?
Choose an answer, then check it.
A news site shows three columns on a desktop monitor and a single column on a phone. What causes the layout to switch between these arrangements?
Choose an answer, then check it.
Study tools & related lessonsYou’ll learn to · Common mistakes · Easily confused · Key vocabulary · Related
You’ll learn to
- Define responsive design using the working definition from Nielsen Norman Group.
- Explain the problem responsive design solves: one set of content, many screen sizes.
- Name and describe the three conceptual ingredients of responsive design: flexible layouts, fluid images, and breakpoints.
- Distinguish responsive design from adaptive design.
- Explain how responsive design connects to accessibility on small screens, including zooming and readability.
- Evaluate the honest framing that responsive design is a default expectation rather than a feature.
Common mistakes
Treating responsive design as a feature to add later. Responsive behavior is the expected baseline of the web; planning for multiple screens from the start is cheaper and more coherent than retrofitting a fixed-width design.
Confusing responsive with simply shrinking. Responsive design rearranges content at breakpoints; a page that only scales down can end up with tiny, unreadable text and cramped columns.
Choosing breakpoints by guessing at specific devices. Breakpoints should be set where the layout actually starts to feel wrong, and the rearranged result tested on real screens, rather than hardcoded to a handful of phone models.
Forgetting that reshuffling changes the experience. Moving a sidebar below the main content changes how people read the page, so each rearrangement deserves a usability check, not just a visual one.
Assuming responsive automatically means accessible. A layout that reflows helps, but readability when zoomed, touch targets, and contrast still need deliberate attention, which the Accessibility and WCAG Basics lessons cover.
Easily confused
Responsive design vs. Adaptive design
Responsive layouts adjust continuously and fluidly as the screen changes; adaptive design serves fixed layouts built for specific screen sizes.
Desktop view vs. Mobile view
The same content, presented differently: wide screens show more without scrolling and place elements side by side, while narrow screens stack and prioritize.
Responsive design vs. Mobile-first design
Responsive design makes one layout adapt to any screen; mobile-first design is the strategy of designing for the smallest screen first, which is its own topic in this course.
Key vocabulary
- responsive design
- A design approach in which a website's layout adapts to the screen size and orientation of the device viewing it.
- flexible layout
- A proportion-based arrangement in which elements stretch, squeeze, and reshuffle to fit the available width.
- fluid image
- An image that scales to fit its container, shrinking when the space narrows and never overflowing it.
- breakpoint
- A screen width at which the layout stops compressing and rearranges into a new arrangement.
- media query
- A mechanism that checks the characteristics of the viewing screen and applies the matching layout.
- viewport
- The visible area of a browser window on a device, the space a layout must fit.
- adaptive design
- An approach that serves fixed layouts built for specific screen sizes instead of one continuously flexible layout.
- reflow
- The way text and elements rearrange themselves to fit a narrower or wider window.
- mobile-first design
- Designing for the smallest screen first and then adding richer layouts for larger screens; a sibling topic in this course.
Sources & references
- Responsive Web Design (RWD) and User Experience — Nielsen Norman Group (NN/g)
- Responsive web design — Mozilla / MDN Web Docs
- What is Responsive Design? — Interaction Design Foundation (IxDF)
- Mobile Accessibility at W3C — W3C Web Accessibility Initiative (WAI)
- Responsive Web Design — A List Apart
EliExplains lessons are original prose written from the open, credible references above. See Copyright & Licensing.
Researched 2026-08-21
Educational content only. It is not medical, legal or professional advice. Found an error? Tell us.