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

Now at Reading/Web/Projects/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.

A Wikipedia article with multiple article notices

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 {{Ambox}} (Article message box) which in turn is based on a Lua module called Module:Message box. Other MediaWiki name-spaces (like categories and talk pages) have notices that are specific to their name-space as well.

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

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

Before 2007 standardization
After 2007 standardization

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 {{Ambox}} template.

Current mobile treatment

The link "page issues" below the article title
After tapping the link, the user is presented with the page issues overlay.

Currently, instead of rendering the entire {{Ambox}} 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 for 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 {{Ambox}} templates. Even slight changes to the template HTML can break this feature on mobile. Also, because these templates differ across languages, the current implementation doesn't work on all wikis. French Wikipedia for example, refreshed their message boxes in 2016 and now uses entirely different templates than English Wikipedia (Liste de bandeaux de maintenance d'articles). Because of this change, 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..."
—McGeddon (talk) 10:03, 21 September 2016 (UTC)

Link to English Wikipedia Village Pump proposal

WMF Proposed Design

high priority notice
medium priority notice
regular priority notice

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}} templates on English Wikipedia.

Technical challenges to improving Ambox “mobile friendliness”

The technical challenges of improving Ambox templates can be grouped into a few buckets (as described below), but they all boil down to inconsistency. The output of {{Ambox}}'s is inconsistent across languages, inconsistent across different types of templates, and inconsistently placed inside the article content, without a consistent machine-readable way of extracting the template content.

Areas of concern

Text length
- The text of many Ambox messages is very long and not suitable for mobile devices.
Desktop specific HTML
- The {{Ambox}} templates make heavy use of tables for layout, which doesn't work on mobile.
Language specific HTML
- The {{Ambox}} HTML output is different across languages, making it nearly impossible to consistently extract the message content and repurpose it for mobile.

Very long text on mobile article notice
"More citations needed" template on English Wikipedia
"More sources needed" template on French Wikipedia
Notice template on Portuguese Wikipedia
Generic article notice on Italian Wikipedia

Proposed Technical Solutions

Use WikiData for page issues instead of templates

Use the TemplateStyles extension to create mobile friendly template CSS

Use Page Content Service to display page issues

https://phabricator.wikimedia.org/T172002

Modify MobileFrontend/Minerva CSS to accomodate existing template markup

This solution would work within the existing template structure and probably only on English wikipedia.

Many {{Ambox}} templates contain a CSS class that marks text as hide-when-compact. Using CSS, we could hide this extra text and only present users with the "summary" text. This is the same text that is currently presented in the page issues overlay. Many templates, notably deletion templates, do not have this CSS class, so the issue of text length would have to be address on a per template basis.

A demo of what modifying the CSS might look like is available here https://people.wikimedia.org/~jdrewniak/page_issues_css/index.html.

Add structured HTML attributes to Ambox templates

This solution requires modifying templates

As mentioned above, the HTML produced by the {{Ambox}} templates varies widely. It can change at any time and in any language. However, we shouldn't hinder these changes, but rather ensure that they can be adapted to new contexts, such as mobile. Adding semantic attributes to the {{Ambox}} HTML could provide us with the necessary "hooks" to extract the Ambox content and present it in an appropriate way on mobile. We could provide a standard set of attributes that template editors can insert into their templates, across any template or language. These attributes could be "machine readable" which means they could be consumed by parsers or extracted into APIs like the Page Content Service, for consumption by the mobile apps. These semantic attributes would be invisible to end-users, and would not effect the appearance of existing templates.

Semantic HTML attributes fall into the category of "microformats" which are considered part of the semantic web. The vision of the semantic web is to extend HTML with the ability to express very specific types of data, in a way that is machine readable. In this scenario, we could extend the Ambox HTML with attributes that would identify the templates as "message boxes" with various properties, like their priority, date, and actionable steps. This information could then be parsed by the mobile site or app and presented to end-users in a mobile friendly fashion.

We could invent our own standard for how to create these semantic attributes, but there already exists a W3C recommended specification called RDFa which standardizes on how to use attributes to add rich meta-data to HTML.

The RDFa spec defines rich data structures as "vocabularies" (sets of properties that define an data structure). We can define a custom vocabulary that describes the properties of a "message box", and use those properties in the HTML attributes.

As an example, RDFa uses HTML attributes such as vocab typeof property content that can be added to templates in the following way:

<div vocab="http://meta.wikimedia.org/ContentSchemas" typeof="MessageBox" name="Citations needs">
    <span property="summary">
	    This article needs additional citations for verification. 
	</span>
	Please help improve this article by adding citations to reliable sources. Unsourced material may be challenged and removed.
	<small property="date" content="2017-01-06">
	    (June 2017)
	</small>
    <a property="action" href="/wiki/Help:Maintenance_template_removal" title="Help:Maintenance template removal">
        Learn how and when to remove this template message
    </a>
</div>