How you too can add a kitten puzzle to your 500 page

For Recognize, we wanted the error page to distract the user from errors. Although errors are extremely rare, they are nevertheless jarring experiences.

Create a distraction on your 500 error page.

To make our 500 error page more interesting we added a photograph shuffle puzzle. To take that puzzle to the next level, we chose an adorable photograph of a kitten.

Kitten Puzzle

We’ve received positive feedback regarding our puzzle.

Nate Vaughn posting on our 500 page

Now you too can add a kitten puzzle to your 500 page

Step 1. fork my puzzle on github

Go to the Github repo and download the JavaScript HTML5 puzzle.

Step 2. Rename index.html to 500.html

Paste the entire package (minus the README) into your public directory where you keep your 500.html page. Re name the index.html as 500.html.

Step 3. Edit 500.html and CSS

Put your important meta data into the head of your new 500.html and update the introduction html and content. There is a bunch of CSS that you will probably want to cut out. Out of box it is somewhat space themed.

Step 4. Put in your own photograph

Make sure to change the image. Has to be 500x500px. This is the image you’ll want to update: https://github.com/grandecomplex/JS-Picture-Puzzle/blob/master/_ui/img/image.jpg.

And now you have a puzzle as your 500 page! Users are successfully distracted!