Page MenuHomePhabricator

Redesign the Wikimedia 404 error page
Closed, ResolvedPublic

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:

Details

Reference
bz17316

Event Timeline

bzimport raised the priority of this task from to Low.Nov 21 2014, 10:30 PM
bzimport set Reference to bz17316.
bzimport added a subscriber: Unknown Object (MLST).

ultrablue wrote:

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

soxred93 wrote:

That's done in the .htaccess file, using

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

rather than

ErrorDocument 404 /404error.php

Oooooooh I really like this look. :D

Will want to integrate the multilingual messaging...

ultrablue wrote:

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

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.

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:

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.

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

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

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

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.

The latest version I'm working on uses

html, body {

padding: 0;
margin: 0;

}

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

Putting it under siterequests now, seems most appropriate.

jeluf wrote:

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

Created attachment 7633
Improved version of error page

This is an improved version of the page.

Attached:

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.

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

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

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

pdhanda wrote:

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

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

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.

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

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.

ehm, why is this open actually ?
"The latest improved version is live now. Marking this fixed."

ehm, why is this open actually ?
"The latest improved version is live now. Marking this fixed."

Due to T19316#219577 from 2011.

But given that we now have a separate task tracking the refresh issue (T37052: Wikimedia 404 error page shouldn't use a Refresh HTTP header to implement the auto-redirect to /wiki, filed in 2012), I think this task can probably be marked resolved.

Krenair claimed this task.
Krenair removed Krenair as the assignee of this task.
Krenair set Security to None.