Technical communities · SINGAPORE
Singapore UX critiques: test reflow at 320 CSS pixels
Prepare a reproducible zoom-and-viewport comparison, distinguish ordinary text from content needing two-dimensional layout, and bring a precise reflow question to critique.
By Boardzip · Published
Boardzip uses AI-assisted guide research, writing and review. Read how we research guides and check sources →
Start with these checks
- Working interface or clearly scoped layout exercise accepted
- Viewport and browser zoom can be recorded
- Content and task controls can be compared before and after a change
The problem
Your design looks tidy on a mobile screenshot, but enlarged browser views may hide information or require side-to-side reading, and you need evidence a UX critique can actually examine.
Check reading and task completion at the narrowed viewport
For ordinary vertically scrolling web content, begin with this question: at a width equivalent to 320 CSS pixels, can someone read the content and use its functions without losing information or repeatedly scrolling sideways to read lines? WCAG 2.2 Success Criterion 1.4.10 includes an exception for content that needs a two-dimensional layout for usage or meaning. W3C's Understanding document explains that distinction. Use it to prepare a specific reflow observation for a Singapore UX or accessibility critique. A mobile screenshot or a zoom percentage alone does not show whether the relevant content and controls remain usable. This worksheet develops that observation; it is not a whole-site conformance assessment.
- W3C: Understanding WCAG 2.2 Success Criterion 1.4.10, Reflow ↗ · Source checked
Record the actual CSS viewport
Choose a permitted working example with invented inputs and name a short task, such as reading a booking condition and reaching its review control. Record interface version, browser, initial CSS viewport, zoom setting and resulting CSS viewport using the browser's available inspection tools. W3C gives a 1280-CSS-pixel-wide starting viewport at 400% zoom as an equivalence example for 320 CSS pixels. Your display's pixel resolution is not the same measurement: browser controls and the window size affect the available viewport. A 400% setting on another starting width therefore does not establish the intended width. Save the measurements with the observation so a reviewer can reproduce its conditions.
- W3C: Understanding WCAG 2.2 Success Criterion 1.4.10, Reflow ↗ · Source checked
Follow the same content and controls through the task
Make one row per relevant region: what the person needs to read or operate; its presentation at the recorded width; any lost information or function; horizontal movement needed to read ordinary lines; and the evidence captured. Read the condition, open any required disclosure and find the next control. A layout can look uncluttered because it has hidden an essential explanation, so inspect availability as well as wrapping. Take an annotated screenshot or short permitted recording of the affected state and note the exact text or action involved. If a collapsed menu still provides the original choices, a changed arrangement is not automatically lost functionality. Review the actual task instead of comparing visual similarity alone.
Separate a table's layout from the paragraphs around it
Consider an invented room-booking page with a multi-column timetable and a paragraph explaining cancellation terms. At the recorded 320-CSS-pixel width, the table needs horizontal movement to inspect its row-and-column relationships. That can fall within the criterion's two-dimensional-layout exception. If the ordinary cancellation paragraph also extends beyond the view and needs side-to-side scrolling for each line, the table does not give that paragraph an exception. A useful revision could put the table in its own scrollable region while letting the surrounding prose wrap. Individual table cells still need to meet reflow unless their own content requires two-dimensional layout. The example supplies a design question, not a test result for a real booking service.
- W3C: Understanding WCAG 2.2 Success Criterion 1.4.10, Reflow ↗ · Source checked
Inspect the content behind a horizontal scrollbar
A page-level horizontal scrollbar is a clue to investigate, not an automatic failure. W3C explains that excepted content may cause that scrollbar while the ordinary content still reflows. Identify what actually requires sideways movement: a map, a table, a paragraph, a control or another region. Prefer limiting unnecessary movement where the design permits it, but do not claim that a local scroll container is the only conforming design. Likewise, a design with no horizontal scrollbar may still have lost content or functionality. Keep the affected region and its reading or operating requirement in your record. This makes the critique about the barrier instead of the mere presence of a browser control.
- W3C: Understanding WCAG 2.2 Success Criterion 1.4.10, Reflow ↗ · Source checked
Bring a comparison a reviewer can examine
Prepare the task, recorded viewport and zoom, original state, proposed revision and the remaining question. In the invented timetable example, a later supplied view might show the paragraph wrapping and the table scrolling within its own region. That view supports a comparison of those layout states; an actual task check is still needed to establish that the required information and controls remain available. Choose a session that accepts a working example or explicitly scoped implementation question. A static portfolio critique can discuss a layout proposal while leaving browser behaviour untested. Ask whether participants can inspect the recorded reflow state and compare the revision under the same conditions.
Keep reflow, text resizing and keyboard checks distinct
W3C discusses overlap with Resize Text, whose enlargement requirement is at least 200%. Reflow concerns presentation within the specified viewport conditions; a single 200% text check does not settle it. Keep each observation under the question it actually examines. After a critique, save the changed layout, measurements, content or function rechecked, and issues still open. Use the keyboard-path guide when controls are hard to locate or operate, and the persistent-label guide when narrowing leaves field meaning unclear. Search Boardzip for accessibility or design sessions once the comparison is ready, then verify the advertised activity and participation terms. A useful scoped finding can improve the next design decision without certifying every page or user experience.
- W3C: Understanding WCAG 2.2 Success Criterion 1.4.10, Reflow ↗ · Source checked
Questions and answers
Does a clean 375-pixel mobile screenshot prove reflow?
It shows that captured state at its conditions. It does not establish presentation at the criterion's 320-CSS-pixel width for vertically scrolling content, availability of unseen controls or the result of the full task. Record the actual viewport and examine those questions.
Does every horizontal scrollbar mean failure?
No. Determine which content causes it and whether that content needs two-dimensional layout. Excepted content may cause page-level scrolling while ordinary content still reflows. Check information and functionality as well as scrolling.
Is zooming to 400% enough for this check?
Record the resulting CSS viewport. A 1280-CSS-pixel-wide starting viewport at 400% is W3C's equivalence example; other starting sizes and browser arrangements differ. The percentage alone establishes neither the target width nor a conforming result.
What if the content is designed to scroll horizontally?
The criterion separately specifies a height equivalent to 256 CSS pixels for horizontally scrolling content. This guide's worked example uses ordinary vertically scrolling content and the 320-CSS-pixel width condition. Use the requirement appropriate to the content being examined.
Can a static prototype prove the revised page reflows?
It can explain a layout proposal. Use an appropriate working implementation and recorded browser conditions for an observation about actual reflow, available content and controls. A critique's agreement does not supply missing implementation evidence.
Sources and further reading
These references provide the guide’s source context and further reading. They do not confirm a current event, admission or an available place; check each listing’s organiser terms for those conditions.
Each date belongs to the linked source check. These references provide source context; a recorded date does not by itself establish a completed independent review. Current event admission is checked separately in each listing. How to read the source dates →
Current listings to check
Topic matches from the verified Singapore feed. A matching topic does not confirm audience suitability, accessibility or available places; read the organiser’s terms.
No current verified listings match this guide’s search terms. Try a broader search or suggest an organiser we should check.
Browse the broader event category →Suggest a relevant organiser →