On the web it is becoming more and more important to have a human feel to your web site. How can you do this? Error pages are a great way to get started, after all they are probably the page in most need of a human touch.
What are they?
When a user tries to go somewhere on your site, where there is actually no page, they will get a “404 Error” page, looking something like this unfriendly blurb…
This has a few problems. First it doesn’t make sense to most people. Second, it really isn’t that helpful. And third, it just looks like it’s saying “go away”.
How to make good error pages
How about this, try Apple and Google. You’ll notice these are both to the point. They are also both helpful. Google offers up contact information and suggestions. Apple offers up their sitemap and something even more interesting: human language. When was the last time you heard a computer say “hmm”? The page seems to be as perplexed as the user, seemingly saying, “Wow, I can’t find it either, but I’ll try and help you find it.”
Now, it is important to keep audience in mind. You are a U of M department, so you should maintain some level of professional language. Here are some guidelines picked up from the 2008 Web 2.0 Conference…
Be authentic
Would you actually say to someone, “The server has encountered a 404 error, and can’t process your request…. blah blah blah”? Probably not.
Be engaging
Don’t just tell them you can’t find the page, try and help them find what they are looking for. This can include referencing the navigation, putting up a site map, or even giving contact info.
Be specific
What can they do to remedy the problem? Helping them find the correct page is a great way to start.
Be appropriate
Try and maintain the language of your site. Hypothetically, if you are a child care provider you might want to be “cutesy.” For example, “OOPS, we wost our page.” If you’re a federal land-grant university, you probably want to be more professional.
Be polite
The best way to do this might just be to admit fault, even if it isn’t your fault. How about “Sorry, we couldn’t find the page you were looking for.”
So what should it say?
Just be short, simple, and useful, while free of techno-jargon. So how about…
“Sorry, we couldn’t find that page. Try the navigation to find what you’re looking for. If that still doesn’t work, email us at xx@xxx.xxx and we’ll see if we can help you out.”
How do I set it up?
Easy, if you’re in the new TWIG layouts, just email the web team (probably Dan or Susan), and we can get it setup for you! We just need your words to put on the page!
Legacy sites:
- Make a folder called “error”
- In that folder make a page called 404.html.
- Put your friendly message on the page.
- Apply a Dynamic Web Template, if you have one.
- Now detach the DWT and…
- Change all relative links in your content to absolute or relative-root.
- Do not change the links to your include pages.
- Add the following ASP in the source code, it should be the first thing!
<% Response.Status = "404 Not Found" %>
Whoa… Explain steps 5, 6 and 7!
The error page will appear wherever the bogus link appears. So?
So, if the user is lost at the root level of your site or four levels deep this page will appear! Yeah, and?
Everything in your error page and every link out must be absolute, not relative… because the page will never be consistently relative to anything.
Include pages will show up to assemble the look of your page because Dreamweaver tracks those differently. Links inside an include page will not, nor will links to a style sheet or JavaScript.
Why the ASP Code in Step 8?
It ensures search engines and other systems that crawl our sites understand this is an error page. This step was added November 2014.
Absolute v. Relative Links
Absolute: http://cehd.umn.edu/Kitty/Cat/SomePage.html
- This is the full-meal-deal!
- It absolutely identifies where the page is on the Internet!
- Use this to call on pages outside of the college.
Relative Root: /Kitty/Cat/SomePage.html
- Use this to call on pages outside of your site, but still on the college server.
- The browser will fill in the first part “http://cehd.umn.edu“
- This is especially handy when you are testing on backstage!
It will fill in “http://backstage.cehd.umn.edu”
Relative: ../../Kitty/Cat/SomePage.html
- Use to link to files in your site.
- Dreamweaver will track name changes and moves like a hawk…
- Except when these links appear in an error page!
In the example above, each ../ means the page needs to go up one directory level. In the example above the link is jumping up two levels to the folder “Kitty” and then starts going down levels in the “Kitty” directory to “Cat” and then to “SomePage.html”
So Dreamweaver won’t track the relative links in the error page. Check. And a DWT is all about relative links so you want to detach that, too! It isn’t a big deal; you will only have one error page, so why bother?
Remember include pages will work! As long as links inside the pages are not… you got it! Relative!
One last step…
With the page ready to go, the cehdhelp@umn.edu folks need to make the magic happen. Cut and paste the following into an email.
Hi cehdhelp,
I have a new error page at [mysite/error/404.html]. Would you please do the voodoo so that bad URLs on my site go to my fantastic error page?
Thanks,
[Your Name]