One often overlooked feature of web design is the 404 Error page. This is the page that a visitor will see when a certain page or file is not found. Here’s the basic template I use to create a 404 error page:

XHTML

<h2>Page Not Found</h2>
<p>The page you requested cannot be found. The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.</p>
<h3>Please try the following</h3>
<ul class="list">
	<li>If you typed the page address in the Address bar, make sure that it is spelled correctly.</li>
	<li>Open the <a href="/index.php">www.i-nalysis.com</a> home page and look for links to the information you want.</li>
	<li>Enter a term in the search box to look for information on i-nalysis.com.</li>
	<li><a href="get-help/contact.php">Contact us</a> with your question.</li>
</ul>

Working with the .htaccess file

Once you have a 404.php or 404.html created and styled you need to tell the server to show that page when a file or page is marked as missing. To do this you need to create an .htaccess file, which is a hidden filetype. Because it is a hidden filetype it may disappear if you save it as “.htaccess” so you may need to save it as “htaccess.txt”, upload it to the server, and then rename it to “.htaccess”.

Once you have your .htaccess file setup open it with your editor of choice and add the following line:

ErrorDocument 404 /404.php

Where /404.php is the relative or absolute path to the 404 page on the server.

Suggested Improvements

A great feature I’d like to add to my 404 arsenal is a site wide search field for people to use in order to find whatever it was they were looking for that went missing. In general adding a search to a site can be a time consuming and expensive process.

One great approach to setting up a powerful site search is explained by Christian Heilmann at 24 ways. Christian’s article, Sitewide Search On A Shoe String, explains how to tap into Yahoo!’s BOSS API. BOSS is a REST API, meaning you can use it in any HTTP request or in a browser by simply adding the right parameters to a URL.

Here’s a little resource I wipped up for the Who Reps It project we’re currently designing at FTS. It’s a re-usable video tour page that runs on Vimeo.

For now it uses a sample video. Once the application is designed we’ll use a screencasting program (I prefer ScreenFlow) to create the videos. Vimeo will host the videos for us for free. Once the videos have been uploaded to vimeo all we need to do is copy and paste the embed code provided into the Video Tour page and we’re good to go.

See it in action

Here it is. A basic, XML driven flash resource that is modular and re-usable. It’s built on top of the ActionScript 2.0 provided at rabid gadfly. This allows for a smooth cross fade transition. The transition time as well as slide time can be controlled with the XML file.

• See an example
• Download the Source

Faux AJAX

Rather than use AJAX to load in separate .html files, this approach will dynamically hide all the DIV’s you link to from the specified navigation, and show them individually when you click. This will give the effect of having AJAX driven content without actually loading in a separate file. This allows your hidden content to be out of sight from users, but not from search engines.

See Example

This has approach is by no means a new one. The beauty of this small script is that it is very modular and able to accommodate any number of show / hides scenarios simple by adding a few CSS classes into your markup.

Usage

To use this approach simply include the following code snippet after including the jQuery library. If you like you can link to the Google hosted copy of jQuery as I did in the example.

• Add a class of ajax to the container of your links
• Inside the href attribute of your anchor, put the ID of the div you want to show, for example href=”#one”
• Add class=”default” onto any links that you want to be shown by default (on page load).
• When a link is clicked class=”current” will be added to that link. This will allow you to highlight the current selection.

Lately we’ve been using jQuery more often within our projects. I’ve realized that it becomes a hassle to include the jQuery library for each and every project. When jQuery updates to a newer version it also leaves legacy versions scattered thoughout our projects. As a solution we can make use of Google’s generosity and link to the AJAX Libraries API.

Google’s AJAX Libraries API is basically a fancy way of saying “we host jQuery and other popular JavaScript libraries for you to tap into”. Among the hosted libraries are dojo, mootools, script.aculo.us, prototype, jQuery and even jQuery UI.

This allows us to link directly to a centrally hosted copy of the latest version of jQuery. The hosted version is also compressed and minified for a smaller file size.

If enough people begin to link to the hosted libraries on Google, then there’s a possiblity that your users already have local copy of a JavaScript library cached on their system. This means may decrease the amount of time it takes to load your page.

To load in jQuery hosted by Google you can add the following <script> tag to your document’s <head> section.

XHTML

1

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

There are obvious benefits and worries to this approach. For now, I like the idea because it allows me to get started on a jQuery project right away, without having to bring over a new copy.

In the mean time, let’s hope Google doesn’t go down. But we write our JavaScript to degrade gracefully now don’t we, so what’s the point in worrying about something like that.

Related Links

• Google Code: AJAX Libraries API
• jQuery hosted on Google and some implications for developers

Simply put, every web developer must deal with browser inconsistency’s. Fortunately CSS hacks are very much a thing of the past, and there are better solutions to cross browser compatibility. My method of choice is Internet Explorer’s conditional comments. These allow for the separation of Explorer specific code from “valid” code.

XHTML

1

<!--[if IE]><link rel="stylesheet" href="css/ie.css" /><![endif]-->

CSS (ie.css)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/* General ------------------------------------*/
.clearfix
{
    zoom:1;
}
/* IE6 ----------------------------------------*/
* html body
{
	background:red;
}
/* IE7 ----------------------------------------*/
div > p
{
	background:blue;
}

How it works

Conditional comments only work in Internet Explorer. This allows us to give special instructions for only Explorer. They are supported from Explorer 5 onwards, and it is even possible to distinguish between 5.0, 5.5 and 6.0.

Related Links

• Quirksmode.org — Conditional comments
• MSDN — About Conditional Comments

First Published: Mass High Tech: The Journal of New England Technology – March 2, 2007.

If In our broadband-fueled, socially networked world, trends matter more than ever. Some come and go like the tides, while others fundamentally change the way business and culture behave forever. If you’re still wondering what will catch hold this year — and if you’re still wondering whether Web 2.0 really is just a trend — you’re not alone. This week we are going to discuss the emerging consumer trends to watch this year.

Read more

First Published: Mass High Tech: The Journal of New England Technology – January 19, 2007.

Last week, we looked at the lack of good business reasons to start a web design studio and how to bootstrap your startup through clean invoicing and clear evaluation of your time and talents. After all, competition is stiffer than ever, the hours are long, and yet, everywhere I turn, there are new studios opening shop. This week, we look at sales and marketing, and why you have to be more than just a good CSS junkie: You must be good at business if you want to stay in business.

Read more

First Published: Mass High Tech: The Journal of New England Technology – January 12, 2007.

There are really no good business reasons to start a web design studio. Competition is stiffer than ever, the hours are long, the pay is generally mediocre and, as web commentator Robin Miller’s ‘Build Profits Online’ upcoming book points out, clients can be a real pain in the neck. A design team in India or Croatia or South Africa can design a website in half the time and a quarter of the cost, so why even bother? Offshore competition isn’t the only thing new studios have to worry about. Designers can be their own worst enemies. Most of the new shops will never evolve beyond doing websites for their cousin’s single-shingle legal practice and the local church fund-raiser because they will be so badly managed. Internal problems will still be the biggest enemy of success for any new studio.

Read more

Recently, my fiancé and I were milling around the Ikea in Stoughton, MA (a pleasant day for a designer), when I noticed an unusual sign hanging from one of the showroom rafters. The message on the sign was something to the affect of ‘Our designers begin with a price and design backwards from there, giving you the most value for your money.’ I immediately began visualizing the process and imagining the types of decision a designer would make differently with such restrictions. I also remembered the famous design mantra “restriction makes great designs” so I also asked myself – what other ways can design restrictions actually improve products?

Read more