Page MenuHomePhabricator

Table of contents does not appear in mobile site
Open, MediumPublic

Description

I have noticed that for whatever reason there is no table of contents on the mobile site. This is a real pain because the only link to the desktop is at the very bottom of the page, meaning I need to scroll all the way down to the bottom of the page just to get to the desktop version so I can click the table of contents link.

I'm guessing that the reasoning behind this is that by normally, by default, the mobile site has all headings collapsed, so you're effectively looking at a rough "table of contents" anyway. The problem with this is that when you browse without Javascript, the mobile site falls back to "all headers uncollapsed", because the header-collapsing is implemented in JS.

Analysis

@0x0077BE suggest one or more of the following mitigations:

  • Put a "desktop" link either at the top of the page or under the hamburger menu that's in the top left corner (I think this would be useful even if other recommendations are adopted)
  • Add a table of contents to the "no javascript" fallback page.
  • Implement the header collapsing behavior using CSS if possible.

Developer notes

We've had many ideas for how to fix the table of contents on mobile, but it's a tricky problem.
Sticky headers (T197718) may remove the need for a table of contents
Prototype here: https://in-article-navigation.firebaseapp.com/sticky-headers.html

Provided any solution is JS based, we are pretty flexible in what we do here.

Event Timeline

0x0077BE created this task.Sep 29 2016, 8:37 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 29 2016, 8:37 PM
0x0077BE updated the task description. (Show Details)
Aklapper edited projects, added MobileFrontend; removed Mobile.Sep 30 2016, 12:30 AM

@Aklapper Yes, I certanily didn't think it was done accidentally ;). That said, it isn't totally true that the ToC is disabled in mobile, it's just that it disappears as part of the responsive design when the size of the page gets too small. As I said, it's understandable when the headers are collapsed automatically (would look somewhat redundant), but with Javascript disabled, it's actually quite counter-productive.

I think that if Javascript were used to disable the ToC, then it would fall back gracefully, but if that is not acceptable for some reason, there are the other two options.

I've been working on a solution to this problem. Basically the ToC will be showed on all types of devices (with or without support for JS). Then I progressively enhance it for devices that support JS. I create a floating button that sits at the bottom right of the page. When the user clicks on that button an overlay will open with the table of contents (the original ToC will still be present at the top of the page). I also got rid of section toggling as the above solution makes it redundant. Here is my patch: https://gerrit.wikimedia.org/r/#/c/313628/
(first in the series of 3 - the others are linked in gerrit).

@bmansurov I'm a bit hard-pressed to endorse a solution with a floating overlay, since I personally hate that sort of thing and I'd much rather see collapsable sections than a floating overlay, but I suppose it doesn't matter too much since I'm disabling Javascript anyway.

That said, I would say that if you are going that route, it would be good to be aware that <noscript> tags may not reliably provide fallback code (see: https://phabricator.wikimedia.org/T147027). If you're going to create a floating ToC, it should definitely be done such that the ToC is dynamically disabled by Javascript, not dynamically enabled with a fallback. I'm not quite sure how to see the full diff, but I don't see any <noscript> tags in the diff, so I assume that's the strategy you used.

saper added a subscriber: saper.Oct 3 2016, 9:02 PM

@0x0077BE, just to be clear - the button that opens the ToC overlay is floating, the ToC overlay itself takes up the whole screen similar to how we show languages, categories, search, etc.

So the way it works is that, all pages get a ToC similar to the desktop site. And pages that have JS will get a button in addition to the existing ToC on the top of the page. The user doesn't even have to see the ToC overlay if they wish to do so. They can always scroll to the top of the page to see it.

Jdlrobson reopened this task as Open.Nov 2 2018, 3:23 PM
Jdlrobson added a subscriber: Jdlrobson.

Re-opening as the epic was declined and this is still a valid issue.

Jdlrobson triaged this task as Medium priority.Nov 29 2018, 11:47 PM

TOC is important to advanced editors so should probably be considered as part of the project.

Seudo added a subscriber: Seudo.May 1 2019, 4:07 PM

I agree that the table of contents would be very useful. Collapsed headers are not sufficient on most articles (in a way, they even make navigation more difficult: if headers were not collapsed, at least you could search a word into the page and find what you are looking for without opening all headers one by one).

Of course the TOC should not appear by default, so there should be a button or something to show it. The solution described above by @bmansurov looked very promising.

Yoshiciv removed a subscriber: Yoshiciv.May 2 2019, 9:07 AM