Problem
Unlike the desktop website, where infoboxes have secondary placement to article text, on the mobile website infoboxes appeared in primary position prior to the beginning of the article content. This placement exposed readers to details on a subject prior to gathering context or and introduction to the subject. Users would need to scroll through the end of an infobox to reach the lead section and introductory content which provides context for the content within the infobox. This issue was particularly heightened for topics unfamiliar to users, where they would be required to scroll through the content of the infobox to confirm whether they are reading the correct article.
Proposal
Moving the lead section of the article prior to the infobox. Our goal for this change is to:
- Allow readers to confirm they are reading the correct article
- Give article text primary placement on the page, in consistency with the desktop website
- Give an overview of the topic with content from the lead paragraph prior to exposing details on the topic
An additional result of this change is that mobile web users will be able to read our content quicker - most infoboxes contain images which can slow down the initial render of a page.
Exceptions
- Articles which begin with a list, such as the Planet article - for these cases, the list is considered as the lead and presented prior to the infobox
- Articles with no infobox - no changes observed
- Articles with images prior to article text - no changes observed
- Articles which wrap the infobox in a container element - no changes observed - with the notable exception of DIV elements which have the class mw-stack e.g. as provided by Template:Stack
Examples
-
Mobile website, older version of infobox and first paragraph, little introductory information on subject available -
Mobile website, article notes and infobox appear first when the page is loaded -
Mobile website, lead paragraph appearing before infobox -
Lead paragraph appears before infobox providing background and context
Related Phabricator Tasks
Common problems
If the infobox is not being moved it could be related to one of these problems.
Various articles unnecessarily wrap the infobox with formatting e.g.
'''{{Infobox company
Fix: You can use this query:
https://en.wikipedia.org/w/index.php?search=insource%3A%2F%5C%27%5C%27%5C%7B%5C%7BInfobox%2F&title=Special:Search&profile=advanced&fulltext=1&advancedSearch-current=%7B%22namespaces%22%3A%5B0%5D%7D&ns0=1
Some wikis don't use the infobox class for infoboxes.
Fix: add the infobox class to infoboxes (even if not present in the CSS stylesheet).