Page MenuHomePhabricator

Improve mobile experience on Wikitech (as navbox classes in templates are intentionally not displayed)
Closed, ResolvedPublic

Description

The desktop and mobile experience on Wikitech Help pages (example: https://wikitech.wikimedia.org/wiki/Help:Toolforge) are not equivalent.

MobileFrontend is removing DOM elements with 'navbox' in their styles as a designed feature to reduce visual clutter. Our use of navbox formatting for https://wikitech.wikimedia.org/wiki/Template:Toolforge_nav and similar content area navigation needs to be rethought.

Let's take a look at improving the site for a better mobile experience.

Event Timeline

@srodlund, I think the issue you mentioned about the Help namespace navboxes being stripped out on the mobile view is actually a "feature" of MobileFrontend. There is logic in that extension which includes removing all DOM elements which have a css class containing the string 'navbox'. We should be able to work around this by using a different class for the styling there, but we will have to think a bit about what we want that big pile of navigation to look like on smaller viewports. We probably do not want to make the start of each page be multiple vertical pages of the navigation content.

Jdlrobson subscribed.

Happy to help with wiki page edits - but as bd808 says this is a feature!
Home page looks the same to me on desktop and mobile so not sure where the navboxes are to assess whether they will display well on mobile. I'd suggest not using the navbox class in templates on wikitech if they can be avoided it as it often represents non-mobile friendly content on other Wikimedia sites.

Feel free to email me wiki page links or ping me on talk pages!

From a content perspective, we're working to make all sections in Toolforge and Cloud VPS documentation pages match a consistent template with the same types of sections laid out in the same order on each page. This helps both desktop and mobile folks know more intuitively how to navigate content on individual pages, even if they have different design experiences.

What we need is a better experience for folks to navigate between documentation pages. On desktop, users have the side navbar and a navigation template we've created explicitly for Toolforge and Cloud VPS documentation. Mobile users only have the option to go back "home," so they may (we don't have data on this) be getting lost or stuck having to drill down through several pages before they find the info they need.

I think our current nav boxes look "good" on desktop and may look "bad" on mobile no matter how we try to render them.

We can try and solve some of this from a content perspective -- like creating a template with the same navigation links in the sidebar and embed it in a section of each page (like we do w/communication and support) but ultimately, it would be nice to solve this on the design side, too, so mobile and desktop users have an equivalent experience.

This seems like a situation where you should be using a "<prev index next>" style of navigation, instead of a big box with links. Positioned either top or bottom (or both)

Aklapper renamed this task from Improve mobile experience on Wikitech to Improve mobile experience on Wikitech (as navbox classes in templates are intentionally not displayed).Jun 25 2020, 7:33 AM
TBurmeister claimed this task.

I have just checked how these navigation templates appear on several Wikitech pages on mobile. They are being displayed. We still have the "big pile of navigation" issue (the first thing you see on mobile is the nav template contents), but that is a bigger/different issue than what I understand this task to be reporting ("navbox classes in templates are intentionally not displayed"). Since the latter is no longer evident, I'm going to boldly resolve this.