Web Designer 101: How to Design Useful Error Pages in Dreamweaver

We’ve all hit error pages, and we’ve all sighed in frustration before hitting the back button and moving on. If your site utilizes useful error pages, though, you can retain your viewership. Instead of hitting the back button, the viewer is given information and options – and while they’re busy reading that, they’re being redirected right back to the ‘working’ area of your website.

Useful Error Pages Tutorial Details

· Program: Adobe Dreamweaver (or compatible) · Version: Any · Difficulty: Beginner · Estimated Completion Time: 30 minutes – 1 hour depending on user knowledge · Prerequisites or Requirements: An error icon that is free to use (you have designed it, have permission to use it, or it is licensed to be re-used) such as one of these: one | two

Step 1

To start out, do the obvious stuff – fire up Dreamweaver, create a new blank HTML page, and have your error graphic ready-to-go.

First, we’re simply going to decide what makes the error page useful. Of course we want a cool graphic – that’s why we’ve either designed one, had one designed, or picked up one. But other than that, what makes an error page useful to your specific site? Some of this will depend on what your site is about and how much you want it to do.

The following links are some of the most commonly useful items that your error page could have. Try not to go overboard – keep it to 3-5 of the most useful scripts that make sense for your site and save the code and instructions for the script in a separate, clearly titled text document.

1. Countdown and Redirect Script – This allows your viewer time to read the information on your redirect page, but with this script you can easily set how long that interval of time is. It’s also very easy to use.

2. Email Script – This very short and easy-to-use script lets your viewer send you a quick email letting you know they encountered an error trying to view a specific page, graphic, file, or whatever. This can be vital information.

3. No Right-Click Script – You don’t want everyone to know how you made your error page so cool, and you don’t want them taking off with your hard work. This little line of code will make it much more difficult for anyone to do so – but be warned, as the article and script I’m linking to describes, there are always ways around the mousetrap.

These are the three codes that I will be using because you know what? Sometimes, what they say is right: simple is better. It’s an error page. It should convey that, show off that your company is cool, and get them into your site as soon as possible.

Really think about what would be most useful to your specific viewers, though. Things like a quick slideshow that shows off other areas of your site, transition effects, humor, and links to live chat are always useful and appreciated.

For a printable cheat sheet of the script codes I’m using in this tutorial, click the 4th illustration attached to this article.

Step 2

Now it’s time to sort of ‘outline’ our page. Remember, we’re keeping it pretty simple. The point of an error page is not to deluge the viewer, it’s to let them know that you’re taking responsibility for a mistake and get them on their way – in your direction.

So, here is where you lay out what you want where. I highly discourage the use of tables or cells in this step. If you have to go old-school, go right down to the old style html where you’re using center tags. You want this page to pull up fast with no hitches so that the scripts we put in will work smooth.

For my page, I’ve gone with a very common and very simple layout: graphic header centered on the screen, a short text message about the error, and a place-holder for the email-me script that I will be adding.

Reference the 3rd illustration attached to this article to see my final outcome in the design step. HTML code can be seen to the left in the illustration in this larger image (I can’t guarantee how long this image will be accessible, though).

Step 3

Now it’s time to start adding the nifty little scripts. Follow the instructions included on the scripts you’ve chosen very carefully. Some scripts are in-depth and a little complicated to follow. If you’re simply using the three scripts I’ve outlined, refer back to the cheat sheet (Illustration 2) and place each element where it belongs.

Again, I’ve uploaded a large-scale image to reference but I cannot guarantee how long the image will be accessible. This shows my own HTML code to the left.

For the final ‘look’ of the Useful Error Page, check out the first illustration attached to this article. Smooth, right?


People also view

Leave a Reply

Your email address will not be published. Required fields are marked *