Catalog
concept#Architecture#Software engineering#Delivery#Product

Responsive Design

Design principle for adapting user interfaces to different screen sizes and devices.

Responsive design is a design paradigm for websites and applications that adapts layout, content, and interaction to varied screen sizes and input devices.
Established
Medium

Classification

  • Medium
  • Technical
  • Design
  • Intermediate

Technical context

Content management system (CMS) for delivering adaptive contentImage optimization pipeline (e.g., image service layer)Design system repository (tokens and components)

Principles & goals

Think mobile-first: prioritize content and progressively enhance.Use flexible layouts instead of fixed pixel values.Consider performance and accessibility as integrated criteria.
Build
Team, Domain

Use cases & scenarios

Compromises

  • Degraded performance with unoptimized resource management.
  • Inconsistent rendering due to missing breakpoint strategy.
  • Accessibility issues if touch and keyboard interactions are not considered.
  • Develop mobile-first and progressively enhance.
  • Use a design system for reusable components.
  • Regularly measure real-user metrics for validation.

I/O & resources

  • Analytics data on device types and screen sizes
  • Design system and component library
  • Performance and accessibility goals
  • Responsive component library
  • Test suite for multiple viewports
  • UX metrics per device type

Description

Responsive design is a design paradigm for websites and applications that adapts layout, content, and interaction to varied screen sizes and input devices. It employs flexible grids, media queries, and relative units to maintain usability and performance across mobile phones, tablets, and desktop displays.

✔

  • Consistent user experience across devices.
  • Lower maintenance due to a single codebase for multiple viewports.
  • Improved SEO and performance outcomes on mobile devices.

✖

  • Not all interactions translate 1:1 between touch and desktop.
  • Complex layouts can incur high development effort.
  • Legacy codebases require incremental refactoring.

  • First Contentful Paint (mobile)

    Measures time to first visible content on target devices.

  • Time to Interactive

    Time until the page becomes fully interactive.

  • Bounce rate by device type

    Share of sessions without interaction per device type.

Fluid grid example

A layout using percentage-based columns that adapt to container width.

Media query strategy

Defined breakpoints for content layout and typography adjustments.

Component-first approach

Develop responsive UI components in isolation and reuse across the product.

1

Analyze user devices and define breakpoints.

2

Establish a flexible grid system and responsive components.

3

Implement media queries and relative units.

4

Performance optimization (images, lazy-loading, minification).

5

Establish tests for various viewports and devices.

⚠️ Technical debt & bottlenecks

  • Monolithic CSS without modularization hinders scaling.
  • Unoptimized image assets increase load times long-term.
  • Missing design tokens make consistent adjustments difficult.
Legacy CSS specificationsInsufficient image optimizationMissing test coverage for device classes
  • Adjust only isolated elements without a global grid.
  • Deliver images non-responsively and load large assets.
  • Too many or inconsistent breakpoints across components.
  • Assuming identical usage patterns across all devices.
  • Neglecting touch target sizes.
  • Lack of tests on real low-end devices.
HTML/CSS flexbox and grid expertiseKnowledge of performance optimizationAccessibility and usability principles
Responsive requirements derived from user analyticsPerformance budgets for mobile connectionsDesign system with reusable components
  • • Support for legacy browsers limits use of modern CSS features.
  • • Design system constraints regarding typography and spacing.
  • • Performance budgets and user network conditions.