Creating a Custom 404 Error Page

Originally authored at Caleb Grove | A Web Designer: Creating a 404 Error Page with Freeway

Nothing’s worse than following a link to a website and finding your browsers default 404 page. From a UX perspective, those pages are evil. It’s bad enough that the page doesn’t exist, but there is no easy way for the visitor to try and find the page they were looking for, or even navigate to your home page!

Create a custom 404 error page with Freeway is really easy, so let’s get started:

Important! All links out of your error page need to be absolute! For example, instead of linking to /index.html, link to

  1. Create a new page, and name it something like “This page doesn’t exist!”
  2. Change the filename of the page to “404.shtml”. Note the “s” right after the dot.
  3. Build the page. At there very least, you should have:
    1. A non-technical explanation of what went wrong (bonus points if it’s humorous!).
    2. A call-to-action. This might just be a link to your home page, or a search field.
    3. The navigation menu and website title.
    4. The default website footer.
  4. Apply the Remote Resources Action to the page.
  5. Add this line to your .htaccess file: ErrorDocument 404 /404.shtml. The .htaccess file is located at the domain root, and because it begins with a dot, you will have to set your FTP client to show hidden files. If that file doesn’t exist, create it!
  6. Go a test it!

If you need some inspiration, there’s some great 404 error pages here!

tutorials mailing list
Update your subscriptions at: