Custom 404 Error Page : 31st July 2007



How to redirect the user

You need to create a .htaccess file, using any standard text editor. Copy and paste the following code – substituting the path for your local 404 html page:

ErrorDocument 404 http://www.yoursite.com/404page.html

Once you’ve done that, you are ready to go. Here are a few ideas of things to include in your 404 page:

  • A search box
  • A link back to the homepage
  • The same CSS and graphics as the rest of the website
  • A website index or map

Get creative, make the user feel that they have an alternative route to find what they are looking for, and you’ll vastly improve their experience on your website!

Imaginative 404 Pages

To get inspiration, take a look at some other 404 pages. You’ll be surprised what you’ll find!

Custom 404 Error Pages

Custom 404 Error Pages

Custom 404 Error Pages








Comments and Discussion


On 4th June 2008 , Josh Harbaugh said:

For people running their own webservers or hosting multiple websites, it is also possible to customize the 404 error pages at the server level so they are all consistent - should that be of use. Definitely a useful tip for the future. Thanks!

On 5th June 2008 , Phil Thompson said:

All those example are good because they explain the situation and give the user options as opposed to providing a dead-end like so many 404 pages do. However, my pet gripe, is just how many 404 error pages use the jargon of '404 error' in their copy. I wonder how many users are aware or care what 404 error means and how many get slightly confused by it. In the wufoo and last.fm examples the word '404' could easily be replaced by the word 'error' which would make lots more sense.

On 6th June 2008 , Luke Jones said:

They're really good examples, I've wanted a decent 404 page at my design site for a good while. I'm going to do this tomorrow evening to the new version of my site. Phil's point is ridiculous, it's good to know the traditional error '404', it's not a jargon, it's just the number of the error that's occurred.

On 3rd July 2008 , Jasper Kennis said:

In addition, it might be a good idea to have a contact form for your visitors, allowing them to personally ask you for help, providing maximum serves. Not something I've done myself yet but you know, just a little mind spin:)

On 31st July 2008 , Dreams Media said:

Every web designer knows the important of 404 pages. The reason why some done use it, is plain laziness. I know this, since I have used 404 pages in some websites and not in some. But yes, after seeing those nice designed pages, I would definitely use them, and either keep contact form, or some promotional offers to grab attention.

On 12th October 2008 , Ed Parton said:

I try to put a custom 404 on all my web page designs. www.jollymoon.com/error www.edparton.com/error www.sade-usa.com/error It looks cool, helps the lost surfer, and adds "bucks" and "perks" to the package for a client's web page layout. It only takes a short time to do and it looks more professional.



Add your thoughts



Subscribe


Design Shack CSS Gallery RSS Feed Design Shack News RSS Feed Design Shack Email Newsletter Design Shack Twitter


Tutorial Archives






Sponsored By


PSD to HTML

Gooey Templates

13 Styles Free CSS Menus

Standard Advert

I'd like to be
inspired by:



Colour


Red Designs Blue Designs Green Designs Yellow Designs Brown Designs Orange Designs Brown Designs Grey Designs Multi Coloured Designs


Category




Layout


One Column CSS Layout Two Column CSS Layout Three Column CSS Layout Grid CSS Layout Other CSS Layout


I've got a
question...



What is Design Shack?

We showcase stunning CSS and Web 2.0 design, alongside resources and inspiration for you to succeed in the same way. We only offer the cream of great design, perfect for getting that spark of creativity going again.

Can you feature my site?

Of course - if it's up to the mark! Just fill in our simple form.

Who's behind the site?

Design Shack is brought to you by David Appleyard, a freelance designer from the UK who is available for work.