Note 05 · Layout
Read the page in a narrow window
A small screen reveals assumptions that a wide desktop can conceal. Test the same reading task at both sizes instead of designing a separate miniature page.
Let the text set the pace
Use a flexible content width with a comfortable upper limit. At a narrow size the column should shrink within the viewport and retain useful side padding. A large heading may wrap onto several lines; let it do so without covering navigation or pushing the reader into horizontal scrolling.
Keep controls within reach
Navigation can wrap onto another line when space is limited. Leave enough separation between adjacent links to choose one reliably. Avoid hiding essential navigation behind an interaction when a short row of ordinary links can remain visible. Test keyboard focus as well as pointer use.
Repeat a real reading task
Open a content page, follow a section link and move to the next article. Increase the text size and check whether the route still works. A balanced screenshot is useful, but completing the reading task reveals more than inspecting an empty layout at a particular device width.