Wikipedia redesign | Hacker News Reader

Wikipedia redesign

jgthms.com

169 pointsbbx74 comments

Wikipedia seems like it would be one of the very hardest challenges for a portfolio project. That's because Wikipedia is almost certain to be around 50 years from now. We don't think about it all that often, because we live our lives in its presence, sort of like the people in Rome who live near the Colosseum probably spend most of their days seeing it as just another big stone building.

I wouldn't want to be the architect proposing gleaming flowing metal facades and LED screens for the Colosseum, either.

Whatever you do to Wikipedia has to make sense not just today, in the way a magazine cover design might need to work as a valid UX and an on-trend design, but also 10, 20, 40 years from now. Wikipedia is conservative in a way that very few Internet sites are; they're the caretakers of something --- I feel weird writing this, and maybe I'm wrong, but here goes --- world-historically important.

This seems especially true considering (a) how much web design has changed in the last few years due to mobile devices and the responsive web and (b) how unprepared we were for that change.

I'm frequently reminded that the most readable and accessible (albeit, admittedly, boring) websites out there are ones that are just plain old-school HTML–no javascript, no CSS, or anything like that.

> I'm frequently reminded that the most readable [...] no CSS

I doubt it.

CSS can be a whole lot less than just fancy floats and parallax scrolling.

Yep. Namely: typeface, font size, line height, margins, font color, background color. Those are some pretty basic properties you'll want to set for even the most minimal design. CSS is how you set them. (I suspect that almost nobody would want to use the browser defaults for all these values.)

I'm not saying I disagree, but there is a benefit to default values, and that's a unified design throughout the web. For the technically inclined, we can always use custom CSS, but often the people who would benefit the most from it are the people who would have the least idea how to do it. Edit: To put it another way, and bring it back on topic, it's no surprise Wikipedia uses black text on a white background with blue hyperlinks, and I doubt that will change any time soon.

I do realise I'm basically describing Gopher here, and there's possibly a reason it didn't take off...

> there is a benefit to default values, and that's a unified design throughout the web.

If only browsers provided better defaults. As it stands, very few people would consider the browser defaults acceptable.

> it's no surprise Wikipedia uses black text on a white background with blue hyperlinks

Yes, Wikipedia does use black text, a white background, and blue links. But they do not merely rely upon the default browser stylesheets. They use custom font-face, font-size, line-height, and margin properties even for the basic <p> tag. And that's saying nothing about all the other elements that often have borders, padding, backgrounds, and so on.

I think you could argue that browser ship with reasonable defaults for a slap of plain HTML, but what it undeniably gets wrong (and rightly so) is paragraphs running the full width of your window.

There's a lot to be said about the Svbtle/Medium-style design with a small column running down the center of the page.

I would be inclined to agree with you, except for the fact that HTML-only text spans the entire screen with no margins. It's really hard to read two sentences on one line.

Spanning the entire screen with no margins (or a mimimal default like 10px) is exactly what I want text to do on the tiny screen of my phone. Guess what, Wikipedia's mobile design does exactly that.

The full-width text does get a bit annoying when you're trying to read Wikipedia on a 30" screen, but in that case, nothing's preventing you from snapping the browser window to the left or right half of the screen and/or increasing the zoom level to make for more comfortable reading.

So what if there was a way that we could describle a simple set of rules that governed how paragraphs of text appeared in web pages? Perhaps we could make paragraphs 100% wide, up to a max width of 600px (and then centered in the screen)?

    #content { width: 100%; max-width: 600px; margin: 0 auto; }

But this is not going to work on Wikipedia. As the article mentions, Wikipedia is designed for quick scanning, not leisurely reading. When I'm quickly scanning the screen, I want as much of the screen as possible to be filled with text. I don't want over 2/3 of my 1920px screen to go to waste.

http://kevinburke.bitbucket.org/markdowncss/

To put it more bluntly: I think it's reasonable to argue that Wikipedia is the single most important product of the Internet to date.

Hard, yes--but I disagree with the premise that you have to design for 40 years from now.

Unlike the Colosseum, web design can be changed. The NY Times e.g. has done a great job balancing their time-tested values with digital experimentation.

I agree with you, too. For instance, it'll be a little sad if we're still writing MediaWiki macro markup in 2040. On the other hand, it's also probably smart to be wary of trendy designs, and Flipboard-like grids of story panels are very "on-trend" right now.

Standard reference:

https://en.wikipedia.org/wiki/Wikipedia:Unsolicited_redesign...

tl;dr ideas are always welcome, but most redesigns ignore that the site is not US-only, English-only or Latin-only.

http://wikipediaredefined.com/

Step 1: Toss out the globe covered in runes from languages from all around the world and just use the Latin W.

Step 2: Remove or hide all languages except English from the home page, and hide the means to access those other languages under options and accessors written in English.

Step 3: Replace or supplement menu items with graphic symbols likely only recognized or used in Western cultures.

Step 4: Throw in a Share button because Social or whatever. Also include a Print button that likely only works in certain browsers because nobody knows how to use their browser's built-in Print button.

Step 5: Install Frontpage on Wikipedia.

Step 6: More colors and graphics.

It's as if the article was written about this very redesign.

You forgot the metastep of "designer choses to use a weird, ugly, font on their web page that reduces readability"

I so concur! Thought they were writing “Jmagine” and “Jt” instead of “Imagine” and “It” to look cool or something.

Is that site serious or a parody?

To be fair, the front page is already there at http://www.wikipedia.org/.

It was written straight after it, yes :-) But unsolicited redesigns keep coming forth.

Here's one dissection: http://lists.wikimedia.org/pipermail/wikimedia-l/2012-August...

It's worth noting that anyone on the whole Internet can write an essay like this in the WP project namespace. This particular essay probably comes closer to WP orthodoxy than many others do, but it's still not an "official" position of the project.

This feels unnecessary. Everyone gets it: you can't actually redesign a website with a few random mock-ups and visual updates. That so often is not the point of an unsolicited redesign.

Most of these people are young designers looking to practice, have fun or create something tangible to demonstrate some of their skills. Its clear that changing a button or making a visual change doesn't equate to UX expertise. However, for a lot of designers this material gets them attention and gives potential employers common context to evaluate them and maybe they are a UI designer who wants to display their visual skills. There are a lot of reasons to take it too seriously but I encourage young designers to do it. A redesign can help me evaluate certain skills in a junior candidate and they are fun to look at. Redesigning stuff is fun, who cares if you want enjoy yourself.

So, I'm not sure who this for. Convincing a designer not to do a redesign of a website and post it on their blog? What's the harm? These redesigns don't actually change the industry understanding or perception enough to matter. We need to calm down and just enjoy these redesigns for what they are.

There's no real harm, except potentially to the up-and-coming designer, who is signaling something about their design process by writing something like this. Wikipedia has a lot of design constraints that other sites don't have. A big part of the job of being a professional designer is discovering and navigating design constraints. So when you pick Wikipedia as your "bucket list" portfolio spec design example, you might want to be careful that you're not communicating something about your process (specifically: obliviousness) that you don't mean to communicate.

Spec designs are fun to read and while I'm not a designer and have no business offering career advice to one, I'm happy to encourage people to keep doing them so I can keep reading and snipping at them. But there are safer targets to pick than Wikipedia.

I have to agree that Wikipedia is not a good target for a redesign. Also, I don't think its on every designer's bucket list. But, Its fair to assume that a lot of people select Wikipedia specifically because it has such an uncommon set of constraints.

To make assumptions about design process based on something like the choice to do a "redesign" of Wikipedia sounds generally useless : Especially coming from a junior designer who I guarantee is not thinking that hard about it.

I am just saying : Everyone is getting way too serious about unsolicited redesigns. I think the article makes valid points about what design is and what defines user experience but It feels mean-spirited and the targeting at redesigns is mis-directed.

The real problem with Wikipedia redesigns is that they don't address their real issue: editing. Wikipedia have serious considerations encouraging a wider audience of editors, and to do so in a verifiable and generally professional manner. Show me a good means of encouraging people to edit and use Mediawiki, then I'd be interested.

I'm not sure who is changing the industry understanding or perception, but showpieces definitely have impact. Redesign rants probably do more good than the redesigns themselves, because they can stop imitation.

That said, I feel L&F mockups are to be encouraged, except with the understanding that they should be multitudinous.

I agree strongly with this message. There is a lot more to web design than making a page "pretty".

Wikipedias design is good; and certainly too good to justify a complete design overhaul.

The biggest problem I have with it is the unclear visual hierarchy: there are links which are context dependent (changes depending on which article you're viewing) next to links which always link to the same page.

And the list of languages the article is available in would benefit from listing the most viewed (or last used) versions before the full alphabetical listing.

Actually it seems they DID a redesign recently. The article title appears in Times instead of helvetica. (Edit: it's Georgia)

Relevant link: https://www.mediawiki.org/wiki/Typography_refresh

I agree with the spirit of the article, and would like to add that the thing that bugs me about these Wikipedia re-designs is that none of these designers seem to know that it's quite easy to add your own CSS and restyle Wikipedia.

I've been rocking my own Wikipedia theme for over a year now:

https://github.com/geetotes/wikipedia-theme

There's some work going on in MediaWiki to try to separate out theming stuff so that it's actually feasible to write a good theme. A big problem is that Vector, the default skin for MediaWiki and Wikipedia, half lives in an extension and not in the skins directory.

The comment about design features working only in the designer's context definitely rang a bell for me. The most common one for me is the section containing just enough space for the designer's sample text, which is conveniently very small. Fast-forward to the moment the design gets actually coded up, and we've got ellipsified text all over the place.

> The thing is, there is in the long run no incentive to alter Wikipedia’s content and degrade its integrity. The collaborative authority will prevent it anyway.

People don't need much incentive to do stupid things. There's not much incentive to toss trash out a car window rather than into a bin, but people do that every day.

There's a bunch of mindless minor vandalism that happens on WP because of that.

Some parts of WP are really horrible. Ignore all the obvious places (anything to do with Ireland or Northern Ireland; Israel and Palestine; Abortion; etc). But quiet gnomic uncontroversial edits can get mired up. Someone makes some good faith (and valid) changes to punctuation and spelling. They are quickly reverted by an overzealous twinkle user on "vandal patrol" (wikipedia has done a lot to stop this problem and that needs to be recognised) who also leaves a warning template. The newbie gnomic editor removes the template and reverts the article reversion, and is then receives multiple templates. I don't know how many people have a first experience of WP like that, or find it repeated if they try again, and it would be good to know. But the point of mentioning this is that the toxic parts of WP are a strong incentive to some people to "stick one over" to the WP community. Long term sleeper accounts making a variety of good edits with a few known bad edits; concern trolling; wiki-lawyering; etc. There are plenty of meta-wikipedia places where very long threads can draw in many users to spend a long time talking about stuff which is, at its core, nonsense.

I suspect the future-people may find the meta stuff, especially comparing the meta stuff across different wikipedias, more interesting than actual WP.

Its not about incentive for people who litter and vandalize, its about what the majority of people want.

Otherwise, there would be more trash outside the bins than inside them. Thankfully, most places aren't like this.

I live in England. There is plenty of trash outside wastebins. Especially if you see the streets before the streetsweepers have been through.

The fact that there exist specially designed and built vehicles to sweep pavements to clean them of litter, and these are supplemented by workers with hand push carts and litter picking sticks, shows some need for litter collection. Litter costs about £1bn per year and we're still a pretty dirty country. (I did notice on my visits to California that they were much cleaner. Partly that's about lack of rain, but also it's because people just don't drop as much litter.). Californians are usually surprised at just how dirty London is.

David Sedaris hates litter.

http://www.bbc.co.uk/programmes/b01r11wc

Case in point: I had an edit war on Guy Fawkes' since one person refused to let me include information about Australia and NZ celebrating it but only in organised displays due to fire concerns (with news references and all), as they considered it 'irrelevant'. Started off an entire battle about it.

the best website design principles: http://motherfuckingwebsite.com/

Only I have to resize my window to actually read the text.

People always say just plain is great, but we live in a world in which many people now have bigger widescreen monitors.

Sites like this work great on smaller screen and even mobile. But they are bad UX for big screen users.

It's laid out by the browser. You should blame the browser -- not the data it tries to display -- for its bad UX.

One line of css to the head and it magically is a perfect website (though left aligned)

    body{
    max-width:40em;
     }

> I have to resize my window to actually read the text [...] we live in a world in which many people now have bigger widescreen monitors

I'm sorry, I just don't understand this whole "people have widescreen monitors, so designers need to decide how wide something should be" idea. "Because people have wider monitors than they used to" seems like a meaningless excuse to me, since windows have been resizable since Douglas Engelbart's Mother of All Demos in 1968 (more than 40 years ago).

In my opinion, when you choose a size for your web browser, you are signaling to the webpage which region of your screen you would like to have filled with content. If your screen is too wide to read full-width text comfortably, you should just keep the web browser resized to 83% of your screen width (or whatever) instead of having it maximized all the time. Most web browsers will even remember your preference from one time to the next. Plus, if you do want something to fill your screen (and you don't use Mac OS) it's one click to maximize the window temporarily.

Nothing's ever stopped designers from over-designing webpages (many people would point to scroll-to-animate webpages), but I really don't think that maximum width (or, worse, minimum width!) is some necessary thing for designers to dictate, since it's so easy for users to choose a width that's comfortable for them.

You say that but your average user isn't going to make sure they keep their browser window to some arbitrary amount. People just tend to makes it fullscreen, myself included.

Totally agree. Good design sense appears to be incredibly rare, and it's unfortunate that major sites simply copy each other's designs resulting in UI trends not based on sound design, but fashion. See the pervasive fixed position header for a good example.

Off-topic, but what happened to "www."? More and more sites recently seem to be going without a www subdomain.

In this case, "www.jgthms.com" goes to a Gandi parking page. (!) In other cases, the connection simply times out or the server returns an error page.

http://no-www.org/

  We've also generated at least two direct competitors:
    http://yes-www.org - A site that suggests that all domains have www. subdomains
    http://extra-www.org - A site that suggests that all domains have two www. subdomains. (www.www.domain.com)

Fantastic. That is old-school internet humour.

My understanding is that the number of people who like leaving off the www exceeds the number who remember to redirect all requests correctly. I believe the nginx server block would read something like:

  server_name www.website.tld;
  rewrite     ^ http://website.tld$request_uri? permanent;

Use return instead of rewrite.

    server {
        listen 80;
        server_name www.website.tld;
        return 301 http://website.tld$request_uri;
    }

Please back up your claims with a reason - all you're giving us is a different way to do things here.

http://wiki.nginx.org/Pitfalls#Taxing_Rewrites

SEO. And it's just one reason.

What does SEO have to do with this?

It counts as duplicated content.

A 301 is a redirect. It sends to the client the instruction to reload the page in the given Address.

A rewrite happens only on the server side. So for the client it's like two different sites with the same content, and this hurts your ranking.

Now... Ok that I didn't explained that on the parent post (didn't thought it was needed), but is it enough reason to a downvote? :P

edit: fixed grammar.

Rewrites in nginx are redirects.

Only a subset of rewrites are redirects. A common usecase for rewrites is to change the request URI to make it match another location block in your config, but without returning 301 or 302 or any other redirect code to the client.

Gandi has a simple redirect/forwarding option in their management panel which handles this kind of thing, so it looks like he's overlooked that?

http://wiki.gandi.net/en/dns/zone/www

the last paragraph should be a required reading for all designers.

I really don't see the problem here. Why shouldn't people try their hand with a wikipedia redesign? It's a great (and admittedly very hard) challenge. Which doesn't mean that people shouldn't keep trying.

But maybe people should indeed hit for easier targets first - maybe they could offer bbx a redesign for his own blog?

Looking at his copy text running all to the bottom of the page without any bottom space or even a footer https://imgur.com/bC3RuHv I feel physical pain looking at his site. But what do I know? I'm just a designer...

Did you purposefully cut the bottom white space off to prove a point. IE, FF, and Chrome all render the space at the bottom.

Aspiring artists don't paint bowls of fruit because the world needs another painting of a bowl of fruit.

Let people practice and show off their evolving craft.

Whew. I was fearing this was yet another http://www.wikipediaredefined.com/ but fortunately I was wrong.

While I 100% agree with the original article, this redesign actually isn't bad. They actually did a good job staying faithful to what makes Wikipedia important.

That being said, I think sites like HN, Wikipedia, Craigslist, Reddit, etc are iconically ugly rather than generically pretty -- and that's good.

No, it failed a pile of really obvious client requirements: http://lists.wikimedia.org/pipermail/wikimedia-l/2012-August...

This is the page where we try to be polite about designers' crappy redesigns: https://en.wikipedia.org/wiki/Wikipedia:Unsolicited_redesign...

I think it is always such a difficult design decision when to leave a popular site as is i.e. 'ugly' and when to introduce some improvements. While I agree with the general comments here that any redesign to giants like Wikipedia, HN, etc, should be really thought out carefully, it is also difficult to believe that there is no room for improvement!

Do all these sites really have such amazing interfaces that should not be touched?

Does anyone actually use the main page of Wikipedia? I just look it up on Google and a relevant article shows up. It's the same way I view stackoverflow.

It's sometimes interesting to check to see recently added articles which are highlighted, "this day in history" items, as well as recent major news items which I might have missed.

I agree with the author's thesis, that many designers design for aesthetics and not for usability, but I couldn't help but think that he did with this article exactly what he was shunning as useless, which is to address the design of Wikipedia to gain prominence, and all this without even the effort of opening Photoshop... the irony is terrific.

A very good example of website design [0]:

[0] https://news.ycombinator.com/news

No way, HN is shockingly bad. It's the only site where I feel like an extra stylesheet is necessary. Text is too small and hard to read.

> Text is too small and hard to read.

I would totally agree on that point, but I just use zoom.

It took me a while to "get it" mostly b/c I've been conditioned to think this was going to actually be yet another Wikipedia redesign haha. In typically web scanning mode, I skipped over (what I thought was the image caption) I didn’t change anything because there is nothing to change. Or at least, not enough to prompt a complete graphical overhaul. Kudos - well played.

I suppose we won't have to wait long for the "HN redesign" or "reddit redesign" variants either.

There are plenty of HN redesign attempts.

It seems that people like attempts to increase the size or spacing of the vote buttons which makes accidental downvotes harder.

It seems lots of people dislike the reduced information density. Some of the redesigns use a lot of whitespace which can be nice but means you only have 10 stories on the front page.

Currently the only thing I'd really like to see is some 80 character indicator for the title box on the submission page. That would mean that people could remove small unimportant parts to fit in the limit, ratherthan just chopping out perhaps important words.

Reply on news.ycombinator.com