Responsive HTML Checklist: Building Pages That Adapt

A responsive page works on small and large screens. HTML provides the structure, and CSS adapts it. Use this checklist when you build a page.

The checklist

1. Viewport tag in the head, see The Viewport.
2. Flexible images: max-width: 100%; height: auto;, with srcset for large images, see Responsive Images.
3. Fluid layout: use percentages, flex or grid instead of fixed pixel widths.
4. Readable text: at least 16 pixels for body text and comfortable line length, around 60 to 80 characters.
5. Touch-friendly controls: buttons and links about 44 pixels high, with space between them.
6. Tables that scroll instead of breaking the page, see Styling Tables.
7. Source order: put the most important content first in the HTML, so it comes first on small screens too.

A simple responsive layout

1
2
3
4
5
6
7
8
9
10
11

<style>
  * { box-sizing: border-box; }
  .cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .card { background: #f8f2ee; padding: 12px; border-radius: 8px; }
</style>
<div class="cards">
  <div class="card">Fiction</div>
  <div class="card">Poetry</div>
  <div class="card">Travel</div>
  <div class="card">Cooking</div>
</div>

Drag the browser window narrower and the cards wrap on their own.

Media queries

When a layout needs a bigger change, use a media query:

1
2
3

@media (min-width: 700px) {
  .layout { display: grid; grid-template-columns: 1fr 3fr; }
}