Responsive Web Design: Fluid Layouts, Mobile First and Flexible Images

People visit websites on phones, tablets, laptops and large monitors. Responsive design means one website whose layout adapts to whatever screen it is shown on, instead of separate mobile and desktop sites.

The three ingredients#

Responsive design rests on three ideas:

1. Fluid layouts that use relative sizes instead of fixed pixel widths.
2. Flexible images and media that shrink with their container.
3. Media queries (and container queries) that adjust the layout at certain sizes.

And one prerequisite in the HTML:

<meta name="viewport" content="width=device-width, initial-scale=1">

Without it, phones render the page at a desktop width and zoom out, and none of the CSS below behaves as intended (The head Element).

1. Fluid layouts#

Avoid fixed widths for containers. Combine percentages or fr with max-width:

.container {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 1rem;
}

The container fills small screens (with some padding) and stops growing on large ones.

2. Flexible images#

img, video {
  max-width: 100%;
  height: auto;
}

Images never overflow their container and keep their proportions. For serving smaller files to small screens, use srcset (Responsive Images).

3. Layouts that adapt#

Modern layout tools adapt without media queries when you let content decide:

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.features div { padding: 14px; border: 1px solid #ddd; border-radius: 8px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

<div class="features">
  <div><h3>Fast</h3><p>Static pages load quickly.</p></div>
  <div><h3>Accessible</h3><p>Works with keyboards and screen readers.</p></div>
  <div><h3>Responsive</h3><p>Fits every screen.</p></div>
</div>
<div class="toolbar"><button>Share</button><button>Save</button><button>Print</button><button>Report</button></div>

Narrow your browser window: the grid drops to fewer columns, and the toolbar wraps, with no breakpoints at all. This is sometimes called intrinsic design.

Mobile first#

Mobile-first CSS writes the base styles for small screens, then adds layout for larger screens with min-width media queries:

/* Base: phones. One column. */
.layout {
  display: grid;
  gap: 1rem;
}

/* Larger screens: add a sidebar. */
@media (min-width: 768px) {
  .layout {
    grid-template-columns: 240px 1fr;
  }
}

Why mobile first:

• Small-screen styles are usually simpler (one column), so the base CSS stays small.
• Larger screens add layout instead of undoing it.
• It encourages focusing on the content that matters most.

Choosing breakpoints#

A breakpoint is the width at which a media query changes the layout. Choose breakpoints where your content starts to look wrong, not by device names. Slowly widen the browser window: when lines get too long or there is room for another column, add a breakpoint there. Common starting values are around 640px, 768px, 1024px and 1280px, but they are only a starting point.

More than layout#

• Typography: let headings scale with the screen, within limits, using clamp() (calc, min, max and clamp).
• Touch targets: buttons and links should be big enough to tap. WCAG 2.2 sets a minimum of 24 × 24 CSS pixels, and about 44 × 44 is a common recommendation for comfortable tapping.
• Hover: there is no hover on touch screens, so never hide essential controls behind :hover.
• Tables and wide content: let them scroll horizontally (Overflow).

Testing#

• Use your browser's device toolbar (in Chrome and Edge, open the developer tools and press Ctrl+Shift+M) to preview many screen sizes.
• Drag the window width slowly from narrow to wide and look for broken layouts.
• Test on at least one real phone: touch, real fonts and real performance differ from emulation.
• Zoom to 200% on a desktop; the layout should adapt as if the screen were smaller.

Practice#

.page {
  max-width: 1100px;
  margin-inline: auto;
  padding: 1rem;
  display: grid;
  gap: 1rem;
}

@media (min-width: 800px) {
  .page {
    grid-template-columns: 1fr 280px;
  }
  .page header {
    grid-column: 1 / -1;
  }
}

<div class="page">
  <header>...</header>
  <main>...</main>
  <aside>...</aside>
</div>

Key takeaway#