404 page not found

Its very common to land on a web page that you were really searching for and be frustrated by reading the message : 404. That’s an error. The requested URL /pcclm was not found on this server. That’s all we know.  Nothing wrong in the above message, in fact this is much better than nothing being shown by the browser/website. So what is it and how to fix this mess ?

Think as a customer, if you were to reach a shop which was open yesterday, but is closed for no reason ... you'll obviously not like it. But if the shop owner displayed a note like : "Closed for today due to an emergency. For anything urgent contact me : [mobile number]" ... Impressive !!! This shows that the shop owner is really serious about his business and can't let a single customer go away. Same is the case with any website which is like an e-shop. Don't let your visitors bounce from your site, just because they couldn't find something that already existed. Because generic messages can be frustrating to the user, we recommend you to create an awesome 404 page to provide more useful information about your site. Some commonly seen errors are :

"Error 404"
"404 Error"
"404 Not Found"
"HTTP 404"
"Error 404 Not Found"
"404 File Not Found"
"404 Directory Not Found"
"HTTP 404 Not Found"
"The requested URL [actual url value] was not found on this server."
"404 Page Not Found"

So it makes more sense to have a custom "404-Error : Page not found. " While trying to optimize my site , one of the suggestions was to improve the usability by adding a custom 404 ERROR page which increases user retention. So this is what I did ...

The above message is much better and provides the user to search the site or look at the user's social links. Most important, site owners email contact is provided for any urgent concerns. In addition to this you can customize the layout, colors used and even add an image or a video in the above message.
The video, found on nosh.com, for a 404 error message is interesting and cools down the visitor's temper. Watch the video below, shown for a broken URL on nosh.com :

If you are using blogger for your site , its easy to create a customized 404 page. Log-in to blogger.com and Navigate to  YOUR Blog -> Settings -> Search preferences. Now under the "Errors and redirections" section, edit the "Custom Page Not Found" option. By default the value is not set by Google. You need to edit it and add any valid html code.

If the home link is not visible from the 404 error page, one may also provide a link to the home page of the site to ease out the navigation for the user.How about compensating for the issue ??? watchco.com is setting a trend by offering a $10 discount for users getting a 404 Page not found error on their website.

Code used to create a custom 404 error page for this site :
<h3><b>Your requested page was not found.</b></h3>
<p>We are working hard to fix all the missing resources at Computing Explored.</p>
<b>For anything urgent, email me at <a href="mailto:piyush@pcclm.com">piyush@pcclm.com</a></b>
<br />
<br />
<p align="center">
<form method="get" action="/search" name="search">
<input type="text" name="s" autocomplete="off" style="width:320px; padding:4px; font-size:1em;margin-right:5px;" value="Search this site..." onfocus="if (this.value == &quot;Search this site...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this site...&quot;;}" name="q">
<input type="submit" Value="Search Site" Style="padding:4px 8px;font-size:1em;">
<br />
<span><span style="color: #ff6600;"> <span style="text-decoration: underline;"><a href="http://facebook.com/computingexplored" target="_blank"><span style="color: #0000ff; text-decoration: underline;">FACEBOOK</span></a></span></span></span>
<span style="color: #808080;"><span><span style="color: #ff6600;"> | </span></span></span>
<span style="color: #0000ff;"><a href="http://www.twitter.com/pcclm" target="_blank"><span style="color: #0000ff;text-decoration: underline;">TWITTER</span></a></span>
<span style="color: #808080;"><span><span style="color: #ff6600;"> | </span></span></span>
<span style="color: #0000ff;"><a href="http://www.techgig.com/piyushchordia" target="_blank"><span style="color: #0000ff;text-decoration: underline;">TECHGIG</span></a></span>
<span style="color: #808080;"><span><span style="color: #ff6600;"> | </span></span></span>
<span style="color: #0000ff;"><a href="http://www.linkedin.com/in/piyushchordia" target="_blank"><span style="color: #0000ff;text-decoration: underline;">LINKEDIN</span></a></span>


Post a Comment