Redesign the Wikimedia 404 error page
OpenPublic

Description

Author: ultrablue

Description:
New error message file

The current 404 error page served by Wikimedia is ugly and has a few problems:

  • It has a meta refresh on the client-side, which is pretty much universally discouraged for accessibility purposes;
  • The 'foundation' in the footer is not capitalised;
  • It doesn't give the right 404 header, instead serving a "200 OK" code, which is apparently problematic.

It is also subject to a pretty scathing critique at the following URL:

http://www.xmlplease.com/error404#h2-17

I've whipped up a new page which I think looks better and does the job better (see attachment). It uses 3 images on Commons.

If you choose to implement this replacement, you would need to make sure to spit out the 404 URL in the page title and in the italics paragraph, and a modified version of this in the "check" link to whack a "/wiki/" before it (presumably the same code that is presently used in the meta http-refresh code). You would also need to fully protect File:Errorline.png and File:Errorbg.png on Commons.

This new page doesn't fix the multilingual problem (serving 404s in English on all sites), but I figure this is the sort of situation where such coding would be done on the server side, so it would require someone with programming abilities far above my own to implement (I don't think anyone else wants another gigantic monster of an error message page). If this was done on the server side, you'd be able to use the HTTP headers to ascertain the correct language to serve, in a way that is not possible in Javascript.


Version: unspecified
Severity: enhancement
URL: http://en.wikipedia.org/asdfjklj

Attached: Error.htm

bzimport added a subscriber: Unknown Object (MLST).
bzimport set Reference to bz17316.
bzimport created this task.Via LegacyFeb 2 2009, 3:42 PM
bzimport added a comment.Via ConduitFeb 2 2009, 3:43 PM

ultrablue wrote:

Oh, and someone should also fix that "200 OK" code, so that it serves a 404 instead, as I mentioned above.

bzimport added a comment.Via ConduitFeb 16 2009, 1:09 AM

soxred93 wrote:

That's done in the .htaccess file, using

ErrorDocument 404 http://en.wikipedia.org/404error.php

rather than

ErrorDocument 404 /404error.php

brion added a comment.Via ConduitFeb 18 2009, 8:10 PM

Oooooooh I really like this look. :D

Will want to integrate the multilingual messaging...

bzimport added a comment.Via ConduitFeb 20 2009, 3:27 AM

ultrablue wrote:

It'd probably also be fairly trivial to change the logo to that of whichever domain it's spawned on.

bzimport added a comment.Via ConduitFeb 20 2009, 4:02 AM

dotcom wrote:

Overall I like the appearance of this very much, but I'm not fond of the phrase "You may wish to check for a page on the wiki with that title", with the verb "check" serving as the link. Instead, I think the link should be on a noun. Even better would be for it to specifically state "You may wish to check for [[Titanic]] on the wiki."

Better still might be to continue using some form of the quesiton "Did you mean to type http://en.wikipedia.org/wiki/titanic?", which to me makes it immediately apparent that I've accidentally left out the "wiki", and I can more easily remember how to avoid the problem in the future.

bzimport added a comment.Via ConduitFeb 20 2009, 6:55 PM

dotcom wrote:

Based on previous attachment but with explicit link to Wikipedia

This attachment implements the suggestions I made above and moves the link to the Wikimedia Foundation back to the bottom.

Attached: Error.htm

brion added a comment.Via ConduitFeb 28 2009, 2:25 AM

Just noting that this looks pretty awesome. :)

Might want to see if we can integrate this sort of look into the cache error page as well.

Platonides added a comment.Via ConduitApr 7 2009, 8:53 PM

The links on the proposal have some problems:
[[Main Page]] -> http://en.wikipedia.org/ It's a 301 redirect, so better to send them directly to http://en.wikipedia.org/wiki/Main_Page
[[Wikimedia Foundation]] -> http://www.wikimedia.org/ Should link to http://wikimediafoundation.org/wiki/Home

TrevorParscal added a comment.Via ConduitAug 6 2009, 9:45 PM

I shall iterate this design a bit - but seriously it looks pretty solid.

brion added a comment.Via ConduitAug 6 2009, 9:49 PM

Yay! :D

Just a note on the related bugs:

bug 12302 asks to make the 404 page localizable per site.

bug 19566 reqs tweaking the "A project of the Wikimedia Foundation" text to be a little more general so it doesn't sound like we're claiming to operate the chapters who we happen to run wikis for.

And we may also want to update our squid error pages etc to have a consistent look. [Note that localization on the squid error page is accomplished by wrapping it all in JS, which may not be the best implementation. I think squid actually supports having localized error pages natively, so we could do that by generating static output into a template. We'll want to take a peek!]

TheDJ added a comment.Via ConduitAug 7 2009, 4:53 PM

The body requires a forced margin of 0 to override the default margin (like in Webkit). Otherwise you get a horizontal scrollbar because one of the div's is 100% wide (pagewidth) making the entire body pagewidth + margin.

body { margin: 0; }

I tested this in Webkit inspector.

TrevorParscal added a comment.Via ConduitAug 7 2009, 4:56 PM

The latest version I'm working on uses

html, body {

padding: 0;
margin: 0;

}

TheDJ added a comment.Via ConduitAug 16 2010, 7:23 PM

This never got finished right ? It is really a shame not to use this I think.

Putting it under siterequests now, seems most appropriate.

bzimport added a comment.Via ConduitAug 16 2010, 7:43 PM

jeluf wrote:

With Firefox 3.5, I get a horizontal scrollbar, no matter which size the browser window has.

TrevorParscal added a comment.Via ConduitAug 16 2010, 8:18 PM

Created attachment 7633
Improved version of error page

This is an improved version of the page.

Attached: Error.htm

bzimport added a comment.Via ConduitAug 17 2010, 1:44 AM

bugs wrote:

(In reply to comment #15)

Created an attachment (id=7633) [details]
Improved version of error page

This is an improved version of the page.

Looks good, but a few things:

  • per the other comments raised above and on other bugs, we should tweak "A project of the Wikimedia Foundation" to something like "A project hosted by the Wikimedia Foundation" or "A site hosted by the Wikimedia Foundation".
  • there are two tiny CSS errors:
    • Line 32 / h2 / Value Error : color attempt to find a semi-colon before the property name.
    • Line 38 / p / Value Error : margin-bottom attempt to find a semi-colon before the property name.
  • we need to figure out the best way to make it multilingual/translatable.
Nemo_bis added a comment.Via ConduitAug 17 2010, 1:51 AM

(In reply to comment #16)

  • we need to figure out the best way to make it multilingual/translatable.

Yes, and please don't link only Wikipedia with that "Main Page" link. What about a relative path to the domain?
I think that «To check for "[TITLE]" on Wikipedia» could make sense, but perhaps http://[LANG].wikipedia.org/wiki/Special:Search/[TITLE] would be a better link (or maybe http://[LANG].wikipedia.org/wiki/Special:Search?search=[TITLE] which works as "go").

Platonides added a comment.Via ConduitAug 20 2010, 8:46 PM

The problem of the phrase "To check for "[TITLE]" on Wikipedia, see:" is to get the right item for "Wikipedia" (ie. the domain sitename).

The other pieces can be easily extracted but that has greater variation (we could probably use the domain unless it is "wikimedia", and then what?).

MZMcBride added a comment.Via ConduitAug 20 2010, 11:22 PM

(In reply to comment #18)

The problem of the phrase "To check for "[TITLE]" on Wikipedia, see:" is to get
the right item for "Wikipedia" (ie. the domain sitename).

The other pieces can be easily extracted but that has greater variation (we
could probably use the domain unless it is "wikimedia", and then what?).

Sounds like way more headache than it's worth. I'd either rephrase it to something like "To check for [title], see [link]" or "To check for [title] on [subdomain.domain.org], see [link]".

bzimport added a comment.Via ConduitApr 21 2011, 5:18 PM

pdhanda wrote:

The latest improved version is live now. Marking this fixed.

MZMcBride added a comment.Via ConduitApr 21 2011, 6:28 PM

(In reply to comment #20)

The latest improved version is live now. Marking this fixed.

I'm not sure where the meta-refresh came from. One of the goals mentioned in comment #0 is to remove it and none of the proposed attached redesigns include it, but the new live version does. Re-opening this for now.

Nemo_bis added a comment.Via ConduitApr 21 2011, 6:44 PM

It should also be quite easy to fix this:

(In reply to comment #16)

  • per the other comments raised above and on other bugs, we should tweak "A project of the Wikimedia Foundation" to something like "A project hosted by the Wikimedia Foundation" or "A site hosted by the Wikimedia Foundation".

While

  • we need to figure out the best way to make it multilingual/translatable

but that's more difficult. Perhaps we could add a link to a very simple Meta page which would be easily translatable and could contain a link to the [[HTTP 404]] article in your language.

SamB added a comment.Via ConduitFeb 24 2014, 8:32 PM

(In reply to MZMcBride from comment #21)

I'm not sure where the meta-refresh came from. One of the goals mentioned in
comment #0 is to remove it and none of the proposed attached redesigns
include it, but the new live version does. Re-opening this for now.

It seems that someone decided that it was a good idea to move it from <meta http-equiv="refresh" /> to an actual (though non-standard) HTTP header. Of course, Firefox (at least) handles them identically, so this doesn't really help at all.

Dereckson added a subscriber: Dereckson.Via WebApr 13 2015, 2:43 AM

It is also subject to a pretty scathing critique at the following URL:
http://www.xmlplease.com/error404#h2-17

Well, they criticize everyone including Microsoft and A list apart. They want a 404 plain, visible and big. They also state they'd prefer 404 to be servers responsibility.

I offfer to edit the task description and discard this queer POV.

Add Comment