The best 404 error page ever


David te Kloese

This post isn't about the Kentico 404 conference itself. It's about my submission for the page-not-found-contest. During my brainstorm for my submission I came up with the best 404 error page ever! I hope you agree...

So the 404 page not found error. We (should) create it for every project we deliver. It usually includes some contact information and a short summary of what happened and how to continue. If you're lucky you'll get the freedom to create something funny using an image or quote, but that's usually about it. Even a search online for 404 tips often doesn't go much further than explain to the visitor and give them options to continue.
 

'DTK's most awesome 404'© Idea Ever

I'm realistic enough to know my skill set limits me from delivering the most 'beautiful eye candy styling'. So I went for the content and functional part. I went back to the basic of the 404 and asked myself these three questions.
 
  1. What scenarios usually happen?
  2. What would help the user most?
  3. How can I build this in Kentico?


1. What scenarios usually happen

  • A visitor mistypes an URL
  • A link to a page that has been moved without a redirect in place


2. What would help the user most

In both scenarios it would help the user most by just getting them to the page they thought are expected to go too.

They expect a page, so give it to them. Its not sarcasm as you have all the ingredients you need to navigate them towards it.


3. How can I build this in Kentico

How do you know what the user is looking for? Should you just pick the most popular terms? Or let them search by placing a search box on the page?

The last idea popped into my head, but than I thought why would you let them search? You already know what they are looking for.


The URL they where trying to go too is right there sitting in the browser. So why not use that and insert it into Kentico's search. If someone would mistype the URL it should still contain about 95% of the correct URL.


So I can build this! I've updated the Search Results Webpart and let it filter the keywords out from the URL. I still explain the 404-page, but also show the top 3 search results. So basically I created a personalized 404. Specific for every request.



Update: Code and configuration


By popular request I'll include some more details about the code changes and configurations I made.

For the Smart Search Index I've set the Analyzer type to Subset. Since I filter out some characters I want to make sure I also find parts (Subset) of words.


For the code just getting the URL wasn't enough. It's encoded, contains slashes and possible other unwanted characters. So I had to modify the string before using it in my search. The following code is a quick not yet configurable modification of the Search Results Webpart.


Search Results Webpart code



Next we need to configure the Webpart settings:
  • Since the 404 might be caused by a typo I've checked the Typo tolerant search
  • Limit the Maximum number of results, because its not an actual search page just a few results should be enough
  • Also make sure to check the Search on each page load checkbox. We don't have an extra search box so we can want the search results as soon as the page loads


Search Results Webpart settings



Finally some styling and my master piece done:


404 result - search for cache



If you're really confident about the result you could even redirect them to the first result, but that might confuse them even more if you're wrong!


See it live by mistyping the URL, or just go to my awesome 404.
 

Vote for my entry

The contest is about awarding and recognizing the best 404 error pages in three categories. The public voting is now live at 404 Awards and will be open until the end of October. So I also shamelessly promote my entry and hope you like and vote for my solution.


After the competition I might even share the Webpart in the Kentico marketplace.