Unified navigation across our sites

[foolip]

Suggested by @fantasai in https://twitter.com/fantasai/status/1438998571311841281:

Would be really nice if WPT would have some kind of unified navigation banner across all its websites.

Y'know, level up from undifferentiated some-people-wrote-useful-scripts chaos to some quality late 1990s UX.

I think this is a good idea. For wpt.live there is a challenge of not messing with reftests, but we could at least do it for all directories, including the root.

cc @KyleJu

[zcorpan]

Here's a mockup I made in devtools. It needs tweaks to work on mobile/narrow viewport.

Longdesc: At the top of the page there's a dark blue navigation bar. On the left, a white WPT logo. Then 3 links:

• Docs web-platform-tests.org
• Test results wpt.fyi
• Live tests wpt.live

The current page is highlighted with a lighter background color.

The injected HTML on wpt.fyi is

<nav style="
    background: #003C56;
    min-height: 40px;
    font: 16px Georgia, serif;
    margin: 0 -16px;
"><img alt="WPT" src="https://raw.githubusercontent.com/web-platform-tests/wpt/master/images/wpt-logo/wpt-logo-white.svg" width="40" height="40" style="
    vertical-align: middle;
    padding: 5px 1em;
    display: inline-block;
    color: white;
"><a href="https://web-platform-tests.org/">Docs <code>web-platform-tests.org</code></a> <a href="https://wpt.fyi/" class="current">Test results <code>wpt.fyi</code></a> <a href="http://wpt.live">Live tests <code>wpt.live</code></a></nav>

Added CSS:

nav a:focus, nav a:hover {
    color: black;
    background: #eee;
}
nav a {
    color: white;
    padding: 1em;
    text-decoration: underline;
}
nav a * {
    color: inherit;
}
nav code {
    font-family: 'Consolas', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
    font-size: 0.9em;
    font-weight: bold;
}
nav .current {
    background: rgb(26.27% 44.04% 55.33%);
}

[zcorpan]

Actually removing the URL from the link text is probably better, as it is easier to read the links and it takes up less space (for narrow viewports).

[foolip]

Thanks @zcorpan, I like these mockups! For wpt.live, would you suggest showing this navigation only in directory listings, or how do we avoid it interfering with tests?

[zcorpan]

Yeah only directory listings, not in tests.

[zcorpan]

Feedback from @isaacdurazo (who designed the logo)

1. Remove the underline and use that for the hover state along with the background color change you are using.
2. Personal preference: Position the main nav items to the right
3. Is it me or the font size is larger than what’s being use in the body text? if so I would reduce it

The body text is different on the different sites, but on web-platform-tests.org (which uses the same font-family), the body text is 17px. the nav bar font-size is 16px.