Talk:Reading/Web/Desktop Improvements

Overview

Features

Repository

FAQ

Discussions: Desktop Improvements • Accessibility for reading.

---

You can comment in any language. We are especially interested in:

• Feedback on the functionalities we have already deployed. (Please see Reading/Web/Accessibility for reading/Known issues before reporting bugs.)

• Expanding the list of existing gadgets and user scripts that are related to providing a better desktop experience.

We are discussing with many volunteers and communities at the same time. It may take some time for us to reply here. We apologize for that.

Thank you!

(Translate this page)

cant go to 2010 legacy

everytime i try to change from the vector 2022 to the vector 2010 it dosen't work, it says its change but its just locked into the 2022 version, anyone else having this problem and have a fix? Purpetic (talk) 00:21, 3 June 2024 (UTC)

Hello @Purpetic, thanks for coming here to ask this question. What option do you use to change the skins? Is it the link in the sidebar, or do you go directly to preferences? SGrabarczuk (WMF) (talk) 14:41, 4 June 2024 (UTC)

To update to the 2010 legacy, go to Settings -> Preferences -> Aspect. Select your preferred version (i.e. Vector legacy (2010)) and click on the save button. Refresh the page or clear your browser data to apply the changes. 49.236.20.80 18:08, 4 June 2024 (UTC)

Toggle the search field

Is there any way to toggle the search field in the new vector so that one doesn't have to click on the search icon everytime? I'm finding the additional key strokes necessary to open the search field rather annoying! Otherwise, new vector is largely ok for me. Keevtyne (talk) 21:51, 23 June 2024 (UTC)

Looks like you're using a very narrow screen, otherwise there should be no additional steps. Maybe on a mobile. You can try the landscape position, it could possibly help. IKhitron (talk) 13:50, 24 June 2024 (UTC)

No, I'm using my MacBook Air. The field only appears after clicking on the looking glass icon. That's the time-wasting additional step I mean. I'm back on vector 2010 now, where the search box is always available. Keevtyne (talk) 16:44, 24 June 2024 (UTC)

Weird. Maybe I'm wrong, but as far as I know it should not happen. IKhitron (talk) 23:42, 24 June 2024 (UTC)

CSS issue

Tracked in Phabricator
Task T366314

The right sidebar goes underneath the main content in small screens

Hello! I'm an interface admin from SqWiki. Can someone help me fix an issue on it with the 2020 Vector skin? The screenshot shows what I currently get in there if the window is not large enough. The tools sidebar on the right side goes underneath our page, instead of pushing it to change the layout (like the toolbar on the left does). This should be related to our layout but still don't understand properly why the right sidebar behaves differently from the left one and how to target and modify it so they behave the same. - Klein Muçi (talk) 08:13, 5 June 2024 (UTC)

Hello @Klein Muçi, thanks for coming here. I believe T366314 should solve the problem. We'll be rolling it out in the coming weeks - it's difficult to tell when exactly because there may be blocking bugs. SGrabarczuk (WMF) (talk) 15:03, 6 June 2024 (UTC)

SGrabarczuk, oh, okay then. No problem. Thank you for letting me know it's being worked on. — Klein Muçi (talk) 09:31, 7 June 2024 (UTC)

I'm back sooner than I was expecting to. Now our headers have gone completely out of proportions in Vector legacy. Can you point me on any way on how to address that? - Klein Muçi (talk) 07:18, 9 June 2024 (UTC)

Was able to handle it with the instructions explained here: Heading HTML changes — Klein Muçi (talk) 23:54, 10 June 2024 (UTC)

Common.css and Vector.css are loaded too early

Hi. I am trying to make some modifications in the CSS for the entire site (a small private wiki), more specifically setting a washed out backdrop picture for the site. It should be easy with CSS from Common.css or Vector.css but it appears that both are loaded quite early and overwritten by the skin's own CSS (I presume @media screen... comes from the skin).

I would expect Common.css and Vector.css to be loaded last, so we have a chance of modifying the "final" CSS before displaying. Steff-X (talk) 13:10, 6 June 2024 (UTC)

What version of MediaWiki are you using? Jdlrobson (talk) 14:03, 6 June 2024 (UTC)

How to sharpen the font

After 2022, when it was imposed on us, I'm again back to Vector 2022 temporarily. There has been a regression with XfDCloser on enwiki with Vector 2010, so I have to be on Vector 2022 until that is fixed (See https://en.wikipedia.org/wiki/Wikipedia_talk:XFDcloser#XFDCloser_not_showing_up_in_Vector_2010 )

How do we make the fonts same as Vector 2010. In 2010 the fonts are sharp and easier to read. In Vector 2022, the fonts are faded/jaded/less black/blurred and makes it harder to read. Any customizations we can do? Jay (talk) 09:13, 8 June 2024 (UTC)

TOC updates?

I'm back on Vector 2022 after an year and a half, and notice no improvement on the TOC. At /Archive7#TOC level we had discussed about maintaining the top level TOC only, but I still see the full expansion of multiple levels at en:Wikipedia:Redirects for discussion#Current list making it unusable. At that discussion User:Shells-shells had tried explaining the issue to User:OVasileva (WMF).

At /Archive8#Old style TOC in Vector-2022 Skin, User:Jonesey95 had provided a FAQ entry (which I had tried without success), but now that entry is missing in the FAQ. User:SGrabarczuk (WMF) had said he would ask the developers in the team to update the script that will bring back the old TOC, but I see that was the last post of that discussion.

Also, since we are at TOC, is there a way to make the TOC (of talk pages) concise? I do not wish each entry to be on two lines, where the second line mentions the number of comments. Looking for a simple one line per entry kind of TOC. Jay (talk) 20:38, 12 June 2024 (UTC)

Hey @Jay, thanks for the reminder! The reason why not much in the TOC has changed over the last 1.5 years is that since last year, we've been focused on a new project - Accessibility for reading. Before that, we did have some feedback about TOC, but I guess the direction wasn't clear enough for us to make more changes. Currently, we're revisiting tasks related to Desktop Improvements, and we'll definitely talk about the issues you're pointing at.

Regarding the TOC of the talk pages, that's actually part of the Talk pages project by a different team. The goal for introducing this second line was for junior contributors to be able to tell more easily that what they're seeing is a TOC of different discussions, and not a TOC of article sections. Because adding that second line was on purpose, I guess that the only way to disable it is by adding .ext-discussiontools-init-sidebar-meta {display:none} in your personal CSS.

I wholeheartedly encourage you to subscribe to our newsletter. We send messages whenever there's important news to share. You won't miss anything if you subscribe. Thanks! SGrabarczuk (WMF) (talk) 22:54, 12 June 2024 (UTC)

As with the Visual Editor, which was in beta for something like ten years, the WMF developers have for the most part moved on from development of Vector 2022. Straightforward fixes like making the sticky header consistent with the default top-of-page header (no progress since June 2023), or making the sticky header visible on all pages (no progress since February 2023), are stalled. See the task board for more status information. I recommend that you explore the various CSS adjustments that you can apply to your personal vector-2022.css file. See en:User:Jonesey95/common.css for the fixes that I have applied to make Vector 2022 usable on my computer. Jonesey95 (talk) 04:13, 13 June 2024 (UTC)

Somewhat unrelated: I believe that the number of comments shown below each talk page heading in the TOC is provided by the Beta feature called "Discussion Tools". You can disable that Beta feature in your Preferences. I could be wrong about this. Jonesey95 (talk) 04:16, 13 June 2024 (UTC)

@Jonesey95 you're right, some tasks are straightforward from purely engineering perspective, but I wouldn't call these tickets "fixes" because there are product/design considerations at play. Enabling the sticky header in more namespaces wasn't done because the team decided that we wouldn't do that in namespaces where there would be few buttons in the sticky header. (Like in special pages, there's no talk page, edit, history, or watch.) In addition, these requests were triaged as "of low priority".

Having said that - if you'd like to point at more tasks or not yet documented issues, please let me know!

(And yes, you're correct, the the number of comments shown below each talk page heading in the TOC is provided by the Beta feature called "Discussion Tools". But within weeks, it won't be a beta feature - it will become a regular part of the skin. That's why I suggested to personalize this with CSS.)

Thanks! SGrabarczuk (WMF) (talk) 18:00, 13 June 2024 (UTC)

Different Wikipedia look

Hello all, since yesterday, wikipedia is appearing a bit differently for me. The central content is more wider, and infoboxes appear weirder and different. When we use the main article thing, for eg, when I use the main article, there is a dark grey box around it which wasnt there before. Is there any way I can change the setting back?

Main page: Wikipedia

Pharaoh496 (talk) 10:15, 14 June 2024 (UTC)

I am seeing the same things. SimplyLouis27 (talk) 12:07, 14 June 2024 (UTC)

Well then I would appreciate some help on how to revert back by someone Pharaoh496 (talk) 14:08, 14 June 2024 (UTC)

Mine has changed back now. SimplyLouis27 (talk) 17:17, 14 June 2024 (UTC)

same Pharaoh496 (talk) 12:16, 15 June 2024 (UTC)

@Pharaoh496 and SimplyLouis27: FYI: The message from the WMF web team regarding recent interface change. SCP-2000 (talk) 04:20, 16 June 2024 (UTC)

Language links don't work in 2010 editor

Tracked in Phabricator
Task T367657

Probably it was already reported, but due to the yesterday's changes, I changed the skin to Vector (2010), and I didn't even remember that the language links do work while editing in the 2010 editor. With Vector (2022), it only works with 2017 and visual editor. Vinickw‍✉ 18:21, 14 June 2024 (UTC)

What do you mean by language links? Nardog (talk) 18:00, 15 June 2024 (UTC)

The languages dropdown menu, in the top right corner. If you are editing using the 2010 editor it'll show "add languages", even though it's available in others wikis. Vinickw‍✉ 19:52, 15 June 2024 (UTC)

Ah, that seems specific to live/realtime preview. Filed phab:T367657. Nardog (talk) 15:36, 16 June 2024 (UTC)

Problem with infobox images that seems specific to Vector (2022) skin

Something about the implementation of Vector (2022) seems to be causing a problem with image size in the infobox for parliamentary elections on the Icelandic Wikipedia. Pictures of outgoing/incoming prime ministers appear tiny in the right and left bottom corners (see attached screenshots) or fail to show at all. It works fine when viewed in the older Vector skin. The template for the infobox (is:Snið:Þingkosningar) is implemented exactly the same as on the English version (en:Template:Infobox legislative election) but I don't have this problem on the English Wikipedia even when I use the Vector (2022) skin there. Bjarki S (talk) 12:29, 17 June 2024 (UTC)

Apparently a known issue. Bjarki S (talk) 17:29, 17 June 2024 (UTC)

TOC is really distracting

The new skin makes sites that use MediaWiki really difficult to read. I can't read the page when the TOC keeps changing at the side of what I'm trying to read. Every time it changes, it grabs my attention and I automatically look over to see what happened. It's horrible and I usually close the tab and look for a less annoying site.

On my phone it's even worse, because the entire TOC flickers as I scroll, and the text keeps changing size and jumping about.

- Nikki (talk) 06:58, 15 June 2024 (UTC)

Hey @Nikki! I'm sorry to hear that the TOC is distracting you. You can collapse it, and then it will be easier for you to focus on reading, I hope. If you're curious why it's visible by default, look at the page about the feature. Regarding your phone, have you tried the skin for mobile devices? SGrabarczuk (WMF) (talk) 19:19, 17 June 2024 (UTC)

can you record that, because im curious what is going on. It sound like either lack of graphics acceleration, or page size changes where scroll ars are popping in and out. Does it replicate in multiple browsers ? —TheDJ (Not WMF) (talk • contribs) 12:38, 18 June 2024 (UTC)

iPad font too big, zoom/scaling does not work

Even trying to use "small" font size results in a honestly ridiculously huge font size. Makes it feel not like I am reading on a nearly 13 inch tablet, but on a phone I am holding up way too close. The worst part is that trying to use the browser zoom/scaling feature does not work at all. Which I would put as an accessibility feature because it also does not work to make the interface larger either. Saphire Lattice (talk) 22:52, 17 June 2024 (UTC)

I have missed entirely that this is "Desktop" discussion page, oops. Not sure where to move it specifically? This does happen in "desktop mode" of iPad, though it seems to make some assumptions there and here. The zooming is definitely fault of iPad Safari though, given the following info.

I poked around with the browser debug tools on iPad when Wikipedia was open in Safari, and noticed that there's no <meta> viewport tag in the HTML head. Which probably shouldn't have mattered, but the moment I added a generic one, the site properly started to utilize the full viewport size and did not look weirdly zoomed in. So it seems that Safari expects sites to have this, and defaults to a really weird way of rendering things when that's absent. Causing the site to look way too zoomed in, and not following the browser zoom. So uh, I suppose it's mostly the fault of Safari, plus what's basically an outright bug? But it can be mitigated on wiki side.

Edit: Correction, there is a meta element for viewport config, and it gets set to "width=1100px". Saphire Lattice (talk) 19:40, 20 June 2024 (UTC)

The current default state of Wikipedia pages

I find it difficult to comment here, because I understand people invested a lot of their time into improving the default desktop theme. I thank them for their work and good intentions.

Having said that, the current default look of WP:EN articles in my browser (Safari), with my default window size, does not work for me, at all. It used to be fine.

When reading an article on WP, I see no announcement of these changes, link to an explanation, or invitation to supply feedback. I spent 20 minutes searching, and I am still not sure this is the right place to discuss.

For instance, when reading [https://en.wikipedia.org/wiki/Roberto_Bompiani]:

• The Contents sidebar (left) takes almost 1/4 of the page width, and is virtually empty.
• The Appearance sidebar (right) consumes another 1/4 of the page width.
• As a result, page content looks cramped, on a page that is almost half empty.
• The default font is weirdly large; the small font is too small for my eyes. My browser can zoom already, anyway.
• Switching Width (Standard/Wide) does nothing.
• Repositioning the sidebars is lost when cookies are flushed (which is done multiple times a day).
• One of the most important elements (for me), the Wikidata ID, is hidden in a popup menu. This has been the case for a while.
• Three sidebars (Contents/Appearance/Tools) each move to a different region when "hidden". I find this confusing.
• When doing research, I visit Wikipedia in multiple languages (EN, DE, IT, FR, NL, etc) every day. Increasingly those WP instances look and function differently.
• I know I can influence the look of WP through my profile, when I log in. But I do not want to log in unless I plan to edit WP.

This is what I think. Thank you for your time. Superp (talk) 13:46, 18 June 2024 (UTC)

Hello @Superp:

• The font size options are based on the readability research and the community-proposed designs. Do you have any suggestions for these options?
• "Switching Width (Standard/Wide) does nothing." This may be due to the narrow screen (see phab:T366216). Could you please describe the problem you are experiencing in more detail?
• "Increasingly those WP instances look and function differently." Could you explain this issue in more detail?

Thanks. SCP-2000 (talk) 11:16, 29 June 2024 (UTC)

Thanks for your reply. I understand what you are trying to do is tough, I appreciate your effort.

To sum up, the design is good but suffers from Microsoft Office syndrome: too much space taken by tools, navigation, etc., too little space for content. The larger font for content causes further content vs tools imbalance.

To address your points:

• But this very page does not reflect those options. The font here is a bit smaller than it is on a default WP page, and the page more usable (for me) because of it. Suggestion: can we make the default font for body text a tad smaller?
• Yes, apparently it is due to my browser being "narrow". When I click the tool, a message appears to that effect. Why show the tool when we know it does not work? Suggestion: remove the "width" tool unless it actually works.
• Suggestion: redesign the appearance tool. Compact "text" to 1 line, 3 buttons, and "width" to 1 line, 2 buttons. Move it elsewhere. OR collapse the whole tool and move it elsewhere. 2 columns for tools etc. is too much (for me).
• I'll try. Compare [1] with [2].

Best. Superp (talk) 19:23, 9 July 2024 (UTC)

@Superp: Hello, thanks for your response! I am not the developer of Wikimedia Foundation:) I believe your suggestion can let them know more about your need and take it into consideration.

Regarding the font size, the research and testing showed that increasing the default font size can improve readability, and that users prefer a slightly larger font size. You can choose "small" option (which is the previous default font size), if you prefer smaller size. SCP-2000 (talk) 03:26, 10 July 2024 (UTC)

cc @SGrabarczuk (WMF) SCP-2000 (talk) 03:36, 10 July 2024 (UTC)

Workaround for MW 1.39 Wikibase users

// Only for Wikibase users with their own instance//

When using the new version of this skin with a MW 1.39 instance, the top search bar does not correctly find Items. This is absolutely not an official solution (I couldn't find any documentation on this), but modifying the code in red here worked for me. Anchardo (talk) 04:53, 19 June 2024 (UTC)

retest content separation wen

@SGrabarczuk (WMF) In the last update, you mention As we reported previously, the A/B test didn't prove that the color-based separation was an improvement.. However, that's not what the previous update really concludes. The previous update concluded that the prototype was flawed for small screen sizes and recommended Introducing improvements to Zebra, optimizing for narrower screens, and repeating the tests.. Aaron Liu (talk) 14:03, 2 July 2024 (UTC)

CSS issue with category infoboxes

Screenshot of a category infobox in dark mode using the Vector skin

Using the Vector skin in dark mode makes the title link in category infoboxes completely invisible. The infobox in the screenshot has the title "Organised labour" but the color of this title is black against a black background Other links are perfectly readable. Etothepi16 (talk) 16:18, 6 July 2024 (UTC)

Vector 2022 kollidiert neuerdings mit "tabelle-kopf-fixiert"

In der deutschsprachigen Wikipedia mit Vector 2022 funktionieren sticky Tabellenköpfe nicht mehr; sie rutschen in die erste Datenzeile, verdecken dort Inhalte und scrollen in dieser Position mit, Beispiel: d:Liste der Kulturdenkmäler in Blumenthal (Bremen). Die Ursache vermute ich in einer jüngeren Änderung im JavaScript, Grund: Wenn ich im Browser JavaScript blockiere, funktioniert "tabelle-kopf-fixiert" einwandfrei. Quarz (talk) 20:08, 6 July 2024 (UTC)

@Quarz: Es ist nicht direkt JavaScript, sondern die CSS-Klasse noresize, die anscheinend durch JavaScript hinzugefügt wird. Siehe phab:T330527. – Tacsipacsi (talk) 10:09, 7 July 2024 (UTC)

P.S. Das Beispiel ist de:Liste der Kulturdenkmäler in Blumenthal (Bremen) – Wikipedia (de:), nicht Wikidata (d:). – Tacsipacsi (talk) 10:11, 7 July 2024 (UTC)

@Tacsipacsi: Danke! Die Disk. auf phab macht mir keine Hoffnung auf eine schnelle Lösung. Daher habe ich durch den Eintrag

.noresize{overflow-x: unset !important;}

in meiner common.css für mich Abhilfe geschaffen und hoffe, dass auch die Allgemeinheit bald die Tabellen in voller Funktion sieht. Quarz (talk) 11:10, 8 July 2024 (UTC)

Changing the minimum width for showing the left sidebar

Is there a way to change the minimum width required to keep the left sidebar? I want it remain even when the browser window is narrower than 1120px, which looks like it's the threshold.

I tried copying all the CSS rules I could find mentioning that as min-width to my user CSS and changing to a lower min-width. That didn't quite work, though I may have missed something. You can see my attempt here. Sebastian Berlin (WMSE) (talk) 12:39, 8 July 2024 (UTC)