Description
The new table of contents will display, persistently, to the side of the article. As the width of the screen gets smaller there is less and less space for the article content, and eventually it becomes difficult to read (especially when there is content, such as an image or an infobox, floated on the opposite side of the article text). For example:
In order to preserve the readability of the article we need a solution for screen widths below ~1000px.
Design
Following the example set by the mobile website, for screen widths below 1000px we will collapse the article sections, and they will therefore become a pseudo-ToC. With this we can remove the ToC to the side of the article, giving the space back to the article content. Link to prototype.
| screenshot | video |
|---|---|
 | |
One important feature of this solution is that the section title sticks to the top of the screen. This makes the section easy to collapse which allows the person to return to the pseudo-ToC. Currently this is a little off in the prototype because when you collapse a section using the sticky section header, you do not end up in the correct scroll position (with the relevant section heading in view). Note: the sticky header will be hidden at this resolution, so there should not be a conflict between the sticky header and the sticky section headings.
Notes
- This solution is similar to what the editing team (cc @iamjessklein) has been exploring for Talk pages. There may be an opportunity to combine our efforts.
- We considered two other solutions here:
- displaying the ToC inline (i.e. in its current position) and adding a ToC dropdown within a sticky header that appears once you've scrolled passed the inline ToC (link to prototype)
- displaying the ToC inline (i.e. in its current position) and adding a floating ToC button & drawer that appears once you've scrolled passed the inline ToC (link to prototype)
- displaying the ToC inline (i.e. in its current position) and adding a ToC dropdown within a sticky header that appears once you've scrolled passed the inline ToC (link to prototype)
Acceptance criteria
- The table of contents should remain hidden at low resolutions
- Sections should be collapsible
- Default state of sections is ______