Explore Wikipedia's New Look (opens in new tab)

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.

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

[2] https://imgur.com/a/q1PD3WY

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_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.

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.

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.

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/

My first take: it’s different so it sucks. The lack of visual separation between the main content and the menu on the left is atrocious.

Second take: oh wait, the menu in the left was completely useless and they replaced it with the table of contents for that particular entry. That’s actually a welcome change. I’ll get used to “different so it sucks” soon enough anyway, that’s my fault not theirs.

It’s kind of fascinating when you catch yourself having knee-jerk reactions and “watch” your brain correct them.

I've been using Redirector for the last few years to redirect Wikipedia links to the mobile site because the interface is so much cleaner and the content so much easier to read. I'm super excited about this change because I can finally get rid of that browser extension.

I was worried about the narrow body impact on table data since wikipedia often has the most concise charts for comparison. Although the styling looks broken, at the least the data isn't hidden inside an inner scroll area

https://en.wikipedia.org/wiki/GeForce_30_series?useskin=vect...

For 16:9 screen sure, old wikipedia is too wide but I use side tabs in browser so my browsing area is closer to classical 4:3 monitor and the old one fit very well (for me) on that.

Why not just have multiple columns of text instead of half a screen of emptyness and stuff users rarely interact with?

You could arrange the different wiki sections to be side by side.. in a dynamic responsive way depending on device/screen size

Text width is important, but this is not a solution, zooming and changing browser window geometry is.

> you will always have the option to switch back to the old theme.

The only issue is, you need to log in to do this. I don't want to have to log in to a website that I read, and never edit, to get rid of the giant distracting table of contents.

>I really hope any website could be as flexible as Wikipedia to allow users to write their own CSS.

Once upon a time, there was an initiative for websites to add a unique CSS ID to the <body> tag so users could customize them with user stylesheets.

For example: <body id="news-ycombinator-com"> for this website, and then users can apply CSS rules as they see fit via the user stylesheet.

Sadly, the initiative never took off and most browsers nowadays don't even know what a user stylesheet is.

How do you make the max-width apply permanently to a website on chrome?

The article addresses this by mentioning that they referenced research demonstrating text that is too wide causes people to read less comfortably and retain less information.

The page gets much less padded when you reduce the size of the window, because the padding isn't there to make blank space, it's there to enforce a maximum line width.

For whatever reason, especially with a bigger screen, I find that wider text becomes uncomfortable and somewhat exhausting to read. I'm not sure what the right portions/ratio are, but with a 27in screen it's definitely noticeable.

Even when I only have one maximized window up I hate all the empty white space. I've taken to just zooming in until the text fills the window. The new design handles the zoom so much better than the old one.

I don't think "every" designer does that.

And not everyone wants all content crammed into a little area.

All in all, it should be up to the user decide how much content density they want on websites.

I wish they'd let the old sidebar display as a third column if the viewport's wide enough. However, this:

> I'd stil like the language selector below the table of contents in the sidebar.

would also cover most of the reason I wish they'd do that.

[EDIT] Incidentally, what ever happened to 3-column layouts? They could keep the site menu on the left and stick the TOC on the right (keeping it visible all the time is definitely an improvement, and the thing I like most about this redesign). We used those layouts a ton when 800x600 4:3 was still a common monitor resolution & ratio, so surely it'd be fine on 16:9 and 16:10 monitors with 3x or more the pixels.

> Wasted screen space

Don't fall for that mental trap. White space is not wasted space.

Humans read best when a line is around 10 words long. Longer, and it's easy to lose which line you're on when you go to the next one. The sidebar collapses if you resize to a narrower window, so I wouldn't call it wasted.

Yes, switching languages not being a single click any more is a major usability regression. They should at least allow to configure a set of “favorite” languages that can be directly accessed.

Even in the new design the line length is way too long. I get complaints about wasted screen space, but you really don't want lines of text blasting all the way across the screen either.

> - Wasted screen space

Don't worry, it will soon be filled with solicitations for donations.

Also for some reason they made links even brighter blue

it does not only break your bookmarklet, but even vimium [1] is unable to focus the language selection. this is awful.

[1] https://github.com/gdh1995/vimium-c

Thank you! I first went back to vector legacy, but then I saw monobook which is the wikipedia of my memories and have swapped there, so now I'm happy.

Kudos to WM for keeping the option for that theme in MediaWiki. Now I have a reason to browse logged in all the time.

IIRC, the button in the bottom right is intended to not remember the change. To make the full width setting persistent, when you're logged in, go to Preferences -> Appearance, and disable "Enable limited width mode".

> You can also have it take up the entire width by hitting the button in the bottom right. Doesn't seem to remember the change for me though so hopefully they add that in soon.

Ooh good spot. That fixes my one issue, the bizarrely narrow column width.

Or you can just use custom CSS, which works not only here but on every site, and has been my preferred way of fixing/reverting horrible decisions.

Thank you! I think this is the first time I've logged in for 10 years.

I don't mind the current UI change, but I wish significant changes would come with a toggle button to let me look at the old and new renderings. I don't think it's possible to mentally "place" the improvements without side-by-side comparisons and affordances for finding edge cases where the new UI may be lacking.

Unfortunately this only works if you have javascript enabled on the site, too, and the awful popups they added made me disable it.

Because it emphasizes the distinction between different parts of a website which in turn makes it easier to focus on individual things.

Why are so many people against white space when it hasn't been overdone? Obviously "overdone" means different things to different people but in this case the information that matters is still pretty dense.

Because human eyes and brains aren't computers, and it's actually hard to read small text on long lines and low vertical spacing.

Plug: I made https://github.com/phil294/density-userstyle which is a global userstyle to remove unnecessary paddings on common websites. Will probably have to add Wikipedia soon.

Pardon me asking, but what font (cipher? language?) are your tab titles and menus in? I don't recognize it, and I'm familiar with quite a few ciphers. (I initially thought it was another language, but it's clearly a transliteration of English.)

You can even turn off responsive design in the settings. I should have checked earlier.

Closed subsections break page search (at least on iOS Safari), which I find very frustrating.

I always prefer the full article, but this is a matter of opinion. The issue is that the behavior is not consistent.

Because it works well without borders. You need to have a justification for adding things - what does a border add here? Other than making it feel more boxed-in?

Because it works without borders. Do you have any trouble differentiating the sidebar from the content? I'm gonna guess no. Hence, no need for a border.

But they added the donate button in a prominent position top right. At least no one will miss that when they're looking for a context menu ;)

White space isn't wasted space. It makes the page infinitely more readable to limit line lengths. Yes, you could have reduced your window width before. No, you shouldn't have to do that to get a comfortable reading experience.

Anecdotal, but personally I can’t stand reading overly long lines and don’t keep my browser window maximised. I’ve written user styles for certain sites in order to keep lines sufficiently narrow, and I’m one of the few people I know to use an 12.9” iPad Pro in portrait mode regularly.

I guess it depends on the person. I'm happy to accept that I'm strange, but I'd much rather read lines that mostly fill my screen with normal margins on each side than short lines in a long narrow column surrounded by an ocean of empty whitespace.

I can't be the only one who feels this way. I have yet to buy a book where 90% of each page is blank and there's just a tiny column of words down the middle of the page.

It's a common accessibility requirement. For example, WCAG suggests limiting the max width of blocks of text to ~80 characters (40 for CJK).

https://www.w3.org/TR/WCAG22/#visual-presentation

This is why newspapers and magazines (if you remember those) have a columnar layout instead of just filling the whole page side to side.

Yes, it's extremely common UX practice. Lines really should be no longer than 80 characters at an absolute maximum. 50-60 is ideal.

> Is this actually true? I'm curious if anybody has sources for this and if it's a common UX practice.

As far as I can tell, the people who say this are citing each other. And can't wait to reply when you say you find it unpleasant that it's actually scientifically ideal.

It seems they link to a discussion page [1], which references this document (I can't find a published version):

    Computer text line lengths affect reading and learning 
    Peter Orton
    https://cdn.tc-library.org/Edlab/eye-tracking%20article.pdf

But it seems that Peter Orton has published quite a few works in this area [2], [3]. Specifically [3] seems to note that with a less wide text column width readers are not statistically significant faster (but are a bit), but do see that for difficult reading content, the shorter width requires less re-reading then a wider one along with significantly better retention of the contents of the document.

[1] https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improveme...

[2] https://www.scienceopen.com/document_file/671b2d53-73ce-4a91...

[3] https://sci-hub.se/https://link.springer.com/chapter/10.1007...

Same! I absolutely hate the amount of empty space everywhere on my 1080p screen.

Yeah, same reaction for me... I've always liked the small gradients on the top and the long list of things down the left side which I never click. Felt homely. I'll miss it.

> probably get used to it...

Since it is on some language version for some time I already did. But it took some time.

Plus it now requires typing input, or you have to scroll through an annoying menu that sorts them by region and not importance.

Judging by the rave reviews this gets though, it seems that people who use the site as opposed to just wanting pretty design are in the minority. If most users don't even switch languages or such, I wonder how many readers check the citations and discussions before blindly believing what random anonymous authors tell them.

Oops, I'm an idiot, the new theme isn't the default yet!

You can set a fixed width view in the preferences which might help a lot.

I would be curious to know what your beautiful version looked like. I find Wikipedia's styling so inoffensive that I don't understand how you could consider it "hideous." It's pretty much just black text on a white background. What about that causes such a strong reaction from you?

Unfortunately the new design seems to break the extension's ToC sidebar

Why can't you just resize the window to a width that is comfortable for you?

They could have made a responsive multi-column layout to keep the readability of reasonable line lengths while keeping information density high.

A little odd though, that there is no left-padding in the table of contents, so the text is jammed right up against the left side of the page. Or is that just me?

Agreed so much with this. The "mobile version" should be triggered by the viewport size, not by the subdomain. I was hoping this site redesign would have unified the mobile and desktop sites.

Lots of Wikipedia articles have become well-cited but that façade begins to break down as we dive into more niche topics. Editor wars are real and impossible to resolve most of the time due to how obsessive the involved parties are. Some of them are rather damaging to what narrative is being shaped on some of these articles. The power to control edit access rests in a small group of administrators/moderators who are relatively anonymous. This has served the site well so far but could be a weak point should something occur in the future that fundamentally challenges the integrity of Wikipedia.

Generally agree, although I've noticed a lot more normative language creep into articles ("unfortunately", "unluckily", "helpfully", etc) that really have no place in a resource purporting to be encyclopaedic.

I'm the reverse of you in that I prefer content in the middle, as I sit in the middle of my screen and prefer to not have to be constantly looking to the left. I agree, personal choice would be nice.

> also works great with JavaScript disabled

That was my primary concern. Last thing I need is to have a JS-only Wikipedia added to the seemingly ever-groing list of websites that try to squeeze as much data from their visitors as possible and using "functionality and features" as an excuse.

1) Awesome, didn't know about this, but

2) Are they ingesting and modifying raw WP pages, and haven't updated for the new design? I ask because on desktop Safari there are tons of major layout errors (search field completely overlaps left menu; top logo image missing; page stretches one full, empty screenfull past the end of the footer; some text sits on top of section dividers rather than within the boundaries of a section) and wonder whether that's normal or just a temporary issue.

both show the old design to me so seems more like some servers in a group have the new design elements and some have the old?

If you are signed in you can change to any of the historical themes and a few others. That is the easy option for switching.

It's not like old UX wasn't "globaly homogenous" either

> I don't need a header to follow me down the page, in fact I'd prefer it not to.

I also don't need a header following me, but that's not really what they're talking about. They've moved the "section header/outline"-table-of-contents-links from the top of the document (where they would scroll off the screen) over to the left side, so what follows you is not the old set of headers to other parts of wikipedia that you never clicked, but rather the in-document, titled, relative links up and down the current page.

it's actually pretty useful. (which does not mean I'm embracing what the designers have done; given the general track record of designers and all the spurious white space here, I must assume that this useful bit was only accidentally left in :)

I don't need a header either, but I suppose for people editing wikipedia it might be pretty useful. It probably makes sense for wikipedia to optimize for the people providing the free labour slightly more than they optimize for the readers.

Yeah, I don't like it either, and I don't see a way to disable this apart from user's defined bookmark script, like kill sticky[0]:

    javascript:(function()%7Bdocument.querySelectorAll(%22body%20*%22).forEach(function(node)%7Bif(%5B%22fixed%22%2C%22sticky%22%5D.includes(getComputedStyle(node).position))%7Bnode.parentNode.removeChild(node)%7D%7D)%3Bdocument.querySelectorAll(%22html%20*%22).forEach(function(node)%7Bvar%20s%3DgetComputedStyle(node)%3Bif(%22hidden%22%3D%3D%3Ds%5B%22overflow%22%5D)%7Bnode.style%5B%22overflow%22%5D%3D%22visible%22%7Dif(%22hidden%22%3D%3D%3Ds%5B%22overflow-x%22%5D)%7Bnode.style%5B%22overflow-x%22%5D%3D%22visible%22%7Dif(%22hidden%22%3D%3D%3Ds%5B%22overflow-y%22%5D)%7Bnode.style%5B%22overflow-y%22%5D%3D%22visible%22%7D%7D)%3Bvar%20htmlNode%3Ddocument.querySelector(%22html%22)%3BhtmlNode.style%5B%22overflow%22%5D%3D%22visible%22%3BhtmlNode.style%5B%22overflow-x%22%5D%3D%22visible%22%3BhtmlNode.style%5B%22overflow-y%22%5D%3D%22visible%22%7D)()%3B%0A

But unfortunately, it renders the header useless in this case.

[0]: https://github.com/t-mart/kill-sticky

I usually use my adblocker to simply remove fixed headers. Hopefully there isn't anything critically important in that thing, because whatever's up there just isn't going to be seen. They're far too distracting.

I love the new design when not logged in. After logging in however...

> I don't need a header to follow me down the page, in fact I'd prefer it not to.

Edit: I wasn't logged in before, and thus wasn't shown the header you are talking about. Now that I see it, I'm with you and don't like it. Everything there could have gone in the sidebar above the ToC instead of wasting vertical space. I also dislike the extra non-persistant sidebar box shown when logged in that pushes the ToC down off the screen. That should be one side or the other, not in place of the ToC.

I find the persistent ToC to be very helpful, and the space is uses would have gone to waste anyway in full-screen mode, so it doesn't cause any harm. I don't love the menu button in half-screen (and presumably mobile) mode. I feel like they would have been better off with a full-width bar at that point since it blocks reading those top few lines anyway.

> I'm not sure what value the collapsible table of contents is.

For some articles the full multi-level ToC is longer than will fit on a single page, so you either need to allow collapsing, or scrolling of the side bar which never works well.

> I get why having a maximum line length is good for readability. My reaction to this feature is negative ...

I was nervous when I read this as well, but I like the results. They didn't over do it like so many websites to today with tiny newspaper-like columns, and will be more readable for the majority of people who never resize the browser. For me, I keep all my browser windows half-screen anyway and the redesign has smaller gutters than before, which is a win.

Reading your comment I got worried that there was going to be this giant banner permanently affixed to the top of the view. Taking a look, the actual implementation is very small and unobtrusive.

I don't know that I prefer it, but I also don't think I hate it. I feel indifferent.

I definitely love how they put the ToC off to the left. It's a great use of all the horizontal space on our 16:9 screens, and will make zipping around to different parts of a large article a lot easier. I'm willing to put up with the small banner in exchange for this.

Note to those not liking this, there is an option in the preferences to revert to the old Vector skin. No idea how long this will be but setting that preference may give them feedback that some users prefer the old layout.

all these changes are geared at mobile. I imagine thats the majority of their traffic now

> Feels like they're introducing a persistent UI element without a benefit.

guess what else will be persistent when donation drive banner gets turned on

> When you are logged in to Wikipedia, the updated header will move with you as you scroll

We need to stage some kind of intervention with web designers. There can't be a single person on the planet who actually likes this anti-feature. Why on Earth do they keep doing it?

> If you hate it, it's probably because it's different.

No, the only thing I actually hate is that the main page has plenty of space on the side to show the sidebar, yet I still have to click it in order to get it to open up and see "Current Events".

I don't dislike it because it's different, I dislike it because it is measurably slower to do something I used to do in one click. THERE IS NOTHING THERE WHEN THE SIDEBAR IS COLLAPSED.

It's been in use for ages in other languages which I read a lot. It isn't "different". It is concretely worse to me and many others here.