VOOZH about

URL: https://phabricator.wikimedia.org/T124168

⇱ ⚓ T124168 Show Navbox templates in mobile skins


Maniphest T124168

Show Navbox templates in mobile skins
Open, LowPublic

Description

NOTE: See T198949 for possible SEO perspective

In the mobile view of a Wikipedia page the "navigation box(es)" (also known as NavBox) at the bottom of articles are not shown. I don't mean 'collapsed by default', I mean that they are literally not there at all.

This is a piece of the content of an article that is being hidden from users. [equally, article categories aren't shown, but that's a different story]. Considering that the mobile team is develping the "Related articles" feature to automatically highlight relevant further reading, it seems counterproductive to deliberately hide the manually curated collections of related content that go with many articles.

Example:
The bottom of the mobile article "The Old Vic" https://en.m.wikipedia.org/wiki/The_Old_Vic goes from the 'external links' section straight to the 'talk' and 'other languages' mobile links.
Whereas the desktop version of the same article https://en.wikipedia.org/wiki/The_Old_Vic has a "Theatres in London" navigation box (shown in a 'collapsed' state by default). https://en.wikipedia.org/wiki/Template:Theatres_in_London

The challenge

These are currently hidden from the mobile view due to the fact it is challenging with the current templates to render them nicely on mobile and the navboxes on large articles can account for 10% or the article html (which slows down load time). https://www.youtube.com/watch?v=eaos1s3UfLs documents what the experience would be if these were enabled and the collapsing JavaScript was enabled on mobile (note this is currently disabled for ux reasons given the mobile site allows collapsing of sections; the touch area of show/hide is small and not optimal for mobile).

Motivations

Outcome from 2018 SEO project with Go Fish Digital:

The navboxes at the bottom of articles are good for search engine rankings, as they improve the link equity of the other pages. This is true even if the links are collapsed by default (which they are on desktop), and also true even if the links themselves are in the HTML but not visible to the user.

Navboxes were removed from the mobile view because the nature of the tables meant they weren't very useful to users, and removing them also reduced page weight. Search engines like Google are increasingly switching to mobile-first crawling, and not having these links present is bad for link equity.

There's a tradeoff here: page weight and good performance are taken in to account by crawlers, but so is the presence of these links. If adding the links back in (but not necessarily displayed to the user) doesn't have a large performance impact, then they should probably be put back.

See also:

Related Objects

StatusSubtypeAssignedTask
OpenNoneT158181 Aim for workflow equivalence for MediaWiki on desktop and mobile web
OpenFeatureNoneT232895 [OTRS Feature Request]: Do not ignore navbox templates
OpenNoneT124168 Show Navbox templates in mobile skins
OpenNoneT179598 New responsive design for old Navboxes
InvalidNoneT179597 Clever way to have 10 links instead of 100-1000 without any serious work
ResolvedJdlrobsonT111565 Enable collapsible templates (including infoboxes) on mobile
ResolvedABorbaWMFT42812 jquery.makeCollapsible: Refactor to use CSS instead of JavaScript to do the expansion/collapse (including initial state)
ResolvedTheDJT195049 Remove animations from jquery.makeCollapsible
ResolvedPeter.ovchynT257265 enable mediawiki.page.ready in Minerva
ResolvedKrinkleT182047 Modernise metadata table collapsible
Mentioned In
T342567: Gadgets should provide skipFunctions
T334119: Update Navbox template markup to improve accessibility
T305604: Cannot edit non-mainspace pages in Android app
T303378: MobileFrontend removal of elements takes <templatestyles> tags with it
T232895: [OTRS Feature Request]: Do not ignore navbox templates
T291455: Template visible in mobile
T283651: Search results on mobile should exclude pages where the search terms are not rendered on mobile
T281025: Remove deprecation warnings in form of HTML comment
T198949: Add navbox links to mobile page HTML
T198686: Navigation boxes and categories don't display (English Wikipedia)
T179651: new possibility to ignore navbox links in Special:WhatLinksHere
T179598: New responsive design for old Navboxes
T179597: Clever way to have 10 links instead of 100-1000 without any serious work
T175092: Determine if .navboxes should be stripped from the page content delivered by the Mobile Content Service and Page Content Service
T172078: Minerva on desktop doesn't show navboxes (does it?)
T166363: Empty paragraph in article "Abortion" with mobile-view
T143513: Add navbox templates to the mobile view and app
T55437: Navboxes look bad in Mobile
T132560: [Epic] Allow editors to markup secondary content as document fragments to be lazy loaded
Mentioned Here
T282588: images wrapped in flex item styling get really small in Timeless/Minerva
T301578: Comments containing navbox partially removed by MobileFormatter
T123328: [GOAL] Lazy load references in mobile skin
T222373: Remove the lazy load references beta feature
T258424: A way to have sections only load their data once a button has been clicked or when the section is scrolled into view
T262093: MoveLeadParagraphTransformInfobox should be rewritten to be more similar to mobile apps (allow more flexibility in lead paragraph identification)
T198949: Add navbox links to mobile page HTML
T105365: Make a performance audit of the mobile site
T110613: Strip certain HTML markup from the DOM e.g. navboxes
T124959: Remove `navboxes` from HTML in mobile web beta and show the impact
T101362: A #Templates tag for tasks related with creating/fixing MediaWiki templates?

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Comment Actions

I feel that we absolutely need navboxes to be made fully visible for anyone and everyone who is using a mobile device. i feel that this needs to be made a top priority forthwith. i would appreciate any input or ideas on this. thanks.

Comment Actions

For individual cases/articles, navboxes (and other templates that mobile users are normally excluded from) can be forced using https://en.wikipedia.org/wiki/Template:Strip_nomobile.

This template only provides the editorial freedom to override the exclusion of mobile users. Whether the result is actually desirable (or at least preferable over the default) should be judged on a case-by-case basis.

Comment Actions

I've noticed that navboxes do display in the Wikipedia: namespace of English Wikipedia when I look at the page in a wide view (phone turned sideways). It's just that they have extra padding on the top and bottom, and don't display the embedded image (image=). This is my experience using Chrome and Firefox on Android.

Comment Actions

@Stevietheman are you using Desktop mode or Mobile mode on phone? I confirmed with my iPhone SE and iPhone 13 on Safari and Chrome browsers; that navigation template doesn't render. For example https://en.m.wikipedia.org/wiki/Foxconn_and_unions, on the other hand, if you call desktop url (without "m") like https://en.wikipedia.org/wiki/Foxconn_and_unions that does render on both mobile phones.

Comment Actions
In T124168#9470242, @Stevietheman wrote:

I've noticed that navboxes do display in the Wikipedia: namespace of English Wikipedia

Ignoring the padding question, navboxes are available on most pages besides main space pages per T301578 now.

when I look at the page in a wide view (phone turned sideways).

There is CSS to prevent their display below certain resolutions still.

It's just that they have extra padding on the top and bottom,

This is an artifact of base Minerva CSS which isn't going to be overriden in navboxes.

and don't display the embedded image (image=).

This is T282588#7080109.

Comment Actions

@Izno so there's progress on this bug? Using Vector 2022 skin, I went to https://en.m.wikipedia.org/wiki/Template:Multinational_unions which is a non-mainspace page and still cannot see it on mobile view. Can you link an example flow that shows what is different? Or am I misunderstanding your response?

Comment Actions

@Izno so there's progress on this bug? Using Vector 2022 skin, I went to https://en.m.wikipedia.org/wiki/Template:Multinational_unions which is a non-mainspace page and still cannot see it on mobile view. Can you link an example flow that shows what is different? Or am I misunderstanding your response?

No, the concerns related to this task remain the same and are the reason they remain invisible on mainspace pages. The reason you cannot see it in mobile view is because your mobile view resolution is too small, hence my previous "There is CSS to prevent their display below certain resolutions still." It displays as expected on a desktop resolution today:

Vector 2022 is additionally not a supported skin on the mobile domain. Testing anything with that skin and the prefix is not going to get you anywhere.

Comment Actions

@Stevietheman are you using Desktop mode or Mobile mode on phone? I confirmed with my iPhone SE and iPhone 13 on Safari and Chrome browsers; that navigation template doesn't render. For example https://en.m.wikipedia.org/wiki/Foxconn_and_unions, on the other hand, if you call desktop url (without "m") like https://en.wikipedia.org/wiki/Foxconn_and_unions that does render on both mobile phones.

Mobile (en.m.*), and I'm not talking about mainspace pages (articles). I maintain a WikiProject (in Wikipedia: namespace) and its front page contains a few navboxes.

Comment Actions

@Izno - thanks for the explanation. One of the navboxes I'm concerned with was created mostly by me, so I suppose I could rewrite it to not rely on navbox underpinnings, but I sure don't like reinventing the wheel if I can avoid it. And it's probably not worth it just to get an image to display and remove useless padding.

Comment Actions

Anything that’s hidden using CSS (rather than removing it from the HTML) can be unhidden using CSS. However, it’s your responsibility to make it readable on small screens if you do so.

Comment Actions

What/where is the CSS? With this news, I'd love to update my CSS file to override the mobile configuration then. I thought it wasn't being loaded server side, so this is a welcome change

Comment Actions

Anything that’s hidden using CSS (rather than removing it from the HTML) can be unhidden using CSS. However, it’s your responsibility to make it readable on small screens if you do so.

OK, I can see doing that if I use TemplateStyles. The image-holding cell has a class navbox-image I can refer to. Thanks! As for readability, I can tweak the width set for the image if necessary.

Comment Actions

After looking at the option of manipulating CSS to display the image on mobile, and reviewing the source of output on desktop vs. mobile, there's the appearance that the image is asynchronously loaded, thereby making CSS manipulation via TemplateStyles not workable. Or am I missing something? I've fiddled with visibility and display settings, and nothing works.

Comment Actions

I don't know how to put the question: would the use of or be enough to lighten these navboxes? Or is it crucial to also consider the size of the palette content (editorially)? Because while dewiki uses responsive navboxes, they still use s, which are HTML markup heavy.

Comment Actions

Both would tend to lighten them slightly or be a wash (see a commentary I've put together). It isn't fundamentally the overhead setting up the boxes that makes these heavy, it's the fact that people will put 100s of links in each navbox that makes them heavy. Or even 20s of links in each navbox and then having 5+ navboxes on a page. (Or worst, 5+ navboxes with 100s of links.)

Comment Actions

Thanks for the link. I was asking because some contributors are pushing (again) for them to be re-displayed on small screens (i.e. mobile) on frwiki. I think the only solution I've been able to find is to allow only one pallet per article, which would also have to respect a size limit. A considerable addition of limits that are unlikely to please.

Maybe it's better to try and convince them that the benefit of displaying this information on a small screen is too limited, compared to the gain of removing it for regions with unstable connections and low-end hardware. This doesn't prevent from reworking the responsiveness of these navboxes for the desktop version.

This led us to think of a second, alternative solution: rework the navboxes so that they are responsive, and display only a link to them on mobile devices () so that they can be viewed independently of the article. Except that the solution goes against WMF's desire to display the same thing on every screen.

Comment Actions

display only a link to them on mobile devices

I suggested something like this in T124168#7493247.

rework the navboxes so that they are responsive

Yes, this should happen regardless.

This comment was removed by Lofhi.
Comment Actions

I just discovered that is only using CSS to hide elements on the mobile version, so it still heavies pages down. It is possible to totally remove the elements like the navboxes are removed?

Comment Actions

I feel like navboxes are gonna have to fundamentally change before they're close to usable on mobile. Making the tables responsive by itself isn't enough; we can't expect any UX/UI designer to fit 1000+ links in a phone screen in a pretty way.

Take a success story from WP:LINKCRISIS, for example: Template:Texas once had a wikilink for each and every one of Texas' 254 counties. That has since been replaced with "See: List of counties in Texas". To me, that's the mentality that can get us to usable navboxes on mobile: instead of listing every tangentially related article, just linking to a list/index of them.

Maybe this could be a separate template, like {{Mobile-friendly navbox}} or whatever. Each section label would require a wikilink to a list/index article and, on mobile, section contents wouldn't be visible at all (and preferrably not added to the HTML in the first place). This could then become a slow burn replacing task, considering the amount of navboxes already in use.

Here's what the current Texas navbox looks like on a Pixel 7 screen size:

And here's what I'm proposing it could become:

Now, for some caveats: not all navboxes are going to be translatable to this model. They would require different solutions.
Also, this entire idea is from my experience with en-wiki; I'm not sure how other wikis handle navboxes, so I can't comment on that.
Finally, this feeling has been previously expressed somewhat on T124168#3716544, though without a proposed solution.

Comment Actions

Navboxes are viewable just fine outside the mainspace when in mobile mode, like drafts. Why is this still a problem?

Comment Actions

Navboxes are viewable just fine outside the mainspace when in mobile mode, like drafts. Why is this still a problem?

The implementation changed so that it affects only main space. The "problem" is a deliberate decision, not a bug/"problem".

Comment Actions

I think the editors of English Wikipedia can solve this problem on our own by migrating to a new set of templates that are mobile-friendly.

Avelludo, I like your idea very much. I found on other templates as well that having one link for each topic in the left column of the current navbox is a natural solution that makes it easier to navigate these huge trees. Did you have any wikitext that implements your proposed solution?

I think I've read that show/hide functionality is disabled on mobile, and this format is short enough we wouldn't need to roll it up by default or on demand. I'm assuming all the links are targeting separate pages? That would solve the criticism of slow page load times. If they are JS buttons that open sublists on the same page, that would not be a terrible user experience depending on how it's implemented, and would enable a very straightforward migration path.

Comment Actions

@Beland Thanks!

Did you have any wikitext that implements your proposed solution?

Unfortunately, no; I sketched that with HTML/CSS directly. I'm not too familiar with template-specific wiki syntax, how one would go about detecting mobile, how to leave out HTML for mobile pages, etc.

I'm assuming all the links are targeting separate pages?

That was the idea! In that Texas example, it would follow pretty much what's already in use for that template: Topics wikilinks to "Index of Texas-related articles"; Regions wikilinks to "List of regions of the United States#Texas"; and so on.

In that template (and most navbox templates I've seen in enwiki), the sections are defined with and pairs; my thought was, for mobile, the contents of the s could be removed entirely, keeping just the (wikilinked) s. This would, at least in theory, make the task of migrating simpler. Cheers!

Comment Actions

I think the editors of English Wikipedia can solve this problem on our own by migrating to a new set of templates that are mobile-friendly.

Since you've submitted a template at TFD that I've now seen, I think it's prudent to comment on task (I had written this a week ago). I do not think you can convince editors to abandon how much stuff goes into navboxes, but I especially don't think you can do it in one-off TFDs.

I'm assuming all the links are targeting separate pages

This is not a good assumption for the general case.

I think I've read that show/hide functionality is disabled on mobile

This is no longer true. Show/hide is functional on mobile now, so we won't have the issue with scrolling.

If they are JS buttons that open sublists on the same page, that would not be a terrible user experience depending on how it's implemented, and would enable a very straightforward migration path.

"Load on demand" is more or less what I suggested at T124168#7493247. Loading on demand is the only way to fix the "they're big issue" in a way which could convince English Wikipedia to use any other templates.

But that step is a step in a direction opposite to the way MediaWiki has been going of late, which has been to stop modifying the parsed content, so as to avoid varying the cache solely on content (among other reasons). So I actually don't think that will happen now either.

I guess WMF could build a parser function for this? IDK what the shape of that looks like. It probably wouldn't apply solely on mobile, it would also apply on desktop. However, I suspect loading on demand would have negative SEO impacts as the content would not necessarily be visible to spiders, and if employed for every navbox would have some above the fold impacts with the current military navigation template. (See also the note at the top of the task I guess.) But IDK what the web state of the art is here.

how one would go about detecting mobile

This is not possible in wikitext.


I did write a very short essay about the topic of big navboxes that if implemented would be a ton of work on wiki. https://en.wikipedia.org/wiki/User:Izno/Navbox_constellations This one kind of fits into the "make smaller navboxes" ethos here and might be one direction to approach Wikipedians about the problem. But even the examples in this essay are too large for the direction you (plural) want to go, and I don't find the examples particularly unfortunate, so you're going to have to do a lot more work to convince people.

Comment Actions

Change #1175217 had a related patch set uploaded (by DLynch; author: DLynch):

[mediawiki/extensions/MobileFrontend@master] API method to obtain content removed by mobileformatter

https://gerrit.wikimedia.org/r/1175217

Comment Actions

^ for discussion, here's a patch that adds an API method to MobileFrontend that would make it possible to fetch whatever content was removed from a given page by MobileFormatter. It could potentially serve as the basis of a feature that added some sort of "show excluded content" button on mobile that opened an overlay containing whatever had been stripped out. (Or filtered it down to just the excluded content that's a , of course.)

Comment Actions

^ for discussion, here's a patch that adds an API method to MobileFrontend that would make it possible to fetch whatever content was removed from a given page by MobileFormatter. It could potentially serve as the basis of a feature that added some sort of "show excluded content" button on mobile that opened an overlay containing whatever had been stripped out. (Or filtered it down to just the excluded content that's a , of course.)

That sounds great!

Comment Actions

Couldn't a relatively low-tech solution solve this, at least on an interim basis while the underlying problem is dealt with? I would propose a change which for mobile only, would transform transclusions of a Navbox template into links to the Navbox template page itself. There would be nothing to expand; just a bar that looks like a Navbox title bar, but in reality is just a link with nothing hiding under it. This seems doable in the {{Navbox}} template itself.

Thus on mobile, they would always see what looked like a collapsed Navbox title bar, as in desktop view, along with whatever was coded into the title bar itself, but show/hide behavior would be altered. Clicking 'show' would navigate away from the article page and to the Navbox template page itself. (Very large templates might still have a page weight problem, but many would not, and we can detect {{PAGESIZE}} of the nav template and maybe do something else.) To get back to the article, just browser back-arrow, or if some referrer info can be passed in, the [hide] link could be usurped and go back to the article.

One way to do this would be a bit of extra code at Template:Infobox, but haven't thought about the details so not sure if that is the best place. But I don't see anything blocking implementation of this. Am I missing something?

Comment Actions

Linking from article space to a template is intrinsically evil.

However, the above system could be made to technically work and would allow mobile users to use the standard aids to onward navigation.

Shinaimm raised the priority of this task from Low to High.Dec 30 2025, 8:34 PM
Shinaimm subscribed.
Comment Actions

Hi, in the last years more people use the mobile for accessing Wikipedia. The luck of Navbox templates hides the data from the users. Is it possible to implement it on 2026??

This will increase the accessibility between many pages and will achieve better flow for the users that "jumps" between pages.

Izno lowered the priority of this task from High to Low.Dec 30 2025, 10:46 PM
Comment Actions

Priority indicates how soon someone will work on a task, not an indication of importance of the task.

Comment Actions

How this issue can be resolved?
Is there an effort estimation for it?

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits