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 editor-defined templates that are inserted into the content body of the article. Each 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 meta-template called  (Multi-namespace message box).

[[File:Mbox_template_inheritance.png|thumb|753x753px| Diagram showing the inheritance tree of various message box templates These templates have existed for over a decade and have many conventions around their usage. Because these templates are maintained by editors, every Wikipedia language community is free to adopt or invent their own templates, specific to the needs of their Wikipedia or MediaWiki project (Wikimedia Commons, for example, makes heavy use of licensing templates, which also descend from the Mbox template, which projects like Wiktionary use entirely different templates).
 * center]]

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

At that time however, mobile was not a concern, and despite later efforts by the WMF to bring these templates into the mobile web context, they still fall short of being mobile friendly. Because of the broad usage of these templates, this proposal will focus on improving the templates on mobile web.

Current mobile treatment
Currently, mobile wikipedia presents a small grey subhead with the text page issues underneath the title of the article, instead of rendering the entire Ambox template. The user can tap on the subhead and is then presented with an overlay that lists a shorter version of the Ambox text.

Limitations
As pointed out in the Village pump proposal below, for the end-user, the small "page issues" link doesn't convey the importance of certain alert boxes, such as the "hoax" template, which is prominently visible on desktop.

The current implementation depends heavily on modifying the HTML generated by the Ambox templates. Since this HTML can vary by language, the current implementation can fail in certain languages. French Wikipedia for example, uses entirely different HTML than English Wikipedia for it's article notices, and because of that, the French alerts are not visible on mobile Wikipedia at all.

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. 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.