Skip to content

Commit

Permalink
Redesign 404 page
Browse files Browse the repository at this point in the history 
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 h5bp#1443.
  • Loading branch information
@alrra @kcmckell
alrra authored and kcmckell committed Feb 25, 2014
1 parent a0015fe commit a39d3ed
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 127 deletions.
156 changes: 29 additions & 127 deletions 404.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -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])).
Expand Down

0 comments on commit a39d3ed

Please sign in to comment.