Today I made some fun error pages for Crossfader.fm in under an hour.  Here’s how.

My coworker pointed me to Github to check out their really solid guidelines for error pages.

The key is that they need to have 0 dependencies on anything else — meaning a fully, self-contained html document. This means using inline CSS and base-64-encoded images.

Luckily for us, we can just download GitHub’s example pages to use as a template. To do this, go to the page, then go to file, Save Page As, and then open it up in your text editor to take a look.

Once you’ve stripped out their core code, you should have something like this:

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>Page Not Found</title>
 <style type="text/css" media="screen">
 body {
 background-color: #eee;
 margin: 0;
 }
 body,
 input,
 button {
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
.container { margin: 50px auto 40px auto; width: 600px; text-align: center; }
a { color: #222; text-decoration: none; }
 a:hover { text-decoration: underline; }
h1 { letter-spacing: -1px; line-height: 60px; font-size: 60px; font-weight: 100; margin: 0px; text-shadow: 0 1px 0 #fff; }
 p { color: #222; margin: 10px 0 10px; font-size: 18px; font-weight: 200; line-height: 1.6em;}
ul { list-style: none; margin: 25px 0; padding: 0; }
 li { display: table-cell; font-weight: bold; width: 1%; }
.logo { display: inline-block; margin-top: 35px; }
</style>
 </head>
 <body>
<div>
<!-- cool, fun 404 image goes here -->
 <img alt="404" height="" width="" src="data:image/jpeg;base64,*image string goes here*" style="margin:0px auto;" />
<!-- Error message of your choice -->
 <p><strong>There isn't a page here.</strong></p>
 <p>Go back, or try again later.</p>
<!-- links -->
 <div id="suggestions">
 <a href="">Contact Support</a> —
 <a href="">Home</a>
 </div>
<!-- Logo image that links to home page could go here -->
 <a href="">
 <img alt="Crossfader.fm" height="135" width="320" src="data:image/jpeg;base64,**image string goes here" style="margin:20px auto;" />
 </a>
</div>
</body></html>

Feel free to copy/paste that, or chop it out yourself to better understand what’s going on.

The fun part here is making a custom image for the page. Make a cool image of your app or page exploding in photoshop and throw a 404 on it.

404-img

Here’s mine, a picture of our app interface imploding.

Your own sweet exploding 404 graphic and upload it to Base64-image. These guys will encode it to base64 for you (Thanks, internet!)

Paste your base64 image into your template and: BOOM! You’ve got a sexy looking 404 page that will always look exactly the way you want it to.

Problems? Check out my example page here.

Thanks for reading!

Check meowt on twitter & dribbble

Advertisements