A designer takes a three-column desktop website layout and uses CSS to scale it to 40% of its size for mobile. What problem does this create?
AThe page will load too slowly because CSS transformations are computationally expensive on mobile
BThe three-column layout will become unreadable at mobile scale; responsive design requires restructuring to a single column with adapted navigation and reprioritized content
CMobile screens have different color gamuts, making a scaled desktop design visually incorrect
DThis is a correct approach — CSS scaling is the standard responsive design technique
The core misconception this topic addresses is that responsive design means 'shrinking' desktop layouts. A three-column layout scaled to 40% produces unreadably small text and collapsed visual hierarchy. Responsive design requires structural adaptation at breakpoints: columns collapse, navigation reorganizes, and content is sequenced and prioritized for the smaller context. Different scales are fundamentally different design contexts, not smaller versions of the same one.
Question 2 Multiple Choice
A designer creates a completely separate, independent website design for desktop and another for mobile. Her manager says this misses the point of responsive design. Why?
AResponsive design requires a single system of rules (flexible grids, fluid images, breakpoints) that adapts across contexts — not separate independent designs, which double maintenance burden and defeat systematic flexibility
BThe manager is wrong — separate designs for desktop and mobile are the industry standard approach
CThe only issue is that she designed desktop-first; if she had designed mobile-first, two separate designs would be acceptable
DSeparate designs are fine as long as they share the same color palette and typeface
Responsive design is about a single design system that produces appropriate compositions at every scale through breakpoint logic, flexible grids, and fluid images. Creating two independent designs sidesteps the systematic thinking that responsive design demands, doubles the maintenance work, and creates consistency risks as content evolves. The designer's job is to define rules and relationships — not to craft separate fixed compositions for each device.
Question 3 True / False
Responsive design primarily means adjusting font sizes to be smaller on mobile screens.
TTrue
FFalse
Answer: False
Responsive design involves structural adaptation: multi-column layouts collapse to single columns, navigation patterns change (horizontal nav to hamburger menu), content is hidden or resequenced, and information hierarchy is restructured. Typography is one element that adapts, but the architectural decisions about layout and content priority are equally or more significant. Thinking of responsiveness as 'font scaling' misses the substantive editorial and structural work that breakpoints demand.
Question 4 True / False
A heading set at 48px on desktop might need to be 28px on mobile — not because it should proportionally shrink, but to preserve its role in the visual hierarchy relative to body text and the viewport.
TTrue
FFalse
Answer: True
The Explainer makes this point directly: responsive typography is about maintaining relationships between elements across contexts, not proportional scaling. 48px on a phone-screen viewport would dominate the entire screen and collapse the visual hierarchy. The correct size is whatever produces the right heading-to-body relationship and weight at that scale — which is often not a proportional reduction.
Question 5 Short Answer
A breakpoint is more than a threshold for rearranging columns. What design decision does a breakpoint force the designer to make, and why does this matter?
Think about your answer, then reveal below.
Model answer: A breakpoint forces a decision about information priority: what does the user need first? What can wait? What can be omitted entirely at this scale? On a wide screen, content can sit side-by-side with visual equality. Collapsing to a single column for mobile forces the designer to sequence everything vertically — and that sequencing is a statement about relative importance. Content hidden behind an expandable section on mobile is being declared secondary. The breakpoint is where responsive design becomes an editorial decision, not just a visual one.
This is the deeper point about what responsive design actually demands of a designer. It is not a purely technical task of applying CSS rules; it is a forced reckoning with what matters in a design at each scale. The designer who has clearly thought through information hierarchy for all contexts will make coherent breakpoint decisions; the one who hasn't will produce arbitrary collapses that confuse users.