Skip to content

Focus mode for Handbook

Daniel Fosco requested to merge focus-mode-handbook into master

Why is this change being made?

Reading large volumes of information on the Handbook at once is challenging, especially during onboarding. This is a proposal to add a “Focus Mode” on the Handbook UI, similar to the Reading Mode on apps like Instapaper or Pocket.

While Safari and Firefox browsers already provide native reader modes (with Chrome on the way), users might not know about these features, and baking it in the handbook UI enables us to provide a better experience, since we have full control of styles and layout.

How it works

“Focus Mode” could be enabled from a toggle button that would:

  • Hide the navigation tree
  • Hide the fixed header
  • Centralize the text column
  • Increase line height to improve readability -- akin to efforts on new typescale for docs site

Focus_Mode

Handbook page vs. Handbook page with focus mode enabled

MR_Print_-_2

Focus Mode Toggle Off (relatively positioned on sidebar) vs. Focus Mode Toggle On (fixed position near the bottom of the viewport)

Prototype

To see in more details, check this simple Figma Prototype or the corresponding file.

Request for Feedback

Before going into design details, here's the initial feedback I'm looking for:

  • On a first look, does this iteration seems like something that brings value for users / readers of the content on the Handbook?
  • What kind of problem validation would an iteration like this require, if any?
  • Can you think of any risks in introducing this iteration? i.e.: hiding navigation might affect marketing metrics?
  • Are you aware of other similar iterations to this one, like the Docs typescale redo, and if so what would be the best way to combine efforts?

Author Checklist

  • Provided a concise title for the MR
  • Added a description to this MR explaining the reasons for the proposed change, per say-why-not-just-what
  • Assign this change to the correct DRI
    • If the DRI for the page/s being updated isn’t immediately clear, then assign it to one of the people listed in the "Maintained by" section in on the page being edited.
    • If your manager does not have merge rights, please ask someone to merge it AFTER it has been approved by your manager in #mr-buddies.
    • If the changes relate to any part of the project other than updates to content and/or data files please make sure to ping @gl-static-site-editor in a comment for a review and merge. For example changes to .gitlab-ci.yml, JavaScript/CSS/Ruby code or the layout files. (this requirement has been removed pending identification of a new DRI for the handbook)
Edited by Daniel Fosco

Merge request reports