Reading/Web/Projects/Lead Paragraph Move

< Reading‎ | Web‎ | Projects

Problem edit

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 edit

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 edit

  • 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 edit

Related Phabricator Tasks edit

Common problems edit

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