User:JDrewniak (WMF)/notes/Improving Mobile page issues

Overview
When Wikipedia articles are hoaxes, considered for deletion, missing citations, or don’t meet Wikipedia standards, they often feature a large coloured box above the article notifying readers and editors of the issues at hand.



These notices are actually special templates that are inserted into the content of the article. Each notice in the article name-space has it’s own template, and each template is based on a meta-template called (Article message box) which in turn is based on a Lua module called Module:Message box. Various other notices exist for other MediaWiki name-spaces (like categories and talk pages) as well.

[[File:Mbox template heirarchy.png|thumb|753x753px| Diagram showing the inheritance tree of various message box templates These notices have existed for over a decade and have many conventions around their usage. Because these notices are maintained by editors, every Wikipedia language community is free to adopt or invent their own notices, specific to the needs of their Wikipedia or MediaWiki project (Commons for example, has a wide array of licensing notices, while Wiktionary uses entirely different notices altogether).
 * center]]

The broad range and diversity of these notices makes them hard to standardize (however, such an effort successfully in 2007).

This refresh occurred before the modern mobile web even existed, and despite later efforts by the WMF to bring these notices into the mobile web, they are still not very mobile friendly. As a starting point, this proposal will focus on improving notices in the article name-space, based on the template.

Current mobile treatment
Currently, instead of rendering the entire template, mobile Wikipedia shows a small grey link with the text "page issues" below the title of an article. When clicked, an overlay with a list of the issues appears. Some notices have text for a "compact" version of the template, If available, only text from the compact version is rendered.

Limitations
As pointed out in the Village pump proposal below, the small "page issues" link doesn't convey the importance of certain notices, such as the "hoax" notice, which is prominently visible on desktop.

Technically, the current implementation depends heavily on modifying the HTML generated by the templates. Even slight changes to the template HTML can break this feature on mobile. Also, because these templates differ across languages, the current implementation can fail across languages. French Wikipedia for example, refreshed their article notices in 2016 to use entirely different templates than English Wikipedia ( Liste de bandeaux de maintenance d'articles), and because of that, French alerts are not visible on mobile Wikipedia.

English Wikipedia Village Pump Proposal
""If an article is up for AfD and flagged as a possible hoax with insufficient medical sourcing, any reader visiting that article on a computer is greeted by three large red and orange boxes at the top of the page, one with a cautionary stop sign... If a reader instead visits the same hoax medical article on their phone... they just get two tiny grey words "Page issues" under the article title..."" Link to English Wikipedia Village Pump proposal

WMF Proposed Design
As illustrated in T159262, it’s easy to envision a mobile friendly article notice.

Notices could be given different visual treatments and positioned on a page differently based on their severity. For multiple issues, the notice can be initially collapsed and expanded when tapped. Notices can be grouped into 3 different buckets, similar to the colour coded "type" property of the Ambox template on English Wikipedia.

Length
The text of many Ambox messages is very long and not suitable for mobile devices.

Desktop Specific Code
The Ambox templates use HTML markup designed for desktop browsers. Specifically, the use of tables for layout makes the Ambox code difficult to adapt on mobile.

Language Specific Code
The Ambox templates use language-specific markup in the HTML code. Since Wikipedia editors maintain these templates, it makes sense that the code is in a language they understand. However, if a cross-language solution for mobile is desired, the Ambox templates would have to output predictable HTML.

Use WikiData for notices instead of templates
Difficulty: 🥧 in the ☁️  Maintenance: ?

Use TemplateStyles extension to create mobile friendly styles
Difficulty: ? | Maintenance: ?

Add mobile-specific HTML to templates
Difficulty: ? | Maintenance: ?

Display just the compact version of templates on mobile
Difficulty: ? | Maintenance: ?