Andromeda
Note

Responsive Web Development

Definition

A design and development strategy that serves one HTML document to all devices and uses fluid grids, flexible images, and CSS media queries to adapt layout to viewport size—replacing separate mobile (m-dot) sites.

Why It Matters

The ‘Mobile Web’ is no longer a separate destination; it is the default. If your design doesn’t adapt to the viewport, you are invisible to over 60% of your audience. Responsive design is the ‘Universal Translator’ for digital interfaces.

Core Concepts

  • One HTML, One URL: Same source for phone, tablet, and desktop avoids duplicate maintenance.
  • Flexible Grid: Percentage widths, Flexbox, or CSS Grid resize layouts proportionally.
  • Flexible Images: max-width: 100% prevents images from overflowing containers.
  • Media Queries: Conditional CSS rules based on min-width, max-width, orientation, or resolution.
/* Example Media Query */
.container { width: 100%; }

@media (min-width: 768px) {
  /* Desktop layout styles */
  .container { width: 80%; margin: 0 auto; }
}
  • Content-Out Breakpoints: Set breakpoints where content breaks, not at specific device widths.
  • M-dot Sites: Separate mobile URLs (e.g., m.twitter.com)—higher maintenance, largely superseded.

Connected Concepts

Connected notes