User:Jdlrobson/Main page technical change roll out

The English Wikipedia main page depends on code that was deprecated many years ago. Historically the main page on the mobile domain has operated with different HTML which serves different content to mobile users. Changes are proposed to consolidate the desktop and mobile experiences.

While this is a technical change this comes with several caveats documented here.

Expected changes

Expected changes for mobile domain users

A mobile user is defined as any user viewing Wikipedia with 'en.m.wikipedia.org' (note the ".m" in the domain) in the address bar regardless of their screen resolution.

MinervaNeue

There should be no changes to content. Historically the mobile site has only shown the featured article and in the news. This will not change for now. The technical change will allow us to surface other content on the main page in future changes.

A minor change changes the heading "Today's featured content" with "Today's featured article" (tablet and desktop resolutions) and "Featured article" for mobile resolutions. This brings consistency with the desktop interface.

Other skins

It is very difficult to use a skin other than Minerva on the mobile domain. If you are using a skin other than MinervaNeue you are likely using the desktop domain and should consult the following section.

Expected changes for desktop domain users

A desktop user is defined as any user viewing Wikipedia with 'en.wikipedia.org' in the address bar regardless of their screen resolution.

Vector

There should be no changes to the content of the page, however if you are using Vector and your screen resolution is less than 1000px, content will stack vertically rather than in two columns. This is an intentional change to support Responsive web design best practices.

If you have enabled gadgets/user scripts to make Vector responsive, you may notice horizontal scrolling issues with some of the content. Please report any issues you find here.

Monobook

There should be no changes to the content of the page. Previously certain content was hidden to users viewing Monobook (with responsive mode enabled) at mobile resolutions but this has been addressed with this workaround.

If you are using Monobook on a screen resolution less than 1000px, content will stack vertically rather than in two columns. This is an intentional change to support Responsive web design best practices.

Timeless

Timeless hides content with the .nomobile CSS class at resolutions less than 800px. If you are using desktop Timeless on a mobile device, for the time being you will notice the disappearance of several sections. This aligns with how the mobile site behaves. It's our intention to address this as part of #Next_steps. In the mean time you can enable these sections using an edit to MediaWiki:Minerva.css or your user stylesheet to include the following:

body.skin-timeless.page-Main_Page .nomobile { display: block; }

Thank you for your patience and feedback during this transition.

MinervaNeue

MinervaNeue hides content with the .nomobile CSS class at resolutions less than 1000px. If you are using desktop Minerva on a mobile device, for the time being you will notice the disappearance of several sections. This aligns with how the mobile site behaves. It's our intention to address this as part of #Next_steps. In the mean time you can enable these sections using an edit to MediaWiki:Minerva.css or your user stylesheet to include the following:

body.skin-minerva.page-Main_Page .nomobile { display: block; }

If you are using MinervaNeue on a desktop device you will now notice that the content occupies two columns similar to desktop Vector making the content more readable without having to scroll.

Thank you for your patience and feedback during this transition.

Modern/Cologne Blue

These skins are not actively supported, however should behave exactly like Vector.

Reporting issues

Please check whether the issue you are reporting is due to user styles/scripts. You can do this by appending ?safemode=1 to the end of your website address. This really really helps us isolate issues.

Next steps

Once I get a green light from Xaosflux I will deploy a config change to remove English Wikipedia from the list of wikis using deprecated wiki. This patch has already been tested and I saw no differences in output of the mobile site.

The technical change introduces a stylesheet which for the first time in the history of Wikipedia allows us to add resolution-specific CSS rules to adapt content based on resolution. It also allows us to experiment using user, gadgets and site styles with alternative layouts as it ensures all main page content is present in the HTML of the page.

Currently for historic reasons many of the sections on the main page are hidden at mobile resolutions, but we now plan to fix this. This is very exciting!

We plan to remove the .nomobile classes hiding content on mobile to surface "Did you know" and "Today's featured photo" to all users regardless of screen resolution.

Please help us with testing by adding the following style to your user styles: body.page-Main_Page .nomobile { display: block; } Please feedback on the talk page with any issues you see.

A preview of the second iteration of changes can be found here: Minerva Vector Timeless Monobook

which is a style only change incorporating the styles of Template:Main_page_2020.01_technical_update_2/styles.css