58 ms·

Show HN: I made a modern web UI for Wikipedia

979 points by sjdz 5y ago

muhammadusman 5y ago
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?
pym4n 5y ago
I love it! Well done
w0mbat 5y ago
Stop using low contrast gray text. I can barely read it. Real designers use different weights, not colors.
- optimuspaul 5y ago
  I agree with the low contrast comment, but the gatekeeping is not constructive
- sjdz 5y ago
  Font settings, colors, custom themes etc are on the TODO for a future version.
depaulagu 5y ago
Is it open-source?
forrestthewoods 5y ago
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.
appel 5y ago
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?
sb057 5y ago
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=monobook https://en.wikipedia.org/w/index.php?title=Main_Page&useskin...
NithurM 5y ago
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.
DarkCrusader2 5y ago
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 https://en.wikipedia.org/wiki/List_of_AMD_Ryzen_processors
pierrefermat1 5y ago
This doesn't seem much different to Wikiwand at all?
sjdz 5y ago
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!
Hackbraten 5y ago
Thanks! Now all I need is a web extension that helps me stop hating contributing to Wikipedia.
haolez 5y ago
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.
- KarlKemp 5y ago
  I keep thinking of modern as the 1930s-style minimalism. Following that, isn't/wasn't "modern" the default Wordpress theme?
- sjdz 5y ago
  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.
  - mattl 5y ago
    The name should reflect Wikipedia, not all wikis.
  - haolez 5y ago
    Maybe slim or slick :)
- emaginniss 5y ago
  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
Conlectus 5y ago
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_redesigns https://en.wikipedia.org/wiki/Wikipedia:Unsolicited_redesign...
- sjdz 5y ago
  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.
0des 5y ago
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.
- jbreitbart 5y ago
  https://wikiless.org/ https://wikiless.org/ is probably what you are looking for. There are also extensions that automatically redirect Wikipedia links
  - deleted 5y ago
    [deleted]
  - animal_spirits 5y ago
    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?
    - thih9 5y ago
      > https://wikiless.org 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 https://codeberg.org/orenom/Wikiless
    - TheNorthman 5y ago
      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 https://codeberg.org/orenom/wikiless
- umvi 5y ago
  Hear hear. I wish more sites were like HN - more text/information density, less CSS magic, less JS.
nguyenkien 5y ago
Why you need this permission "Read your browsing history"? I think you only need access to: "*://*.wikipedia.org/*"
- sjdz 5y ago
  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-extension-tabs-permissions-shows-read-your-browsing-history 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.
  - tonymet 5y ago
    thanks for responding here and reducing permissions.
  - lucb1e 5y ago
    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.
    - mmahemoff 5y ago
      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.
redleader55 5y ago
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.
- leodriesch 5y ago
  Text becomes less readable at large widths. I sometimes use the mobile Wikipedia on desktop for that reason, especially on ultrawide monitors.
  - formerly_proven 5y ago
    Just... don't make the browser window 34 inches across?
    - finger 5y ago
      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.
- sjdz 5y ago
  If you set the width slider to maximum, it goes to 100% browser width, which gives you the current Wikipedia style :)
- micromacrofoot 5y ago
  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.
animal_spirits 5y ago
Looks good, thanks!
notRobot 5y ago
Reminder that the mobile Wikipedia page is accessible on desktop and looks pretty neat: https://en.m.wikipedia.org/wiki/Main_Page https://en.m.wikipedia.org/wiki/Main_Page
- Gualdrapo 5y ago
  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.
- jtvjan 5y ago
  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 https://en.wikipedia.org/wiki/Main_Page?useskin=monobook
crocodiletears 5y ago
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.
- gjsman-1000 5y ago
  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.
  - crocodiletears 5y ago
    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
    - gjsman-1000 5y ago
      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.
BoumTAC 5y ago
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.
- Kwpolska 5y ago
  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:Preferences#mw-prefsection-rendering-skin-skin-prefs https://en.wikipedia.org/w/index.php?title=Special:Preferenc...
  - BoumTAC 5y ago
    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.
Eric_WVGG 5y ago
Are you working on a Safari extension?
toomuchtodo 5y ago
Gorgeous. How can I buy you a coffee?
- cmstoken 5y ago
  Coffee sounds good actually.
nomemory 5y ago
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.
- pkdpic 5y ago
  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.
- spicybright 5y ago
  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 ;) )
- jitix 5y ago
  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
  - thaumasiotes 5y ago
    [flagged]
    - tshaddox 5y ago
      > But I would say that it's the HN commenters being incredibly obnoxious, not wikipedia being wrong for giving you the mobile site when you specifically ask for it. But it's kinda crazy that if I'm on my phone I can't just share a URL to a page with someone who happens to be using a desktop. While I'm not sure if this is made explicit in any of the RFCs or standard docs, in my view a URL should be a locator for a resource that is agnostic of the user agent.
jdeaton 5y ago
Can you make a chrome extension that does the reverse of this? Make "modern" webpages on rest of the web look like wikipeidia?
kreeben 5y ago
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.
- KarlKemp 5y ago
  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.
- jll29 5y ago
  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.
anon-686876876 5y ago
If you are are reading this far you probably care a lot about Wikipedia. Give generously if you can. https://wikimediafoundation.org/support/ https://wikimediafoundation.org/support/
- chayleaf 5y ago
  Or don't https://en.wikipedia.org/wiki/User:Guy_Macon/Wikipedia_has_Cancer https://en.wikipedia.org/wiki/User:Guy_Macon/Wikipedia_has_C...
  - kleer001 5y ago
    holy smokes, that's grim I guess *everything* is subject to corruption
  - genewitch 5y ago
    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?
cosmotic 5y ago
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.
KarlKemp 5y ago
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!
hardwaregeek 5y ago
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.
outloudvi 5y ago
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!
deleted 5y ago
[deleted]
divbzero 5y ago
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_MediaWiki_skin https://www.mediawiki.org/wiki/Manual:How_to_make_a_MediaWik...
- tim-- 5y ago
  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!
klntsky 5y ago
Can we have this but in a form of a userstyle, without all the features that require JS?
- KarlKemp 5y ago
  You can add custom javascript to User:YourUsername/common.js on Wikipedia, so this wouldn't be much of a problem.
bighoss97 5y ago
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!
nice_byte 5y ago
wikipedia UI for browsing is already perfect and needs no further improvement.
hmr 5y ago
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 https://ibb.co/rpCm9zF
svisser 5y ago
Wikipedia itself is also working on a new UI: https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements 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).
- rrrrrrrrrrrryan 5y ago
  Wow, it's much more readable (though a bit disjointed): https://en.wikipedia.org/wiki/Computing#History https://en.wikipedia.org/wiki/Computing#History https://fr.wikipedia.org/wiki/Informatique#Histoire https://fr.wikipedia.org/wiki/Informatique#Histoire
  - lostgame 5y ago
    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. :)
- lucb1e 5y ago
  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.
- ciphol 5y ago
  Wow, that is shockingly bad. Different objects just floating in space without lines between them to visually differentiate them.
zestyping 5y ago
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 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!
- C-x_C-f 5y ago
  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_Alphabet https://en.wikipedia.org/wiki/International_Phonetic_Alphabe...
aeon10 5y ago
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 :)
matt123456789 5y ago
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.
stalfosknight 5y ago
Why is it that so many useful extensions like this snub Safari?
- The_rationalist 5y ago
  Safari is abandonware, it's about time to realize
- alt227 5y ago
  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.
azinman2 5y ago
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?
- sjdz 5y ago
  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.
- krjt 5y ago
  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-option-2-custom-css-recommended https://github.com/Krasjet/wikipedia.rehash#user-content-opt...
- y0st 5y ago
  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.
aerovistae 5y ago
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.
- umvi 5y ago
  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.
  - chris_wot 5y ago
    There is nothing wrong with expressing any opinion.
  - deleted 5y ago
    [deleted]
- thrdbndndn 5y ago
  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.
  - carabiner 5y ago
    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?
    - 5y ago
throwaway675309 5y ago
@sjdz Were you inspired to do this based on the Wikiwand site and extension from a few years back? It seems very similar.
thunderbong 5y ago
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 https://ibb.co/Kbfh1QQ
- greggsy 5y ago
  Yeah I’m not actually sure why more people don’t know this.
  - Arnavion 5y ago
    Because most people don't have a Wikipedia account, nor would they benefit from having one these days.
  - primitivesuave 5y ago
    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 https://en.wikipedia.org/wiki/Talk:Muhammad/FAQ#Q4
- blakesley 5y ago
  Thank you for pointing this out! I had no idea!
phkahler 5y ago
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."
adwi 5y ago
Very nice. I think a bit more spacing between text body paragraphs could help legibility.
noja 5y ago
Great! I like that you have made the table of contents useful!
thrdbndndn 5y ago
Please never ever use system-ui in your CSS. A classic article about why: https://infinnie.github.io/blog/2017/systemui.html 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...
- thex10 5y ago
  Thanks for sharing! I love system-ui and this is my first time hearing of this -- will definitely reconsider.
- arcbyte 5y ago
  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?
  - kitsunesoba 5y ago
    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.
    - Spivak 5y ago
      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.
      - 5y ago
kofesmolotkom 5y ago
Looks amazing! Although I wish there were a TTS. It's a lacking feature for wiki nowadays.
McElodeon 5y ago
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.
jfrunyon 5y ago
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 https://en.wikipedia.org/wiki/Help:User_style
- readme 5y ago
  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
  - jfrunyon 5y ago
    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=Special:MyPage/common.js&preload=User:DimeCadmium/example.js 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.
- mzkply 5y ago
  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.
smoldesu 5y ago
There's also Wike[0], a fantastic little native Wikipedia browser for everyone out there on Linux. [0] https://github.com/hugolabe/Wike https://github.com/hugolabe/Wike
tyingq 5y ago
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.
jagger27 5y ago
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 https://jagger.co/downloads/modern-wiki-wide.png [1]: https://jagger.co/downloads/modern-wiki-padding.png https://jagger.co/downloads/modern-wiki-padding.png
- NelsonMinar 5y ago
  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!
- mixmastamyk 5y ago
  css columns to the rescue, maybe with a media query.
amjd 5y ago
I'm usually skeptical of these kind of attempts and dismiss them automatically, but this very nicely done! I'm keeping the extension. :)
epivosism 5y ago
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://www.wikiwand.com/en/Hacker_News https://en.wikipedia.org/wiki/Hacker_News?oldformat=true https://en.wikipedia.org/wiki/Hacker_News?oldformat=true https://addons.mozilla.org/en-US/firefox/addon/wikiwand-wikipedia-modernized/ https://addons.mozilla.org/en-US/firefox/addon/wikiwand-wiki...
jsturges 5y ago
Thanks OP! I'll go against the grain and say I like this a lot.
dorianmariefr 5y ago
Quite nice, what do the wikipedians think?
jokoon 5y ago
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.
- kingcharles 5y ago
  One man's noise is another man's treasure.
aarondf 5y ago
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!
jpatel3 5y ago
It looks really neat. would love to learn more about how you approached it without missing or compromising any functionality.
cmauniada 5y ago
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/imoddojnfpdkpfiipadaibjplddaneka?hl=en https://chrome.google.com/webstore/detail/readable-wikipedia... [1] - https://www.wikiwand.com/ https://www.wikiwand.com/
- arthur_sav 5y ago
  I've been using Wikiwand for years, still love it.
petargyurov 5y ago
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 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.
siver_john 5y ago
This kind of reminds me of a short project from a guy I knew in college: https://github.com/AndrewBelt/WiTeX https://github.com/AndrewBelt/WiTeX
Findecanor 5y ago
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.
readme 5y ago
wikipedia should jack this and make it default
marcoslozada 5y ago
Amazing this!!
andrew_ 5y ago
Beautiful. Thank you for sharing.
pc86 5y ago
Any plans to open source this?
Waterluvian 5y ago
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 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.
- zuj 5y ago
  if I had to read anything longer than few minutes I immediately go to the mobile view. Much easier on the eyes.
- ravenstine 5y ago
  I was skeptical but I just tried that and, yeah, it's actually pretty good on desktop.
- thamer 5y ago
  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-wikipedia-wiktionary-and-back https://greasyfork.org/en/scripts/431384-switch-to-mobile-wi...
- rollinDyno 5y ago
  What they need to do is put the TOC on the collapsible sidebar.
- keithnz 5y ago
  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.
deleted 5y ago
[deleted]
Tomte 5y ago
The Wikipedia app is actually quite beautiful, and with access to location services it's fun to discover stuff around you.
maximedupre 5y ago
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.
jcun4128 5y ago
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.
- abbe98 5y ago
  MediaWiki actually got policies to ensure breaking changes to the DOM isn't introduced.
freediver 5y ago
Well done, it looks easier to read. Make font and background adjustable (like reader mode in Safari).
ravenstine 5y ago
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.
dirtyid 5y ago
I just want an app/mobile UI that makes tables legible and not a pain in the ass to scroll.
themacguffinman 5y ago
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_Baba_cave 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 https://postimg.cc/18cPJXPt Humble suggestion: add some background shading to visually group an image with its caption, mock eg: https://postimg.cc/hJLrJF9N https://postimg.cc/hJLrJF9N
gkkirilov 5y ago
Love it I edited the main content width so I have to scroll less
AlgorithmicTime 5y ago
Isn't that what WikiWand is?
ChrisArchitect 5y ago
Aren't they constantly working on this tho? Maybe you should talk to/help https://design.wikimedia.org/ https://design.wikimedia.org/ instead of extensions.
- moffkalast 5y ago
  Or just use en.m.wikipedia.org instead? From the preview they look very similar.
fnord77 5y ago
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.
reflexe 5y ago
I'm too scared to install extensions, any other way to see your design? Looks cool, in any case.
FpUser 5y ago
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.
rossdavidh 5y ago
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...
sabujp 5y ago
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.
jules 5y ago
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.
diveanon 5y ago
This looks great, going to play around with it when I get home. Does it still present the fundraising banners?
camgunz 5y ago
Oh I like this, downloaded. Thanks and props!
AdmiralAsshat 5y ago
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.
ndom91 5y ago
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.
29athrowaway 5y ago
The best encyclopedia was the Compton Interactice Encyclopedia in CD-ROM with Patrick Stewart.
jmkd 5y ago
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...
bagelpigeon 5y ago
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 https://apps.apple.com/us/app/wikipedia/id324715238
- leadingthenet 5y ago
  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!
- iscmt 5y ago
  Just downloaded the app, it's incredibly well-designed. Great work!
- amrangaye 5y ago
  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. :)
bob446 5y ago
Wikipedia is a cancer
- cogburnd02 5y ago
  WTF? Why?
aembleton 5y ago
Could you move the infobox to the right of the bodyContent? This is how it looks for me: https://imgur.com/jZcbtUM 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 https://imgur.com/arNwTDr
p2p_astroturf 5y ago
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.
iio7 5y ago
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.
robobro 5y ago
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.
matchbok 5y ago
Hamburger button menus do not belong on the web. Ever.
tern 5y ago
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
b1nj0y 5y ago
So it should be applied to HN too :)
93po 5y ago
Hamburger menu broken on Firefox 94.0.2 (64-bit) on M1 Macbook Air
raghavbali 5y ago
Kudos to @sjdz for this. Really like the aesthetics. The ability to change formatting elements for ease of reading is bang on.
yoyopa 5y ago
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.
eterevsky 5y ago
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_Heavy_launches https://en.wikipedia.org/wiki/List_of_Falcon_9_and_Falcon_He....
reniflex 5y ago
If you don't actually use Wikipedia and just want it to look pretty then I can see how this might be useful. I'm guessing OP is from the Apple school of design. Otherwise, OP, you have injected cancer in to a cancer free patient and called it a remedy.
the_other 5y ago
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.
twijg 5y ago
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.
CyanDeparture 5y ago
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.
selfhoster69 5y ago
I just tried it, makes everything so unreadable.
anhthang 5y ago
I love this
standard09 5y ago
Stunning looks... Great work!
motoxpro 5y ago
Looks great. Just wish it was full width
yakubin 5y ago
It looks like the Wikipedia app for iPad.
Isomorpheus 5y ago
I still think I prefer Wikiwand https://en.wikipedia.org/wiki/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)
wly_cdgr 5y ago
I am confident it's worse than the original. Stop and go away
tinus_hn 5y ago
You might want to offer this as a theme package for Mediawiki, so it can work on any browser on any mediawiki installation.

979 points by sjdz 5y ago

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?

pym4n 5y ago

I love it! Well done

w0mbat 5y ago

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

optimuspaul 5y ago
I agree with the low contrast comment, but the gatekeeping is not constructive
sjdz 5y ago
Font settings, colors, custom themes etc are on the TODO for a future version.

depaulagu 5y ago

Is it open-source?

forrestthewoods 5y ago

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.

appel 5y ago

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?

sb057 5y ago

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=monobook https://en.wikipedia.org/w/index.php?title=Main_Page&useskin...

NithurM 5y ago

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.

DarkCrusader2 5y ago

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 https://en.wikipedia.org/wiki/List_of_AMD_Ryzen_processors

pierrefermat1 5y ago

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

sjdz 5y ago

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!

Hackbraten 5y ago

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

haolez 5y ago

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.

KarlKemp 5y ago
I keep thinking of modern as the 1930s-style minimalism. Following that, isn't/wasn't "modern" the default Wordpress theme?
sjdz 5y ago
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.
- mattl 5y ago
  The name should reflect Wikipedia, not all wikis.
- haolez 5y ago
  Maybe slim or slick :)
emaginniss 5y ago
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

Conlectus 5y ago

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_redesigns https://en.wikipedia.org/wiki/Wikipedia:Unsolicited_redesign...

sjdz 5y ago
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.

0des 5y ago

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.

jbreitbart 5y ago
https://wikiless.org/ https://wikiless.org/ is probably what you are looking for. There are also extensions that automatically redirect Wikipedia links
- deleted 5y ago
  [deleted]
- animal_spirits 5y ago
  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?
  - thih9 5y ago
    > https://wikiless.org 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 https://codeberg.org/orenom/Wikiless
  - TheNorthman 5y ago
    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 https://codeberg.org/orenom/wikiless
umvi 5y ago
Hear hear. I wish more sites were like HN - more text/information density, less CSS magic, less JS.

nguyenkien 5y ago

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

sjdz 5y ago
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-extension-tabs-permissions-shows-read-your-browsing-history 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.
- tonymet 5y ago
  thanks for responding here and reducing permissions.
- lucb1e 5y ago
  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.
  - mmahemoff 5y ago
    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.

redleader55 5y ago

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.

leodriesch 5y ago
Text becomes less readable at large widths. I sometimes use the mobile Wikipedia on desktop for that reason, especially on ultrawide monitors.
- formerly_proven 5y ago
  Just... don't make the browser window 34 inches across?
  - finger 5y ago
    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.
sjdz 5y ago
If you set the width slider to maximum, it goes to 100% browser width, which gives you the current Wikipedia style :)
micromacrofoot 5y ago
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.

animal_spirits 5y ago

Looks good, thanks!

notRobot 5y ago

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

Gualdrapo 5y ago
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.
jtvjan 5y ago
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 https://en.wikipedia.org/wiki/Main_Page?useskin=monobook

crocodiletears 5y ago

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.

gjsman-1000 5y ago
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.
- crocodiletears 5y ago
  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
  - gjsman-1000 5y ago
    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.

BoumTAC 5y ago

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.

Kwpolska 5y ago
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:Preferences#mw-prefsection-rendering-skin-skin-prefs https://en.wikipedia.org/w/index.php?title=Special:Preferenc...
- BoumTAC 5y ago
  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.

Eric_WVGG 5y ago

Are you working on a Safari extension?

toomuchtodo 5y ago

Gorgeous. How can I buy you a coffee?

cmstoken 5y ago
Coffee sounds good actually.

nomemory 5y ago

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.

pkdpic 5y ago
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.
spicybright 5y ago
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 ;) )
jitix 5y ago
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
- thaumasiotes 5y ago
  [flagged]
  - tshaddox 5y ago
    > But I would say that it's the HN commenters being incredibly obnoxious, not wikipedia being wrong for giving you the mobile site when you specifically ask for it. But it's kinda crazy that if I'm on my phone I can't just share a URL to a page with someone who happens to be using a desktop. While I'm not sure if this is made explicit in any of the RFCs or standard docs, in my view a URL should be a locator for a resource that is agnostic of the user agent.

jdeaton 5y ago

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

kreeben 5y ago

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.

KarlKemp 5y ago
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.
jll29 5y ago
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.

anon-686876876 5y ago

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

chayleaf 5y ago
Or don't https://en.wikipedia.org/wiki/User:Guy_Macon/Wikipedia_has_Cancer https://en.wikipedia.org/wiki/User:Guy_Macon/Wikipedia_has_C...
- kleer001 5y ago
  holy smokes, that's grim I guess *everything* is subject to corruption
- genewitch 5y ago
  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?

cosmotic 5y ago

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.

KarlKemp 5y ago

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!

hardwaregeek 5y ago

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.

outloudvi 5y ago

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!

deleted 5y ago

[deleted]

divbzero 5y ago

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_MediaWiki_skin https://www.mediawiki.org/wiki/Manual:How_to_make_a_MediaWik...

tim-- 5y ago
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!

klntsky 5y ago

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

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

bighoss97 5y ago

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!

nice_byte 5y ago

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

hmr 5y ago

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 https://ibb.co/rpCm9zF

svisser 5y ago

Wikipedia itself is also working on a new UI: https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements 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).

rrrrrrrrrrrryan 5y ago
Wow, it's much more readable (though a bit disjointed): https://en.wikipedia.org/wiki/Computing#History https://en.wikipedia.org/wiki/Computing#History https://fr.wikipedia.org/wiki/Informatique#Histoire https://fr.wikipedia.org/wiki/Informatique#Histoire
- lostgame 5y ago
  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. :)
lucb1e 5y ago
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.
ciphol 5y ago
Wow, that is shockingly bad. Different objects just floating in space without lines between them to visually differentiate them.

zestyping 5y ago

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 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!

C-x_C-f 5y ago
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_Alphabet https://en.wikipedia.org/wiki/International_Phonetic_Alphabe...

aeon10 5y ago

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 :)

matt123456789 5y ago

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.

stalfosknight 5y ago

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

The_rationalist 5y ago
Safari is abandonware, it's about time to realize
alt227 5y ago
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.

azinman2 5y ago

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?

sjdz 5y ago
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.
krjt 5y ago
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-option-2-custom-css-recommended https://github.com/Krasjet/wikipedia.rehash#user-content-opt...
y0st 5y ago
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.

aerovistae 5y ago

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.

umvi 5y ago
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.
- chris_wot 5y ago
  There is nothing wrong with expressing any opinion.
- deleted 5y ago
  [deleted]
thrdbndndn 5y ago
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.
- carabiner 5y ago
  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?
  - 5y ago

throwaway675309 5y ago

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

thunderbong 5y ago

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 https://ibb.co/Kbfh1QQ

greggsy 5y ago
Yeah I’m not actually sure why more people don’t know this.
- Arnavion 5y ago
  Because most people don't have a Wikipedia account, nor would they benefit from having one these days.
- primitivesuave 5y ago
  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 https://en.wikipedia.org/wiki/Talk:Muhammad/FAQ#Q4
blakesley 5y ago
Thank you for pointing this out! I had no idea!

phkahler 5y ago

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

adwi 5y ago

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

noja 5y ago

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

thrdbndndn 5y ago

Please never ever use system-ui in your CSS. A classic article about why: https://infinnie.github.io/blog/2017/systemui.html 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...

thex10 5y ago
Thanks for sharing! I love system-ui and this is my first time hearing of this -- will definitely reconsider.
arcbyte 5y ago
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?
- kitsunesoba 5y ago
  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.
  - Spivak 5y ago
    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.
    - 5y ago

kofesmolotkom 5y ago

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

McElodeon 5y ago

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.

jfrunyon 5y ago

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 https://en.wikipedia.org/wiki/Help:User_style

readme 5y ago
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
- jfrunyon 5y ago
  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=Special:MyPage/common.js&preload=User:DimeCadmium/example.js 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.
mzkply 5y ago
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.

smoldesu 5y ago

There's also Wike[0], a fantastic little native Wikipedia browser for everyone out there on Linux. [0] https://github.com/hugolabe/Wike https://github.com/hugolabe/Wike

tyingq 5y ago

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.

jagger27 5y ago

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 https://jagger.co/downloads/modern-wiki-wide.png [1]: https://jagger.co/downloads/modern-wiki-padding.png https://jagger.co/downloads/modern-wiki-padding.png

NelsonMinar 5y ago
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!
mixmastamyk 5y ago
css columns to the rescue, maybe with a media query.

amjd 5y ago

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

epivosism 5y ago

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://www.wikiwand.com/en/Hacker_News https://en.wikipedia.org/wiki/Hacker_News?oldformat=true https://en.wikipedia.org/wiki/Hacker_News?oldformat=true https://addons.mozilla.org/en-US/firefox/addon/wikiwand-wikipedia-modernized/ https://addons.mozilla.org/en-US/firefox/addon/wikiwand-wiki...

jsturges 5y ago

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

dorianmariefr 5y ago

Quite nice, what do the wikipedians think?

jokoon 5y ago

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.

kingcharles 5y ago
One man's noise is another man's treasure.

aarondf 5y ago

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!

jpatel3 5y ago

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

cmauniada 5y ago

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/imoddojnfpdkpfiipadaibjplddaneka?hl=en https://chrome.google.com/webstore/detail/readable-wikipedia... [1] - https://www.wikiwand.com/ https://www.wikiwand.com/

arthur_sav 5y ago
I've been using Wikiwand for years, still love it.

petargyurov 5y ago

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

siver_john 5y ago

This kind of reminds me of a short project from a guy I knew in college: https://github.com/AndrewBelt/WiTeX https://github.com/AndrewBelt/WiTeX

Findecanor 5y ago

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.

readme 5y ago

wikipedia should jack this and make it default

marcoslozada 5y ago

Amazing this!!

andrew_ 5y ago

Beautiful. Thank you for sharing.

pc86 5y ago

Any plans to open source this?

Waterluvian 5y ago

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

zuj 5y ago
if I had to read anything longer than few minutes I immediately go to the mobile view. Much easier on the eyes.
ravenstine 5y ago
I was skeptical but I just tried that and, yeah, it's actually pretty good on desktop.
thamer 5y ago
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-wikipedia-wiktionary-and-back https://greasyfork.org/en/scripts/431384-switch-to-mobile-wi...
rollinDyno 5y ago
What they need to do is put the TOC on the collapsible sidebar.
keithnz 5y ago
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.

deleted 5y ago

[deleted]

Tomte 5y ago

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

maximedupre 5y ago

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.

jcun4128 5y ago

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.

abbe98 5y ago
MediaWiki actually got policies to ensure breaking changes to the DOM isn't introduced.

freediver 5y ago

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

ravenstine 5y ago

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.

dirtyid 5y ago

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

themacguffinman 5y ago

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_Baba_cave 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 https://postimg.cc/18cPJXPt Humble suggestion: add some background shading to visually group an image with its caption, mock eg: https://postimg.cc/hJLrJF9N https://postimg.cc/hJLrJF9N

gkkirilov 5y ago

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

AlgorithmicTime 5y ago

Isn't that what WikiWand is?

ChrisArchitect 5y ago

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

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

fnord77 5y ago

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.

reflexe 5y ago

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

FpUser 5y ago

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.

rossdavidh 5y ago

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

sabujp 5y ago

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.

jules 5y ago

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.

diveanon 5y ago

This looks great, going to play around with it when I get home. Does it still present the fundraising banners?

camgunz 5y ago

Oh I like this, downloaded. Thanks and props!

AdmiralAsshat 5y ago

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.

ndom91 5y ago

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.

29athrowaway 5y ago

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

jmkd 5y ago

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

bagelpigeon 5y ago

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 https://apps.apple.com/us/app/wikipedia/id324715238

leadingthenet 5y ago
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!
iscmt 5y ago
Just downloaded the app, it's incredibly well-designed. Great work!
amrangaye 5y ago
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. :)

bob446 5y ago

Wikipedia is a cancer

cogburnd02 5y ago
WTF? Why?

aembleton 5y ago

Could you move the infobox to the right of the bodyContent? This is how it looks for me: https://imgur.com/jZcbtUM 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 https://imgur.com/arNwTDr

p2p_astroturf 5y ago

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.

iio7 5y ago

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.

robobro 5y ago

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.

matchbok 5y ago

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

tern 5y ago

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

b1nj0y 5y ago

So it should be applied to HN too :)

93po 5y ago

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

raghavbali 5y ago

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

yoyopa 5y ago

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.

eterevsky 5y ago

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_Heavy_launches https://en.wikipedia.org/wiki/List_of_Falcon_9_and_Falcon_He....

reniflex 5y ago

If you don't actually use Wikipedia and just want it to look pretty then I can see how this might be useful. I'm guessing OP is from the Apple school of design. Otherwise, OP, you have injected cancer in to a cancer free patient and called it a remedy.

the_other 5y ago

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.

twijg 5y ago

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.

CyanDeparture 5y ago

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.

selfhoster69 5y ago

I just tried it, makes everything so unreadable.

anhthang 5y ago

I love this

standard09 5y ago

Stunning looks... Great work!

motoxpro 5y ago

Looks great. Just wish it was full width

yakubin 5y ago

It looks like the Wikipedia app for iPad.

Isomorpheus 5y ago

I still think I prefer Wikiwand https://en.wikipedia.org/wiki/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)

wly_cdgr 5y ago

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

tinus_hn 5y ago

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