Page MenuHomePhabricator

Final warning: Mobile main page special casing will be disabled July
Closed, ResolvedPublic

Description

NOTE: Action required by July 13 2020!

Deadline: Monday, July 13 2020
Note: INACTION will severely degrade your main page for mobile users.
Why: Lack of action will likely damage SEO for projects for search engines which consider mobile friendly in ranking indexes; action will improve PHP render time; action will improve content offering to mobile users; reduces technical maintenance cost of Wikimedia sites

Understand

  • In 2012, a short term fix was applied to all Wikimedia projects to allow them to format their main pages to be mobile friendly.
  • This was deprecated 2017 upon the arrival of TemplateStyles.
  • The code supporting this will be removed as part of the 1.35 release. Impacted sites will lose responsiveness and the reading experience for mobile users will be impacted.
  • To see the damage of your project please use the URI https://de.m.wikipedia.org/?mfnolegacytransform=1&debug=1 on a mobile device substituting the domain for your site.

Example:

Screen Shot 2020-06-02 at 2.34.48 PM.png (1×976 px, 489 KB)

How to fix

Option 1 - use the compatiblity stylesheet [minimal effort]

  1. Create Template:Main Page/minerva.css using the compatibility site template
  2. Include it in your main page using <templatestyles src="Main Page/minerva.css" />
  3. Add nomobile class to any HTML elements you want to hide on mobile
  4. Using the test URI (?mfnolegacytransform=1&debug=1) check that the main page renders correctly around 300px

Example: https://fr.wikinews.org/w/index.php?title=Accueil&diff=845666

Option 2 - provide your own fix

Instructions for how to fix this have been provided here: T246401
and on mw.org

Option 3 - ask me/tell me how to fix it

As a last resort if you don't know how to act on this change, please ping @Jdlrobson and he will take care of this for your project.
If for whatever reason you don't want to fix this, please tell me pointing to a discussion on your site showing that the issue has been considered.

Impacted projects

Done! 67 sites still require a fix. Thank you to the 116 sites that have already responded. The sites that still need to act are listed below:
wikipedia (49)

astwikipedia
aswikipedia
bawikipedia
cawikipedia
cewikipedia
cywikipedia
eowikipedia
fywikipedia
glwikipedia
guwikipedia
gvwikipedia
hrwikipedia
hywikipedia
iowikipedia
kbdwikipedia
knwikipedia
kuwikipedia
kywikipedia
lezwikipedia
minwikipedia
mkwikipedia
mrwikipedia
mswikipedia
newikipedia
nlwikipedia
nowikipedia
orwikipedia
oswikipedia
pnbwikipedia
rmwikipedia
sahwikipedia
sawikipedia
scnwikipedia
scwikipedia
shwikipedia
siwikipedia
skwikipedia
slwikipedia
sowikipedia
sqwikipedia
swwikipedia
thwikipedia
trwikipedia
ttwikipedia
ukwikipedia
uzwikipedia

wikiquote (6)

dawikiquote
enwikiquote
frwikiquote
kawikiquote
tawikiquote
trwikiquote

wiktionary (10)

elwiktionary
fiwiktionary
hiwiktionary
iswiktionary
ltwiktionary
orwiktionary
ptwiktionary
simplewiktionary
svwiktionary
zhwiktionary

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Should step 1 be "Create Template:Main Page/minerva.css with ..." ?

Jdlrobson updated the task description. (Show Details)

Just an FYI. I just opened topics about this in the tawikipedia, tawikiquote and tawiktionary talk pages.

thank you @Kaartic for your help!

No problem :)

As this change appears to be an high impact one do you think it would be worth bringing this to the notice of Community Liaisons for broader community reach?

@Jdlrobson : At nl.wiktionary a discussion at our Village Pump has resulted in this proposal for a new design. As far as I can see the user experience on mobile and normal site would become identical, except for the chrome and the font. As my experience in this field is limited, I would appreciate if you could check this design for major flaws.

I have paraphrased a little CSS from the Wikimedia GUI project, but maybe there is already an easier way to do so.

Our present Main Page at present is in the main namespace, but it would be more logical to move it to the project namespace. Could we simply change the present page in a redirect and then gradually change all references to the page in the main namespace to the page in the project namespace? This seems a logical moment for such a change.

Our present Main Page at present is in the main namespace, but it would be more logical to move it to the project namespace.

@MarcoSwart the main page is defined by the contents of https://nl.wiktionary.org/wiki/MediaWiki:Mainpage - I wouldn't recommend using redirects to do this but you should edit that interface message. German Wikipedia do this for example https://de.m.wikipedia.org/wiki/MediaWiki:Mainpage

Have left some feedback on the design, but looks good to me.

@Jdlrobson Thanks for youruseful remarks. I was aware the the most important change is in MediaWiki:Mainpage, but I do expect that there might be a lot of bookmarks pointing to the present location. I wanted to be sure that the existence of a redirect won't mess things up.

I have addressed the issue for tewikipedia and tewikisource.

Jdlrobson updated the task description. (Show Details)

Thanks everyone who's contributed to this mammoth task so far. It's lovely seeing the community banding together and helping this happen! AS @Nemo_bis says - a lot of these pages were very "mutilated" before :)

That said we still have quite a few projects left to fix and only a week before the branch cut and 85 projects have still not updated. Please let me know if you know of any efforts on those wikis to fix these issues and point me to the respective wiki discussions if they exist.

In lieu of any action there, I will look into ways to automate the rest to cause the least amount of disruption.

Hey @Mahir256 I just want to flag that https://bn.m.wikisource.org/?debug=true&mfnolegacytransform=1 is not mobile friendly. Was the removal from a description a request to opt out of this change or is this a mistake?

Was the removal from a description a request to opt out of this change or is this a mistake?

I think its neither of those. I see a recent change there quoting this task. May be they're just not aware that the page needs more changes to ensure its mobile-"friendly"? 🤔

Anyways, coming to the point, the changes have been done in tawiktionary. The description already seems to reflect this. Nice.

There's discussion about this in tawikiquote. From that it seems a change is likely to happen soon.

@Jdlrobson I was under the impression, based on "Assuming you do not want to do a big redesign and just want to retain the existing main page design, you can follow this guide." in the link given under "Option 2" in the task description, that simply rewriting the main page so that it does not use tables and inline styles was sufficient for remedying the issue put forth by this task. If there is some other requirement for mobile main pages that I am missing, I'm happy to incorporate that.

@Kaartic Bodhi and I were aware that the desktop main page design by itself is not presently suitable on mobile, but in my view it was necessary to at least get to a point where further structural and style improvements--some of which I have started already--are easier to incorporate, and what better than by first transplanting the main page to something more skinnable?

@Mahir256 it's looking great now. Earlier I was still seeing 2 column layouts, so maybe there was a caching issue. Thanks for taking care of it!

@Jdlrobson enwikisource has now switched over to a new version that's not reliant on the MF special casing. I haven't filed a separate Phab to disable it in config since it should drop by default in three days, but feel free to do so (or nudge me to do it) if you want it for tracking purposes.

We had quite a bit of trouble finding a good implementation due to using "don't change the design" as a requirement, mostly to avoid needing to go through community discussions to land them before the deadline. In retrospect we would have been better served by actually treating it as a moderate redesign to fully take advantage of modern web standards because the old design was implicitly tied to old table-based approaches. But even with that constraint the change will let us clean up (remove) tons of CSS from Common.css and stylesheets loaded by site-global Gadgets.

One experience I made was that nomobile is a poor fit because functionally it has many of the same properties as the special-casing. We started to use it but dropped it in favour of doing the hiding ourselves in a media query in a TemplateStyles-loaded stylesheet. It was too hard (impossible?) to get consistent results in all scenarios with nomobile in the mix. With a Flexbox-based layout it would probably have worked, but we had to use a CSS Grid-based approach (see "don't change" above) where nomobile just couldn't be incorporated. I don't think it should be promoted as a solution for that reason (or we'll eventually end up with a new epic to deprecate it in a few years).

Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: Xover.

Thanks @Xover for sharing your experience!

enwikisource has now switched over to a new version that's not reliant on the MF special casing.

Hurray! It looks great. I'll

But even with that constraint the change will let us clean up (remove) tons of CSS from Common.css and stylesheets loaded by site-global Gadgets.

That's amazing!

One experience I made was that nomobile is a poor fit because functionally it has many of the same properties as the special-casing.

Sounds very sensible - keeps all the decision making at your level.

In retrospect we would have been better served by actually treating it as a moderate redesign to fully take advantage of modern web standards because the old design was implicitly tied to old table-based approaches.

It sounds now that now you've made the deadline you can propose that new redesign at your leisure. Keep me posted as i"ll be interested to see what you come up with there!

To be resolved by me on 13th July. There is no need for sites to make a config change as a follow up to fixing their site. Testing with the test URI should be sufficient. if your project is still one of the 71 listed above or you are active on those projects, I urge you to take action over the weekend in case you need further support from myself in making the change.

dewiki has made the change today. I think we found a clean and sustainable solution.

cswiki is aware of this but hasn't taken any action yet. There is a new design in preparation for two years which replaces the old tables with divs and allows for more responsive design but it also includes other changes and there hasn't been any community discussion about them (despite the config change being a good opportunity to make a change). So for now, we will probably go for the "minimal effort".

dewiki has made the change today. I think we found a clean and sustainable solution.

Yep, and any remaining mf-IDs have been removed now, so all is well (except for T255682)! :)

@matej_suchanek thanks for the update.

based on this URL I would like to prioritize fixing cs.wikipedia along with other wikis which see daily traffic in the millions.

Do we have a representative on this ticket (or know of people we can ping) from Dutch , Turkish, Thai or Ukranian Wikipedia?

Screen Shot 2020-07-13 at 1.58.25 PM.png (1×2 px, 172 KB)

Change 612423 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[operations/mediawiki-config@master] Drop main page special casing on all projects

https://gerrit.wikimedia.org/r/612423

The Dutch wikipedia is ready and aware, they discussed it on the last VP announcement.
https://nl.m.wikipedia.org/?mfnolegacytransform=1&debug=1 Not perfect, but it will do for now.

@matej_suchanek thanks for the update.

cswiki now uses the compatiblity stylesheet. I have notified some interested users about this change and the priority of a new design. Feel free to weigh in if you have any recommendations for us (besides https://www.mediawiki.org/wiki/Mobile_Gateway/Mobile_homepage_formatting).

The Dutch wikipedia is ready and aware, they discussed it on the last VP announcement.
https://nl.m.wikipedia.org/?mfnolegacytransform=1&debug=1 Not perfect, but it will do for now.

There's also some improvements coming, which hopefully go live today. See https://nl.wikipedia.org/wiki/Wikipedia:Wikiproject/Hoofdpagina/2020.

Change 612423 merged by jenkins-bot:
[operations/mediawiki-config@master] Drop main page special casing on all projects

https://gerrit.wikimedia.org/r/612423

Mentioned in SAL (#wikimedia-operations) [2020-07-14T18:05:44Z] <jforrester@deploy1001> Synchronized wmf-config/InitialiseSettings.php: T32405 T254287 Stop varying wgMFSpecialCaseMainPage (duration: 01m 05s)

Mentioned in SAL (#wikimedia-operations) [2020-07-14T18:07:31Z] <jforrester@deploy1001> Synchronized multiversion/MWConfigCacheGenerator.php: T32405 T254287 Stop loading the mobilemainpagelegacy dblist (duration: 01m 05s)

Mentioned in SAL (#wikimedia-operations) [2020-07-14T18:09:36Z] <jforrester@deploy1001> Synchronized dblists/: T32405 T254287 Remove the mobilemainpagelegacy dblist (duration: 01m 04s)

Jdlrobson added a subscriber: Johan.

@Johan could a note be left in tech news with following text:
"Mobile main page special casing has been disabled as of July 14th. This has resulted in a UI degradation in the following 60 projects. If you are hearing reports or seeing problems with your mobile page please consult [[phab:T254287]] for instructions on how to fix it. Please subscribe to tech news to avoid similar problems in future."

@Jdlrobson I simplified it a bit, language-wise, since many of the affected wikis might not understand advanced English. Looks OK?
https://meta.wikimedia.org/wiki/Tech/News/2020/30

  NODES
Community 7
HOME 2
iOS 1
Note 5
os 23
text 1
Users 4
web 3