h5bp/html5-boilerplate — pull request #1443 by alrra (2013-10-05 22:03:18+00:00)
Title: Reduce the size of the 404 page

I think we should provide a smaller 404 page as in some cases, the server might be wrongly configured and the user 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 only tried to use it a couple of times and in all cases I couldn't find what I was looking for anyway (Google [seems to be on the same page](http://www.google.com/404)).

---

Give the above, I proposed the following [page](http://jsbin.com/IkidERo/1) (if you want to play with the code, here is another [page](http://jsbin.com/ubIjIbU/1)).

Some screenshots:

| Device (OS) | Portrait | Landscape |
|:---:|:---:|:---:|
| Samsung Galaxy S III (Android 4.1.2) | | |
| 3rd generation iPad (iOS 7.0.2) | | |

Changes:

* simplified the overall design
* removed Google search functionality as it does not provide much value in most cases
* 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)

Benefits include:

* small file size (600 bytes / 421 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 forgot to provide certain files (e.g.: [/favicon.ico](http://zoompf.com/blog/2012/04/instagram-and-optimizing-favicons))
* improved performance (less HTTP requests, less memory consumption, faster rendering, etc.)
* designed to work with all kinds of screen sizes and support IE 6+