Show HN: I made a modern web UI for Wikipedia | Hacker News Reader

Show HN: I made a modern web UI for Wikipedia

modernwiki.app

979 pointssjdz409 comments

Hey HN,

I made this free browser extension that modernizes the Wikipedia design. I started making this for myself just because I wanted more of a "reader mode" like experience (narrower column, nicer fonts, dark mode etc). Then I got a bit carried away and implemented everything I could think of for a modern redesign of Wikipedia. Hope you like it!

I am one of those people who actually like Wikipedia the way it is. It's what I hoped the web to become.

But i am sure there are people who will appreciate your effort. Thank you for your work.

Agreed, still love the untouched UI but work like this seems like it will only help reinforce the accessibility and long-term health of the project.

Same here, we're fortunate it hasn't gone down the road of typical webdev anti-patterns. (at least besides the donation banners, which is understandable ;) )

I agree with you except the one pain point that Wikipedia still continues to use "m.*" sub-domains for displaying mobile content. I know most people exclusively use mobile these days but I use desktop browsers for reading more than 60% of the time and its really annoying to click on a Wikipedia link on HN/Reddit and having it open the mobile site on desktop. It's OK to use m.* subdomains instead of reactive design but there should at least be redirects to the correct subdomains.

edit: formatting

I’m sure there is JS that will redirect you to non mobile, pretty sure I installed something like that and never had that issue.

Firefox plugin: Skip Mobile Wikipedia

https://addons.mozilla.org/en-US/firefox/addon/skip-mobile-w...

Down the bottom there is a link to the desktop version of the site.

Whoa, thanks.

However, that link is totally in the wrong place, no wonder I could not find it. I just assumed there was no such link/button and always angrily removed the 'm.' from each URL.

TIL!

Equally, I don't like it when websites try to guess what kind of browser I'm in and force me into the mobile experience when I have a window take up half the screen on a 1080p monitor, ... so I guess there's really no easy win for this :(

I think proper media queries breakpoints solve this

No, it won't. There is no clear distinction between mobile and tablet first of all.

Orientation and width not enough?

When I pin a browser to the left or right side of one of my monitors, these sites will often go into mobile mode despite the fact that the browser is still wide enough that desktop mode works fine, merely because the window is now taller than it is wide. And I find that incredibly annoying.

This is hard and often done wrong- mobile phones are usually high dpi and have gotten quite large, so it can be hard to distinguish between a large phone and half a desktop screen. Some people get quite annoyed by being bumped into a mobile experience when you resize your window from fullscreen on a laptop.

> This is hard and often done wrong- mobile phones are usually high dpi and have gotten quite large, so it can be hard to distinguish between a large phone and half a desktop screen.

A tablet could be easily confused, or a phone in landscape mode, too, but for a phone in portrait mode this seems a bit hard to imagine, because DPI is taken into account when converting the display width into CSS pixels, so even a phone cramming 1080 or 1440 or whatever amount of physical screen pixels into its display width should still come in at something like 300 to 400ish CSS pixels. Or am I misunderstanding something?

You have it right.

You're right, and it's certainly a solvable problem but one that often is not solved correctly is my point. You may have to also introduce a (nonstandard) viewport tag to prevent mobile browsers from laying out the page at a much higher resolution and then zooming/shrinking on you https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_m... If you don't, you may falsely conclude from manual testing that you need large breakpoints for mobile.

Also, many times mobile breakpoints don't look at the device orientation and pick numbers like 800px, to capture landscape orientation on medium sized phones or something (I'm not sure where this number comes from to be honest). This obviously breaks the two windows side by side case on laptops but is a top result for me if you google the arcane syntax for how to target mobile browsers with a media query.

I am not 100% sure what all the pitfalls are with the current interface, but they exist often enough for me to run into them semi-frequently on smaller laptops.

You're goning to need <meta name="viewport" content="width=device-width, initial-scale=1"> tag for any reactive design with mobile browsers since otherwise the site will look completely different between browsers and browser versions as they use different rules for how to render sites.

The worst part of this is that simple mostly text sites without a fixed-with layout would look perfectly on mobile if this tag was the default but somehow mobile browser vendors thought it was better to hack around sites with table layouts by giving them a larger viewport (but still inconsitently scale the font sizes so you have to zoom in and out to read different parts).

> (but still inconsitently scale the font sizes so you have to zoom in and out to read different parts)

Once you start with the hack of giving non-mobile-compatible pages a larger viewport in order to not break layouts that react allergic when being squeezed into 300-something pixels, what else do you want to do?

Not scaling font sizes at all just gives you either tiny text (if you zoom out to fit the large viewport onto the small mobile screen) or loads of scrolling around if you display the page at 100 % zoom level instead.

And scaling up all text means you end up approximatively just where you started before you started resizing the viewport. It might not be absolutely exactly the same layout breakage as when squeezing an old page directly into the 300 or so pixels available on a mobile phone in portrait mode, but it will be pretty similar.

So that only leaves trying to scale up only the main body of text (which normally isn't that sensitive with regards to scaling up the font size and therefore increasing its size requirements) and leaving alone smaller bits of text like menus, the page navigation etc., which are more likely to be size-constrained and start causing layout breakage if increased by an extraordinary amount.

I don’t understand those people at all. If my browser window is the width of a mobile phone’s screen, than a version of the website designed for that size is exactly what I want!

Right! If you've got a window that narrow, the only way the design will even work or layout correctly is with the "mobile" layout...

The bigger problem is people hiding functionality if you're in the mobile breakpoint. That's an issue: all functionality should be enabled, at least in some way IMO. Mobile should never be a second class citizen :)

There's also a big problem where the mobile layout will tend to make controls huge to present a reasonable size touch target. This is unnecessary on the desktop, and may even result in less information fitting on screen than before switching to the mobile layout.

Thats a fun one to solve!

   @media (hover: none) and (pointer: coarse) {

That allows the dev to select for devices that do not have a mouse and such rely on touch targets, to increase the sizing. I've been implementing this myself recently in our web application, while still allowing us to change the layout to fit the narrow width!

I'm sure there are some devices it doesn't fit perfectly for though. This stuff is capital-H hard.

> capital-H hard

You mean quote-unquote Hard?

I wish.

The implementations for these have some... complications, the device sets we now deal with are huge, and making sure there are no idiosyncratic bugs that creep up when using them is legitimately a fair bit of work.

https://css-tricks.com/interaction-media-features-and-their-...

> If my browser window is the width of a mobile phone’s screen

It's not, is the thing.

I have a 23 inch screen for my 1080p screen. My phone has a 6ish inch diagonal.

When I make a window 960 x 1080, that's still something like 10 inches across and 11 inches tall. It's sheet-of-paper sized. I'm perfectly comfortable reading that as it was designed for a desktop layout.

> I have a 23 inch screen for my 1080p screen. My phone has a 6ish inch diagonal.

Do you sit as close to your monitor as you hold your phone?

Not GP, but yeah, about the same? From your phrasing I expect it's how close we hold our phones that differs though.

I would say that half of my monitor, more accurately, is about the dimensions of an iPad at comfortable viewing distance.

Phones are far taller than half of a 1080p screen.

Half a monitor is: 960 x 1080, or 1:1.125 A iPhone is: 828 x 1792, or 1:2.164

So websites tend to shove a candybar shape into a nearly square sheet of paper and waste a lot of usable proportions for things like controls or hamburger menus.

Not necessarily: the real-world size matters too. Desktop-sized UI is hard to hit on a touchscreen when shrunk; meanwhile mobile-sized UI wastes space when enlarged on a desktop monitor.

Do you also want the version for touch controls?

The worst part is that the other points you could use: DPI, resolution, touch capability... all of this exists on certain laptops now!

But, at least as far as I approach media queries, if you've triggered the mobile breakpoint (well, default CSS as mobile-first is the way we approach it), its because the desktop design we've used literally will break on a browser window that narrow.

I also get annoyed when I get bumped to the "mobile" "experience" even when I'm on a smartphone. With reactive design, "request desktop site" generally doesn't work, either.

I really, REALLY prefer desktop mode for almost everything, relying on pinch to zoom.

> With reactive design, "request desktop site" generally doesn't work, either.

It shouldn't, because with proper reactive design therre are no "mobile" and "desktop" versions but only one version that adapts to the viewport size. If you want a larger viewport that should be solved at the browser level by providing the website with a larger viewport. Seems firefox behaves this way while chrome does something weird that increases the viewport a bit but then still "intelligently" scales some text.

Well what if you don’t WANT the interface to change between viewports? We used to use Desktop-style interfaces on 1024x768 displays, or even 640x480. Now we just get a one-dimensional mobile interface when the viewport is smaller than whatever arbitrary threshold is fashionable among designers. It’s incredibly annoying to have interfaces become downgraded (ie hyper-simplified) regardless of what the user requests just because they haven’t kept up with the resolution upgrade treadmill. Pinch and zoom (in BOTH directions) is such a powerful UI tool from the user’s perspective but its usefulness has become completely neutered by insistence on “reactive” design ripping control away from the user.

Even better: Don't have media queries breaking at some arbitraty widths at all, and have a design, which is responsive for all widths without breaking suddenly, orienting size of boxes depending on the content.

As soon as you have any kind of columns in your layout you need sudden breaks at some points, explicit or not.

I agree that you should prefer flow and size-to-fit but that does not mean that break points are never the right tool.

Install Firefox Redirector: https://addons.mozilla.org/en-US/firefox/addon/redirector/ Add a rule to redirect (https?://)?(\w+\.)m\.wikipedia.org(.*) to $1$2wikipedia.org$3 Then you never have to deal with mobile Wikipedia on desktop again. You can use this for other sites too, like forcing all uses of Reddit to always open in old.reddit.com.

Just as a sidenote on the Reddit point, you can force old Reddit from your settings after you log in. That setting seems to stick even if you log out/your session times out, and you can go back to new Reddit with new.reddit.com.

> It's OK to use m.* subdomains instead of reactive design but there should at least be redirects to the correct subdomains.

I agree, although in the case of Wikipedia the "mobile" design is actually the one that is responsive. I want the "mobile" design on all browsers including my desktop. I believe you can actually set your default theme if you're logged into Wikipedia, but I don't know if their cookies eventually expire or what, but I often end up clicking on Wikipedia links and getting the awful "desktop" design.

All of this is just to say that, yes, they shouldn't use separate "m." URLs, but it's just as wrong to get upset at mobile users sharing "m." URLs as it is to get upset at desktop users sharing URLs without the "m." Arguably if you expect all users to always share the most versatile URL, you should expect them to always share the "m." URL since it has a responsive design.

I might be ok with "the mobile reactive version everywhere" if it didn't also lack a bunch of features. Not being able to easily get to the talk page to contextualize what you're reading makes the mobile site very frustrating.

Note that a link to the talk page has recently been added to the top of the mobile page.

Oh nice, thanks for letting me know! I can stop forcing it to desktop mode by default heh.

If it pinned the headings/outline to the left side of the article (like the extension showcased does) it'd be that much better for a responsive design on Desktop.

Yes, I only use Wikipedia on a desktop and I exclusively use the m. site.

I disagree that the m. url is the most versatile because of the one-sided redirect.

Also the mobile site might be more responsive in the sense that it better scales down to narrower viewports but it does not scale up to make use of larger viewports by e.g. bringing back the sidebar and other links that are hidden behind dropdowns. That's a problem with many mobile-first designs - in reallity they are mobile-only designs.

semi-OT but Twitter seems to have recently started putting "mobile.twitter.com" in my URL bar (on mobile), as well as adding a UUID in a "t" query param when you use their "copy link" flow, which is all annoying cruft to have to delete when sharing links.

They used to just put "?s=19" through "?s=22" or so, which enumerated clients (desktop, mobile, Android, etc), which was better than the junk most other services stuff in (like utm_source and friends...)

What bothers me most about this is that if you go to www on a mobile device, it redirects you to m - that's great, and probably the "right" thing to do. There is probably a "View Desktop Version" link on the mobile page, somewhere. But if you go to the m subdomain on a desktop device, there's no easy way to get to the desktop version without manually changing the URL. If you can redirect from www to m, surely you can redirect from m to www when appropriate.

> But if you go to the m subdomain on a desktop device, there's no easy way to get to the desktop version without manually changing the URL.

You may find humour in the comically small "desktop" link at the very end of the page, next to the privacy policy.

I feel like there's the issue on Reddit

I feel like this is the least of the issues of Reddit(’s mobile version, social ones excluded for lack of knowledge).

I use the No More Mobile plugin to fix that: https://github.com/spixy/NoMoreMobile

For me on safari I just click “request desktop site” and it does redirect me to the non mobile domain.

https://phabricator.wikimedia.org/T214998

That seems to be about serving the different variants directly instead of the redirect when there really should only be one variant that makes the best use of any viewport size.

I dunno. Maybe it is different on a phone but on a tablet the desktop Wikipedia is better than the mobile Wikipedia.

+1 to this. My iPad is plenty big enough please show me the real Wikipedia. The redirect is incredibly frustrating.

On a phone, the mobile Wikipedia is perfect tho.

I got annoyed at this enough to write this tiny userscript:

    // ==UserScript==
    // @name         Redirect from mobile wiki to desktop
    // @namespace    http://tampermonkey.net/
    // @version      0.1
    // @description  try to take over the world!
    // @author       You
    // @match        https://*.m.wikipedia.org/*
    // @grant        none
    // @run-at       document-start
    // ==/UserScript==
    
    window.location.hostname=window.location.hostname.split(".")[0]+".wikipedia.org";

Hint: Use `document.location.replace()` to prevent the back button from going back to the mobile version, creating an endless loop.

Counterpoint to this:

I’m career military and the fact that Wikipedia (and Facebook) have low bandwidth m.* redirects made life immensely easier on the limited internet in far off places. We really appreciated it being available.

Just checked the first acticle linked on the home page:

https://en.wikipedia.org/wiki/Yugoslav_gunboat_Beli_Orao - 913.39 KB / 298.41 KB transferred

https://en.m.wikipedia.org/wiki/Yugoslav_gunboat_Beli_Orao - 919.43 KB / 270.18 KB transferred

Not much of a difference. Would be better to spend time optimizing the desktop site for everyone.

As one of the people who uses a mobile device only if I have no other choice (which is never), I definitely feel the pain of this.

Yeah, it's so annoying. I always strip the mobile subdomain when I post links to wikipedia.

It is also pretty fundamentally broken on iPad, since whether it reports itself as a mobile or desktop device depends on the size of the browser window.

Just a small nitpick: you mean _responsive_ design (_reactive_ means something else)

This isn't so bad but consider new Reddit vs. old Reddit.

If "new" were to become the only way to access Reddit, I would probably abandon it.

It is really annoying to be shown the new site so I just use mobile apps to read it now.

I love my mobile app as well (RIF), but do you know about old.reddit.com? Still works great with RES, I couldn't imagine Reddit on the desktop any other way

Yup still do that on desktop, I have it automatically redirect me, I would hate to lose it!

Sometimes links to other subs go to the new site, sometimes stays on old, I suppose depending on how the links are set up.

> so I just use mobile apps

That might have been their goal?

Although I detest having to use apps for every site. The Reddit app is also super buggy.

I use Sync for Reddit on Android and Apollo on iOS.

They don't need to force you to migrate, the new site pushes people into mindless meme sharing only, and completely altered the contents of the site already.

I've had to banish a good 40+ subreddits off my feed manually using RES to just deal with the politics spam.

And even then, browsing /r/popular is just awful. Elimination games. People blatantly asking for personal information from teenagers. "Tell me your favorite X and we will judge you" Dumb NSFW 'questions'. Repost bots for content from years ago. Misinformative titles. "Unpopular opinion" threads.

It's a mountain of trash to wade through to get any decent content.

I always stay away from /r/popular. The subreddits that appear there like /r/PublicFreakout are selected for display so you can get angered, join the echo chamber in the comments and boost engagement metrics.

Watching many of those short anger-inducting videos can make even a calm person change. The sort of stuff Reddit PMs have signed off on in the name of engagement is despicable.

I agree, and I have already left using reddit. What's the alternative to some random content consumption (like reddit)? Like hacker news but for non-technology topics.

I can suggest wiby.me 's random button to discover new sites with modern opinions.

There's various Lemmy [1] instances. Maybe one of them works for you?

[1] https://join-lemmy.org/

+1 for Lemmy. The project still has quite a lot to improve on, but it is already really great! I'd love to see the community/network grow and evolve :)

disclaimer: I run lemmy.pt and use the platform on a daily basis

How does the new design push people to mindlessly meme share? Reddit has been like that for a decade or more at least IMO.

They only show a few comments on certain pages, which deemphasizes discussion. I'm not aware of any other changes to new Reddit that would do that.

Although other changes might have made things better, like changing how default subreddits work (although this applies to new and old reddit).

With the exception of a few subreddits that have made explicit rule changes (either encouraging or discouraging memes), I haven't really noticed a significant long term trend in meme-posting within subreddits.

On desktop you can choose to remain on the old format.

On mobile you seem to need to do old.reddit.com every time.

Never installed the app on mobile.

I usually shy away from "modern redesign" but this one feels rapidly valuable both in legibility and usability.

The chasing left side TOC is really useful. The typography is slightly fancy without trying to be in your face.

The search (kbd /) is nice too.

I'd motivate the author to experiment with more stuff around accessing categories and hyperlinks in the page.

Yeah, I actually like the existing Wikipedia design, but I like what the author has done here - I see it more as a minor UI evolution, with some additional conveniences.

I like it!

I too like wikipedia current status a lot, and i like basic static content too.

Agreed with most of this stuff, but search on / (and even ctrl-f on some websites!) is horrible because it overrides the browser's shortcuts. When I press / I expect the Firefox quick find bar to come up, complete with highlighting and markers in the scrollbar and ctrl-{shift}-g to move between results and esc to exit search. Not some half baked JS search implementation or an unrelated search like in this extension - it searches for wiki pages, not text within the current page.

Fortunately this is pretty simple to disable with Greasemonkey (also 's' on github, though the userscript doesn't seem to work on Gitlab...).

On another note given that Wikipedia's content is in the open, maybe this new UI could be hosted at another domain e.g. pickypedia.org or itchypedia.org or something else funny instead of being a Chrome plugin.

Chrome plugins add more unwelcome startup bloat to the web browser, and while they are super useful to fix the UI issues of commercial, copyrighted websites, Wikipedia can totally legally be replicated at another domain.

You'd still need the old wikipedia to edit any articles and you'd still need a browser extension to redirect regular wikipedia links to your favorite frontend.

Also just like with open source projects, just because you are allowed to fork does not mean that you should as you could end up hurting the original project by e.g. confusing users.

Yeah this is great but I'd rather stick with the tightly wound tools at Wikimedia, they probably know what they're doing more than this anemic blasphemy

Why not be positive? Instead of insults you could give positive criticism. There's nothing positive gained from being negative.

Electrons brought us a lot positivity with their negativity! Checkmate!

Seing as wikipedia still has a separate m. subdomain in $current_year instead of just one responsive page means any claims that they know what they are doing will need to be backed up by evidence.

That extension doesn't change how the web is. The web is still the same whether you use client side CSS override or not.

This is exactly how CSS and HTML were intended to operate and the kind of results to be expected.

> But i am sure there are people who will appreciate your effort. Thank you for your work.

How is that called ? A complimentsult ?

Not at all a complimensult. I can appreciate the work of someone, if even I won't use it. I don't know how to put it otherwise.

You just say thanks for sharing and drop the other bit.

Well, I don't consider I've insulted someone by saying I like the way Wikipedia is.

There's no insult in saying it isn't for me because ... but good job. Positive criticism can be useful too.

Wikipedia still doesn't show the talk page when you are on mobile.

Actually, I'm wrong. It looks like they FINALLY added it less than a week ago.

Took them long enough.

Yes but...

I miss the Encarta encyclopedia content/design. I wish Wikipedia could get to that level of content quality. The multimedia and interactive articles were way ahead of its time and were only partially matched by some Flash-based interactive animations.

I saw this comment, and assumed I would agree with you, but the sample image that was presented to me on clicking the link to the post appealed to me in at least one major aspect, and that's the table of contents on the side of the content. I'm often having to scroll to the top to quickly visit a couple different sections when I'm looking for some specific knowledge, and being able to quickly navigate with less scrolling would be a welcome improvement in my eyes.

I will say I am glad you did this -- and practiced restraint. It is a nice modern update without overdoing it.

Wikipedia's style is almost perfect except for one thing that bugs me: the line width in desktop style is unlimited, meaning in a big window it can be hundreds of symbols long, which is pretty bad from the readability standpoint (https://baymard.com/blog/line-length-readability).

They've changed that, but so far I've only seen the change on French Wikipedia. I think they test it on us before broader release.

Indeed! Good to know.

Yeah they have changed some other Wikis too (like Portuguese). I think this is up to each wiki's governance (afaik they are somewhat independent) to opt-in on the new design.

I'm not sure I like it. The better line width is really welcome, but I'm tad uneasy about the rest. And as far as I can recall, it doesn't have a dark theme (yet).

"Modern web" isn't bad because of it's design, it's awful because of the dark patterns and 5s+ load times.

You don't need 20MB React bundles to make a good-looking website, and OP proves that perfectly

OP, thanks for making this, I bet it was fun to build.

That being said, I want someone to do the opposite of what this does. Less chrome, less bytes over the wire, less predictive search, less "flatness?", less timely, more timeless.

https://wikiless.org/ is probably what you are looking for. There are also extensions that automatically redirect Wikipedia links

The only difference I notice between this and Wikipedia is that I can't hover over a link and get a pop-up description of the page. Is that all or is there more to it?

> https://wikiless.org - a free open source alternative Wikipedia front-end focused on privacy. No JavaScript or ads. All requests go through the backend, client never talks to Wikipedia. Prevents Wikipedia getting your IP address. Self-hostable. Anyone can setup a private or public instance.

From: https://codeberg.org/orenom/Wikiless

From the README [0] and code, I'd wager that the only thing happening is that JS has been filtered out, that the CSP rules are significantly stricter and that a dark mode has been added.

[0]: https://codeberg.org/orenom/wikiless

Hear hear. I wish more sites were like HN - more text/information density, less CSS magic, less JS.

And HN's favorite: more RSS.

Oh dang, yeah. An extension that makes the whole web look and work like the default Mediawiki skin would be glorious. And _fast_.

I miss windows having borders. Just dug up a registry hack (obscene that such a thing was needed) to force win10 to have window borders again, because I keep ending up in situations where I honestly couldn't tell where one ends and the other begins.

They spent decades researching and building interfaces with visual cues, and we spent decades tuning our reflexes to them. Then some whim of fashion decided that hiding all those cues was "smoother", and I want to choke someone.

I just used win+ arrow keys, never missed the resizing.

Whoa, I had no clue about these key-combos. So handy! Thanks!!

For anyone curious, MS has a useful summary of how this works here: https://support.microsoft.com/en-us/windows/snap-your-window...

No problem, I did it by accident, and you can also drag the windows to the corners and overshoot to have them, top is full, left and right is half that side, the link you posted mentions that, I am actually surprised you never accidentally discovered either. I have that in KDE as well.

Also, double-clicking on a top or a bottom edge will v-maximize window, or resizing a window vertically and overshooting at the top or at the bottom of the screen.

Thanks for giving me a name for this that I can search for to turn it off. There’s nothing more annoying in my day than when I drag a window from one monitor to the other, then the windows cuts it in half and sticks it to the side of my screen.

I never knew what windows called it before, so there was no way to get rid of it in settings.

> I never knew what windows called it before, so there was no way to get rid of it in settings.

The settings pages aren't that big. You could read through it all in 5 minutes. Did you look? I mean sometimes things are annoying and you just can't be bothered to dig around to find the thing that turns it off, but at least in this case, it's easy:

Settings > System > Multitasking > Snap windows

You can't possibly be serious.

Out of curiosity, I just opened Windows 10 Settings. I see sixteen top level options. I opened the first one and it had 16 submenus, the first of which is two pages tall and has 8 additional settings links from it. Of course, Control Panel is also a place it could be hiding, and it's even bigger.

So, no. One does not simply click on every single thing in settings hoping to find the annoying thing that Windows is doing today that you don't have a name for.

Typing "Snap Window" into search narrows it down to three, which makes it possible to accomplish.

Thanks again to the GP for enabling that.

I am serious. counting pages won't change how long it takes to actually understand where things are.

you don't have to read every last word... you are just trying to get a vague feel for what is in there.

takes 5 minutes, max.

Why not use Reader Mode? I love it and use it as often as I can

I love reader mode! It's saved the internet for me

Reader mode is nice when it works, but since it’s hueristics-based I find it often either misses important content like images and code blocks that should be included with the article, or includes text that shouldn’t be there.

Even if it selects all the right elements, syntax highlighting doesn’t work which is an issue for me since a lot of the articles I read involve code.

These are issues with every reader mode I’ve tried – iOS Safari, iOS/desktop Firefox, desktop Chrome.

I wish there were a standard CSS media type that sites could implement, like `@media reader`, to help specify which elements should be included and to support things like syntax highlighting.

I recently worked on implementing readability in my Hacker News client app and here's the resources I found most useful. Basically, if once designs their site following the correct structure, then it works correctly for both reader mode as well as accessibility. These are "standards" which sites are supposed to follow but they don't unfortunately:

A very long read but this covers everything:

> How to Section Your HTML

https://css-tricks.com/how-to-section-your-html/

These are specifically important for accessibility users.

Another short read:

> HTML5 sectioning elements, headings, and document outlines

https://www.456bereastreet.com/archive/201103/html5_sectioni...

And you can use Markup Validation Service to validate and get tips:

https://validator.w3.org/#validate_by_input+with_options

Check out the excellent answer by Christian Kohlschütter on how readability works:

https://stackoverflow.com/questions/3652657/what-algorithm-d...

why does a different set of CSS make it _fast_?

It probably doesn't in this case, but there are cases where css can have significant performance implications. Different selectors take different amounts of time, various things can force re-laying out the page etc. Not to mention pointless animation.

The default MediaWiki theme is available, along with a handful of others, if you create an account.

The default mediawiki theme (vector) is also the default wikipedia theme (on desktop).

If you don't have an account you can add ?useskin=skinname to end of url to trigger different skins.

E.g. https://en.wikipedia.org/w/index.php?title=Main_Page&useskin... and https://en.wikipedia.org/w/index.php?title=Main_Page&useskin...

That, and the density. I like desktop UIs to be dense. They don't have to be sparse with ample padding like on mobile devices since you don't poke your fingers into your monitor. Yet somehow, people keep designing desktop UIs as if there's a touchscreen or something.

It's basic typographic design philosophy around whitespace - your eye needs somewhere to rest, and narrow columns of text are just easier to read. I personally like ample padding and whitespace, and don't want wall to wall content that just looks like a jumbled mess.

I agree with these typography principles when they are applied to things that should be read from top to bottom and the entirety of the content actually consumed as a whole. There's just many circumstances that it is not appropriate and I would say an encyclopedia entry is not one of them. I want to be able to scan a lot of content without having to change pages to find where I want to start reading from. That and people are really abusing the modern typography principle to get me to scroll more and 'engage' rather than just convey the information in a nice way (most news sites and recipe sites are egregious) that I'm starting to get turned off by the style for the web even though it's based in good reasoning. For print it's still fine because you are also limited and also it's often a two-column layout which is still pretty efficient for scanning for key words or phrases while being easy to read. 'Above the fold' used to mean something but in current web so much content wants to apply these principles but also wants me to scroll ten miles get to the actual point of the content and it feels really disrespectful to me as the reader.

What is typographic around buttons, toolbars and other panes?

your eye needs somewhere to rest

There is a big difference between newspaper columns and web whitespace. The former are more or less uniform and easily seen (I’ve also read newspapers with explicit delineation of separate articles, and it was even better experience). The latter is just chaotic blobs of whitespace, which doesn’t usually even delineate or makes your eyes rest, it makes them lost instead. You can’t see structure, because it is so blobby. Whitespace should only surround the elements which are much more dense and “thicker” than it. Otherwise it will blend into them dissolving any structure.

> people keep designing desktop UIs as if there's a touchscreen or something

I think that also has to do with "more white space = more scrolling = more ads".

Reddit is a perfect example of this. When they "updated" their UI to the current one, they added a ton of extra white space which forced people to scroll longer, thus spending more time on the site and viewing more ads. They also use a ton of other dark patterns.

> I think that also has to do with "more white space = more scrolling = more ads".

When applied to the web, maybe, yes. But then there are desktop apps, and entire operating systems, designed this way.

I think it has something to do with the phones after all. Everything is "mobile first" these days (to a ridiculous degree — there's a large grocery delivery service in my city that is ONLY available through a mobile app, so they lost me as a customer), so designers have much more experience with touchscreen UIs. Desktop anything feels like an afterthought oftentimes. It's just easier to take a mobile UI, blow it up to a computer screen, or put it into a window, optionally add a dual-pane layout, and call it a day.

That, and the fact how many designers regard the result of their work as a thing in itself, an art piece to be admired, instead of merely a coat of paint on a tool that just helps people get their f-ing stuff done more efficiently and then gets out of the way.

Along with a tiny body font, the effect is to more or less force you to maximize the window to make the site usable -- i.e. commandeer your desktop. Squarespace was an "innovator" in this technique.

>An extension

But... that's the opposite of what was asked for. Adding an extension adds more of the bad. A patch for Firefox reader mode would be better in my opinion since the web itself won't become better.

Any more details on that registry hack? I have been using RetroBar to have clear borders on taskbar and nostalgia. It doesn't have all actual features of windows 10 taskbar though.

Got you, fam.

https://encyclopedia.marginalia.nu/wiki-start.html

(I built this mostly for myself, because I find it incredibly difficult to read text that has hyperlinks and images in the text)

You complete me <3

I should say it's a bit janky in some places, but for most articles it works reasonably well.

This is kind of incredible.

Have you considered images just take up full width?

Half of cutting the images is a space saving thing.

Wikipedia is a pretty big website, and (like the rest of my web presence) I'm hosting the mirror on a single small consumer hardware server. I'm keeping all the wikipedia pages as compressed HTML, and if you look at the sources you'll see it's very bare bones, most pages are like 50 Kb, yet the total is still 21 Gb. I don't think I have the space or bandwidth for selfhosting all of wikipedia's images.

Part of this experiment is to illustrate just how ridiculously large page loads on a lot of pages. Even text-heavy ones like Wikipedia.

If you compare the HTML payload alone of these two renditions of largely the same text, it's a 50x difference. The full Wikipedia page load exceeds 1 Mb, mine isn't even 10 Kb.

https://en.wikipedia.org/wiki/Scamander

https://encyclopedia.marginalia.nu/wiki/Scamander

That's kinda ridiculous.

Gotchya. All good then. Excellent work and insight :)

Have you attempted to convert them to plain text and serve those? Or is there no real savings there?

Would probably lose more than you'd gain doing that. The HTML right now is so clean you can read it without a browser, almost looks like it might be hand written, while still preserving things like formulas and tables (which do need a browser).

I'm with you on links being distracting, but it seems you... nuked them entirely, which maybe goes too far haha? I guess you can always go back to source if you want that.

I just moved them to the bottom of the article.

In part this is because I feel inline links on wikipedia often lets you overestimate how well you comprehend a subject. It's as though the fact that there is a link over a word makes you think you could go check what that is, and therefore that you probably understand the word.

Actually looking up some term mid sentence is also probably not particularly helpful for understanding the text either.

I concede that this is a somewhat unusual decision, but I designed the pages for the singular purpose of reading and comprehending the article. Everything else is secondary. It's a bit of a design experiment, but I think it's worked out pretty well. I don't fall into skim-reading these articles like I must admit I often do with regular Wikipedia articles.

I love what you've done with the links, and will use this, I think. Thank you for your excellent work!

Oh, ha, I didn't even notice that. Ok, I like that!

I was actually looking at the footnote links, and those do indeed seem to be missing entirely -- as well as the whole references section. Arguably that's more important than links to "definition" wiki pages, so it forms the basis for the knowledge (vs mostly just definitions).

Yeah, I removed those entirely, as I very rarely use those. More often than not the links are pay walled and the references are books that may or may not even be in print. Maybe it's useful if you have a university library at hand but I don't so I simply live with the fact that some of the things I've read may be wrong.

If you want to look up sources it's better to use the live wikipedia at any rate, since it will be more up to date than this snapshot.

Ehh, I would say it's useful to see the reference even if you don't follow the link, but I'm sure it also depends on the nature of the topic. Seems easy to just preserve that section, but, hey, it's your site. Maybe there's a cost aspect you're considering? On that note, I'm curious how much it costs to basically mirror all of Wikipedia, if you wouldn't mind sharing?

I do a lot of these design experiments. I have an idea such as "what if wikipedia was designed only with reading comprehension in mind" and then I see what taking it to the most ridiculous extreme does. Sometimes it pans out, like I'm fairly happy with this wikipedia mirror, sometimes it doesn't--like I have no logos or branding anywhere on my sites, that turned out to be a bit confusing.

My mirror clocks in at 21 Gb. I'm self hosting so there's no real money cost besides the one-time investment in hardware. A really chap person could probably host this off a raspberry pi attached to something like a Corsair Voyager and serve multiple requests per second.

There's some technical trickiness in actually storing the files in a file system, since most filesystems don't deal well with having millions of files in the same folder. So I've had to build a four-tier directory structure based on the hash of the file name to be able to store the files. They're stored in a structure like 31/444/781/225/foobar.gz.

I did some experiments storing them as BLOBs in a database, but I couldn't get it to work.

Interesting. What are the bandwidth considerations for this? I had the impression that many ISPs make self-hosting impractical on normal household plans, but then I've never looked into it seriously.

Dunno, I have unlimited uploads and downloads @ 100 mbit, and I host both this Wikipedia mirror as well as a search engine and some other stuff.

The bandwidth usage is pretty inconsequential since most of my pages clock in at just a few kilobytes.

Thanks, bestie!

That is very nice looking. But I want the hyperlinks because the information I want is often spread out over more than one page (often Wikipedia achieves more concision than a traditional encyclopedia by hyperlinking rather than defining the terms it uses). And I want references because otherwise the information is unreliable. And I often want images because they sometimes convey information better than any text ("an image is worth a thousand words").

Regular wikipedia is still there if those are your preferences. I don't know, I've never check a single reference in over a decade of using Wikipedia. I don't have access to those references. Maybe you do, if so that's cool.

This. What's with the fixed floating headers? Like my screen real estate isn't scarce enough? And even if not, I don't like sites treating my desktop like a phone but blown up really big.

Isn't this solution exactly same number of bytes over the wire?

not totally obvious to me what you mean here? at first glance this seems to have less chrome than the standard ui, and to be more timeless in the specific sense that it has a closer resemblance to a paper encyclopedia layout versus mid-00s web styling.

If you create an account, you can change the appearance to look a lot like OP’s, but a lot lighter and without the plugin.

To be honest, while this looks pretty, it’s really just Wikiwand 2.0.

> less timely, more timeless.

I'm not sure if this is a subtle reference,but one of the major competing skins for wikipedia is named timeless: https://en.wikipedia.org/wiki/Main_Page?useskin=timeless (its often quite popular among people using phones who find the official mobile website frustrating)

Nope, just coincidence.

Normally I'd agree but in fairness to the author, they have fixed the table of contents.

I always found it weird and annoying how the table of contents in Wikipedia is a tiny thing jammed at the start. It's so darn awkward to use.

Wow, this is beautiful! Thanks for doing this. I would almost use this daily, except that there are a few things I noticed that would be good to improve (just one person's opinion — hope these are received in the intended spirit):

- If the browser window is narrower than about 1024px, there are no margins around the body text and the text width slider has no effect.

- As the browser window becomes narrower, the body shrinks but the contents sidebar doesn't shrink.

- The measure feels a bit small to me. It looks like the body text width is limited to 660px — having a limit is good, but it feels tight, especially when there are embedded figures and infoboxes. You could try making the measure a bit larger, or perhaps letting the figures extend or sit outside the main column of text when the window is wide enough.

- When you turn off the sidebar by clicking the three-bar icon, the sidebar just leaves an empty space instead of providing more space for the body text.

- As the window becomes narrow enough, the search box becomes unusable.

- The page indicators like the "featured article" star, the protection icon, and the Spoken Wikipedia button are missing.

- The home page, talk page, history page, etc. don't respect the typography settings.

- The menu option "View history" is inconsistent with the other options; next to "Talk", "Edit", "Watch", simply "History" would work better.

- When you scroll down, the page title scrolls off the main body, but remains at the top of the table of contents. Somehow this feels backwards to me, and it's not immediately obvious that you have to click the title in the table of contents if you want to see the intro section. Perhaps the page title could be sticky, and the first section could appear as "Introduction" in the contents? Something like this? https://imgur.com/a/kqaNbWo — I'm not sure where to suggest that the page title should go; you might have to try a few options to find one that looks right.

Sorry that turned out to be a long list, but overall the page does look a lot nicer and easier to read and navigate. Hope these ideas are helpful!

Also it breaks IPA rendering for some reason. For example here [0] many of the diacritic marks (especially most of the less common ones) are off to the right.

[0]https://en.wikipedia.org/wiki/International_Phonetic_Alphabe...

For folks who appreciate elements from this redesign, I'd love to humbly suggest checking out the Wikipedia iOS app from the Wikimedia Foundation.

The app supports 4 reading themes, is privacy friendly, includes: truly private reading history, trending articles, a persistent TOC on iPad, on this day in history, language and multilingual support, in the news, random articles, bookmarking and folder-ing capabilities, a way to view Wikipedia articles on an interactive map, a wikitext editor with syntax highlighting, updated article history views (with easy to read diffs), widgets, predictive search (you can even search with emojis if you please) and very soon editing notifications.

We're a small team (1.5 designers, 3 engineers, an engineering manager and a PM) and we're really passionate about making a beautiful and usable experience for readers and contributors on iOS.

I'm the lead designer/design manager and have worked on this project for five years. Commenting just as myself though (thoughts are my own and not the Foundation's), as a person who loves Wikipedia and design and is proud of the work my coworkers have done.

If you're interested you can check the app out here: https://apps.apple.com/us/app/wikipedia/id324715238

The Wikipedia iOS app is just about the most amazing free app I have installed on my iPhone. It's the one app that actually feels like a native platform experience, while retaining everything I like about the original on the web. Truly a shining beacon of light in our ad/tracking/Electron-laden world. So thank you, I, for one, really appreciate your work!

Just downloaded the app, it's incredibly well-designed. Great work!

This app is one of my very faves and one of the first I install on a new phone. Just wanted to post to say thank you for putting so much thought into the design - getting lost in articles, creating reading lists to come back to later, being able to switch languages on the fly - it feels like being in the library as a kid again going through Britannica hardcovers, except with a better interface and search instead of an index. :)

Awesome! The mobile app is great. I’d love to see a macOS app released for the desktop with the same clean feel and speed of the mobile app.

I do have a question: Wikipedia on mobile is insanely fast. Much faster than the desktop or mobile site. What media APIs do you use to pull the content for the mobile app?

The multi language support always blows me away like being able to tab between your chosen languages when searching. Lots of simple innovations that make it clear yall put a lot of thought into it.

Absolutely love the Wikipedia app. My two biggest wishes for it are (on iOS):

- Move the search button from the top right (very hard to reach) to the bottom menu (or some other more reachable place)

- When using “auto dark mode”, allow me to choose the not-pitch-black dark theme

I discovered the other day that the mobile version of Wikipedia _while on desktop_ is AMAZING.

Check this out: https://en.m.wikipedia.org/wiki/Chuck_Yeager

It's nicely justified for reading. Superfluous interface is almost entirely eliminated compared to desktop view. It's just such a clean, elegant view for reading a Wikipedia page.

I was skeptical but I just tried that and, yeah, it's actually pretty good on desktop.

I totally agree!

This came up in a recent HN post so I published a user script I had written to automatically switch to the mobile version. You can also switch manually between mobile and desktop with ⌘ + M or ctrl-M. If you've switched to desktop and click on a link, it stays in desktop mode (it would be jarring otherwise if it kept flipping between modes). You can also edit the page with ⌘ + E or ctrl-E (opens in desktop mode since the mobile editor is pretty limited).

Install it here: https://greasyfork.org/en/scripts/431384-switch-to-mobile-wi...

What they need to do is put the TOC on the collapsible sidebar.

for me, that's way worse, I much prefer to get full width, on my 32 inch monitor, it looks nicer on the default website, and fits way more stuff without needing to scroll. If I want a similar layout for "reading" I'll just use reader mode in the browser and get a very similar layout.

I used to agree until someone made me stop and assess what it’s like to read text on a wide screen vs. a narrow one.

It’s not even close anymore: reading is just so much easier when it’s a narrow column.

Wiki pages are like 95% text to read.

To each their own I guess, but to me you just described a terrible reading experience. Filling all available space with content may sound like a good idea on paper but columns of text should really limited in their width - that's just very basic and commonly agreed upon typography best practice.

except, that applies if you are reading something top to bottom, like a book. That's not what I do on wikipedia, I scan for information.... and it is much easier to do that in wide format. What you end up actually reading is a paragraph or two. As a speed reader, I read in chunks, and in wide format it's actually not that bad, its not a wall of text. Most paragraphs end up to be 3-4 lines long and are naturally chunked by citation notes. I find it really easy. There is no one rule of typography, there is general guidance, but context matters. If in your head you've translated that to a "rule", you are doing it wrong.

if I had to read anything longer than few minutes I immediately go to the mobile view. Much easier on the eyes.

You would also like simple wikis https://simple.wikipedia.org/wiki/Chuck_Yeager Adding simple just brings information down to its bones, good for quick reference and easier understanding of harder topics https://simple.wikipedia.org/wiki/Quantum_mechanics

Wikipedia itself is also working on a new UI:

https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improveme...

The English Wikipedia isn't one of the "early adopter wikis" but if you visit, say, the French-language Wikipedia you can see the changes (e.g., different width to improve readability).

Wow, it's much more readable (though a bit disjointed):

https://en.wikipedia.org/wiki/Computing#History

https://fr.wikipedia.org/wiki/Informatique#Histoire

It's a lot of what m.wikipedia.com looks like, actually. Just hitting m. on any given Wiki article on a Desktop makes it so much easier to read in my experience. YMMV. :)

Every time I get to a French article somehow, I'm reminded that I should be dreading the day this gets merged into master. It's like this half-baked cards feature: whenever you search on the page and hit a link, that card will stay open indefinitely. You can't hit escape to close it, you can't hit tab to move off the link because then you'll just get another card for the next link, you have to go for the mouse. It was supposed to be an onhover feature for when you're using the mouse in the first place, instead it obscures text all the time. Luckily, cards are something you can turn off; with the narrow new style I doubt we'll have such luck. Language switching also became a mouse-requiring operation in the new design (or much more involved), other than that and the squished text I don't actually see any attempt at making it look modern.

Wow, that is shockingly bad. Different objects just floating in space without lines between them to visually differentiate them.

That is really bad, what were they thinking?

Please never ever use system-ui in your CSS.

A classic article about why: https://infinnie.github.io/blog/2017/systemui.html

In this particular case, it totally ruined the fonts of Wikipedia for East-Asian (CJK) Windows users.

Just in case the article itself isn't convincing enough, below is a list of some websites that have tried "system-ui" and then reverted it semi-immediately:

Facebook/bootstrap, GitHub, Twitter, Stack Overflow...

Thanks for sharing! I love system-ui and this is my first time hearing of this -- will definitely reconsider.

Isnt the right answer for Microsoft or users to fix their system font? Why would east Asian users have a crappy system font selected in their OS?

This feels like a failing on Microsoft’s part, at least for current versions of Windows. The bar for a viable system font has been raised and it’s their responsibility as an OS vendor to ensure the bar is met across localizations.

As for old versions of Windows… well, one should probably look at their target market/user base. If your demographic is firmly Roman western use of system-ui is probably fine — as far as I’m aware, the bulk of remaining users of XP/7 are in East Asia, chiefly China.

You can call it a failing on MS's part up until you have real users that are impacted because then it really doesn't matter who's fault it is when users can't use your site.

So MS should fix this and until then you shouldn't use system-ui.

Why does a clumsy font mean you can't use the site? And why is the solution not to upgrade your 15-year-old dangerously-insecure EOL OS?

Those releases have been EOL for 10+ and 5+ years respectively. There are a number of free options.

I don't see any reason to make any effort to support those folks, especially when the font is merely ugly in a cosmetic sense, and not unreadable.

My counter-argument would be that even if a platform is EOL, if it represents a serious chunk of your audience then you should probably do what you can to accommodate them. Especially if, as here, you might be able to fix it with a very simple change.

This problem isn't limited to Windows 7/2008 or XP. It affects Win10 too.

>especially when the font is merely ugly in a cosmetic sense, and not unreadable

Eh, you won't go very far with this attitude in any design team.

Also, anyone who tried to manually craft font-family fallback path are already making effort. You can literally choose to not assign any font. Actually, it probably works better: most of browsers have sensible default (which often times is system font) already.

Win 10 is a different story, what an embarrassment.

Interesting, thanks for that. I was under the impression that using "system-ui" was the way to go! I do plan to add font choice as a setting in a future version, so that will solve this.

Just to note, you can achieve having "system font" for all the major OSs without using "system-ui" keyword.

Actually, "system-ui" doesn't even do anything in Firefox on Windows right now (and it behaves exactly like -apple-system on MacOS), so you shouldn't rely on it anyway.

This is great info, thank you. I'm going to set up some VMs so I can test East-Asian locales in future to make sure I've not fucked anything up.

I recently discovered that if you're logged into Wikipedia, you can customize the UI completely.

You can, of course, choose different themes.

But you can also upload custom CSS and Javascript!

Link to image of preferences page - https://ibb.co/Kbfh1QQ

Yeah I’m not actually sure why more people don’t know this.

Because most people don't have a Wikipedia account, nor would they benefit from having one these days.

Some Wikipedia pages use CSS classes to allow people to self-censor what they see - for example, this is the remedy provided to people who do not want to see images of Muhammad.

https://en.wikipedia.org/wiki/Talk:Muhammad/FAQ#Q4

Thank you for pointing this out! I had no idea!

Is there a way for this to be implemented as a Mediawiki skin [1] instead of as a browser extension? Is installation of skins by users one of the challenges?

[1]: https://www.mediawiki.org/wiki/Manual:How_to_make_a_MediaWik...

I don't think you can install random skins on the official Wikipedia site. I run a mediawiki install for a local tech group, and it would be fantastic to replace monobook with this layout.

sjdz, the work you have done putting this layout together is awesome!

Looks good, but I think the adjective "modern" to be overly aggressive towards other design trends. From what I saw, the design trend here is for a flat and rounded interface with dynamic searches.

Thanks, glad you like it :) With the name, I was just thinking more in terms of "modernized"... as in, something more modern than the current Wikipedia design... but I get your point! I'll have a think about it.

The name should reflect Wikipedia, not all wikis.

Maybe slim or slick :)

I keep thinking of modern as the 1930s-style minimalism. Following that, isn't/wasn't "modern" the default Wordpress theme?

Yeah, when I saw modern, I was worried that it meant I could continuously scroll through a dynamically loaded page of the entire contents of wikipedia

IMHO the things that OP wanted should not be part of the website:

Narrower columns? Adjust the width of your browser window. Nicer Fonts? Those should be a user preference, not served by website - I see the OP agrees with this... Dark Mode? That should be a function of the DE, or maybe the browser, but not the web site.

Everything about this work says "I want to control the look of web pages on my end."

Why you need this permission "Read your browsing history"? I think you only need access to: "*://*.wikipedia.org/*"

I've just looked into this, it seems Chrome displays that because of the "tabs" permission:

> "Technically this permission allows observing the history via chrome.tabs.onUpdated, but not read the previously existing history, so the phrasing is not entirely correct, strictly speaking."

https://stackoverflow.com/questions/64063754/chrome-extensio...

To be clear, the extension doesn't access your browsing history at all. The "tabs" permission is just used to find Wikipedia tabs and enable/disable the new design when using the toggle from the browser popup.

The permissions requested (in the manifest.json file) are:

  "permissions": [
    "tabs",
    "storage",
    "*://*.wikipedia.org/*"
  ]

I will change that to "activeTab" in the next update which should fix it.

thanks for responding here and reducing permissions.

Note that you could also make it a bookmarklet which requires no permissions and only accesses the current tab when the user clicks it. Would be nice for trying out how it looks, given how little it changes I was expecting this would be a little bookmarklet and was a bit disappointed I had to add an extension to my browser for trying the look.

A bookmarklet would have to be clicked every time you open a new wikipedia page. I think it would be more productive to just fix the main permission issue (can view entire browsing history - author says in a comment they'll be fixing it). Chrome also lets you keep the extension inactive - you can easily activate it on-demand from the toolbar. If you do that on a minimal-permission extension, you have the equivalent of a bookmarklet.

FYI for any other extensions that do this, you can use the extension permissions to disallow them from running everywhere, and just give access to the site(s) where you want them to run. This doesn't require the devs to have done anything special — this functionality is built into Chrome. Weirdly, this is only available in Chromium browsers, not Firefox, at least last I checked.

one of the worst things about the current WP GUI is that when you hover over a hyperlinked word with the expectation that your anxious yearning for the definition of that word be fulfilled you're often forced to click through to the actual page, because the popup lacks a concise enough representation of that word, because the definition could not be contained within that small a space, or, the definition of the word succeeds some initial ramblings about the origins of the word, or of its inventors, which does not lead to me understanding the word and makes my WP deep dives less pleasurable.

I want WP to solve this with NLP.

I believe those texts are specifically set either on Wikidata, or via the template "short description" at the start of the article. Only where those are missing should it fall back to the beginning of the article text.

Certainly NLP could help here. In particular, there are two sub-areas concerned with document summarization and text simplification (e.g. remove relative clauses, split long/complex sentences), respectively, that could be useful in this case.

You may be interested to know that Wikipedia has a page dedicated to such redesigns[1]. Perhaps there are some to draw inspiration from. Regardless, maybe it would be worth contributing to the list.

[1]: https://en.wikipedia.org/wiki/Wikipedia:Unsolicited_redesign...

Thanks for that, I did actually come across that page during development when I was searching for redesign concepts. There's a few dead links there, but it seems redesigning Wikipedia is a very popular pursuit for designers as there are tons of designs out there (on dribbble etc). I've tried to incorporate all the best ideas from these into this extension, but I'm open to any suggestions for improvements! I will also try adding this one to the list.

Wikipedia is the one website that still has any value and actually serves the purpose of the web. Your website blocks me because I haven't enabled JS or disabled Tor or whatever, to prove I'm not a bot to fetch your front page which should take less resources than serving a captcha or JS check. Modern indeed.

The design is interesting, but I can't help wonder why the design insists on keeping a specific page width instead of using the whole browser window. Even worse, for really wide pages, it just shows a column in the middle.

Text becomes less readable at large widths. I sometimes use the mobile Wikipedia on desktop for that reason, especially on ultrawide monitors.

Just... don't make the browser window 34 inches across?

In my case this is an annoying fix because then I have to resize the browser window all the time. As well as the default window manager on Windows not having features to center a window or shrinking/expanding window size to fit the desired max line width. I also find the desktop behind the browser window distracting.

Having said that; Reader mode solves most of the above issues.

If you set the width slider to maximum, it goes to 100% browser width, which gives you the current Wikipedia style :)

There's a point where long line lengths start negatively impacting reading speed, so a lot of designers incorporate that idea as a hard limit in their layouts.

It might be better to leave it up to users, because it's a very common complaint on many sites where text width is limited.

I don't get this. If you want it to be narrower, make your browser window narrower. And by the way, you don't need an extension for the rest of the stuff, either. Wikipedia already supports per-user custom styling. https://en.wikipedia.org/wiki/Help:User_style

it's an off the shelf one click solution that gets me a more readable wikipedia

i have a huge 4k monitor and always open many browser tabs at once, some tabs I don't want the window to be narrow on, and others might be wikipedia

with this when I switch to my wikipedia tab i can just read it and it's very pleasing to the eye

Hmm, well I don't think it's quite one-click, in fact I think it would take fewer clicks to do it on-Wikipedia: click a link like this and then press Publish.

https://en.wikipedia.org/w/index.php?action=edit&title=Speci...

(Note: the theme here was picked at random from MediaWiki's `Manual:Gallery of user styles`, so... I disclaim any implication that it's a good theme. In fact, it must be bad - the link for this theme is to `en.m.wikipedia.org` !!!)

I hope you know that your browser can have multiple windows.

I was also confused, but it's actually a setting in the top-right menu, you can make it full width. Not sure why it's not the default.

Looks great, doesn't work for me:

* It seems to constrain the width to something even smaller than usual (800px?). I have 6000px of horizontal real estate, and while it would be mad to let text run to that length, the optimum is not what a phone can do. (I've tried to find out what "native" width is here, but I'm getting full-width no-constraint layouts with Firefox (no plugin, not logged in), 800px with the plugin (Chrome, logged in) and something in between (Safari, logged in).

* It hides links I regularly use behind menus (to the discussion page and version history).

I guess 9x% of people never edit Wikipedia and it might make sense to cater to them. But, then again, I'm not sure if it's the best idea to actively hide the fact that they could contribute. I also don't see as much of a difference to the mobile layout that is planned to slowly become default on desktop as well.

Edit: I found the slider to adjust page width. That's thoughtful!

I installed an extension that auto-redirects me from Wikipedia pages to Wikiwand and I love it.

Things I like about it: * always-visible TOC * it's much easier to parse visually - smaller footnote numbers and many similar small adjustments to font, alignment, etc.

Things I don't mind actually * fixed (smaller) width

Either way, this is the spirit of the web - everyone can remix and format as they like.

compare: https://www.wikiwand.com/en/Hacker_News https://en.wikipedia.org/wiki/Hacker_News?oldformat=true

https://addons.mozilla.org/en-US/firefox/addon/wikiwand-wiki...

I'm always blown away by the effort some of us put into random passion projects.

This looks amazing!

I personally wouldn't install it. I don't like cluttering my browser with too many extensions and I don't use Wikipedia enough for it to be worth it.

But well done.

@sjdz Were you inspired to do this based on the Wikiwand site and extension from a few years back? It seems very similar.

Looks pretty nice! I installed it and gave it a go. It definitely looks neater on the landing page demo than it does on my monitor; I suspect it's because my monitor is running at 1440p.

Also, it appears a little broken on maths-heavy pages. See https://en.wikipedia.org/wiki/Fourier_series.

Multi-line equations get displaced by the pictures on the side, some even appearing with a horizontal scroll bar. Lots of strange white-space in some equations.

I went in expecting to find something resembling fandom.com but was pleasantly suprised. It is more or less the Firefox reader mode but improved and optimised for Wikipedia and without hiding parts of the website. One issue: the background colour breaks on french pages, probably due to the other theme they are using. The one thing I miss is a quicker way to access other languages, I often read a page in multiple languages and having to scroll through the menu every time is slow.

Some feedback for you:

I've tried many of these over the years and always hope I'll find one I like. This is probably the best so far, but I ended up uninstalling it after about 2 minutes of experimenting for the following reasons:

- The left side-bar text is too big

- I actually prefer Arial/Helvetica to the typeface you chose

- Formatting of—not sure what they're called, but the place where disambiguation notices pop up at the top of the article under the title—feels a little off

I'm late to the thread, but I'm really glad that Wikipedia is the kind of Libre project that's inspired so many people to make redesigns / mirrors of it. It's the way the web was meant to be.

As was mentioned in this discussion, it's also worth noting that mediawiki supports custom themes. Anyone else use an alternate wikipedia theme? I've been using "Modern" for years and love it.

Any chance you'd like to open source this? I'm really enjoying this as well so far, but there are a few small nits I'd like to address with a little PR :)

1. Left menu scroll bar defaults to the hideous browser default scroll bar. 2. When increasing the width of the content just a bit, it becomes left adjusted all of a sudden, hugging the left menu and leaving tons of room on the right.

Some criticism:

It is fine for reading, but by hiding the tabs for "edit this page", "history" etc. it does not invite editing as much as the current Wikipedia/MediaWiki does.

And in this particular case, I don't see much purpose of having the toolbar being a fixed element that does not scroll with the rest of the page. Apart from the Font size/Dark mode controls, the links there are for leaving the page, and if I want to leave the page, there is nothing stopping me from first scrolling to the top of the page. Most keyboards have a Home key that does that. There is also the "Scroll to the top" arrow button that pops up in the lower right corner (obscuring the text beneath it, BTW).

Something I do think would be useful, in terms of scrolling on Wikipedia/MediaWiki would be to go between Editing, Preview and Changes and keep about the same position on the page when doing so. As it is now, long articles could be disorienting and I would have to spend some time looking for the editing position when previewing my edits.

This is what I like about chrome extensions, you can modify things, store your own stuff, etc...

I am curious I don't think Wikipedia does it/would do it but I have seen some sites break if you modify their DOM.

I think including CSS overrides would be different but YT is an example where injecting something into their DOM has an error show up in console.

Wondering if that was a concern for you.

MediaWiki actually got policies to ensure breaking changes to the DOM isn't introduced.

I've been looking for something like this. My only feedback is that the default style looks a bit too narrow (width and line-height wise). Also, the scale/range for changing the width jumps a lot between the middle and to the right, I wish there was a bit more control over that. Why not attach the value of the slider to the width percentage?

Its funny I was actually looking for a wiki extension that allowed more readability on desktop a couple of days ago.

I tried out Readable Wikipedia [0]. Which I really liked (kind of turns it into mobile, which is good enough for me) But it seems to have been abandoned, since images didn't load for me.

I then tried out WikiWand [1]. Although I've been using it and its been ok for the most part, it seemed over the top, and the UI was still a bit dated. Also, didn't like how it would load images in a banner view at the top...

I look forward to trying this out, looks very promising. Thanks for spending the time to make it!!

[0] - https://chrome.google.com/webstore/detail/readable-wikipedia... [1] - https://www.wikiwand.com/

I've been using Wikiwand for years, still love it.

I want to use this. Looks really nice. I know there are people here who are crying for information density, but I’m not one of them. The majority of people will be happier when there’s room for content to breathe.

My one sadness— no Safari support! Safari has gotten better with its extensions API support.. is it just the the store that’s preventing you?

Yeah Safari support is definitely on the TODO, but the requirement for an App Store account made me put that on the backburner for now.

If you want safari support, wikipedia.rehash [1] has the option to install as a per-user custom css on wikipedia, so the style can be automatically applied when you log into wikipedia. Hence it works on tablets as well. Its redesign is not as extensive as this project, but the goals are quite similar.

[1]: https://github.com/Krasjet/wikipedia.rehash#user-content-opt...

I think you're missing the mark a bit with the `density` and `room for content to breath` space. While I generally prefer to not hide (common) actions behind menus, and have some (imho) better design to surface these types of things I can accept it. The current trend with giving content all the room and shoving every little action into a pop-out is getting a bit much. We all have massive displays, even on our phones, and we _can_ show the more common actions (in this case, history, edit, etc) instead of hiding everything behind a `...` or a hamburger menu.

I honestly love the design, thank you! One design criticism I have is that you've completely eliminated any visual distinction around images and their captions, eg. in https://en.wikipedia.org/wiki/Zero-knowledge_proof#The_Ali_B... you have multiple images & captions below each other where it's not immediately obvious which image a caption belongs to: https://postimg.cc/18cPJXPt

Humble suggestion: add some background shading to visually group an image with its caption, mock eg: https://postimg.cc/hJLrJF9N

I wish wikipedia would be better compartmentalized, with articles tagged for their academic importance, because it makes it very difficult to download and/or host wikipedia when it includes a lot of noise, like celebrities, tv shows, local events, etc.

I guess that's what wikipedia portals are for?

For example I would love to be able to download a wikipedia archive just for math, computer science or history, etc, just like subject are found in an university, library or the dewey or congress classification.

Of course it's a lot of work, but I really feels it's important and it would make wikipedia more accessible and attractive, and also cheaper to distribute.

One man's noise is another man's treasure.

From the screenshot:

I absolutely adore the positioning of the table of contents. The design looks clean, utilitarian, and overall well executed.

That being said - and this is more a critique of modern design - I absolutely hate the suffocating roundness of the element corners. It's an aesthetic that drips with overfamiliarity and a patronizing attitude. It's the visual equivalent of being put in a padded room, or having a distant relative who you have nothing in common with and have not seen in years trying to relate to you with anecdotes about your childhood that you can scarcely remember.

This reads like a Guardian album review, very colourful - thanks!

As a person who designs web applications to look somewhat modern because that's what is now-days expected, whenever critics go to such extreme similes about modern web design and their hatred for it... it's such an extreme opinion I tune them out entirely. You can't cater to radicals.

Most people don't particularly care how things look, so long as they're reasonably familiar, well-ordered, visually inoffensive, and functional. After that, it's optimizing for performance metrics and ensuring that the client is happy with the aesthetic of the final product.

Client usually wants to emulate some elements of the latest aesthetic trend. Can't blame designers for what's ultimately a fashion trend. Especially when breaking from the trends and convention put you at risk of looking dated or driving away consumers.

Edit: some grammar

It's more that, I've read critics of modern web design. And while I can understand that some people don't like it (myself included for some things), the visceral hatred that some people have in their rants against it is so great, I can't possibly send that to a client with a straight face. It's so extreme it's absolutely useless.

Edit: At some point, while you can agree with some of the critics' points, they become completely out-of-touch with reality and the typical user.

That's, uh, a pretty intense reaction to some curves.

There is a long history of rounded corners in graphic design. In the real world, perfectly sharp edges do not exist. Even on the printed page, ink bleed tends to gently round all corners.

This is a good thing, because sharp corners interact poorly with some parts of our visual system. Sharp corners in a design can be as jarring as extremely high contrast or saturated colors, which are also best avoided in designs where the intent is to let the viewer focus on the content and not the form.

A slight amount of corner rounding in digital graphic design can lead to a look that is easier on the eyes, less distracting, and more approachable. (The design here uses more rounding than necessary, but I think it's driven largely by fashion and the above principles and not some dystopian desire to infantilize you.)

See:

https://en.wikipedia.org/wiki/Grid_illusion

https://en.wikipedia.org/wiki/Lateral_inhibition

https://en.wikipedia.org/wiki/Pattern_glare

http://people.sunyit.edu/~lepres/thesis/principles/63_pdfsam...

http://macknik.neuralcorrelate.com/pdf/articles/troncoso_et_...

I'm absolutely an advocate for corners that are rounded to a reasonable degree. As you stated, perfectly sharp corners can produce a harsh, inorganic aesthetic that can be distracting to users.

Even very round corners can be contextually appropriate.

There's a world of difference between a few pixels of roundness, and making your entire website look like a fisher-price toy.

Round, organic designs can be complex and visually pleasing. They take a lot of work to execute well, and are rarely confined to the simple rectangles that dominate modern interface design.

The large border radius on modern UIs doesn't contribute anything interesting to previous UX other than the novelty of round corners. It hasn't been motivated, or motivated any meaningful new design approaches. All it's accomplished is that it's turned UI elements into rectangular pills that function almost exactly as they did before.

I see it as an aesthetic reflection of the modern technologist's attitude towards their user-bases.

Edit:some grammar

I agree with you on this 100%.

Have you seen Android 12's new fisher-price UI? I would really love to hear your thoughts on this video:

https://www.youtube.com/watch?v=_xLgXIhebxA

The table of content is the bit I like the least. The observation is correct, then entire left hand sidebar of the standard Wikipedia layout isn't actually that useful. Putting the table of content in the sidebar might be an idea, but why the big bulk font? Just take the normal TOC and move it to the sidebar.

One big thing many could learn from, from the standard Wikipedia, and where this "modern" alternative fails, is the use of icons. Wikipedia mainly use text labels, not icons, which mean that I don't have to guess what the three dots mean. When going to Wikipedia, it very clearly states that I am in fact "Not logged in", this modern UI just have the person icon, but am I logged in? Similarly there's a small clock with an arrow, if I don't understand that Wikipedia is versioned, I have no idea what that does. The "view history" is much more clear, even if "View page history" would be even better.

It's pretty fun to play around with alternative designs for pages like Wikipedia, but actual updates should be done because it improved usability, not because it fails to follow trends that will change in a few years anyway.

This kind of reminds me of a short project from a guy I knew in college:

https://github.com/AndrewBelt/WiTeX

It's a bit rough[0] at ultrawide resolutions, but then again what isn't?

There's also a small padding issue[1] next to the sidebar when the column width is set high.

Otherwise it looks pretty good.

[0]: https://jagger.co/downloads/modern-wiki-wide.png [1]: https://jagger.co/downloads/modern-wiki-padding.png

Came to report these same two issues. The second one seems like a simple bug; I'd expect the text column to be centered in all cases. Not sure what the solution is for the first problem. Even in a normal width window the text box feels too narrow. Multi-column layout is too hard.

I really like this though!

css columns to the rescue, maybe with a media query.

Are you working on a Safari extension?

Looking clean. One thing that bothers me when the width slider is adjusted to the highest two settings - content in the main #content element runs right against the navigation scrollbar (#wiki_contents). #content needs at least an extra 20px of padding (to 340px or 360px) on the left at the second highest width setting (5) to give it some separation, and 40px (to 360px) at highest width setting (6) to match the alternative right-side padding introduced at that level.

Could you move the infobox to the right of the bodyContent?

This is how it looks for me: https://imgur.com/jZcbtUM

The main text is just too narrow. There's enough empty space to the right of the bodyContent div for the infobox without squeezing the text like that.

I'm thinking, it should be something like this: https://imgur.com/arNwTDr

I love this OP, thank you for making it! I did have to turn off a custom theme I had set in my Wikipedia settings, perhaps that's something you can detect and warn for?

I still think I prefer Wikiwand https://en.wikipedia.org/wiki/Wikiwand but I like that yours doesn't redirect from Wikipedia (and presumably track you). If you could steal some design elements from Wikiwand I would personally switch over. (More space-efficient ToC, pulls images to the top to make articles more visually interesting, etc)

I like it! I'm not one of those people who fetishizes 90's to mid-00's design. Something like Hacker News has its charm but let's not pretend all sites from that era were usable. One thing that drives me mad in default Wikipedia is the line length. On a large monitor it makes text way less readable. Also having access to the table of contents on the side is way better than having to scroll back up.

Looks nice, but when the Contents column is folded, there's a huge white margin on the left even when the contents on the right don't fit into the page widths, as for example with a big table like here: https://en.wikipedia.org/wiki/List_of_Falcon_9_and_Falcon_He....

I like having the table of contents on the left. I often have to scroll back to the top to look at the table of contents again. The font size is rather large though: for many pages you have to scroll to see the full table of contents. Seeing the full table of contents at a glance is a critical feature for me. I would use this extension if you could scale the table of contents like you can for the main text.

Modern indeed! Let's not clutter Wikipedia with the plague of modern web development, we need to de-clutter the web, not the other way around.

Can you make a chrome extension that does the reverse of this? Make "modern" webpages on rest of the web look like wikipeidia?

FWIW, Monobook remains my preferred Wikipedia UI, and perhaps my favorite UI design period. A true marriage of form and function.

https://en.wikipedia.org/w/index.php?title=Main_Page&useskin...

I was ready to hate it like a grumpy old codger but it looks really nice and keeps the content front and center. If I can make a suggestion - I hate it when the search suggests “trending” things. Of course I find them interesting, but it interrupts my attention. Maybe make that a separate button or something.

I did not try the theme but from what I see you just lowered contrast (this famous grey on white). You are reducing usability for the sake of questionable aesthetics. From there I am uninterested to explore any further. Thanks for your efforts but I like my Wikipedia to stay the way it is now. Works fine.

It's awesome, thank you.

Can I suggest a specific font for Persian language? At the moment there is a single font for all languages, but Wikipedia manages it very well, and it has a different font for different languages.

https://ibb.co/rpCm9zF

Gorgeous. How can I buy you a coffee?

Coffee sounds good actually.

Nothing is wrong with the existing wikipedia interface. In this case, in the course of making it 'modern', it was made worse (like most 'modern' things).

Please remember from design 101 that line and shape have meaning and can help the user understand the interface.

I think having the sidebar on the right would be better design. Because the article should be the main focus, and we read from left-to-right, putting the sidebar on the left makes it harder for the eye to track back to the following line of the main article content.

Great job! Before I install it, can I ask - does light / dark mode auto-switch based on the OS setting, I go into darkmode at sunset (and vice versa). I love it when a website follows this, the current wikipidea does not, I'll install this if it does.

Is it just me or does the dark themes do not work for tables? For eg. https://en.wikipedia.org/wiki/List_of_AMD_Ryzen_processors

Thanks the UI is great.

I don't know why but since at least a year we have a new design on the french version of wikipedia (you can check by yourself on any wikipedia page in french).

But the english UI is bad it's hard to read on large screen. With your extension is really nice.

If you’re logged in, you might get the new design on English Wikipedia too. It can be turned on or off if you so prefer: https://en.wikipedia.org/w/index.php?title=Special:Preferenc...

If I unchecked "Use Legacy Vector" I still got the old UI(the one which is too large on large screen) on the english version

edit: I do need to uncheck the "Use Legacy Vector" to have the new design. I don't know why, maybe it was a cache issue but now it works.

Reminder that the mobile Wikipedia page is accessible on desktop and looks pretty neat: https://en.m.wikipedia.org/wiki/Main_Page

Another reminder that you can get the "mobile" version for Wikipedia on desktop. Just add ”?useskin=minerva" (sans double quotes) to the end of the URL. Since my browser can't have extensions, I did a dirty userscript for doing that with JavaScript.

Conversely, the old desktop skin has been updated to work well on mobile. I really like how they carried the "pixel art" icon aesthetic over to retina displays. (When you zoom in, you'll see that they're actually vectors with smooth gradients.) And when you turn your phone to landscape, the familiar desktop interface comes back.

https://en.wikipedia.org/wiki/Main_Page?useskin=monobook

Is it open-source?

I went to the link and all I saw was an install button. There was no content, no information, no editing, no wiki and no pedia. And the text was too small.

If “modern web UI” means “performs none of the functions of a web Ui” then you nailed it.

Aren't they constantly working on this tho? Maybe you should talk to/help https://design.wikimedia.org/ instead of extensions.

Or just use en.m.wikipedia.org instead? From the preview they look very similar.

There's also Wike[0], a fantastic little native Wikipedia browser for everyone out there on Linux.

[0] https://github.com/hugolabe/Wike

wikipedia UI for browsing is already perfect and needs no further improvement.

Peak Wikipedia reading experience, for me, is using the Android app on a tablet. It already gives the "modern" experience that this extension seems to be going for, and is an absolute joy to use.

The images look nice. You might consider a demo page that mimics the output of the extension though, with some amount of interaction. It's difficult to tell what it's really like from an image.

Seems like the MobileFrontend brought to the PC.

I think I would prefer rhe current Vector theme (or maybe Monobook, but definitely not thr Fandom one), but it would be fairly great to have a dark mode.

Thank you for your work!

I dislike getting the search results in a pulldown. makes it harder to open them in their own tabs, also doesn't work so well if your connection is slow.

Confluence does this and it drives me nuts.

Love it I edited the main content width so I have to scroll less

Looks clean and nice on first glance!

> Modern for Wikipedia only works on desktop or laptop computers

Urgh. Mobile probably represents 90% of Wikipedia traffic. I am on mobile now, of course. I am sad.

Great! I like that you have made the table of contents useful!

Brilliant idea to convert something boring to elegant. It opens a lot of possibilites for developers to make something cool out of boring stuff people love.

This solves my biggest problem with Wikipedia, which is the index being placed in a box at the top of the page. You moved the index to the side. Nice work!

You even improved the homepage of Wikipedia!

The original version has got to be one of the most dreadful pages on the internet, designed by committee and looks like it...

I'm usually skeptical of these kind of attempts and dismiss them automatically, but this very nicely done! I'm keeping the extension. :)

This looks very cool. Looking forward to giving it a go!

One request right away: can you add a setting to add phantom space at the bottom of the page? I don't know if it has a proper name, but editors sometimes have a "virtual space" setting so you can scroll the last bit of the content to the top of your screen.

It's super helpful when you want to click on one of the last on-page heading anchors and it doesn't really scroll to that part of the page because there's not enough room to scroll it. If that makes sense...

Nice work!

Nice work! Now, by any chance, can you make a pre-modern web UI for other sites? Because that's actually what I am looking for...

The Wikipedia app is actually quite beautiful, and with access to location services it's fun to discover stuff around you.

Kudos to @sjdz for this. Really like the aesthetics. The ability to change formatting elements for ease of reading is bang on.

It looks really neat. would love to learn more about how you approached it without missing or compromising any functionality.

You might want to offer this as a theme package for Mediawiki, so it can work on any browser on any mediawiki installation.

Stop using low contrast gray text. I can barely read it. Real designers use different weights, not colors.

I agree with the low contrast comment, but the gatekeeping is not constructive

Font settings, colors, custom themes etc are on the TODO for a future version.

I'm too scared to install extensions, any other way to see your design? Looks cool, in any case.

Well done, it looks easier to read. Make font and background adjustable (like reader mode in Safari).

looks great for mobile, doesn't stretch to fill larger monitors, maybe set the viewport percentages properly? Also the existing mobile interface for wiki imho looks better, but of course doesn't have the dark mode options, that's easily changeable.

I just want an app/mobile UI that makes tables legible and not a pain in the ass to scroll.

Looks amazing! Although I wish there were a TTS. It's a lacking feature for wiki nowadays.

The best encyclopedia was the Compton Interactice Encyclopedia in CD-ROM with Patrick Stewart.

Very nice. I think a bit more spacing between text body paragraphs could help legibility.

Can we have this but in a form of a userstyle, without all the features that require JS?

You can add custom javascript to User:YourUsername/common.js on Wikipedia, so this wouldn't be much of a problem.

Any plans to open source this?

OP, This looks great! Having the index on the left is a huge improvement and limiting the text length is definitely helpful. Now I don't have to resize my window to a smaller size every time I open it.

A lot of HN tends to dislike anything "new", please don't let it get to you :)

Thanks OP! I'll go against the grain and say I like this a lot.

If you are are reading this far you probably care a lot about Wikipedia. Give generously if you can. https://wikimediafoundation.org/support/

Or don't https://en.wikipedia.org/wiki/User:Guy_Macon/Wikipedia_has_C...

holy smokes, that's grim

I guess *everything* is subject to corruption

Is there a way to verify that WMF has over a hundred million in reserves?

Also, why is bandwidth costing them over a million dollars a year? Is it because of edge locations or something?

I am confident it's worse than the original. Stop and go away

Hamburger menu broken on Firefox 94.0.2 (64-bit) on M1 Macbook Air

Why is it that so many useful extensions like this snub Safari?

Firefox works on everything, and so creating a single extension guarantees maximum exposure. Safari is locked to MacOS. Creating an extension for it requires that you develop using Mac hardware, and then only other Mac users can use your program.

This doesn't seem much different to Wikiwand at all?

Hamburger button menus do not belong on the web. Ever.

my main problem with wikipedia is reading math. I hate the font they use, which makes everything seem way more complicated than it really is.

I just tried it, makes everything so unreadable.

Oh I like this, downloaded. Thanks and props!

Quite nice, what do the wikipedians think?

It looks like the Wikipedia app for iPad.

Looks great. Just wish it was full width

So it should be applied to HN too :)

Beautiful. Thank you for sharing.

Stunning looks... Great work!

Thanks!

Now all I need is a web extension that helps me stop hating contributing to Wikipedia.

I love it! Well done

Looks good, thanks!

wikipedia should jack this and make it default

Amazing this!!

I love this

I hate to be the contrarian, but I'm confused by the positive remarks here. I find the interface looks like it was trying to force mobile design principles onto a desktop view. A lot of space seems wasted here and I can view less content at once. I don't find this useful personally.

You can find it not useful personally but still leave a positive comment for the creator who is sharing something they made with the community. "Subsidize what you want more of, tax what you want less of". If you want people to share their creations, be more encouraging/positive. If you don't want people to share their creations, be more critical/negative.

There is nothing wrong with expressing any opinion.

One unique UI feature of Wikipedia is that it has tons of tables that are super wide. They look fine on a monitor with 1080p+ resolution, but reading such articles on mobile has always been horrible experience.

Unfortunately, this "modern" UI (larger font, narrow width) causes the exactly same problem on desktop.

God yes this is annoying. TV episode summaries are in wide tables too and it's excruciating to read on mobile. These are mostly freeflowing text, not statistics, and there's no benefit to being put in a table. What is with the over-tabulation on Wikipedia?

I in general prefer tables but yeah having summary of TV episodes makes no sense and has been one of my pet peeve of Wikipedia formatting for a while.

Sometimes when this happens, I rotate my phone 90 degrees so that the whole width of the table can be easily seen.

> A lot of space seems wasted here and I can view less content at once.

More space makes thing easier to read, though. You could have font size 8 and a couple hundred chars long lines on your 4k monitor. Would see lots of content, but would be unreadable.

This looks great, going to play around with it when I get home.

Does it still present the fundraising banners?

Reply on news.ycombinator.com