Responsive Design Page Regions

[brewerj]

Proposed inclusion of a point regarding consistent page structure, to increase mobile-friendly coverage. Discussion welcome.

Could also add the following to "Further Resources for Page Structure" at the bottom of the page:

"From "Mobile Accessibility Mapping": https://www.w3.org/TR/mobile-accessibility-mapping/#consistent-layout"

[yatil]

I think this should go before “page header” and maybe as a sidebar call-out (which might overlap with the TOC) or calling it out with bold text for responsive design but otherwise leave it as an inline paragraph.

Content is good and important.

[bakkenb]

+1 to @yatil

[notabene]

+1 to @yatil on sidebar call-out

-1 on content relevance as referred Consistent Layout Guideline:

In responsive web design, where components are arranged based on device size and screen orientation, web pages within a particular view (set size and orientation) should be consistent in placement of repeated components and navigational components. Consistency between the different screen sizes and screen orientations is not a requirement under WCAG 2.0.

(I've bolded the relevant part)

[adding a rationale after input by @bakkenb & @slhenry ] Rationale: The guideline does not ask a designer to have the elements at the same place whatever the available size and orientation, which Page structure should be consistent across different screen sizes and orientations. implies for me (or maybe I don't understand correctly, and if so, I won't be the only one).

I would get rid of this line and would rewrite:

Components may be collapsed or even hidden on smaller screens, but components that show should appear in the same order.

As:

Components may be collapsed or even hidden on smaller screens, but components that show should appear in the same order for a particular view (set size and orientation).

To disambiguate the formulation.

[nrhsinclair]

similar suggestion to menus, something along the lines: ... but items that show should maintain consistent order and purpose across all screen sizes.

[yatil]

Thanks for the input, especially @notabene. I’ll see to add this (and addressing the concerns) once the tutorial is in the new layout.

[brianelton]

Just bringing this conversation together. Original suggestion: "Page structure should be consistent across different screen sizes and orientations. Components may be collapsed or even hidden on smaller screens, but components that show should appear in the same order." Updated suggestion: "Components may be collapsed or even hidden on smaller screens, but components that show should appear in the same order for a particular view (set size and orientation)."

I think it's worth stating that designers should TRY to be consistent across different screen sizes and orientations, even though it's not a specific WCAG requirement. There is value in having a consistent order of content if accessing the same site through desktop on one occasion and then a mobile device the next.

[brianelton]

Updated to add back in consistency between screen sizes "Components may be collapsed or even hidden on smaller screens, but components that show should appear in the same order for a particular view (set size and orientation). If possible, page structure should be consistent across different screen sizes and orientations, though not a specific WCAG requirement."

[lakeen]

+1 to adding ... "though not a specific WCAG requirement."

[brianelton]

Updates covered in #721. Closing PR.