Reading/Web/Desktop Improvements/Features/Limiting content width

One of the main goals of the project is to make Wikipedia, and other Wikimedia wikis, more welcoming to newcomers. One way in which we aim to do this is by making the experience of reading articles more comfortable.

What does it mean to have a comfortable (or an uncomfortable) reading experience? According to research there are several contributing factors, a major one being line-length. The study [ https://cdn.tc-library.org/Edlab/eye-tracking%20article.pdf Computer text line lengths affect reading and learning] by Peter Orton, a Ph.D. at the IBM Center for Advanced Learning, concludes that the longer the line-length is the more difficult it becomes for someone to read, and ultimately learn and retain, textual information. Several other related studies can be found on the Wikipedia article Line length, all of which recommend between 40 and 75 characters per line.

While it's not particularly straightforward to achieve the recommended line lengths on Wikimedia wikis, we will be limiting the width of the content using a max-width in order to get the majority of text on the wikis closer to the recommendation.

You can learn more details on the research and consideration behind this feature.

Release plan
We began deploying the first iteration in May 2020 to Office Wiki and Test Wiki, and plan to continue to our early adopter wikis in following months. See our main Features page for more details.

Feature description and requirements
The main functionality of this feature is to limit the width of the article content. However in order to ensure that the other elements on the page (namely the sidebar and header) don't drift too far from the content we've added two additional containers. The second container ensures that the sidebar remains close to the content. Then to protect against the header drifting too far from both the content and the sidebar, there is a third container that constrains the maximum width of the header.

From a technical perspective: the content on most pages is placed inside a content container with a max-width of 960px. There are two additional containers that help manage the width of other parts of the interface such as the header and the sidebar: workspace container (max-width 1440px), and page container (1650px). Below are diagrams that illustrates how these containers work. There are certain pages whose content will not be constrained by the content container including History, Recent changes, and other similar log-type pages. To explore an interactive demo of this feature please [ https://di-collapsible-sidebar-5.web.app/Hathor see this prototype].

Design requirements and guidelines
Here is a GIF that illustrates the difference between the current layout and the updated layout with the various width limitations described above:

Constraints
The main complication here is that certain log pages, such as History and Recent changes, become more difficult to read the more narrow the screen is due to line wrapping. Therefore we've decided to treat these pages in a special manner, constraining them only to the workspace container (1440px) rather than the content container (960px). Here is a GIF of a prototype that shows switching between an article page and the associated history page:



User testing with editors
We performed a feedback round with a prototype of the limited content width with editors across multiple wikis. Editors were invited to explore the prototype and provide their feedback using a central notice banner. There were mixed feelings about the feature: many editors appreciated the shorter line lengths and agreed that the feature created a more comfortable reading experience. Some editors disliked the whitespace around the content and felt that it was wasted space. We are balancing all of that feedback with the extensive existing research about line-lengths and reading comfort.