Fluxotronic

If you could add some sort of interesting-ness to a common problem, does that make it an oportunity? Absolutely! When someone accidentally hits a page that doesn’t exist on your site, the standard 404 page doesn’t do much, if if you entice the poor misguided traveler, they might stick around and see what you have to offer.

Enter the fun world of custom 404 pages, here is mine. I have included the source code at the bottom of this post including the original flash file I used to create this. Feel free to use it, change it, distribute it as you see fit.

I stumbled on to this one last week and thought it was very clever and briliantly designed: bluedaniel.com/404.shtml. It turns out the whole site is interesting. I spent quite some time there looking at the trailers, etc.

So I did a search and Smashing Magazine has a whole article on some cool designs, use it as inspiration.

I’ve included jquery, and jquery flash plugin. If you end up altering the flash file, make a backup of the html file as publishing will overwrite it. I prefer using jquery so I usually just export the swf.

Most of it is pretty explanitory, you may change some of the defaults simply by changing the javascript in the 404.html file:

Javascript

flashvars : {
   outlink:"http://blog.inspirefocus.com",
   max_stars: 60
}

max_stars sets the total stars to generate (careful too many will bog your system/browser down)
max_bg_stars sets the maximum number of stars in the background
link_label sets the text to display as the link to where
outlink points to.

Here is an example:
Javascript

$(document).ready(function(){
   $("#flash").flash({
       src: '/path/to/your/404.swf',
       scale: 'exactfit',
       width: '100%',
       height: '100%',
       flashvars : {
	  outlink:"http://somelinktosendpeopleto.com",
	  max_stars: 60,
          max_bg_stars: 700,
          link_label: "I want to go to there!"
       }
   });
});

Have fun with it, and send me a link to what you create, or if you simply reuse mine. Remember, don’t forget your towel!

Update: I just found another post to 70 creative 404 pages: here.

Attachments: 404page.zip

Tags: free, fun design 404, funny, how-to

This entry was posted on Wednesday, February 18th, 2009 at 6:05 pm and is filed under CSS, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.