Page MenuHomePhabricator

[Spike] Consider design for a sticky header for anonymous users
Open, MediumPublic



We would like to explore extending our existing sticky header functionality for anonymous users

Acceptance criteria

Explore designs for a sticky header for anonymous users that would achieve the following:

  • A decrease in scrolling and easier access to commonly used functionality: search, language switching, logging in
  • Making it easier for readers to distinguish our site from others by adding a wordmark, logo, or other branding element
  • Making it easier for readers to know which article they are reading by adding the title of the article

Event Timeline

[Preamble: I've discussed some tangential issues below, and I don't wish to fork this task's discussion, but I cannot find a better place to post it. Alex suggested I post here.]
I was thinking about the Branding issue in T293395, and about the issue of the Search-box moving locations (as described/illustrated onwiki), and various aspects of the new ToC, and I made this mockup/idea:

Sticky header and ToC mockup.png (390×1 px, 157 KB)

This is close to my ideal Sticky Header and ToC, because:

  • Header:
    • Means we can keep the Top-Header and Sticky-Header almost identical, and be sticky immediately upon scrolling.
      • this fixes the first few inches of scrolling which currently have no header visible
      • this resolves the distracting animation of the Sticky header appearing partway down.
    • The Search-box doesn't change locations, and remains a large-width click-target
      • at smaller window-widths, the Search-box would just continue to shrink in width, but still be a recognizable "form field". Perhaps even replacing the Site-Wordmark (not logo) at very small widths.
    • The contents are mostly the same as the default Top-Header, PLUS the page-meta-links
    • The Hamburger menu is still accessible.
    • The Branding remains visible in some form
  • ToC
    • <Page title> replaces "Contents" -- This solves the issue of where to place the Title, and removes an unnecessary word from the UI.
    • [Up-arrow] replaces "Beginning" -- This solves the issues of ambiguity (e.g. on "history of [x]" articles), and missing translations, and any debates about whether to label it "Beginning" or "Introduction" or "Lead" or "Lede" (etc).

P.s. note: I know my mockup doesn't cover the full complexity, e.g. ULS on the multilingual wikis like Commons. I don't have any ideas for how to resolve that. HTH anyway!