2.05.2013

Creating a 404 Error Page with Freeway

Default 404 Error Page
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:

  1. Create a new page, and name it something like "This page doesn't exist!"
  2. Change the filename of the page to 404.html
  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. Add this line to your .htaccess file:
    ErrorDocument 404 http://example.com/404.html
    Obviously, change example.com to your domain. The .htaccess file is located at the domain root (the same place as your index.html file). Keep in mind that the .htaccess file is usually invisible, so you will have to set your FTP client to show hidden files to see it. If it doesn't exist, create a new file using your favorite text-editor, save it as htaccess.txt, then after you upload it to your server rename it to .htaccess.
  5. Go a test it!
If you need some inspiration, there's some great 404 error pages here!

No comments:

Post a Comment

I'm Caleb Grove

Yep, that's me. I'm a 17 year old web unicorn and own OnRamp Web Design. My skill base is quite broad, though my real focus lies in UX and UI design for the web. When it comes to designs, I'm a perfectionist, scooting 1 pixel at a time.

My main blog captures all my web-related thoughts that exceed 140 characters. Anson S is my personal blog, where I pander in politics and religion. You can tweet me on Twitter at @SirCalebGrove, circle me on , or friend me on Facebook.

About this site

This is my playground. CalebGrove.com harnesses the power of HTML5 and CSS3. It was built using my web design weapon of choice, Freeway Pro, using a inline flexible system. Responsiveness was hand-coded. The blogs are hosted by Blogger, whose template code was generated by the Blogger actions. Website hosted by GJX Hosting. Creativity provided a disturbed mind, and not much else.

No unicorns where harmed in the making of this website, except through caffeine overdose.