Reduce the size of the 404 page

[alrra]

I think we should provide a smaller 404 page as in some cases, the server can generate a lot of 404 pages and users might care a lot about the page size.

People who ever used a mobile data plan know how irritating is to access a large web page, but even more irritating is when the site tries to redirect you the equivalent mobile page and keeps ending up serving you 404 pages that are quite large given the information they offer.

Also, I personally find the search feature in the 404 useless. I tried to use it a couple of times but ended up not finding what I was looking for (Google seems to be on the same page with this). I even asked some of my non-technical friends if they use such a feature. All of them said they don't and they either immediately go back or just close the page and move to the next site.

---

Give the above, I proposed the following page page.

Some screenshots:

Browser (OS)	Portrait	Landscape
Chrome (Android 4.1.2)
Safari (iOS 7.0.2)

Changes:

• simplified the overall design
• remove the Google search functionality as in most cases, it does not provide much value
• minified the code and removed unnecessary tags in order to reduce the file size (the 404 page is intended more as a placeholder and developers should change or customize it according to their needs)
• reduce the overall file size while keeping the gzipped size over 512 bytes to prevent IE from displaying its own custom error page (thanks @mikealmond and @patrickkettner): http://www.404-error-page.com/404-error-page-too-short-problem-microsoft-ie.shtml

Benefits:

• small file size (600 1409 bytes / 421 580 bytes gzipped), which is particularly useful when users are on a data plan and / or the server is wrongly configured (e.g.: tries to redirect to a "mobile" version of the web page and ends up serving a 404 page) or developers forget to provide certain files (e.g.: /favicon.ico)
• improved performance (less HTTP requests, less memory consumption, faster rendering, etc.)
• designed to work with all kinds of screen sizes and support IE 6+

[necolas]

lgtm, but would un-minify the source code

[paulirish]

relevant: http://chrismorgan.info/blog/github-links-case-study.html

I am not too keen on big "404" as to regular people that is less useful than "not found", IMO.

I'm happy with minimizing the payload of the page however. And I like the new design

Our current 404 ( http://demo.html5boilerplate.com/sdoifjs ) does indeed need a refresh.

[paulirish]

And let's kill the sad face. Let's stay positive even though the content isnt found. :)

[alilleybrinker]

Is there any reason to show the 404 error at all? It's a technical detail tied to the HTTP specification. It would make far more sense to say something like "Page Not Found" and omit the "404" entirely.

[FagnerMartinsBrack]

Minification in a H5BP HTML page does no makes sense.
Even if the project does not encourages outside optimizations it should at least assume ppl are using gzip in the HTML for the sake of readability.
In my point of view H5BP is more than a copy/paste but a reference place where you get the code and customize it for your needs, so any custom thing should not be minified. Even for a page with just presentation like the 404.

[sarukuku]

I agree with @FagnerMartinsBrack. We shouldn't minify the 404 page. In a case where someone would like to use the 404 page as a good base for a fork minification makes no sense. It makes "look, explore & learn" much harder.

[alrra]

Thanks guys for all the suggestions / opinions so far, I really appreciate them. 👍

I modified the page.

---

would un-minify the source code

@necolas Done.

relevant: http://chrismorgan.info/blog/github-links-case-study.html

@paulirish Most of the points in the post require some server side logic that I do not think H5BP can't tackle.

I am not too keen on big "404"

@paulirish I've removed it.

Is there any reason to show the 404 error at all?

@AndrewBrinker I've included the 404 text because all the non-technical friends I've asked knew what 404 meant and I thought it would make the page even more recognizable. I was wrong there, and I agree with you guys on removing the 404 text.

And let's kill the sad face.

@paulirish Done.

Minification in a H5BP HTML page does no makes sense.

@FagnerMartinsBrack As long as it's under 1 KB, I guess I'm ok with it being unminified.

[drublic]

The new version looks great to me. I'd say let's add it to v5.0.0.

[mikealmond]

Does anybody know if this still applies in IE?

From the default Apache 404

<!--
   - Unfortunately, Microsoft has added a clever new
   - "feature" to Internet Explorer. If the text of
   - an error's message is "too small", specifically
   - less than 512 bytes, Internet Explorer returns
   - its own error message. You can turn that off,
   - but it's pretty tricky to find switch called
   - "smart error messages". That means, of course,
   - that short error messages are censored by default.
   - IIS always returns error messages that are long
   - enough to make Internet Explorer happy. The
   - workaround is pretty simple: pad the error
   - message with a big comment like this to push it
   - over the five hundred and twelve bytes minimum.
   - Of course, that's exactly what you're reading
   - right now.
   -->

[patrickkettner]

Quick check with browserstack says yep, even ie 11 -

http://www.404-error-page.com/404-error-page-too-short-problem-microsoft-ie.shtml

[alrra]

@mikealmond @patrickkettner good catch, thanks! I've update the page. :)

[sindresorhus]

I don't think the few bytes you save on omitting quotes and end tags is worth it. It will confuse beginners and it's inconsistent and ugly. I would also like to see the CSS rules being separated by empty lines for readability.

[alrra]

Thanks for all the feedback!