Re: Jonathan's concern: Zoom in responsive drops content

Gregg wrote on the topic of linearisation that:

“we can think of examples — but we haven’t yet found a ‘rule’ for what it would apply to or not that is not subjective”



I think the principle behind the examples was their 2D nature. The examples broke down to:

1.       Data tables. A spreadsheet is an editable data table, the periodic table is a complex table.

2.       2D Pictures. Maps are a 2D picture you can zoom into at various levels, games like angry birds are interactive pictures.



In both cases you would lose critical information by linearizing the elements.



I think Version 2 on the wiki [1] incorporates that with “where the spatial layout of the content is not essential to its use”.



What I’m not clear on from that wording it whether it excepts the page, or the elements on the page?



In cases where there is one element on the page that needs to maintain its layout (e.g. complex data table), you could have 80% of the page fit in the viewport, and just have that table scroll horizontally.



So rather than except the whole page, I would rather except the elements that need to maintain their special relationship. In some cases (e.g. Google maps, Angry birds) that might be the whole page, but many pages have an embedded map or canvas element that is the only thing that needs an exception.



Perhaps:

SC X.X.X If text is resized up to 300% without assistive technology, the layout of the Web page ensures that it can be viewed in its entirety without scrolling the viewport horizontally, and without loss of content or functionality except for elements of the page where the spatial layout of the content is essential to its use.



Jonathan wrote on the topic of zoom level vs resolution:

“If/when we have a better way of detecting mobile devices other than viewport width then that could be used -- but until then it seems like we'd have to pick some resolution and pixel scale combination.”



That would be tricky, but we can work from some industry defaults:

-          Mobile devices default to a “layout viewport” [2] of 900-1050px (from memory). So if a site is non-responsive (i.e. doesn’t use the meta-viewport setting) it will display zoomed out with the website layout fitting to a width of around 1000px.

-          The base level visual viewport (i.e. width of the view in CSS pixels) is generally 320px.



Note that a small-screen user agent uses the meta-viewport setting to switch from ‘layout viewport’ to ‘visual viewport’ for rendering a page, a desktop user-agent does not.



Allowing a little leeway, I think we could happily set a level of 300% (i.e. roughly 1000/320) as a level that does not require any special effort from authors beyond doing a responsive site. (It would be a lot of work for a non-responsive site, does that matter for 2.1?)



Given that, I think the test criteria could be zooming in on any desktop user-agent to 300% with a window width of 1000px.



However, we cannot apply the same to small screen devices which respect the meta-viewport setting as they automatically have horizontal scrolling when zooming. This is a user-agent problem I don’t think we can affect in the 2.1 timescale [3].



Kind regards,



-Alastair



1] https://www.w3.org/WAI/GL/wiki/Possible_wording_from_Jason/David_for_LVTF_re:_zoom_without_horizontal_scroll


2] http://www.quirksmode.org/mobile/viewports2.html


3] https://alastairc.ac/2015/10/zoom-for-fixed-and-responsive-sites/