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 body of the article. Each article notice 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.

[[File:Mbox_template_inheritance.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 context, they still fall short of being mobile friendly. So as a starting point, this proposal will focus on improving notices based on the template, in the article name-space.

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 clicking on that heading, an overlay with a list of issues appears. When available, only text from the "compact" version of the notice 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 in certain 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 what a mobile friendly article notice would look like.

Notices could be given different visual treatments and positioned on a page differently based on their severity. They could also be grouped together and expanded when tapped. Grouping the notices into 3 different buckets is similar to the Ambox template “type” property, which styles the Amboxes differently.

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.