WEB DEVELOPMENT

Home › Glossary › Web Development· 343 ·

Responsive Design

\rɪˈspɒnsɪv dɪˈzaɪn\n.

Filed underWeb DevelopmentFront EndDesign

In brief · quick answer

Responsive web design (RWD) is an approach that makes web pages render well on any device or screen size by using flexible layouts, flexible images, and CSS media queries.

§ 1 Definition

Responsive design is not mobile-first or desktop-first. It is screen-agnostic-first. It is the practice of building web layouts that adapt to whatever viewport they are displayed in using three technical pillars: fluid grids (relative units like percentages, `fr`, `vw`, `vh`), flexible images (with `max-width: 100%`), and CSS Media Queries to apply conditional styles at different breakpoints. Ethan Marcotte coined the term in 2010. Before responsive design, developers built separate mobile sites (m.example.com) or used user-agent sniffing. Responsive design eliminated that fragmentation. A single codebase serves every device. The Viewport Meta Tag makes it all possible by telling mobile browsers not to render pages at a virtual 980px width. If your site breaks when you resize the browser window, it is not responsive. And responsive design is not optional. Google uses mobile-first indexing. If your site is not responsive, your SEO is damaged.

§ 2 How it works

Start with a flexible foundation: use CSS Grid or Flexbox for layout, `rem`/`em` for typography, and relative units for widths. Define content-driven breakpoints (based on your content, not device sizes) where the layout needs to adjust. Use media queries to modify the layout at those breakpoints. Always include the viewport meta tag. Test on real devices, not just browser DevTools resizing.

§ 3 Mobile-first vs. desktop-first

Mobile-first starts with the smallest screen layout as the default and adds complexity as screens grow (using `min-width` media queries). Desktop-first starts with the large layout and removes things for smaller screens (using `max-width` media queries). Mobile-first is generally preferred because it forces you to prioritize content and results in smaller CSS. But the approach matters less than the result: a site that works everywhere.

§ 4 Common misconception

Responsive design is not just about making things fit on a phone. It is about information architecture across contexts. A genuinely responsive site might show a simplified navigation on mobile, a sidebar table of contents on tablet, and multi-column layouts on desktop. It is a design problem, not just a CSS problem.

§ 5 Note

Never hide content from mobile users and call it responsive. If content is important enough to be in the HTML for desktop, it is important enough for mobile. Use CSS to rearrange, not `display: none` to hide.

§ 6 In code

```css
/* Mobile-first responsive layout */
.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .container {
    grid-template-columns: 1fr 2fr 1fr;
  }
}
```

§ 7 Common questions

Q. What is the difference between responsive and adaptive design?: A. Responsive uses fluid grids to respond continuously. Adaptive uses fixed layouts at predetermined breakpoints. Responsive is more flexible.
Q. Do I need a separate mobile site?: A. Almost never. Responsive design with a single codebase is the modern standard. Exceptions exist for apps with fundamentally different mobile use cases.

Key takeaways

Responsive design ensures a single site works on all devices through fluid layouts and media queries.
Mobile-first approach prioritizes content and reduces code complexity.
The viewport meta tag is required for mobile browsers to respect responsive layouts.

How Atomic Glue helps

Atomic Glue builds responsive sites that work flawlessly across every device. No separate mobile sites, no broken layouts. Our Web Development services deliver responsive by default.

Get in touch

# Responsive Design

Responsive web design (RWD) is an approach that makes web pages render well on any device or screen size by using flexible layouts, flexible images, and CSS media queries.

Category: Web Development (also: Front End, Design)

Author: Atomic Glue Team

## Definition

Responsive design is not mobile-first or desktop-first. It is screen-agnostic-first. It is the practice of building web layouts that adapt to whatever viewport they are displayed in using three technical pillars: fluid grids (relative units like percentages, `fr`, `vw`, `vh`), flexible images (with `max-width: 100%`), and [CSS Media Queries](/glossary/media-queries) to apply conditional styles at different breakpoints. Ethan Marcotte coined the term in 2010. Before responsive design, developers built separate mobile sites (m.example.com) or used user-agent sniffing. Responsive design eliminated that fragmentation. A single codebase serves every device. The [Viewport Meta Tag](/glossary/viewport-meta-tag) makes it all possible by telling mobile browsers not to render pages at a virtual 980px width. If your site breaks when you resize the browser window, it is not responsive. And responsive design is not optional. Google uses mobile-first indexing. If your site is not responsive, your SEO is damaged.

## How it works

## Mobile-first vs. desktop-first

## Common misconception

## Note

## In code

## Common questions
Q: What is the difference between responsive and adaptive design?
A: Responsive uses fluid grids to respond continuously. Adaptive uses fixed layouts at predetermined breakpoints. Responsive is more flexible.
Q: Do I need a separate mobile site?
A: Almost never. Responsive design with a single codebase is the modern standard. Exceptions exist for apps with fundamentally different mobile use cases.

## Key takeaways

Responsive design ensures a single site works on all devices through fluid layouts and media queries.
Mobile-first approach prioritizes content and reduces code complexity.
The viewport meta tag is required for mobile browsers to respect responsive layouts.

## Related entries

Last updated June 2026. Permalink: atomicglue.co/glossary/responsive-design