Redesign 404 page

Changes: * simplify the overall design * remove the Google search functionality as in most cases, it does not provide much value * 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 include: * small file size (1409 bytes / 580 bytes gzipped), which is particular- ly 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 - 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+ Close #1443.
h5bp · Oct 12, 2013 · 782aefa · 782aefa
1 parent 6d10fc8
commit 782aefa
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 127 deletions.
diff --git a/404.html b/404.html
@@ -2,156 +2,58 @@
 <html lang="en">
     <head>
         <meta charset="utf-8">
-        <title>Page Not Found :(</title>
+        <title>Page Not Found</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
         <style>
-            ::-moz-selection {
-                background: #b3d4fc;
-                text-shadow: none;
-            }
 
-            ::selection {
-                background: #b3d4fc;
-                text-shadow: none;
+            * {
+                margin: 0;
+                line-height: 1.5;
             }
 
             html {
-                padding: 30px 10px;
-                font-size: 20px;
-                line-height: 1.4;
-                color: #737373;
-                background: #f0f0f0;
-                -webkit-text-size-adjust: 100%;
-                -ms-text-size-adjust: 100%;
-            }
-
-            html,
-            input {
-                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+                color: #888;
+                font-family: sans-serif;
+                text-align: center;
             }
 
             body {
-                max-width: 500px;
-                _width: 500px;
-                padding: 30px 20px 50px;
-                border: 1px solid #b3b3b3;
-                border-radius: 4px;
-                margin: 0 auto;
-                box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff;
-                background: #fcfcfc;
+                left: 50%;
+                margin: -43px 0 0 -150px;
+                position: absolute;
+                top: 50%;
+                width: 300px;
             }
 
             h1 {
-                margin: 0 10px;
-                font-size: 50px;
-                text-align: center;
-            }
-
-            h1 span {
-                color: #bbb;
-            }
-
-            h3 {
-                margin: 1.5em 0 0.5em;
+                color: #555;
+                font-size: 2em;
+                font-weight: 400;
             }
 
             p {
-                margin: 1em 0;
+                line-height: 1.2;
             }
 
-            ul {
-                padding: 0 0 0 40px;
-                margin: 1em 0;
-            }
+            @media only screen and (max-width: 270px) {
 
-            .container {
-                max-width: 380px;
-                _width: 380px;
-                margin: 0 auto;
-            }
+                body {
+                    margin: 10px auto;
+                    position: static;
+                    width: 95%;
+                }
 
-            /* google search */
+                h1 {
+                    font-size: 1.5em;
+                }
 
-            #goog-fixurl ul {
-                list-style: none;
-                padding: 0;
-                margin: 0;
             }
 
-            #goog-fixurl form {
-                margin: 0;
-            }
-
-            #goog-wm-qt,
-            #goog-wm-sb {
-                border: 1px solid #bbb;
-                font-size: 16px;
-                line-height: normal;
-                vertical-align: top;
-                color: #444;
-                border-radius: 2px;
-            }
-
-            #goog-wm-qt {
-                width: 220px;
-                height: 20px;
-                padding: 5px;
-                margin: 5px 10px 0 0;
-                box-shadow: inset 0 1px 1px #ccc;
-            }
-
-            #goog-wm-sb {
-                display: inline-block;
-                height: 32px;
-                padding: 0 10px;
-                margin: 5px 0 0;
-                white-space: nowrap;
-                cursor: pointer;
-                background-color: #f5f5f5;
-                background-image: -webkit-linear-gradient(rgba(255,255,255,0), #f1f1f1);
-                background-image: -moz-linear-gradient(rgba(255,255,255,0), #f1f1f1);
-                background-image: -ms-linear-gradient(rgba(255,255,255,0), #f1f1f1);
-                background-image: -o-linear-gradient(rgba(255,255,255,0), #f1f1f1);
-                -webkit-appearance: none;
-                -moz-appearance: none;
-                appearance: none;
-                *overflow: visible;
-                *display: inline;
-                *zoom: 1;
-            }
-
-            #goog-wm-sb:hover,
-            #goog-wm-sb:focus {
-                border-color: #aaa;
-                box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-                background-color: #f8f8f8;
-            }
-
-            #goog-wm-qt:hover,
-            #goog-wm-qt:focus {
-                border-color: #105cb6;
-                outline: 0;
-                color: #222;
-            }
-
-            input::-moz-focus-inner {
-                padding: 0;
-                border: 0;
-            }
         </style>
     </head>
     <body>
-        <div class="container">
-            <h1>Not found <span>:(</span></h1>
-            <p>Sorry, but the page you were trying to view does not exist.</p>
-            <p>It looks like this was the result of either:</p>
-            <ul>
-                <li>a mistyped address</li>
-                <li>an out-of-date link</li>
-            </ul>
-            <script>
-                var GOOG_FIXURL_LANG = (navigator.language || '').slice(0,2),GOOG_FIXURL_SITE = location.host;
-            </script>
-            <script src="//linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>
-        </div>
+        <h1>Page Not Found</h1>
+        <p>Sorry, but the page you were trying to view does not exist.</p>
     </body>
 </html>
+<!-- IE requires 512+ bytes: http://www.404-error-page.com/404-error-page-too-short-problem-microsoft-ie.shtml -->
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ### HEAD
 
+* Redesign 404 page ([#1443](https://github.com/h5bp/html5-boilerplate/pull/1443)).
 * Remove IE 6/7 hacks from `main.css`.
 * Update to Normalize.css 2.1.3.
 * Remove IE conditional classes ([#1290](https://github.com/h5bp/html5-boilerplate/issues/1290), [#1187](https://github.com/h5bp/html5-boilerplate/issues/1187])).