Layout that follows content and input, not device names

Every arrangement on the web answers two questions. The spatial question is how much room a container has and how the content wants to divide it. The physical question is what the reader is holding and what is doing the reading. Phone, tablet and desktop once tracked both answers together, and one device name answered both. That tracking now fails. A projector and a phone can share a width while offering different pointers, and one phone can be read with a thumb, a stylus, a magnifier or an ageing hand. Space and input modality determine a usable arrangement, and a device name collapses the two. The strongest counter to this unit's thesis is that space is the only variable the document can observe. Trewin (2006) argues that one device-independent design already covers mobile and physically impaired users together. The units before it settled what a declaration means and who resolves it. This one arranges what it produces.

The named device is a fiction the layout cannot observe

Media Queries Level 5 defines no device names. Its interaction features answer the physical question directly. The pointer feature, with values none, coarse and fine, queries the presence and accuracy of a pointing device. The hover feature queries whether the primary device can hover (W3C, 2021). Capability is published beside width rather than derived from it.

Work one device. A convertible laptop reports a fine pointer and hover when its trackpad is the primary input. It reports a coarse pointer with no hover when its touchscreen is, and the viewport width does not change. A width breakpoint lays the page out the same way for a thumb and for a cursor. A pointer query can tell them apart, though the specification leaves the choice of primary device to the user agent (W3C, 2021).

Trewin (2006) compared design for physical ease of access on the web with design for physical ease of use on mobile. She found marked differences in the interaction techniques and the problems met, and people who have physical impairments tend to a broader range of needs. She argues that shared mobile and accessibility guidelines would cover both.

Two layout models answer two different questions about the same content

Grid is a two-dimensional layout system: its children are positioned into arbitrary slots in a flexible or fixed-size grid (W3C, 2023). Flexbox lays items linearly along a single main axis, or wrapped along a cross axis. It lets them flex their sizes to fill unused space or avoid overflowing the parent (W3C, 2018).

Work the choice on two real containers. A page whose sidebar sits beside a main column is a two-dimensional problem, because the two widths depend on each other. Grid answers it, declared as a fixed first column and a flexible second. A strip of tags that shares the width and wraps when it runs out is one-dimensional. Flex answers it, and each tag flexes its width along that single row. The models fail differently. A flex row has no column track to hold a sidebar at a fixed width, and a grid on the tag strip imposes column widths the tags did not need.

Grid settles a boundary that device-named layout crosses. Non-visual media present content linearly. Placement and ordering features must not be used for logical reordering, because the visual order is not always the reading order (W3C, 2023).

Containment moves the reference frame from the device to the slot

The specification level that carries this is CSS Containment Level 3. Its container-type property establishes a query container. Rules for its descendants can then be conditioned on it with the @container rule, so one component renders differently in a sidebar and in a wide column (W3C, 2022).

Work one component in two slots. A card sits in a narrow sidebar on one page and a wide main column on another, while the viewport width is unchanged. A media query keyed to the viewport cannot tell the two apart, so it styles the card identically. A container query can, because setting container-type on the wrapper conditions the card's rules on the wrapper's width rather than the window's. The card stacks in the sidebar and stays side by side in the column (W3C, 2022).

Space is not the whole input

The input side is a separate question with its own evidence. Parhi, Karlson and Bederson (2006) ran two phases on small touchscreens. The first covered discrete pointing tasks such as activating a button, and the second covered serial tap sequences such as text entry. They varied target positions, because one-handed holding constrains the thumb. Error rates did not differ significantly at 9.6 mm or above in the discrete tasks, or 7.7 mm in the serial tasks. The authors recommend 9.2 mm and 9.6 mm, which is larger than recommendations derived from stylus and two-handed use.

Okada and Akib (2010) tested Fitts's index of difficulty against pointing data from widgets varying in size and distance. It did not capture difficulty consistently across designs scaled together. Two regression models on distance and width fitted the small touch screen better, with width affecting difficulty more than distance.

When the screen is not the display

Billah and colleagues (2018) take the failure that a viewport-shaped layout produces for a reader who zooms. Screen magnifiers occlude large parts of a page and break the spatial locality that carries semantic relationships. Their interface uses content semantics with a physical dial. A study with 15 low-vision participants reported browsing efficiency at least 20 per cent better than with existing magnifiers.

Tang and colleagues (2023) compared lens and full-screen magnification with twenty low-vision participants. They found no significant difference in reading performance or preference. Mouse motion differed, with longer and more frequent pauses under full magnification. Stearns, Findlater and Froehlich (2018) tested augmented reality magnification on a head-worn display with seven visually impaired participants. Those participants named portability, privacy and ready availability as advantages of head-worn magnification.

Reading is a movement problem

Braganza and colleagues (2009) compared the two models on the reading task. Twenty-four participants read two short stories on a standard monitor. One story used a multi-column layout with horizontal scrolling, and the other a single column with vertical scrolling. They answered questions about each, with interaction logged and eye tracking used to locate attention. One third were more comfortable with the horizontal layout and two thirds with the vertical. Reading and question-answering performance was similar, while the horizontal layout cost less scrolling time and fewer actions (p = .01 and p < .001). Movement changed and comprehension did not, and preference tracked familiarity.

Contested question: is a usable arrangement a function of space or of the input?

Two positions sit inside this unit's sources. The space position holds that a layout is a function of available space, and that capability differences are best handled by making the document device-independent. Container queries let a component be styled from its own container (W3C, 2022).

The modality position holds that the same space is a different interface under a different limb or reading apparatus. The platform publishes pointer and hover as features of their own (W3C, 2021). The recommended target size for a thumb exceeds the recommendation derived from a stylus (Parhi et al., 2006). Fitts's index of difficulty does not capture difficulty consistently across screen sizes (Okada and Akib, 2010). The thing that reads the page may be a magnifier window or a head-worn display (Billah et al., 2018; Stearns et al., 2018). If that position holds, a container-relative layout with no modality query has a ceiling. It fits the space and still misses the hand.

No source here varies both variables, which is why the question stands. Parhi and colleagues vary target size and position but not the layout around them. Braganza and colleagues vary the layout and hold the input arrangement constant. Tang and colleagues and Billah and colleagues compare magnification interfaces rather than layouts. What would settle it is a study that fixes content and viewport size, varies only the input arrangement between a thumb, a mouse and a magnifier, and measures error, time and recovery on the same layout in each condition.

While the question is open, a designer should key the layout to the container and the input separately. Size each component from its container, so it fits the slot it lands in, and add a pointer or hover query only where the interaction genuinely differs. Keep every target large enough for a thumb, because the one-handed study sets the larger number.

Where the argument is heading

Two directions are visible in named work. The first moves the layout's reference frame from the viewport to the component. Oliinyk and colleagues (2026) analyse @layer, @scope and container queries together. They propose criteria for judging CSS quality under iterative development, and they argue that combining the three can reduce hidden dependencies, given architectural discipline and automated checks. The second moves the input side from the device to the reading apparatus, with head-worn magnification still a design exploration (Stearns et al., 2018). One named gap stays open. The models Okada and Akib (2010) fitted to a small touch screen did not work on a large screen. If the first direction continues, the modality queries stay, because they answer a question about the person that no container can answer.

The sources this unit rests on

• W3C (2023). CSS Grid Layout Module Level 1. W3C Candidate Recommendation Draft, 26 March 2025. https://www.w3.org/TR/css-grid-1/ It defines a two-dimensional layout system in which children are placed into slots in a flexible or fixed-size grid, and forbids logical reordering with placement features so non-visual media can rely on source order. It states what the model must do rather than what it costs a reader.
• W3C (2018). CSS Flexible Box Layout Module Level 1. W3C Candidate Recommendation, 19 November 2018; Candidate Recommendation Draft, 14 October 2025. https://www.w3.org/TR/css-flexbox-1/ It describes a box model in which flex children are laid out linearly along a single main axis or wrapped along a cross axis, and can flex their sizes to fill unused space. It is the authority for flexbox as the one-axis, content-driven model.
• W3C (2022). CSS Containment Module Level 3. W3C Working Draft, 18 August 2022. https://www.w3.org/TR/css-contain-3/ It defines query containers and the @container rule, so rules for a container's descendants can be conditioned on its size, with container-type establishing the container. That makes a component's own slot a styling input, though the document diffs Level 2 and remains a working draft.
• W3C (2021). Media Queries Level 5. W3C Working Draft, 19 February 2026. https://www.w3.org/TR/mediaqueries-5/ It defines the interaction features pointer, with values none, coarse and fine, for a pointing device's presence and accuracy, and hover for the primary device's ability to hover. It also states that it does not define how a user agent decides which device is primary.
• Parhi, P., Karlson, A. K. and Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. Proceedings of the 8th conference on Human-computer interaction with mobile devices and services. doi:10.1145/1152215.1152260 A two-phase study covered discrete pointing and serial tap tasks for one-handed thumb use, with target positions varied. Error rates stayed stable above 9.6 mm in discrete tasks and 7.7 mm in serial tasks, and the recommended sizes exceed stylus and two-handed recommendations.
• Tang, M., Manduchi, R., Chung, S. and Prado, R. (2023). Screen Magnification for Readers with Low Vision: A Study on Usability and Performance. The 25th International ACM SIGACCESS Conference on Computers and Accessibility. doi:10.1145/3597638.3608383 Twenty participants with low vision read text and web pages on a laptop with lens and full-screen magnification. Reading performance and preference did not differ significantly between the modes, while mouse motion did, with longer pauses under full magnification.
• Billah, S. M., Ashok, V., Porter, D. E. and Ramakrishnan, I. (2018). SteeringWheel. Proceedings of the 2018 CHI Conference on Human Factors in Computing Systems. doi:10.1145/3173574.3173594 The paper argues that magnifiers occlude large parts of a page and break the spatial locality that carries semantic relationships, and presents an interface using content semantics with a physical dial. A study with 15 low-vision participants reported browsing efficiency at least 20 per cent better than existing magnifiers.
• Stearns, L., Findlater, L. and Froehlich, J. E. (2018). Design of an Augmented Reality Magnification Aid for Low Vision Users. Proceedings of the 20th International ACM SIGACCESS Conference on Computers and Accessibility. doi:10.1145/3234695.3236361 An iterative design process with seven visually impaired participants tested augmented reality magnification on a head-worn display. Participants named portability, privacy and ready availability as advantages of head-worn magnification.
• Braganza, C., Marriott, K., Moulder, P., Wybrow, M. and Dwyer, T. (2009). Scrolling behaviour with single- and multi-column layout. Proceedings of the 18th international conference on World wide web. doi:10.1145/1526709.1526821 Twenty-four participants read two short stories on a standard monitor, one in a multi-column horizontal-scroll layout and one in a single vertical-scroll column, with interactions and gaze logged. The horizontal layout cost significantly less scrolling time and fewer actions while performance was similar.
• Okada, H. and Akib, T. (2010). Fitts' Law Index of Difficulty Evaluated and Extended for Screen Size Variations. User Interfaces. doi:10.5772/9496 The chapter tests Fitts's index of difficulty against pointing data for widgets varying in size and distance, finding it does not capture difficulty consistently across designs scaled together. Two regression models on distance and width fitted the small touch screen better, and they did not work well on a large screen.
• Oliinyk, R., Chaban, O., Plesha, V. and Zayac, I. (2026). Research on the impact of @layer, @scope and container queries on css code modifiability and testability in agile-oriented frontend development. Computer Technologies of Printing. doi:10.32403/2411-9210-2026-1-55-78-95 The article analyses @layer, @scope and container queries for iterative front-end work, and proposes criteria for judging CSS quality: selector specificity, overrides and locality of change. It argues the three can reduce hidden dependencies, given architectural discipline and automated checks.
• Trewin, S. (2006). Physical usability and the mobile web. Proceedings of the 2006 international cross-disciplinary workshop on Web accessibility (W4A). doi:10.1145/1133219.1133239 The paper examines the overlap between design for physical ease of access on the web and on the mobile web, reporting marked differences in the interaction techniques and problems met. It argues that device independence serves both, though it is an analysis of guidance rather than a study.