We need prettify and add useful links to 404 and 500 error pages

May I take?

Hey jpj! Of course! Thanks for stepping up and contributing. Here are a few things to guide you: - The 404 page should work across multiple view ports, so keep that in mind (mobile/tablet/desktop). - The page design and any imagery should also be able to work and translate across multiple languages and countries. - Come up with a few rough ideas, we can review and refine later. - If you need assets, you can find colours/logos/typefaces here: - http://www.mozilla.org/en-US/styleguide/identity/marketplace/branding/ - http://www.mozilla.org/en-US/styleguide/identity/marketplace/color/ - http://www.mozilla.org/en-US/styleguide/products/firefox-os/typeface/ - And here are a few 404/500 pages that inspire us: - https://github.com/500 - https://github.com/404 - http://huwshimi.com/404/ - http://mailchimp.com/404/ - https://www.getdropbox.com/404 Thanks again, looking forward to seeing what you come up with. :)

my idea is to put some information on pages 404 to assist in the mozilla project or write the rights of users.

for example we can use a simple qotd script to show hints and helps this is the code: var ran=new Array(); ran[0]='example1'; ran[1]='anotherExample'; ran[2]='yetAnotherExample'; var id=Math.round(Math.random()*(ran.length-1)); document.write(ran[id]);

Let's make it a typo thing with the 404 page like "Sorry You went to place maybe we could help you find your place" with a search option. big bold letter and all.

One of our interns pointed me to these excellent guidelines for 404 error messages by Jakob Nielsen: http://www.nngroup.com/articles/improving-dreaded-404-error-message/ "All error messages must be: • written in plain language that is easy to understand for non-technical users and that does not imply that the mistake is the user's fault • precise in specifying exactly what was done wrong (that is, not be generic or vague) • constructive in suggesting steps the user can take to correct the problem" Like Athul mentioned above Nielsen also suggests including a search field.

I could take up this bug..

It would be nice if we had a error page that was mobile, agnostic (between consumer and developer pages) and useful.

First draft of a 404 page (for consumer). The idea here is we'd have a fun collection that plays off of being lost, and a simple way to return to the homepage. Developer would be similar, but with some other kind of fun graphic/bit of knowledge.

LOL too good. Krupa, what was your idea again about the 500 page?

500 isn't covered, but I'm assuming we'd change the 404 to suitable error code (500, 403 etc) and remove the collections.

Ideally this page should be * a small simple static file * the apps should be loaded by JS * repeat for the following status codes: 404, 403, 500

Here's a version of the 404 page without the collection block. It matches the pattern motif we've established for collections, and can be applied across multiple screen sizes (the alert/copy/button would be centered to the display.

Looks pretty! 1. When using the Marketplace app, there is no browser chrome so users don't have a back button (or a physical back button on phones). That's why we added the back button to the header (when the user is on any page other than the homepage). 2. How does this look for tablet sizes (at least ~710px wide)? Desktop sizes (~1024px)? 3. Are we still going to show the maps apps? I am lost trying to think of a better pun! :-P 4. How would the 500 (Internal Server Error) page look? Note for implementers: If we go are going to show these maps apps on the 404 page, then we need to make sure it doesn't make a request to our API. With error pages, it's bad practice to include other resources (e.g., images, XHRs). (I've filed bug for this: bug 1064691.) Long story short: we'll likely need to hardcode the names, links, and icons or remove them.

1. Added header. 2. See attached image. the mobile is 320px wide and the tablet is 1024px wide. 3. II think the idea was this page could be viewed across all Marketplace products (store/devhub/etc), so I removed the collection block to make it a bit more generic. 4. The tablet version shows a 500 error. We could just swap out the copy depending on error.

Nice 1. Heh the pup's cute, but what's he for? 2. How does it look at desktop width (~1200px and wider)? How would you adapt the red background here, when we have the header and the footer? https://www.dropbox.com/s/dzhddd3sk4viq9o/Screenshot%202014-09-09%2014.26.22.png?dl=0

1. That's my dog, he's the Official User Image in my mock-ups. That bar was grabbed from a newer UI we've been working on, so ignore that. :D 2. We could have the error sit in a block similar to the feed? But bigger?

sorry, "sit in a block similiar to the ones we use in the feed"

Heads up that we’re working on one for Firefox Accounts. Copy is not final, but it’ll likely look something like this: http://people.mozilla.org/~rfeeley/images/500.gif

For the sake of your servers and bandwidth, be sure error pages are served with a minimum of HTTP requests. Best practices say to put as many error page resources in the page as possible. Definitely any CSS and JS, and even images! Here are some examples: http://www.google.com/dsfasdf https://github.com/flergenbergen (use of data:uris)

While I cannot deny its adorableness and quirkiness and whimsy, repurposing your company's logo in a negative light makes it easier for the media when they go to sensationalise something negative about your company. Branding would probably agree here. I can't find sources now, but a few years back, whenever negative Twitter press showed up in the news, the media would use the Fail Whale™ as supplementary clipart to represent Twitter's failures, issues, and mistakes. Just my 2¢. Looks cool though!

Hello Andy, I'm new to Bugzilla and would like to work on this bug. I feel glad if you can assign me to this bug and guide me to work on it. Thanks in advance.

There's UI added by pwalm to this bug and there was another 404 design he did which is attached to a bug somewhere...

The new error page template is ready but we're missing an SVG of the icon (triangle with exclamation). Please attach to bug when available. I'll use the existing round 'alert.svg' in the meanwhile.

For reference: https://github.com/mozilla/fireplace/pull/1338

SVG created, PR updated.