Page MenuHomePhabricator

Consider how Vector 2022 displays on mobile devices
Closed, DuplicatePublic

Assigned To
None
Authored By
alexhollender_WMF
Oct 4 2022, 3:04 PM
Referenced Files
F50280234: 圖片.png
May 5 2024, 6:35 AM
F50279924: 圖片.png
May 5 2024, 6:34 AM
F35546625: Screen Shot 2022-10-04 at 12.10.57 PM.png
Oct 4 2022, 4:15 PM
F35546623: Screen Shot 2022-10-04 at 12.09.06 PM.png
Oct 4 2022, 4:15 PM
F35546621: Screen Shot 2022-10-04 at 12.07.59 PM.png
Oct 4 2022, 4:15 PM
F35546619: Screen Shot 2022-10-04 at 12.07.08 PM.png
Oct 4 2022, 4:15 PM
F35546569: Screen Shot 2022-10-04 at 11.05.44 AM.png
Oct 4 2022, 3:06 PM
F35546558: image.png
Oct 4 2022, 3:04 PM
Tokens
"Love" token, awarded by SD0001."Love" token, awarded by Awesome_Aasim.

Description

Description

Assuming you have Vector 2022 as your default skin, if you visit the mobile site and click the "Desktop" link, you get a zoomed out version of Vector 2022. If we added <meta name="viewport" content="width=device-width,initial-scale=1"> the site would no longer be zoomed out. For certain pages, like articles, this yields a more approachable experience. For other pages that are more dense, and have not yet been made responsive (e.g. log pages like History and Recent changes), the zoomed-out view might be more approachable (though to note, with the non-zoomed-out version you can manually zoom-out). Compare these screenshots:

currentupdated
Screen Shot 2022-10-04 at 11.05.44 AM.png (1×750 px, 349 KB)
image.png (1×1 px, 554 KB)
Screen Shot 2022-10-04 at 12.07.08 PM.png (1×744 px, 306 KB)
Screen Shot 2022-10-04 at 12.07.59 PM.png (1×750 px, 226 KB)
Screen Shot 2022-10-04 at 12.09.06 PM.png (1×752 px, 308 KB)
Screen Shot 2022-10-04 at 12.10.57 PM.png (1×750 px, 158 KB)

Pros & Cons

Pros

  • easier to use / no need to zoom on Article pages
  • larger text

Cons

  • need to zoom-out in order to see log pages (e.g. History, Recent changes)

Developer notes

Changing this is a simple configuration change to set wgVectorResponsive to be true.

Event Timeline

@Jdlrobson @Jdrewniak I'd like to use this task to articulate any drawbacks we see to adding initial-scale=1 to Vector 2022. As far as I can tell it's a big usability improvement.

alexhollender_WMF renamed this task from Consider adding "initial-scale=1" to Vector 2022 to Improve Vector 2022 on mobile devices: consider adding "initial-scale=1".Oct 4 2022, 3:09 PM

This behavior is an obvious usability improvement but is currently intentional as several editors have explicitly requested it. Many editors vocally detest responsive sites. You may remember this came up recently with iPad users where users complained that the table of contents was collapsed (T306910).

We already have a solution for this (it's a one line change if we ignore the existing issues with large images and tables). The solution here is to make the responsive preference in Special:Preferences apply to Vector 2022. That would turn this behavior on by default and those editors that dislike it would be able to opt out ( anonymous users would have to request desktop site). That change is trivial but the social implications are quite high and I would recommend the English Wikipedia running an RFC on it before we did that there. This work is tracked in T106463

alexhollender_WMF renamed this task from Improve Vector 2022 on mobile devices: consider adding "initial-scale=1" to Consider how Vector 2022 displays on mobile devices.Oct 4 2022, 4:15 PM
alexhollender_WMF updated the task description. (Show Details)
ovasileva triaged this task as Medium priority.Oct 5 2022, 4:13 PM
ovasileva moved this task from Incoming to Current Fiscal Year on the Web-Team-Backlog board.

Is there a way to add this individually with userJS/CSS? (or Greasemonkey/etc?) I think it might be the missing ingredient to make my mobile reading and editing a joy with Vector-2022, and would love to test it out!

@Quiddity

importScript('User:Jdlrobson/responsiveVector2022.js')

Edit (if not using enwiki):

importScriptURI('https://en.wikipedia.org/wiki/User:Jdlrobson/responsiveVector2022.js?action=raw&ctype=text/javascript')

Should I drop comments on your talk page about papercuts with that (images and tables generally already having their own tasks)? I've already bumped into a few things that could use adjustment that I think should be pretty easy to take care of. (And if not, could be considered actionables before any potential deployment.)

@Izno is that a question for me? Regarding images and tables - yes the plan is to fix them inside Vector itself (we're looking at images over the next 2 weeks).

There are no plans to make Vector responsive this year (by that I mean adding a meta[viewport] tag to the HTML of desktop) as we don't have capacity to handle the backlash I expect we'd get from certain community members (there are lots of community members who don't seem to want a responsive desktop skin) so for now but feel free to suggest improvements to [[User:Jdlrobson/responsiveVector2022.js]] or turn it into a gadget. Improvements to Vector itself to better handle content responsively (e.g. when you resize the browser) are always appreciated.

Yes, I'm asking where is best to suggest improvements to the script and/or skin based on use of the script. :)

Talk page is fine. We can create phabricator tickets for anything that comes out of that discussion.