How to restore Wikipedia's old design

Ashwin
Jan 25, 2023
Internet
|
28

Last week, Wikipedia rolled out a change an updated version of its desktop interface. It has a modern look, and is actually one of the biggest changes made to the website in over a decade.

New wikipedia design

The new design is called Vector 2022, the old one was Vector 2010 and is now called Legacy Vector. I use Wikipedia from time to time as a reference source for work, to learn about various things like history, sports, etc., just like many people do. If you like the new design, that's cool. But I'm sure there are users who dislike it. I'm not a fan of the redesign, I think it looks ridiculous on a large monitor with a lot of wasted space on the sides.

You can click the maximize button that appears in the bottom right corner of the pages to expand the view, but it still doesn't offer the same experience as before.  The official explanation given by MediaWiki (which Wikipedia uses) for the change is that shorter lines make for easy reading, as users don't have to move their eyes a lot.

ADVERTISEMENT

New wikipedia design expanded

If you don't mind the new Wikipedia design, but want a persistent sidebar (h/t reddit) to appear when you scroll up or down a page, you can add the following rule to uBlock Origin's filters.  wikipedia.org###vector-toc-pinned-container:style(position: static !important;)

Legacy Wikipedia Design

Thankfully, there are a few ways to restore the old Wikipedia design. One option is to sign up for a free account on Wikipedia, and enable the Legacy Vector theme from the Settings.

How to restore Wikipedia's old design

  1. Go to Wikipedia and log in to your account.
  2. Click on Preferences > Appearance, or just go to this URL.  https://en.wikipedia.org/wiki/Special:Preferences#mw-prefsection-rendering
  3.  The Skin section has the Vector 2022 option set as the default experience, click on Vector 2010 to set it as the preferred design.
  4. Scroll down the web page, and click the save button to apply the changes.

How to restore Wikipedia's old design

Not everyone may want to sign up for an account just to change a single setting, right? In that case, you can add the following parameter at the end of Wikipedia URLs. ?useskin=vector

For example, https://en.wikipedia.org/wiki/Microsoft_Windows is the default link of the page. Add the suffix, and it becomes https://en.wikipedia.org/wiki/Microsoft_Windows?useskin=vector

New Wikipedia Design 2

This allows you to use the site's old style, but the problem is you will have to add the parameter to every link that you open. And on pages that are divided by sections, and tables, you will need to add it after the URL, but before the # part. That's a tedious way to browse the site, but you cannot save your preferences, since the settings are not available for users without an account. So this is the only option that you have without relying on external sources.

Legacy Wikipedia Design 2

If you know your way around UserCSS, you can play with the styles here to tailor the appearance to your liking.

Tip: You can use email masking services like Firefox Relay, DuckDuckGo Email Protection, SimpleLogin or an email alias service of your choice to hide your real email ID, and use the one provided by the service to create a Wikipedia account for personal usage.

Browser extensions to restore the old Wikipedia interface

Wikipedia is suggesting users to use browser extensions to customize their user experience. A few add-ons have popped up which offer an easy way to restore Wikipedia's legacy look. These are of course made by third-parties, indie developers.

Old Wiki is the only one I found on the Chrome Web Store, it works fine on Wikipedia, and Wikimedia sites. All you have to do is install the plugin and let it do the job. Here is its GitHub page.

Firefox users have a few options to choose from. Wikipedia Vector Skin is one such add-on.  An alternative is to use the Classic mode for Wikipedia add-on, the advantage here is that unlike Wikipedia Vector Skin, the former supports a few more Wiki-websites.

All these extensions basically just add the ?useskin=vector parameter that I mentioned above to the URL, but since they do it automatically, they are quite convenient to have.

Summary
How to restore Wikipedia's old design
Article Name
How to restore Wikipedia's old design
Description
Not a fan of the new Wikipedia design? We show you how to restore the legacy interface.
Author
Publisher
Ghacks Technology News
Logo
Advertisement

Previous Post: «
Next Post: «

Comments

  1. MikeO said on January 25, 2023 at 12:27 pm
    Reply

    Thank you, Ashwin.

  2. Tom Hawack said on January 25, 2023 at 12:45 pm
    Reply

    Thanks, Ashwin.
    Personally concerning Wikimedia sites (of which of course Wikipedia) I have no account, block cookies and open all in the mobile format (by setting my user-agent to iOS/Firefox), so I encounter none of the new layout disagreements. Many scripts/css made available to block what seems to be an annoyance for many of us.

  3. Lambo said on January 25, 2023 at 2:20 pm
    Reply
    1. SCmCsyF said on January 29, 2023 at 10:08 am
      Reply

      Alas, wikiless broke (look at the weird layout problems on wikiless now… :()with the Vector 2022 theme. One should report it to the maintainer. I don’t use wikipedia/wikiless enough to do it myself.

  4. Tachy said on January 25, 2023 at 3:28 pm
    Reply

    I agree, it looks ridiculous.

    I’m also offended by that “official explation” as it is bullshit. It’s painfully obvious they have optimized the site for the vertical screens of cell phones :(

    1. grampa said on January 25, 2023 at 11:42 pm
      Reply

      ^^ This, pretty crushing obviously. I don’t know why they didn’t just say this.

      I’ve become inured to every website and app interface change making things worse for all users other than short-attention-span kiddies using mobiles while walking, so I’m just going to live with it. It’s not worth installing another extension to undo yet another “improvement”.

  5. boris said on January 25, 2023 at 4:53 pm
    Reply

    I am ok with new design. But what I like is speed. Browsing is much faster, even on outdated browsers.

  6. nitro322 said on January 25, 2023 at 6:09 pm
    Reply

    Huh. I was puzzled about that maximize button you mentioned. Looks like your browser window has to be at least 1600 px wide for it to appear, any less and it won’t despite excessive whitespace still being an issue.

    If you don’t mind creating an account and logging in, you can also toggle the width with a setting in the Appearance preferences – Enable limited width mode, which is On by default. Toggle that off and it’ll use the full width.

    Regarding the official explanation, it’s not without merit. To each his own of course, trying to read prose on extremely wide lines *is* less efficient and harder to follow for me, but on wikipedia I’m scanning and reading snippets far more often than reading full articles from top to bottom, so the excessive/wasted whitespace is certainly irritating. I’d rather just make my browser window smaller on those rare occasions when needed than have so much space wasted all of the other time.

    Thanks for sharing.

  7. Akina said on January 25, 2023 at 6:48 pm
    Reply

    I like the new design because we no longer use 4:3 ratio monitors and 16:9 monitors are terrible for reading and editing texts. This new design makes reading better in 16:9 monitors. Fortunately 16:10 monitors coming back and going to be mainstream.

    1. Haakon said on January 25, 2023 at 7:58 pm
      Reply

      My typical app window is 1900×2100 or less and a lot less on my 32″ 4K monitor where reading and editing text is quite easy. Using the full screen 3840×2160 for any one app, especially a browser, would be ridiculous. Exceptions would be a massively large spreadsheet or an interesting UHD video from a news network. Otherwise, YouTube’s Theater Mode is just fine in a browser’s 1900×2100 window. (Fortunately, I’m not tied to a PC or mobile device for TV/movie viewing, streaming or disk.)

      But your scenario makes sense if one is stuck with, say, a 15″ laptop screen.

      I’m sticking with the old Wikipedia. Cheers.

  8. Shiva said on January 25, 2023 at 7:24 pm
    Reply

    A few scripts also appeared on GreasyFork. For ?useskin=vector there is maybe the Redirector extension.

    1. Tom Hawack said on January 25, 2023 at 8:06 pm
      Reply

      Indeed. I found a REDIRECTOR redirect I used before switching to Wikipedia Mobile display:
      For whom may be interested (change ‘the ‘timeless skin to whatever Wiki skin).
      Not sure it’ll work correctly with new Wikipedia interface.
      Made for all Wikimedia pages which support the skin feature, not only Wikipedia.

      REDIRECT FOR REDIRECTOR FIREFOX EXTENSION

      “description”: “### WIKIMEDIA/WIKI/ timeless STYLE ###”,
      “exampleUrl”: “https://en.wikipedia.org/wiki/WebGL”,
      “exampleResult”: “https://en.wikipedia.org/wiki/WebGL?useskin=timeless”,
      “includePattern”: “(.*//.*)(mediawiki.org|wikibooks.org|wikidata.org|wikimedia.org|wikinews.org|wikipedia.org|wikiquote.org|wikisource.org|wikispecies.org|wikitravel.org|wikiversity.org|wikivoyage.org|wiktionary.org)/(.*)”,
      “excludePattern”: “(.*\\?.*|.*\\#)”,
      “patternDesc”: “”,
      “redirectUrl”: “$1$2/$3?useskin=timeless”,
      “patternType”: “R”,
      “processMatches”: “noProcessing”,
      “appliesTo”: [“main_frame”]

  9. John G. said on January 25, 2023 at 8:09 pm
    Reply

    Thanks @Ashwin for the article! :]

  10. VioletMoon said on January 26, 2023 at 12:10 am
    Reply

    @Ashwin

    Thanks for the article; I’m fine with the new layout (?????).
    The old appearance was so compacted, dense.

  11. OldGamer said on January 26, 2023 at 3:35 am
    Reply

    Thank you, Ashwin.
    MeeToo fine with the new layout.
    Trying the desktop layout, shortly.
    Wiki is still a blessing for us all, I think.

  12. Anonymous said on January 26, 2023 at 5:22 am
    Reply

    Thank you Ashwin

  13. Anonymous said on January 26, 2023 at 5:54 am
    Reply

    Thanks for the info.

    Tried the Firefox extension Wikipedia Vector Skin
    I have Wikipedia in my list of search engines, and the above extension didn’t work quite right; I had to reload the page and then it would display in the old format.

    The Classic mode for Wikipedia extension didn’t seem to have this problem.
    https://addons.mozilla.org/en-US/firefox/addon/classic-wikipedia

    1. Anonymous said on January 26, 2023 at 11:50 am
      Reply
  14. plusminus_ said on January 26, 2023 at 8:18 pm
    Reply

    Thank you. Using a userscript: https://greasyfork.org/en/scripts/458789-vector-layout-for-wikipedia-fast

    to restore the old layout so I can keep using the Rotane 1911 userstyle :p

  15. rebbj said on January 27, 2023 at 12:06 am
    Reply

    Hi, I’m the “Classic mode for Wikipedia” add-on developer (https://addons.mozilla.org/en-US/firefox/addon/classic-wikipedia/). Nice to see the add-on has been useful!

    I find the new Wikipedia layout quite disappointing, thankfully the software behind Wikipedia and other wikis allows developing add-ons that can fix this kind of problem. As for the future of the add-on, I plan to make some more extensive testing and code optimization, and extend the scope of the add-on to other wikis (given that the Wikimedia foundation plans to deploy progressively the new layout on all their projects).

    By the way, shout-out to the “Wikipedia Vector Skin” add-on developer. We developed coincidentally add-ons with similar features, and I was not aware of his efforts before publishing mine. (That is just to say that I didn’t publish my add-on because there was something wrong with his, his add-on is great!).

  16. SCmCsyF said on January 27, 2023 at 10:13 am
    Reply

    I thought there weren’t extensions for Firefox, only Chrome, so thanks for this information. When the redesign landed I thought Wikipedia broke, it was so sudden. Personally having used it for a little while it’s not too bad for reading a few quick articles, I don’t visit it often. For regular readers these extensions will help for sure.

    First a reddit redesign and now Wikipedia.There was NO reason to change Wikipedia on big screens. They could have, you know, added round (more like oval) buttons and round window design, but no, just ruin it for everyone else!

    Can’t imagine what it looks like in higher resolutions like 4K screens.

  17. Anonymous said on January 28, 2023 at 12:54 am
    Reply

    There’s actually another Chrome extension too. It was the first one that came out as well. The developer posted it on Reddit the same day Wikipedia change the layout.
    https://chrome.google.com/webstore/detail/revert-wikipedia-layout/jpnfgjjnmghhkgffigedilglfkpcjlda

    1. Anonymous said on January 28, 2023 at 2:33 pm
      Reply

      @Anonymous from January 28: I assume you’re the add-on developer. That’s neat to have a variety of independent addons, as if one of them stops working, or if one developer goes rogue and starts forcing advertisement on his add-on, there are alternatives out there. So thank you for your work!

  18. anonim said on January 28, 2023 at 10:49 am
    Reply

    The fact there is no simple button to switch to old layout, make me feel this is another “wet-dream” from data-grabbers to win here too. Like many others, they want you to log in, even you are not an editor, or to give admin rights to an extension, to keep an record of what you read. It is another junk on wikipedia yard, alongside propaganda and and fake news. I hope i am wrong, but for me, making a layout horible, forcing you to log in or install something unknown on your browser, it is a trick. That make me think many times before go there and throw an eye to something.

  19. An Onymous said on January 29, 2023 at 9:18 am
    Reply

    thankfully with browser addons, you can check the code to see what it does exactly, so there’s that. (But of course you have to know to do that… if you don’t, ultimately you have to rely on other users expertise, which is not necessarily a good idea indeed)

  20. F said on January 29, 2023 at 3:55 pm
    Reply
    1. SCmCsyF said on January 30, 2023 at 8:50 am
      Reply

      Thanks for this link, I had no idea about this discussion. I compiled a list using notepad:
      257 Support for Vector 2010
      194 Oppose rollback to Vector 2010
      15 indifferent/neutral
      75 support alternate proposal (make Vector 2022 unlimited width for desktop default) (or 74? last user didn’t apparently write anything)
      48 oppose alternate proposal

      It very much looks like Wikipedia/Wikimedia had already made their decision because under parliamentarism this would not have gone through. Even Wikipedians themselves oppose this skin. Personally I find it amazing they didn’t make the normal width default under desktop (“fullscreen” mode doesn’t look that bad, imo), the button they implemented isn’t even persistent, you have to click on it for every article which is so annoying. How difficult is it to make a cookie or something to make it normal width?

      Where did Wikipedia get their consensus from? This is a very authoritarian way of thinking, just like the majority of Internet corporations. I’m glad I haven’t donated anything to them. I suggest others not to donate to them either (despite them constantly begging for donations, thankfully ublock Origin blocks shitty wikipeida pop-ups.)

  21. Lemegeton said on January 30, 2023 at 12:48 pm
    Reply

    -Our _interface experts_ said that this interface is more useful for _users_.
    -But the _users_ aren’t pleased.
    -But _users_ aren’t _experts_.

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

We love comments and welcome thoughtful and civilized discussion. Rudeness and personal attacks will not be tolerated. Please stay on-topic.
Please note that your comment may not appear immediately after you post it.