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

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

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

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 imagine a more mobile friendly article notice.

Notices could be given different visual treatments and positions on a page 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 in a language they understand. However, if a cross-language solution for mobile is desired, the Ambox templates would have to output predictable code.