5 ms·

Details on the design process: https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improveme...

Details on the design process: https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improveme... - On Wikipedia, and any MediaWiki installation, you can add the useskin query parameter to the URL to change skins on a page, even when not logged in. Current (vector-2022): https://en.wikipedia.org/wiki/59th_Academy_Awards?useskin=vector-2022 https://en.wikipedia.org/wiki/59th_Academy_Awards?useskin=ve... Previous (vector): https://en.wikipedia.org/wiki/59th_Academy_Awards?useskin=vector https://en.wikipedia.org/wiki/59th_Academy_Awards?useskin=ve... Older (monobook): https://en.wikipedia.org/wiki/59th_Academy_Awards?useskin=monobook https://en.wikipedia.org/wiki/59th_Academy_Awards?useskin=mo... Older alternative (modern): https://en.wikipedia.org/wiki/59th_Academy_Awards?useskin=modern https://en.wikipedia.org/wiki/59th_Academy_Awards?useskin=mo... Older alternative (cologneblue): https://en.wikipedia.org/wiki/59th_Academy_Awards?useskin=cologneblue https://en.wikipedia.org/wiki/59th_Academy_Awards?useskin=co... Mobile (minerva): https://en.wikipedia.org/wiki/59th_Academy_Awards?useskin=minerva https://en.wikipedia.org/wiki/59th_Academy_Awards?useskin=mi... Responsive alternative (timeless): https://en.wikipedia.org/wiki/59th_Academy_Awards?useskin=timeless https://en.wikipedia.org/wiki/59th_Academy_Awards?useskin=ti... Installed skin list: https://en.wikipedia.org/wiki/Special:Version https://en.wikipedia.org/wiki/Special:Version

molticrystal 4y ago
Thanks, used this in conjunction with a url editing add-on [0] Description: Wikipedia Vector Skin Example URL: https://en.wikipedia.org/wiki/Joseph_campbell Include pattern: https://en.wikipedia.org/wiki/* Redirect to: https://en.wikipedia.org/wiki/$1?useskin=vector Pattern Description: Auto Redirects to vector skin version Advanced Options: Exclude pattern: https://en.wikipedia.org/wiki/*?* Feel free to toss a better way or an improvement for this if you end up doing the same. I'm sure the include and exclude patterns can be tuned, the add-on supports regex, otherwise you'll want a second rule for searches and such, but this should get a person started. [0] https://addons.mozilla.org/en-US/firefox/addon/redirector/ https://addons.mozilla.org/en-US/firefox/addon/redirector/
- User912983 4y ago
  I've made a Regex Version, which should support international wikipedia articles once the new skin arrives for them too. Description: Wikipedia Vector Skin Example URL: https://en.wikipedia.org/wiki/Joseph_campbell Include pattern: ^(https?://)([a-z0-9-]*\.)wikipedia.org\/wiki/(.*) Redirect to: $1$2wikipedia.org/wiki/$3?useskin=vector Pattern type: Regular Expression Pattern Description: Auto Redirects to vector skin version Advanced Options: Exclude pattern: ^(https?://)([a-z0-9-]*\.)wikipedia.org\/wiki/(.*)\?
yamtaddle 4y ago
Looks like my analysis on the other post using Wikiless for comparison is wrong: the new theme does transfer about 50% more data and has double the uncompressed "weight" that the previous one did, for this article. Memory use similar, bouncing between about 215 and 230MB.
phs318u 4y ago
This really should be the top comment on this post. Incredibly useful, and the last link shows that most of these skins are being actively maintained.
- trynewideas 4y ago
  All of those skins are open source and their repos are browsable on Wikimedia's Gerrit. Here's good old MonoBook: https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/MonoBook/ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/ski... For most old Wikimedia-maintained skins, the maintenance commits are largely automated build and translation changes, though they do still keep them kind of viable for modern features like notifications, or major architectural changes. For example, MediaWiki 1.35 added Mustache templating: https://www.mediawiki.org/wiki/Manual:How_to_make_a_MediaWiki_skin/Migrating_SkinTemplate_based_skins_to_SkinMustache https://www.mediawiki.org/wiki/Manual:How_to_make_a_MediaWik... So here's the commit to MonoBook converting it to use Mustache: https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/MonoBook/+/6322506db692ab5e8134da8ce7365a895f163767%5E1..6322506db692ab5e8134da8ce7365a895f163767/ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/ski...
  - jdlrobson 4y ago
    Hey there, developer here and I can confirm that we are still actively maintaining those skins and preserving them. We have around 101 skins that work with MediaWiki and 7 skins deployed in production. You might be interested in the sections "WE MADE IMPROVEMENTS TO BACKWARD COMPATIBILITY" and "WE IMPROVED THIRD-PARTY SUPPORT" on https://jdlrobson.com/posts/2023-01-17_the-new-wikipedia-appearance-that-took-a-whole-village https://jdlrobson.com/posts/2023-01-17_the-new-wikipedia-app... which have a few more links that might be of interest.
    - trynewideas 4y ago
      Hey! What happened with the AFBTL a11y feedback on focus-order issues, like closing or hiding the language menu throwing focus back to the top of the page, or the ToC menu problems? Those seemed like a11y dealbreakers, but they made it through to GA.
csande17 4y ago
It seems like Monobook is the only skin whose styling matches all the boxes and tables used in articles. (Minerva makes a valiant attempt to restyle infoboxes but doesn't touch other elements like https://en.wikipedia.org/wiki/2020_Masters_(snooker)#Main_draws https://en.wikipedia.org/wiki/2020_Masters_(snooker)#Main_dr... .) It's forward-thinking, placing the search box in the sidebar where it doesn't take up valuable vertical real estate on widescreen displays. It doesn't try to shove controls in between the title of the article and the content of the article. It's even got a responsive layout for mobile devices! I say they should have bumped up the font size a notch, added a max width option, and saved themselves thirteen years of redesign work. Web design truly did hit its peak in the early 2000s.
paganel 4y ago
Yeah, I hate it, it introduced lots of white space (I'd say about 20-25% of the screen) on the right-hand side. I don't see how this new version [1] is better than this old version [2] [1] https://imgur.com/a/IZHxqOy https://imgur.com/a/IZHxqOy [2] https://imgur.com/a/q1PD3WY https://imgur.com/a/q1PD3WY
- arrrg 4y ago
  The reason for this is readability. Long lines of text are empirically bad for readability, making it hard for readers to find the correct next line. However, the line length Wikipedia picked seems to be a bad compromise. At around 120 characters per line it‘s double the recommend line length (60 characters). If you look at newspapers, magazines and books you will see the 60 character rule of thumb adhered to pretty exactly and thoroughly. It‘s just a typographical best practice. On the web and on wider maximized screens the issue is always the white space. Newspapers solve this issue with columns. However, that‘s not a realistic solution on the web (not so much for technical reasons, mostly because scrolling is fundamentally incompatible with columns).
  - mananaysiempre 4y ago
    > However, the line length Wikipedia picked seems to be a bad compromise. At around 120 characters per line it‘s double the recommend line length (60 characters). Unfortunately, Wikipedia uses a lot of right-side floats, some of which are quite wide. They are also frequently referred as “on the right” in the main text, which can be quite jarring on mobile/minerva where they might be above or below. I could imagine a breakpoint where those floats would turn into margin notes, but that sounds extraordinarily fiddly.
  - deleted 4y ago
    [deleted]
  - rascul 4y ago
    60 characters is way too short for comfort. Too much vertical movement makes it hard to keep track of the line I'm on. 120 is better but still too short in my opinion if the page is wide enough for longer lines.
pndy 4y ago
I find timeless most visually pleasing - it does bring some professional look to Wikipedia. And it also provides direct access to pages in other languages without additional clicks, which is important for me because it's the feature I'm using all the time.
- kome 4y ago
  I think "timeless" is ugly, unprofessional and not very usable. i'm happy about vector 2022, i think they did a really good job. but, of course, de gustibus non est disputandum.

molticrystal 4y ago

Thanks, used this in conjunction with a url editing add-on [0] Description: Wikipedia Vector Skin Example URL: https://en.wikipedia.org/wiki/Joseph_campbell Include pattern: https://en.wikipedia.org/wiki/* Redirect to: https://en.wikipedia.org/wiki/$1?useskin=vector Pattern Description: Auto Redirects to vector skin version Advanced Options: Exclude pattern: https://en.wikipedia.org/wiki/*?* Feel free to toss a better way or an improvement for this if you end up doing the same. I'm sure the include and exclude patterns can be tuned, the add-on supports regex, otherwise you'll want a second rule for searches and such, but this should get a person started. [0] https://addons.mozilla.org/en-US/firefox/addon/redirector/ https://addons.mozilla.org/en-US/firefox/addon/redirector/

User912983 4y ago
I've made a Regex Version, which should support international wikipedia articles once the new skin arrives for them too. Description: Wikipedia Vector Skin Example URL: https://en.wikipedia.org/wiki/Joseph_campbell Include pattern: ^(https?://)([a-z0-9-]*\.)wikipedia.org\/wiki/(.*) Redirect to: $1$2wikipedia.org/wiki/$3?useskin=vector Pattern type: Regular Expression Pattern Description: Auto Redirects to vector skin version Advanced Options: Exclude pattern: ^(https?://)([a-z0-9-]*\.)wikipedia.org\/wiki/(.*)\?

yamtaddle 4y ago

Looks like my analysis on the other post using Wikiless for comparison is wrong: the new theme does transfer about 50% more data and has double the uncompressed "weight" that the previous one did, for this article. Memory use similar, bouncing between about 215 and 230MB.

phs318u 4y ago

This really should be the top comment on this post. Incredibly useful, and the last link shows that most of these skins are being actively maintained.

trynewideas 4y ago
All of those skins are open source and their repos are browsable on Wikimedia's Gerrit. Here's good old MonoBook: https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/MonoBook/ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/ski... For most old Wikimedia-maintained skins, the maintenance commits are largely automated build and translation changes, though they do still keep them kind of viable for modern features like notifications, or major architectural changes. For example, MediaWiki 1.35 added Mustache templating: https://www.mediawiki.org/wiki/Manual:How_to_make_a_MediaWiki_skin/Migrating_SkinTemplate_based_skins_to_SkinMustache https://www.mediawiki.org/wiki/Manual:How_to_make_a_MediaWik... So here's the commit to MonoBook converting it to use Mustache: https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/MonoBook/+/6322506db692ab5e8134da8ce7365a895f163767%5E1..6322506db692ab5e8134da8ce7365a895f163767/ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/ski...
- jdlrobson 4y ago
  Hey there, developer here and I can confirm that we are still actively maintaining those skins and preserving them. We have around 101 skins that work with MediaWiki and 7 skins deployed in production. You might be interested in the sections "WE MADE IMPROVEMENTS TO BACKWARD COMPATIBILITY" and "WE IMPROVED THIRD-PARTY SUPPORT" on https://jdlrobson.com/posts/2023-01-17_the-new-wikipedia-appearance-that-took-a-whole-village https://jdlrobson.com/posts/2023-01-17_the-new-wikipedia-app... which have a few more links that might be of interest.
  - trynewideas 4y ago
    Hey! What happened with the AFBTL a11y feedback on focus-order issues, like closing or hiding the language menu throwing focus back to the top of the page, or the ToC menu problems? Those seemed like a11y dealbreakers, but they made it through to GA.

csande17 4y ago

It seems like Monobook is the only skin whose styling matches all the boxes and tables used in articles. (Minerva makes a valiant attempt to restyle infoboxes but doesn't touch other elements like https://en.wikipedia.org/wiki/2020_Masters_(snooker)#Main_draws https://en.wikipedia.org/wiki/2020_Masters_(snooker)#Main_dr... .) It's forward-thinking, placing the search box in the sidebar where it doesn't take up valuable vertical real estate on widescreen displays. It doesn't try to shove controls in between the title of the article and the content of the article. It's even got a responsive layout for mobile devices! I say they should have bumped up the font size a notch, added a max width option, and saved themselves thirteen years of redesign work. Web design truly did hit its peak in the early 2000s.

paganel 4y ago

Yeah, I hate it, it introduced lots of white space (I'd say about 20-25% of the screen) on the right-hand side. I don't see how this new version [1] is better than this old version [2] [1] https://imgur.com/a/IZHxqOy https://imgur.com/a/IZHxqOy [2] https://imgur.com/a/q1PD3WY https://imgur.com/a/q1PD3WY

arrrg 4y ago
The reason for this is readability. Long lines of text are empirically bad for readability, making it hard for readers to find the correct next line. However, the line length Wikipedia picked seems to be a bad compromise. At around 120 characters per line it‘s double the recommend line length (60 characters). If you look at newspapers, magazines and books you will see the 60 character rule of thumb adhered to pretty exactly and thoroughly. It‘s just a typographical best practice. On the web and on wider maximized screens the issue is always the white space. Newspapers solve this issue with columns. However, that‘s not a realistic solution on the web (not so much for technical reasons, mostly because scrolling is fundamentally incompatible with columns).
- mananaysiempre 4y ago
  > However, the line length Wikipedia picked seems to be a bad compromise. At around 120 characters per line it‘s double the recommend line length (60 characters). Unfortunately, Wikipedia uses a lot of right-side floats, some of which are quite wide. They are also frequently referred as “on the right” in the main text, which can be quite jarring on mobile/minerva where they might be above or below. I could imagine a breakpoint where those floats would turn into margin notes, but that sounds extraordinarily fiddly.
- deleted 4y ago
  [deleted]
- rascul 4y ago
  60 characters is way too short for comfort. Too much vertical movement makes it hard to keep track of the line I'm on. 120 is better but still too short in my opinion if the page is wide enough for longer lines.

pndy 4y ago

I find timeless most visually pleasing - it does bring some professional look to Wikipedia. And it also provides direct access to pages in other languages without additional clicks, which is important for me because it's the feature I'm using all the time.

kome 4y ago
I think "timeless" is ugly, unprofessional and not very usable. i'm happy about vector 2022, i think they did a really good job. but, of course, de gustibus non est disputandum.