Mobile friendly tabbed pages

[domenic]

On top of #153; you'll want to just look at the last commit.

A productionized version of this would need to:

• Update all other static pages that reference /style/tabbed-pages with this new format
• Update the policy-template.html and regenerate the policies
• Update participate.whatwg.org

We might also want to consider bumping up all the heading levels given this structure?

Preview at https://whatwgorg-zztzaeblsl.now.sh/faq.html (.html added for demo purposes only)

[annevk]

Comments on preview:

• Entire link block should be clickable.
• Underlining the current page is confusing (makes it look like a link).
• Could be a bit more padding on the sides. Text seems very cramped.
• Heading ("WHATWG FAQ") doesn't look great.

[domenic]

As before, concrete suggestions would be quite helpful. I am especially unsure on how to indicate the current page, or how to fix "not great" on the heading.

[annevk]

There's another problem here, you have an <a> without actual content <img alt>. That's not accessible. It would make more sense if that link wrapped the <h1> too (or at least the contents).

[snuggs]

This is coming along splendidly!

@domenic FWIW now --alias whatwgorg.now.sh should allow removal of instance identifier in demo urls. Only noticed because there were two urls and I don't know if both contain different features.

If intent is to keep them separated then understandable. I just remember wanting that feature about a year or two ago and didn't realize it existed.

Lastly, @annevk unless i'm missing something I thought the alt attribute was for that very purpose. Could we get away with a title attribute on the anchor link?

[snuggs]

Oh I see. Blank alt="" https://github.com/whatwg/whatwg.org/pull/154/files#diff-359715de9839ccbef951b959f3ec8150R153

[domenic]

Fixed a decent amount except "Heading doesn't look great". New preview at https://whatwgorg-njxxzgcprg.now.sh/faq.html . (@snuggs, I use distinct URLs on purpose so you can see what's changed between revisions.)

[foolip]

Screenshot from Pixel 2, text is cropped:

[annevk]

I tried fiddling with the CSS but got lost. I'll try more specific suggestions:

• Equal whitespace above and under the logo
• FAQ equal size with the <h1> but right aligned so it stands on its own
• Enlarge the tabs on :hover with transform:scale(1.1) and transition:.2s similar to the home page per my proposal there.
• Further emphasize the current tab somehow. I'm not sure what works well though. Perhaps removing the background and making the text black?
• In the body remove the margin under the heading (perhaps using h4 + p or some such).

[annevk]

This'll fix #21.

[domenic]

Latest attempt at https://whatwgorg-uoyhfttqtc.now.sh/faq.html incorporating some of the feedback. But it's not great:

• On mobile too much of the page is taken up by the now-giant navigation buttons
• The right-aligned "FAQ" looks bad. And also I can't get it to vertically align for some reason. Maybe our markup structure for the header is too weird.
• Not sure how to further emphasize the current tab; didn't try anything yet.
• Didn't change any margins under the headings in the body as I think they look OK?

Concrete help appreciated again.

[jakearchibald]

I had a little hack around at https://github.com/jakearchibald/whatwg.org/tree/mobile-friendly-tabbed-pages-jake.

[domenic]

Alright, this is looking somewhat reasonable!! Newest version at https://whatwgorg-ldgmgpavke.now.sh/faq.html.

Only potentially unresolved problem is the style for highlighting the current page not being clear enough.

[annevk]

Not great, but better than the status quo I think:

.buttonish-links > a:not([href]) {
  background:transparent;
  color:#000;
}
.buttonish-links > a:not([href]):hover, .buttonish-links > a:focus {
  transition:none;
  transform:none;
}

Aside: I'd rather not use an a element for this state.

I also think we should explicitly declare color:#000 on the html element. Declaring a background color but not a foreground color is generally a nono as folks might have non-default preferences for both so we better override both to not make things unreadable.

[domenic]

Aside: I'd rather not use an a element for this state.

I think it's a rather good fit per https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element:

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.

(see also the example following right after.)

[domenic]

Seems reasonable. Deployed at https://whatwgorg-fagezotxgs.now.sh/faq.html. Good enough for me to change all the various pages markup structures and so on, or is there more to iterate on?

[annevk]

I think we might use hgroup in the wrong way. FAQ is not some secondary title to WHATWG. It fits on the front page, but less so here. Especially if the outline were to only highlight the main heading of a hgroup that'd be rather bad.

[annevk]

If we remove hgroup from the subpages I think we're good to go.

[annevk]

Maybe it would be better to just move the <h2> down again from that perspective, after the navigation.

[domenic]

I much prefer stylistically it being in the actual header.

Per @sideshowbarker's clarifications to the hgroup examples it would be highlighted as "WHATWG: FAQ" (see https://html.spec.whatwg.org/#the-hgroup-element). That is, it would prevent creating a separate section. That seems roughly correct, to the extent that anything about the current outline algorithm is correct. I like the idea that the whole page is "WHATWG: FAQ", not "WHATWG", navigation, subsection "FAQ".

If we don't care much about our outline at all, which is a fine thing to do IMO, then we could remove the hgroup.

[annevk]

I guess I don't feel too strongly, but it still seems a little weird. (An alternative I entertained was that "WHATWG" would be the first link in the navigation list, just presented differently, and that FAQ would be the <h1> with other headings renumbered.)

[domenic]

Anyone want to give this a final sign-off? participate.whatwg.org PR also prepared: whatwg/participate.whatwg.org#15

[domenic]

Note: this closes #21, #178, #59, #180, and helps with #149.

[annevk]

@domenic did you revert your stance on #178 (comment) for some reason?

[domenic]

No, I just forgot. Can fix...

[annevk]

\o/ nice work all!