Tech fitting labels inputs viewport

[jake-abma]

New technique for Using Fitting Labels and Inputs for Reflow, you can preview Using Fitting Labels and Inputs for Reflow, and there is an associated example page.

[jake-abma]

• paragraph starting "Layouts..." changed
• Removed: "Medium complex"

[jake-abma]

#510 related

[alastc]

Hi Jake,

Now that we have the working-examples folder setup ok, you can create examples in the same branch. I think it stops a lot of the faffing...

[alastc]

Hi Jake, other branch merged into this (so this one is remaining open) and a few little wording updates applied.

[alastc]

Just noting for @allanj-uaag, @rachaelbradley and @lauracarlson that the example has been combined into this PR, so comments from #510 apply here.

I think the comments have been addressed, but worth checking.

[mbgower]

Since the comment field is missing for this technique in the Survey, I'm putting comments here.

In the title, I think the "width" "max-width" and maybe "flexbox" should be in code tags.

Second paragraph, for the text

including in one-column layouts where it would cause scrolling.

Add "horizontal" to read "...cause horizontal scrolling."

For first example, the text

without requiring scrolling in more than one direction

replace "scrolling in more than one direction" with "horizontal scrolling". I believe the technique is sufficiently restricted that it only applies to preventing horizontal formatting, and thus can be specific here. (But on a side note, how about instead of saying 'in more than one direction' we say 'on more than one plane' which is more accurate and less confusing, at least for me).

and for the text

as replaced elements like the select have intrinsic sizing.

replace "like" with "such as" and put "select" inside a code tag

The test is backwards, and also needs to be reworded NOT to check (that is done in the check)

For horizontally scrolling content, check that all labels and inputs fit in their available space without vertical scrolling

should be

For vertically scrolling content, all labels and inputs fit in their available space without horizontal scrolling

For the working example, I think the title could be better. Maybe 'Adjustable Labels and Inputs for Reflow'. I also think there could be a bit of an instruction at the end of the first paragraph. Just add the two first steps in the procedure"
"Display the web page in a user agent capable of 400% zoom and set the viewport dimensions (in CSS pixels) to 1280 wide and 1024 high. Zoom in by 400%."

[alastc]

@michael-n-cooper I think it's ready. I did a test build, updated the file names, and updated the understanding document. Please merge if it's ok, comment if there's anything I missed.