Wikipedia's new skin is a sad opportunity to reminisce what we could've had | Hacker News Reader

Wikipedia's new skin is a sad opportunity to reminisce what we could've had

blog.legoktm.com

99 pointszinekeller76 comments

Someone who cannot make a page where text is legible without me using Reader View is not a credible authority on design by a long shot.

I thought you must have been exaggerating, but then I clicked the the link and oh wow, that contrast. Completely unreadable.

Came to say exactly that.

Wait, do you mean the blog post or the Timeless skin on Wikipedia? Both look fine in Firefox's built-in reader view.

The point is you shouldn't need reader view. Having to use it means the design of the site is so bad you have to use a special tool to remove it all.

I am reminded of the thread the other day regarding W3C's website failing to load its CSS, and thereby improving its readability for a lot of the commenters.

> means the design of the site is so bad you have to use a special tool to remove it all.

Sounds like most of the content on the web at this point. I agree, you shouldn't need it. But at this point, it should pretty much be standard practice for users given the current state of the web.

At this point I'm so used to the internet being fucked by stupid design decisions and the ceaseless bombardment of ads, dark patterns, "engagement" CTA's, and lazy loading javascript that keeps pushing the content I'm trying to read or interact with down the page (looking at you google suggested results) that I had the opposite reaction to most people i this thread: I was pleasantly surprised at how perfectly cromulent it is. Is it good? No. Is it well above average viewing experience? Unfortunately, yes.

Again, not a defense of the design(s) in question. Just surprised there are people out there that expect anything more than hot garbage at this point.

> The point is you shouldn't need reader view.

Totally agree, but the parent comment said it didn't look right in reader view and I had the opposite experience. Looks fine in reader view...

I think you misread my comment.

I think that's a misread - they say it's not legible without reader view.

The blog post.

The Timeless skin on Wikipedia looks good in Firefox's built-in reader view? What?

The author isn't presenting themselves as an authority on design though? They're presenting historical information about Wikipedia and about a community project.

Somewhere, someone fucked up the rendering of 400 and below weights of web-deployed fonts in Chromium. Not Chrome, but Chromium and its derivatives.

Source Sans at 300 weight 0.9rem should be "a little small". There's a ton of rendering tricks for thinner fonts to make them readable but for some Godforsaken reason, Chromium's font renderer turns out to be the one that drinks leaded paint and gasoline.

It looks nearly as thin and unreadable on Firefox, though, at least on Windows.

I actually read your comment and thought "well if Firefox gets it right and it's this lacking in contrast, how awful must it be on a Chromium browser?" and the answer was, apparently, not much more.

Another data point: it looks bad on Firefox on Android too.

Perhaps it's Chrome that has a bug which incidentally makes contrast on this page better?

Is that something you observed in relation to v108 vs v107?

Because we’ve noticed a big change for some clients and public corroboration is possibly non-existent.

On mobile (Android / Firefox) I double tab and get zoomed in. I dislike this type of font with the heavy horizontal lines at top and bottom (serif fonts like Times New Roman), but then again I cannot set a default font on Android Firefox within the settings via UI. And this page looks great once zoomed in.

Saw the comment first and assumed this was an hyperbole. Then I opened the page.

At least reader view works! Often it’s broken..

I don't really get it. The linked designs from this article aren't particularly interesting or different.

> During the question-and-answer period, I was asked whether people should think of Athena as a skin, a project, or something else. I responded, "You should think of Athena as a kick in the head"

Typical "my project" hyperbole.

Yes, from the introduction of the blogpost i expected some radically visionary design that would challenge some established rules of webdesign. Which honestly is an endeavour that I would expect from the Wikipedia community. But when i saw it, it reminded me of the Wordpress themes i used to browse around that time (2012). Very ordinary and very in line of how web design was a decade ago.

For private sector developers, this is sort of a glimpse into the horrific world of non-profits and government, where even the smallest changes take years to get approval for, and usually get mutated into something else once all the stakeholders get input. Things which would have been done in maybe two sprints at previous jobs now take me six to eight months, and by the end all the edges have been rounded off so that you could mistake them for being lateral changes rather than progress.

Legitimately, what is this? The article doesn’t make sense. Someone is sad their favorite custom theme wasn’t chosen, dressed up as something more profound?

Worst part is, there aren’t any links to his preferred theme. No screenshots, no comparisons, no argument for why it’s better.

And the cherry on top is that this website itself isn’t responsive. Hopefully the theme that the author is clamouring for is responsive. And doesn’t use grey text on white.

> there aren’t any links to his preferred theme.

The sentence "You can try it yourself on Wikipedia today. (I'll wait.)" contains exactly such a link.

Just add ?useskin=timeless to the end of any wikipedia URL

Should we take design advice from some one who puts light grey text on a white background for the main article text?

No.

The text is also hyper thin, it's about 1px and one half px on my 4k monitor.

Technically it's black, and the thinness is the problem, as it causes it to be rendered much lighter (and relying on subpixel antialiasing on normal and high DPI screens for me).

same on an iPhone, super super thin text

The ubiquitous use of thin fonts is usually a sign that you are working with a Junior... but some never lose it.

One thing that makes me really sad about the new design is that the links to the same article in different languages are now collapsed by default. Even when you don't want to read the article in another language (which I highly recommend by the way, if you can, it can really be quite enlightening to see the same concept explained differently), it actually worked surprisingly well to get a practical translation for technical terms. I loved having this bit of extra learning always available on the left. One might caution that it doesn't always work as a translation and one would have to follow the link and consult other resources to be sure. But I've done that often enough to feel comfortable saying that it works OK enough of the time to be useful.

Apart from this feature regression, I like the new skin, actually. Feels cleaner and more modern.

Here is the skin the author wanted: https://en.wikipedia.org/?useskin=timeless

IMHO it's worse on all counts. In particular, at least on mobile, the series of drop-down menus with obscure icons up top is ugly, incomprehensible and a waste of space.

On desktop, main changes I see are the persistent header and the sidebar.

Definitely agree that it's worse, but only marginally so.

Persistent headers are very distracting for me. Glad they are not using them.

Same. Oddly enough, given that, the static sidebar in the new official doesn't bother me at all.

I don't like new design (space wasters, too narrow, colors for links is too bright) but this ain't better

It's not too narrow, if anything, it isn't narrow enough. There is endless research showing shorter lines are easier to read. The alt design linked is far too wide and too cluttered. I don't need to see all this useless junk about wikidata item numbers or backlinks.

The chosen design correctly hides all the obscure power user links under the hamburger menu.

I prefer it to the latest skin for the simple reason that the background isn't one solid white with no dividers to separate what are clearly different pieces of information.

The trend of absolute minimalism can die in a fire.

Thing is you don’t need dividers if you have proper spacing. No one will ever get confused thinking « wait is it the content or the sidebar? » because it’s not only obvious, but completely intuitive and unambiguous.

Clear dividers guide the eyes, empty whitespace does not.

In a world where we render crap on screens over 8000 pixels wide and 4000 pixels tall and render in literally billions of colors, we can't afford to render two different colors let alone a single pixel wide border?

> Clear dividers guide the eyes, empty whitespace does not.

Yes it does, if the spacing is right.

https://i.ibb.co/qJgzs9J/Capture-d-e-cran-2023-01-30-a-11-30...

A border is more distracting: https://i.ibb.co/wQC3V36/Capture-d-e-cran-2023-01-30-a-11-32...

A random line like that is distracting, yes. I'm talking about a proper border.

Consider HN: A gray background to differentiate content from the wider whitespace. A header differentiated with a different color (default orange). A footer separated by a border.

It doesn't have the one of the best things new one has, contents fixed at the left, but has one the worst it could have, persistent header.

If you don't like Wikipedia's look, create one yourself! User styles are freeing. Here's what I currently have: https://i.imgur.com/P6Ie59b.png (unchanged: https://i.imgur.com/HOKASy8.png)

I like the ToC on the left side, but I also liked how only the content had a white background in the old version. I find it draws my eye to the content much better. With that change and a few others to reduce the whitespace here and there, I like my version much more than what Wikimedia has done. https://pastebin.com/A3CZxg8m

Nice looking. The solid white seems to be the most often critique of new skin.

I don't see any difference. I concur with your assessment on the ToC, but my main complaint is that monolinguals seem to have decided for the rest of us that changing language should involve multiple clicks in the top right corner.

User styles are freeing, and so are user scripts! Languages moved to sidebar.

https://i.imgur.com/c0Nh9UO.png https://pastebin.com/nmJaugZR

Thanks!

I wish the article had more detail on exactly what Timeless did. On my phone at least tapping through to the link to try Timeless shows me a Wikipedia homepage that looks pretty much exactly how I remember it being.

You can compare to the suffix ?useskin=vector

The most noticeable things (on desktop) are that there's a big bar stuck to the top and the body text has a maximum width.

The WP front page is a bad showcase of the WP user experience as it is not an article, almost nobody sees it (as most navigate directly to articles via search results), and the layout is heavily customized outside of what the theme controls. Previewing the theme on an article gives a better contrast: https://en.wikipedia.org/wiki/Hacker_News?useskin=timeless

Jeez, that’s awful. I’m glad the article’s author lost this battle.

The rejection wasn’t bad faith… someone at Wikimedia happened to have enough taste to say no.

I think it's a great example of the bubble that the average WP editor lives in. For the vast majority of users, that theme is incredibly distracting. But it might be more efficient for the most hardcore editors that rarely actually read articles. And those hardcore editors make up the vast majority of the talk pages discussing themes etc.

Aren't logged in users able to use the themes they like?

Yep, but OP spent some time arguing that this should be the default theme across Wikipedia.

This website is kinda horrible to read on mobile. If you zoom to the width of the text it’s so tiny it makes me feel tired trying to read it.

It's also horrible on desktop

There does seem to be a trend where the people with the least design sense spend the most time lecturing about correct design.

This feels like process and principles driven design, which I've found to often result in a sub-par end-product, but with copious rationals.

You see the end product and you know this is not what you want, but being an instinctual reaction, it feels arbitrary and unfair. And processes are there exactly for this reason: so that some capricious stakeholder cannot impose stupid blockers without being seen as unreasonable in the face of so many "facts".

I think some of the best designs come out of the un-reasoned aesthetics and preferences of designers deeply immersed in the craft, and with all the reasonings post-hoc so it can be pushed through a political process.

Highlighting the light-gray-on-white text to properly make out the words about poor choices in website skinning

Timeless is terrible, it's a mobile skin for desktop, it doesn't use the full screen space and it hides the languages behind a menu, I get mad every time I get linked to it.

It's the default for french articles as far as I can tell.

Timeless is another skin, which was never made default [1]. The skin that hides the languages and doesn't use the full screen space is the new skin (Vector 2002). There was talk about fixing the language menu on Vector 2022, but they deployed it without fixing it. The a/b tests even showed that the introduction of the language-switching button even reduced the amount of clicks on language links, the opposite of what they expected by introducing it [2]. I don't know if those concerns were ignored or if they plan on fixing it later on.

[1] https://en.wikipedia.org/wiki/China?useskin=timeless [2] https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improveme...

Oooh I see, you're right, I was confused because there are two vectors: Vector Legacy shown with useskin=Vector and modern Vector which is now the default everywhere and was the French default for quite some time, modern vector looks quite similar to Timeless except for the language-menu.

More info here for other confused people like me: https://en.wikipedia.org/wiki/Wikipedia:Skin

> By the end of 2017, following Timeless being deployed everywhere as opt-in, Isarra applied for a grant to continue supporting and developing Timeless (I volunteered as one of the advisors). Despite overwhelming public support from community members and WMF staff, it was rejected for vague reasons that I'm comfortable describing as in bad faith. Eventually she applied yet once again and received approval midway through 2018. This time I provided some of the "official WMF feedback" publicly. But the constant delays and secret objections took a lot of steam out of the project.

The original proposal was for $8,000; some of the 'vague feedback' was that the proposal was too broad in scope for the limited resources. The follow-up was for $16,000. Isarra's final report on the accepted grants results is public: https://meta.wikimedia.org/wiki/Grants:Project/Timeless/Post...

Isarra cites a lack of resources, oversight, and support from WMF in the report. The project misses seemed to be from the unexpectedly broad scope of the problems with skinning.

There's an omitted IdeaLab proposal by Isarra from March 2017 that requested $100,000 with a much larger scope: https://meta.wikimedia.org/wiki/Grants:IdeaLab/Timeless

I was wondering "what new skin?" and noticed just now that the German Wikipedia doesn't have made the switch yet. Anybody know why?

German: https://de.wikipedia.org/

English: https://en.wikipedia.org/

I use a Firefox extension called Wikiwand[1] which, on one hand, has had some privacy/ads concerns in the past, but on the other hand, really looks good. (I've never experienced the privacy issues myself, though. Whenever I'm reminded of it I check my network tab and there's nothing too weird going on, aside from GTM and Google Analytics.)

Here's an example page[2] -- honestly I think all the extension does is redirect you to wikiwand.com.

(They recently added an AI summary feature which I could do without, but I've successfully ignored it.)

[1] https://www.wikiwand.com/

[2] https://www.wikiwand.com/en/Hacker%20News

Just make a Wikipedia account and change your preferences to use the old skin. That’s what I did.

It's annoying to log in to every browser on every device you ever use. I wish theme was just saved in a cookie instead of requiring an account.

The "I created account just to set theme" isn't even a choice on creation

I only use one browser to access Wikipedia. On my phone, I use the app which I'm already logged into.

So which spy agency is wikipedia now working with that they want to you identify yourself? facebook, google, an actual TLA?

How do we feel about the dropdown Table of Contents in GitHub? A README is kind of like a single Wikipedia page. It wastes the margin but I think an empty margin might be a better use than an occasionally used feature being shown so prominently.

Just tried Timeless and it certainly feels nicer.

I get the point that the author is trying to make but I just don't think that Wikimedia has any dearth of resources. Just because something is a volunteer-driven nonprofit doesn't mean that it's poor nor does it mean that they should do things scrappily or less-than-perfect at a low price.

Reply on news.ycombinator.com