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.

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.

Goals and motivation
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. -->

Full-width toggle
Until October 2022, logged-in users were only able to switch between the limited and full content width using gadgets. According to the English Wikipedians, this was insufficient. We decided to build a toggle. (On the right, you can see a screenshot of this toggle.) It needed to be visible and available to both logged-out and logged-in users. As a result, we have:
 * 1) Built a preference for logged-in users. It allows for the width to be set across pageviews and wikis. The preference is available in the appearance section of the preferences page . It may also be set as a global preference.
 * 2) Built a toggle for logged-in and logged-out users. The toggle is available on every page if the width of the screen is larger than 1400px. Selecting the toggle increases the width of the content area.
 * 3) * For logged-in users, the toggle also controls the preference mentioned in 1 above. For example, if you click the toggle on the page and visit your preferences page, you will notice that the enable limited width mode checkbox is unchecked.
 * 4) * For logged-out users, initially, the toggle set the width on a per-page basis. This means that after refreshing the page or opening a different page the width would return to the default (limited) state.
 * 5) * After making our skin the default on English Wikipedia, we heard concerns about the setting for logged-out users. After coordinating with many teams, we made a change. Since February 2023, all users see the width setting of their choice despite refreshing pages or opening new ones.

Why did the toggle work on a per-page basis initially? This was because in principle, preferences are not available for logged-out users. The lack of preferences for logged-out users doesn't only apply to this skin. (You may learn more about the technical limitations.) We have managed to find a short-term bypass. We have more work to do to make sure this solution may be maintained. We might use a better solution in the future. This could be applied to settings such as font size or dark mode.