A 404 error is what happens when you try to access a page on a website that doesn’t exist. We’ve all gotten them; due to typos, a moved file, whatever the case. As designers / developers we need to make sure we help the users of our websites should this happen to them. The last thing we want is for them to get an ugly 404 error, get discouraged, and exit your website.

Instead, you want to create a custom 404 webpage, and redirect the user to this page should the error happen to them. This is done by uploading a .htaccess page to the root of your website.

Simply create a text document named htaccess in any text editor, and copy past the following code.

What that code is doing is redirecting the user to 404.html. Obviously you can name the page anything, just make sure to change the code. Upload the file, put a dot in font of the name ( so it’s .htaccess ), and you’re all set. Go to your site and type in a page that you know doesn’t exist. You should be re-directed to your new 404.html page.

Speaking of your new 404.html page, make sure when you create it you help the user along. Check out the 404 page I made for my website, BeantownDesign.com

Beantown Design 404.html page

You can see it’s rather simple, but I point the user to the three things I consider to be the most important on my site: my home page, my portfolio, and of course my contact page. You can do whatever you want, just make sure you are making your user’s life easier.

Here is a htaccess file you can download and use.

Download File

Need a nice looking product slider for you website?

Introducing FancyMoves, a new jQuery Product slider for your website or blog. This slider is built off the Moving Boxes slider, with FancyBox for expanding images.

View Demo

FancyMoves is a great slider to show off services, products, or whatever you can dream up. The main image is enlarged to attract your focus. There are three ways to navigate to the next / last item: using your keyboard arrows, using the left and right arrows on the sides of the slider, or simply clicking on the next or last item in the slider.

FancyBox is built in so you can have images enlarge with an overlay effect on the screen. Hovering over the enlarged photo shows arrows, allowing you to navigate to other images within the group. Any of the FancyBox features can be added to the code of course, for different effects including: speed, overlay styles, expanding transitions, etc.

This slider is brought to you for free thanks to good old open source on the web. If you use it, shoot me a message and I’ll link your site here for others to see.

Don’t forget to check out Ugmonk, where you can actually buy the products from the demo slider.

Want to set the slider to autoplay? Check out my demo here for info.

Download FancyMoves

If you’re going to use PHP on a website the server needs to be running PHP right? Well duuh! If you work on a variety of websites for a lot of clients, you’re going to deal with different hosts and servers. Before you hook up a form to PHP or whatever else you are planning on doing, you better make sure the server can run PHP if it isn’t.

The quickest way to test servers for PHP is to create a testing PHP file that you can upload to a clients website to see if PHP is running. The good thing about this is you can reuse it for every site. You simply upload this to the server, and try to open it in your web browser. If it works, you’ll see an html page with the info about the PHP running on the server. If it isn’t running PHP, well you won’t see anything!

Keep reading for the code to make your own. I also provide mine as a download to save you time.

If you want to create your own, just create a document called info.php. Within this file paste the following text:

Once you upload that, try to open it in your browser. If it works, it’ll show the info about the PHP running on the server. If it doesn’t work…well you better call the host.

Speaking of hosts, here’s the host I recommend to all my clients, and use for all of my personal websites, including WebDesignAndSuch.com and BeantownDesign.com

Anyway, back to the PHP topic, here is a info.php file like I mentioned above. Figured I’d save you some time. Happy coding!

Download info.php

Popups suck.

The good thing is you don’t see that many of them any more. That’s because browsers recognize that they suck and are most likely spam or ads and so they block the popups. The old way of creating a popup was to force open a new browser window over the current browser window. So this is what browsers block. But what if you actually have a need to use a popup window for something useful and not spammy? This happened to me the other day. A client wanted a popup window on their homepage to wish everyone a Merry Christmas.

Knowing I couldn’t use the old popup method, I went searching. I knew it’d be easy enough to use CSS to put a floating div over the content of the site, which creates a popup effect. The problem was how do you close the popup once it’s open? Javascript would be needed for this. Check out the demo I setup which shows how the CSS popup can be set to open on pageload or by clicking on a link; and then how Javascript allows you to have a “close” button that shuts or hides the popup. Then continue reading for the code and downloadable files.

View Demo

If you check out the source code of the html file, you’ll see the following in the body. The “blanket” is the effect of putting the transparent black background behind the popup, which helps separate it from the rest of the content on the page. The “popUpDiv” is where you put the content of your popup.

If you want the popup to load on page load, put the following in your body tag.

Here is the CSS used to style the blanket effect and the popup div. You’ll see I turned the blanket effect off for Internet Explorer, since it doesn’t appear to support “opacity” (big surprise).

There is a Javacript file linked to the html file to make some of the magic happen. I’m going to make the demo files available so you can play with it and make your own. Enjoy!

Download Files

One last thing.. the original code for this was found here. I made some edits to make it work for my application.

In a previous post I showed possibly the easiest way to embed a Twitter feed on your website. This brought up a couple of questions from some users.

1. Can you make a background behind individual Tweets?
2. Can you put the date on it’s own separate line?

As the case goes with a lot of things these days jQuery to the rescue! Check out the demo to see both of these things in action, and then continue reading to see how to accomplish these things with jQuery and download the source files.

View Demo

The jQuery and CSS code to make this happen came from Chris over at CSS-Tricks. I slimmed down and edited it to make it work for me. Here is a zip of the files used for the demo so you can download and edit it as you want.

Download Files

You’ll see in the head of the index page the jQuery which makes it work. The line you need to change is the following:

First replace the part I highlighted in Blue “ilz_” with your Twitter user name.

Next, replace “count=5″ with the number of tweets you want to show up on your page.

Other than that, you should be able to style the rest of the text, links, etc. as long as you know basic CSS. Enjoy!

Recently I was put in charge of creating a product slider for a client’s website. There would be four products shown at a time, with one new product being revealed each time as the slider moved from the right to the left. I figured there was a jQuery slider out there that I could manipulate for this, and after a little hunting I found one.

The actual slider and website I created it for isn’t live yet. I used the base slider I created and used a few Apple images to show the general idea in the demo. So check out the demo, and then keep reading to see the details.

View Demo

So the original code for this slider is jCarousel. I figured I would put up this demo to show how with a few modifications to the code you can create a useful product slider. You’ll notice how it’s created with an unordered list. I also showed how you can use rollover effects, and link each image to a webpage; which is obviously the point of the slider in the first place.

The slider has an autoplay feature. I added some code to the original jCarousel to make the slider go only one product at a time. This is in the head of the index.html file. The line “scroll: 1“. If you want it to scroll 2 items, change it to 2, and so on.

Now I admit the code here isn’t the prettiest, but as I mentioned this was created strictly for the demo, to show some of the possibilities. I’m going to provide all these files in a .zip file for download, in case you want to play around with the slider. Enjoy!

Download the Files

Using page anchors is a pretty basic web design technique. If you want to link to a certain part of a page you create an “Anchor” at that part of the page. This anchor is what you point your link at. You can link to an anchor on the current page, or to an anchor on a certain part of another page. Useful, but not all that exciting.

There is, however a quick way to make even the simple act of scrolling up and down a page more visually appealing. It’s called Smooth Scroll. Check out my demo to see this in action, and then keep reading to learn how to add Smooth Scroll to your website.

View Demo

So lets start with the basics. To add an anchor on your page add the following in the place that you want you page to scroll to.

Then to point your link at this anchor, use the following. (This is to point to an anchor on the same page as the link.)

In case you were wondering, the following is how to point at an anchor on a different page.

All you need for the Javascript Smooth Scroll effect is to link to the JS file, it does everything else for you.

Dowload Smooth Scroll Javascript

You’ll see the zip has all original files for the Smooth Scroll. Now I give credit where it’s due, this entire zip is from DezinerFolio. Make sure you check those guys out for some great freebies and code.

To link to the Javascript file, put the following in your head.

The javascript file is the only file in the zip that you need to use for the Smooth Scroll to work. Have fun, and if you want to an actual webpage that uses this effect, check out the website portfolio of my website.

Ya.. I said “Web 2.0“.. what?

Well if you’re still here after that, here’s the deal. I was reading an interesting tutorial about creating a button similar to the one found on the Campaign Monitor website. I actually went ahead and created the button, I always love seeing the approach other designers take at creating things in Photoshop.

Well after I created it I figured I may as well put the PSD file up here for anyone that wants to use it. I’ll give the CSS code to add it to your website as a CSS sprite also. Now I need to give credit where credit is due. The CSS code, and the tutorial of how to make the button are from Jacob Gube over at Six Revisions. Check out that link if you want the step by step of how to make this button.

I’m really putting it up here so I’ll have easy access to the PSD file in the future so I can download it no-matter where I am, make a few color adjustments, copy the CSS code, and have a new button for whatever I’m working on that day. Check out the demo to see the button in action, and feel free to download the PSD file of my version of the button. Keep reading for the CSS code.

View Demo

Download PSD File

Below is the CSS code for your button and the rollover effect.

Below is the XHTML code to put the button on your page.