A designer is adapting a three-column desktop layout for mobile. Which action best reflects responsive design thinking?
AScale all elements to one-third of their desktop size so the three columns still fit
BStack content into a single column, reordering elements so the most important content appears first
CHide all secondary content permanently on mobile to keep the layout simple
DKeep the desktop layout and add horizontal scrolling for mobile users
Responsive design means *restructuring* the layout — reordering, stacking, and prioritizing content — not just shrinking it. Option A is the classic misconception: scaling everything down produces illegible text and unusably small touch targets. Option C conflates 'hidden on mobile' with 'hidden permanently' — content may be collapsed or deprioritized, but responsive design decisions are per-breakpoint, not permanent deletions. Option D is an anti-pattern that creates a poor mobile experience.
Question 2 Multiple Choice
What are 'breakpoints' in responsive design?
ADevice-specific pixel dimensions like the exact resolution of an iPhone or iPad screen
BSpecific viewport widths at which the CSS layout rules change
CCSS bugs that are triggered when a screen is too narrow to display a layout
DThe maximum pixel width of a content container on any given device
Breakpoints are designer-defined viewport widths at which layout rules change — they are not device specifications. Designing 'for iPhone' or 'for iPad' is the wrong mental model: you are designing for *ranges of width*, and the specific device that happens to fall in that range is incidental. This distinction matters because new screen sizes appear constantly; breakpoints defined by content logic remain stable as the device landscape evolves.
Question 3 True / False
Responsive design ensures a website works well on most devices, including touch targets, performance, and gesture interactions.
TTrue
FFalse
Answer: False
Responsive design primarily addresses *layout at different viewport widths*. It does not automatically handle touch target sizing (at least 44×44px for fingers), performance (serving appropriately sized images, minimizing requests), or gesture-based interaction patterns like swipe navigation. A site can be fully responsive — its grid fluently adapts — and still be painful to use on mobile because buttons are too small to tap accurately or images take 8 seconds to load on a 4G connection. These are separate considerations that require deliberate additional work.
Question 4 True / False
Mobile-first design forces explicit prioritization decisions by requiring designers to decide what content is essential before progressively adding complexity for larger screens.
TTrue
FFalse
Answer: True
This is the core pedagogical value of mobile-first. Starting with the smallest screen means you cannot defer hard choices about information hierarchy — every element must earn its place. Desktop-first design tends to produce layouts where everything is included and then designers try to cram it into mobile retroactively, often resulting in cluttered mobile views or excessive hiding. Mobile-first inverts this: the essential version ships first, and enhancements are additive.
Question 5 Short Answer
Why is mobile-first design generally considered a better approach than designing for desktop first and then adapting for mobile?
Think about your answer, then reveal below.
Model answer: Mobile-first forces designers to confront content prioritization at the outset: with limited screen space, every element must justify its inclusion. This produces a clear information hierarchy that can then be enhanced for larger screens. Desktop-first design defers these decisions — it's easy to include everything when space is abundant — resulting in bloated layouts that are difficult to compress for mobile without either cluttering small screens or arbitrarily hiding content.
The direction of constraint matters. Constraining first and expanding later is easier than expanding first and then trying to constrain — you end up with fewer regrettable 'hide on mobile' shortcuts and more deliberate structural decisions. Mobile-first also aligns with real usage patterns, since mobile traffic frequently exceeds desktop traffic for consumer-facing products.