Wikipedia is aweful!

7 min read

Deviation Actions

rotane's avatar

Let me correct that: Reading Wikipedia is aweful.

The guys over at 1910 seem to agree with me. Instead of repeating everything they have said, let me highlight one or two things:

"While big parts of the internet have gone through an amazing journey in terms of typography these last years, Wikipedia’s reading experience is still stuck in the 90’s."

"The text is too small, the lines are too long and the leading is too tight. Pictures are tiny and the general layout includes a lot of visual noise that distracts you from the actual reading."

Here's the full article, which i highly recommend reading:…

Anyway, it inspired me. And if you know me, you know what i'm getting at: I wrote a userstyle. And of course i'm going to share it with you.

The goal was to bring Wikipedia from this:

Wikipedia Full 01 by rotane

… to something like this:

Wikipedia Full 02 by rotane
(Mockup by 1910.)

I used this design as a starting point, but had to (and wanted to) make a few modifications. For example, i could not get their grid to work properly; Wikipedia's articles are too dissimilar (and messy in general) for a grid like that to work. Instead, i decided to follow Wikipedia's current layout, but apply a set of more general/sensible rules: have a maximum width, make the text bigger, and reduce the clutter.

In fact, i ended up going so minimal, that other than the article itself, there's only the searchbar left; everything else of the UI is hidden or removed completely. (But unless you are a hardcore Wikipedia editor, you'll hardly miss them.)

Also, there are practically no embellishments present: no drop shadows, no round corners, no gradients; nothing of that sort. By doing away with all this, you can focus completely on the content without distraction.

And this is my result – i decided to call it "Wikipedia 1911" ;)

Wikipedia Full 03 by rotane

As you can see, it's quite a bit darker than 1910's mockup (almost deviantART colours!), but this shouldn't surprise you if you know me at all: I just can't stand white designs. Not only do i find them ugly, but they also hurt my rather sensitive eyes, once i stare at the monitor for more than a few minutes.

So, without further ado, i give you the download link:

(As always, you'll need something like Stylish for Firefox or Chrome.)

PS: As i said, most of the UI is hidden. There's only 2 things you need to know: In order to access the left menu, simply move your mouse over to the left edge of the screen and the menu will appear. (Although, i've hidden a lot of unneccessary stuff from it as well, so it's shorter than you'd expect.) And secondly, to get to the controls on top of the page (that holds the edit links and user menu), move your mouse over the darker area around the logo and searchbar.

Enjoy! And of course, feel free to tell me what you think (or if you found any bugs).

Update: I took your comments to heart and have been playing around with more colour-schemes. The one by irient served as a starting point, becasue i really liked his sepia-ish version. Only it was a tad too bright for my taste.

Furthermore, i removed even more stuff, like the darker-coloured margins around the article, as well as the 1px-borders around most of the lighter-coloured boxes, which brings it closer to 1910's mockup as well. (This last bit is still a work-in-progress, but it should cover most of the boxes already.)

Here's another screenshot:

Wikipedia Full 04 by rotane

The download link is the same as above (click), but your Stylish should auto-update it anyway. Hope you dig it!

Join the community to add your comment. Already a deviant? Log In

It looks that this awesome CSS is a little buggy on the French version of WikiPedia. I hope it will be fixed on the next release. Thanks