Page MenuHomePhabricator

Be explicit about Vector's responsive-support (Was Table of contents on mobile devices (not the same as narrow screens))
Closed, ResolvedPublic3 Estimated Story PointsBUG REPORT

Description

Vector is not a responsive skin (does not set the viewport tag), so when viewed on mobile devices, the browser will adapt the content. It will not operate like a narrow screen and our breakpoints will not apply.

Whatever the page loads like will be the minimum zoom level and it won't be possible to zoom out.

What happens?:

Before changeAfter change
Screenshot_20220426-072235_Chrome.jpg (2×1 px, 531 KB)
Screenshot_20220426-072156_Chrome.jpg (2×1 px, 501 KB)

Note the line length for the article content is now shorter and crammed to the right.

What is proposed

Short term: Explicility zoom out on Vector 2022 when viewed on mobile device.
Long term: Make the skin responsive by adapting it to mobile display just like we do on Minerva.

The short term fix will likely reduce the amount of bug reports we get relating to user's expectations not being met by not making an explicit decision here e.g. T309223

Event Timeline

ovasileva lowered the priority of this task from High to Medium.Apr 26 2022, 5:31 PM

Change 790448 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] POC: Non-responsive skins should zoom out by default

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

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/d3c5f6174c/w/

The above change is really subtle, but you'll notice the zoom level is increased (logo and hamburger are smaller).

Before:

Screenshot_20220509-152459_Chrome.jpg (2×1 px, 619 KB)

After:

Screenshot_20220509-151012_Chrome.jpg (2×1 px, 651 KB)

I've written in more detail here:
https://phabricator.wikimedia.org/phame/post/view/286/should_vector_be_responsive/

Jdlrobson renamed this task from Table of contents on mobile devices (not the same as narrow screens) to Explicility zoom out on Vector 2022 when viewed on mobile device (Was Table of contents on mobile devices (not the same as narrow screens)).May 27 2022, 4:32 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson renamed this task from Explicility zoom out on Vector 2022 when viewed on mobile device (Was Table of contents on mobile devices (not the same as narrow screens)) to Be explicit about Vector's responsive-support (Was Table of contents on mobile devices (not the same as narrow screens)).Jun 2 2022, 3:28 PM
Jdlrobson updated the task description. (Show Details)

Change 790448 merged by jenkins-bot:

[mediawiki/core@master] Non-responsive skins should zoom out by default

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

Patch has been merged. I'm adding a User-notice in case users want to feedback problems with this when it rolls out on the train Thursday 23rd:

Something like:
"Users using non-responsive skins e.g. MonoBook or Vector(s) on mobile devices may notice a slight change in the default zoom level. This is intended to optimize zooming and ensure all interface elements are present on the page (for example the table of contents on Vector 2022). In the unlikely event this cases any problems with how you use the site, we'd love to understand better, please direct @Jdlrobson to any on-wiki conversations."

I've opened all the desktop skins on my mobile phone and didn't notice anything problematic.
Let's keep this one open to allow for the User-notice .

Quiddity subscribed.

Added to https://meta.wikimedia.org/wiki/Tech/News/2022/25 - It will be frozen for translation in ~22 hours, so any edits are needed before then. Thanks!

Feedback on T311119 and https://it.wikipedia.org/wiki/Wikipedia:Officina?uselang=it#Versione_Desktop_su_dispositivi_mobili suggests this may not be working as intended. I will look into this before Thursday 1pm.

This has caused most wikimedia sites to become unusably wide on ipads

image0.jpg (1×2 px, 144 KB)

@DogsRNice yes we're aware! Right now I'm trying to work out if the impact is just on users using iPads or if it's also impacting the experience on mobile. Are you also experiencing similar problems on a mobile phone? Which version of iPad are you using? Is your experience consistent with the report on T311119 ?

We pushed a change this morning to tweak the viewport based on feedback. We removed the zoom and relaxed the 1200px width to 1000px
I409194accaf5592772fd70ee5b0005ca4199e282
I've documented the learnings in more detail here: https://phabricator.wikimedia.org/phame/post/view/286/should_vector_be_responsive/#4431

The on-wiki conversations seem to suggest users are happy with the end result. I am going to leave this open over the weekend just in case anything else comes up before resolving.

Hmm 1000 is exactly the breakpoint for the sticky header, so now I no longer get a sticky header on my landscape iPad, which I find a bit of a shame.

Also it seems that the font size can no longer be set on iPads, which is also a side effect of this change (see screenshot with font size set to 300%). Adding initial-scale=1.0 to the viewport definition fixes that somehow (hmm, maybe.. hard to verify in the inspector, as viewport evaluation happens at page load)

2FC6322A-FE2A-441A-AE2C-542F25D26F5E.jpeg (1×2 px, 1 MB)

We will take a look next week
https://en.wikipedia.org/w/index.php?title=Wikipedia:Village_pump_(technical)&oldid=1094833127
In the meantime editors can workaround this by adding a rule to their user CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust)

Regarding the sticky header, a few editors complained about the max width that also applies at that breakpoint.

Trying to get this view predictable across platforms so we are in a more comfortable place to make Vector responsive (for those that want it via the associated user preference).

@TheDJ can you change the privacy of your image? An annoying bug is making that default to private

We will take a look next week
https://en.wikipedia.org/w/index.php?title=Wikipedia:Village_pump_(technical)&oldid=1094833127
In the meantime editors can workaround this by adding a rule to their user CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust)

I think these r distinct issues though….

Hmm 1000 is exactly the breakpoint for the sticky header, so now I no longer get a sticky header on my landscape iPad, which I find a bit of a shame.

That should be fixed by https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/808080 now

Also it seems that the font size can no longer be set on iPads, which is also a side effect of this change (see screenshot with font size set to 300%). Adding initial-scale=1.0 to the viewport definition fixes that somehow (hmm, maybe.. hard to verify in the inspector, as viewport evaluation happens at page load)

Opened T311795 to look into this more.

I think these r distinct issues though….

Are you saying the Village pump discussion is distinct from the issue you are raising or something else? In the village pump discussion there are 2 concerns raised:

  1. "I was surprised to find the font about 50% larger than it had been last night."
  2. "I can adjust the font size by pressing the Cmd & + (or the cmd & -) keys at the same time. This didn't work."

I believe the font-size change, but I'm not seeing anything too problematic with the current font size, personally (but maybe I'm looking on the wrong version of an iPad?)

I think issue 2 is the biggest problem here so I'd like to make sure we fix that first. I imagine that might fix any issues perceived with 1.

To be continued on T311795 (feel free to reply here though if I've misrepresented the problems)

Test wiki on Patch demo by Jdlrobson using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/d3c5f6174c/w/