Spruce up your site, make 404 errors pretty

This may go without saying to most of you, but an end user probably has no idea what “Error 404″ means. An easy way to help a user along when he hits a bad link is to customize your error pages, the most common of which is the “Page Not Found”, error 404 page.

All web servers are capable of doing this, but it’s different for each one. We’re using Apache in our office, and the setup for the custom error handler couldn’t be simpler. It’s just a single line in your virtual host container:

ErrorDocument 404 /errors/404.php

For our Error 404 page, we chose to give the user three options:

  1. Perform a search.
  2. Choose from a list of quick links.
  3. Start over at the home page.

Here’s the result:

http://cba.ua.edu/anything-about-auburn

10 Responses

  1. Slick 404 page right there, my friend. A quite relevant topic, as I’m constantly having to validate links for sites linked from UA Home and our other sites that just disappear to 404 pages. With the ability to never give our users something that ugly and disconcerting to stumble upon, this is well worth the effort.

  2. That looks great. At one point I was going to implement a “smart” 404 page that parsed the referrer and, depending on what they did give them options.

    Check out ALA’s article: http://www.alistapart.com/articles/perfect404

  3. Good tip, William. Your page looks great and I was inspired to clean up what I had on Undergraduate Admissions, which up until 5 minutes ago was the standard nasty default page.

    http://gobama.ua.edu/dfdfdf

    Thanks much.

  4. @ Matthew: we do some very minor “smart” redirects from our 404 page, mainly checking for case-sensitivity, but that’s about it.

    If you find a good tool that helps with that, let me know.

  5. @ Matthew (again): I guess I should have read that article you sent before I submitted that last comment.

  6. Well, William, you prompted me to finally get something like this up.

    http://www.career.ua.edu/anything-about-auburn

  7. Nice, I like the addition of the contact page. I might add that to ours as well.

  8. I may include the parsed query string as a hidden input for that form so I’ll know exactly what they were trying to get to, in addition to what they say.

  9. I am now using Ajax-powered google search results on my 404 Error Page Easily done with .html or php.

    You are using blogging software so why not use the templated system?

  10. William,

    Just wanted to follow up on this whole 404 page thing. After a few months of using the contact form with my 404 page, I have determined that it isn’t really useful at all! I just went ahead and added a custom Google search which should be more useful.

    I noticed that you were using an advanced Google search on your site instead of a custom search. If you use a custom Google search, you will be able to link it to your Analytics data and capture what the users are looking for. Plus, you’ll be able to wrap the search around your design with an iframe and even customize the look of the results somewhat.

Leave a Reply