Page MenuHomePhabricator

Translatewiki.net does not have a mobile view
Open, Needs TriagePublic

Assigned To
None
Authored By
RodneyAraujo
Nov 20 2020, 2:10 PM
Referenced Files
F36989276: translatewiki-9.png
May 9 2023, 12:31 AM
F36989275: translatewiki-8.png
May 9 2023, 12:31 AM
F36989273: translatewiki-7.png
May 9 2023, 12:31 AM
F36989271: translatewiki-6.png
May 9 2023, 12:31 AM
F36989268: translatewiki-5.png
May 9 2023, 12:31 AM
F36989266: translatewiki-4.png
May 9 2023, 12:31 AM
F36989263: translatewiki-3.png
May 9 2023, 12:31 AM
F36989261: translatewiki-2.png
May 9 2023, 12:31 AM

Description

I saw that translatewiki.net does not have a mobile view (MobileFrontend extension and MinervaNeue skin). The absence of a mobile view on translatewiki.net difficults the translation for mobile users.

Event Timeline

Instead of installing MobileFrontend, Translate Wiki might want to consider using the new Vector when its capable of acting as a responsive skin using $wgVectorResponsive. Please track T242772 if that's of interest.

Change 915515 had a related patch set uploaded (by Nikerabbit; author: Nikerabbit):

[translatewiki@master] Set Vector 2022 as the default skin

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

I don't see how switching to Vector-2022 will help here. It's not a responsive skin like, say, Timeless or Monobook.

Normal wiki pages will still be difficult to read:
translatewiki-vector-2022.png (1×720 px, 157 KB) translatewiki-vector-2.png (1×720 px, 132 KB)

Versus skins like Timeless or Monobook:

translatewiki-timeless.png (1×720 px, 111 KB) translatewiki-monobook.png (1×720 px, 147 KB)

The translation interface will still require zooming in and out constantly unless you have a screen big enough to not actually need a mobile view:

translatewiki-vector-2022-2.png (1×720 px, 165 KB) translatewiki-vector.png (1×720 px, 161 KB)

Skins like Timeless or Monobook aren't great here either, but that's because the translation UI also isn't responsive - Vector and Vector-2022 would have the same issue if either of them had a mobile view.

translatewiki-timeless-2.png (1×720 px, 126 KB) translatewiki-monobook-2.png (1×720 px, 127 KB)

You are correct to point out that this does not fix the issue of supporting translating with mobile devices with a responsive UI. I have been using this skin myself for some time, and I believe it will provide better experience than the classic Vector.

There is also the VectorResponsive configuration option which I don't know if it is enabled by default.

Change 915515 merged by jenkins-bot:

[translatewiki@master] Set Vector 2022 as the default skin

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

You are correct to point out that this does not fix the issue of supporting translating with mobile devices with a responsive UI. I have been using this skin myself for some time, and I believe it will provide better experience than the classic Vector.

Unfortunately I'm not a mindreader so saying you believe it's better doesn't help me understand how you think changing the default skin is going to help.

Looking at the two pages I checked, they are both worse on my phone using the new skin, e.g.:

  • The logo is much smaller, making it harder to see which site it is.
  • The page title is smaller, making it harder to see which page it is.
  • The translate UI is narrower and shows less of the original text, making it harder to see the text to be translated.
  • The menu is harder to find/get to because it involves zooming in on the right part of the screen and clicking a button in order to see it.

Here's an example of the first two when switching tabs on my phone. The logo is clear and I can read the page title when it's set to Vector but not when it's set to Vector-2022:

translatewiki-mobiletabs.png (420×697 px, 169 KB)

There is also the VectorResponsive configuration option which I don't know if it is enabled by default.

Surely it would have made sense to look into that before changing the default skin? If it's enabled by default, it's clearly broken (see screenshots). If it's not, why is it not good enough to be enabled by default, and what does it even do?

@Nikki the error you are pointing out seems to relate to the wikitext in https://translatewiki.net/wiki/Translating:MediaWiki#GENDER: - its' adding an inline style white-space: nowrap; which is breaking the rendering of the skin.

Suggest changing

If you see something like <code style="white-space:nowrap"><nowiki>$1 {{PLURAL:$1|</nowiki>''page''|''pages''<nowiki>}}</nowiki></code>

to

If you see something like <code><nowiki>$1 {{PLURAL:$1|</nowiki>''page''|''pages''<nowiki>}}</nowiki></code>

@Nikki the error you are pointing out seems to relate to the wikitext in https://translatewiki.net/wiki/Translating:MediaWiki#GENDER: - its' adding an inline style white-space: nowrap; which is breaking the rendering of the skin.

The third page I looked at has the same issues:

translatewiki-1.png (1×720 px, 167 KB) translatewiki-2.png (1×720 px, 175 KB) translatewiki-3.png (408×683 px, 174 KB)

and also works fine in Timeless or Monobook:

translatewiki-4.png (1×720 px, 113 KB) translatewiki-5.png (1×720 px, 95 KB)

Here's the fourth, fifth, sixth and seventh pages I looked at. They have the same issues as well:

translatewiki-6.png (1×720 px, 163 KB) translatewiki-7.png (1×720 px, 183 KB) translatewiki-8.png (1×720 px, 138 KB) translatewiki-9.png (1×720 px, 98 KB)

Okay, I'll concede now that I'm not 100% sure what precisely your complaint is here. Let me clarify a few things.

and also works fine in Timeless or Monobook:

These are[[ URL | responsive skins ]]. As is Minerva. The screen will adjust accordingly to your device. These will work well on a mobile device. Minerva is the Wikimedia recommended mobile display.A lot of work has happened recently to improve code in Minerva, so it may be worthwhile reconsidering the skin for translatewiki.

If we are hoping to add a mobile view to Translatewiki I hope that we share the goal of having a responsive skin eventually? If not, please clarify.

The third page I looked at has the same issues:

These look equally bad to me from a mobile perspective. These are certainly bad choices for a mobile site. My understanding however was switching from Vector to Vector 2022 while not solving the issue, provides a better path to solving the issue?

To be clear Vector and Vector 2022 are currently not mobile friendly, When you view them in a browser, the browser will compensate for them by adjusting the article text so that the article content matches what it judges to be a "readable" font-size. Both of these are not mobile friendly and would lead to them being penalized in most search engines. There is data to show that sites that are not responsive get a higher bounce rate from users.

That said, there is a clearer path for Vector 2022 to be responsive so I would recommend displaying the Vector 2022 skin over the Vector skin if that's what we're debating here.

You mentioned $wgVectorResponsive. This feature flag is experimental and has never been used in production for view traffic and is currently not 100% supported. It can be used at your own risk, and will only somewhat improve display (for example it works great on tablet devices). If translatewiki is interested in using it, I would be interested in collaborating with translatewiki to improve Vector for mobile displays, as this is certainly something we want to work towards.

Here's the fourth, fifth, sixth and seventh pages I looked at. They have the same issues as well:

It's hard for me to tell what the issue is here you are flagging but I'm guessing you are pointing out the gray space to the right of the content? Timeless, Minerva and Monobook have several hacks in place to force content to adjust to the display, but this is not always the right solution and in future these are likely to break. In Vector 2022 we defer to content editors to make the right decisions to help mitigate impact when that does happen.

  • Support / FAQ - seems to be identical to the same issue you are flagging above which is that code elements are not breaking on long words which impacts the display of the entire display.

This can trivially be resolved across the site by adding to MediaWiki:Common.css the following rule:

@media ( mac-width: @min-width-desktop ) {
  code {     max-width: 100%;    word-wrap: break-word; }
}
  • Portal:hu - I can't see any issue in this page. Please clarify and I'll see what I can suggest.
  • Web-Chat - I'm not sure how I access this URL but your screenshot looks fine to me given all the above. Please clarify and I'll see what I can suggest.

Okay, I'll concede now that I'm not 100% sure what precisely your complaint is here.

The reason given in https://gerrit.wikimedia.org/r/c/translatewiki/+/915515/ for changing the default skin was that Vector-2022 is already better on mobile than Vector.

My complaint is that this does not appear to be true and I listed some ways in which it is actually worse:

  • The logo is much smaller, making it harder to see which site it is.
  • The page title is smaller, making it harder to see which page it is.
  • The translate UI is narrower and shows less of the original text, making it harder to see the text to be translated.
  • The menu is harder to find/get to because it involves zooming in on the right part of the screen and clicking a button in order to see it.

The screenshots are demonstrating those things.

That said, there is a clearer path for Vector 2022 to be responsive so I would recommend displaying the Vector 2022 skin over the Vector skin if that's what we're debating here.

That is actually an argument against already changing the default skin: The translation interface is a mess in responsive skins (as you can see from my screenshots of it in Timeless and Monobook), so it would be bad if Vector-2022 starts being responsive before that is fixed.

That is actually an argument against already changing the default skin: The translation interface is a mess in responsive skins (as you can see from my screenshots of it in Timeless and Monobook), so it would be bad if Vector-2022 starts being responsive before that is fixed.

Vector is no longer being developed actively. Vector 2022 is. It would be better for Translatewiki to evolve with Vector 2022 rather than to switch to it at some later date when that might be harder. I agree there's still a lot of work to make it better on mobile, so perhaps associating the patch with this ticket was not the best idea. In short, bugs in Vector 2022 have a better chance of getting fixed than Vector right now, so I think this was a good idea.

Please raise bugs against Desktop Improvements (Vector 2022) and I'll make sure they get looked at.

Also by offer of collaborating on improving VectorResponsive also stands if you are interested in moving down a truly responsive direction.