Responsive design adapts layouts and assets across viewport sizes. HTML supplies hooks; CSS performs layout; media queries decide breakpoints.
Viewport meta element
<meta name="viewport" content="width=device-width, initial-scale=1">- Maps CSS pixels to device-independent pixels.
- Omitting it forces legacy mobile browsers to emulate desktop widths.
- Avoid disabling user zoom unless legally justified—accessibility suffers.
Responsive images
srcset/sizeshint intrinsic widths.picturechooses art direction per breakpoint.loading="lazy"conserves bandwidth below the fold.
Responsive typography
Use fluid CSS (clamp) rather than duplicating markup per breakpoint.
Touch targets
HTML cannot enforce sizes—CSS must ensure interactive elements meet minimum hit areas on phones.
Often neglected details
- Dynamically injecting
viewporttags after hydration can cause reflow jitter—SSR should emit final meta. - Forced colors / Windows high contrast—media queries complement semantic HTML separation; decorative-only breakpoints still need structure.
Example — srcset + sizes
<img
src="/images/img_8124.webp"
srcset="/images/car-with-man.jpg 640w, /images/img_8124.webp 1280w"
sizes="(max-width: 600px) 100vw, 720px"
width="1280"
height="960"
alt="Course sample photos: wide landscape (1280px WebP) versus smaller 16:9 JPG for narrow slots."
loading="lazy"
>Rendered — real files from /public/images (640w vs 1280w candidates)
Open DevTools → Network and resize the window: the browser should favour the 640 px-wide asset on small viewports when sizes is honoured.
Mobile-first preview checks (expected candidate)
Use this quick matrix while resizing in DevTools. Focus on the request URL and transferred bytes in Network.
| Viewport width | sizes result |
Likely chosen candidate | What to verify |
|---|---|---|---|
| 360px | ~360 CSS px | /images/car-with-man.jpg (640w) |
Request should be the smaller file for narrow screens. |
| 600px | ~600 CSS px | /images/car-with-man.jpg (640w) |
Still near breakpoint; large candidate usually unnecessary. |
| 1200px | ~720 CSS px (per sizes) |
/images/img_8124.webp (1280w) |
High-density displays may prefer bigger candidate for crispness. |
If your browser keeps downloading the larger file at small widths, re-check sizes first—most real-world regressions start there.
Example — <picture>
<picture>
<source media="(min-width: 900px)" srcset="/images/black-golden-retriever-with-a-blue-dummy.webp" type="image/webp">
<img src="/images/car-with-man.jpg" width="640" height="360" alt="Car with a person next to it in a parking-style scene." loading="lazy">
</picture>Rendered — wide viewports show the dog photo; smaller ones keep the 16:9 car frame
Important interview questions and answers
- Q: What is the practical difference between `id` and `class`?
A: `id` must be unique and is used for fragments/labeling; `class` is reusable for styling and behavior grouping. - Q: Why is `defer` commonly preferred for scripts?
A: It preserves HTML parsing, executes after parse, and avoids blocking rendering unlike classic synchronous scripts. - Q: How do `srcset` and `sizes` work together?
A: `srcset` provides candidate files and `sizes` tells expected rendered width so the browser can pick an optimal resource.
Tip: Content order in HTML should make sense before CSS reorders visually.