Organizing a Simple Site

Organizing a Simple Site

Although single-page sites have their place, most companies and individuals serve their readers better by dividing their site into short, quick-read pages with graphical navigation icons to move between the pages. That way, the entire site doesn't have to be downloaded by someone seeking specific information. Furthermore, it minimizes having to scroll around a bunch on the page, which can be especially bothersome for people who are using mobile devices to view the site, or who have relatively low-resolution monitors (less than 800x600).

The goal of the home page shown in Figure 22.3, like the goal of many web sites today, is simply to make the organization "visible" on the Internet. Many people today immediately turn to the World Wide Web when they want to find out about an organization, or find out whether a particular type of organization exists at all. A simple home page should state enough information that someone can tell whether she wants to find out more. It should then provide both traditional address and telephone contact information and an electronic mail address, either directly on the home page or via a prominent link (like the About Us button in the upper-right corner of the page in Figure 22.3).

Figure 22.3. This small-business home page uses distinctive graphics and no-nonsense text to quickly convey the intended mood and purpose.

One of the most common mistakes beginning web site developers make is having each page on the site look different than the one before. Another equally serious mistake is using the same, publicly available clip art that thousands of other web authors are also using. Remember that on the Internet, one click can take you around the world. The only way to make your pages memorable and recognizable as a cohesive site is to make all your pages adhere to a unique, unmistakable visual theme. In other words, strive for uniqueness as compared to other web sites, yet uniformity within the site itself.

Did you Know? Regardless of how large your site is, it's a good idea to carefully organize your resources. For example, I always place the images for my web pages in a separate folder named images. Similarly, if you have files that are available for download, you could place them in a folder called downloads. This makes it much easier to keep track of web page resources based on their particular type (HTML page, GIF image, and so on). In the image example, you would refer to images in the images folder like this: <img src="images\myimage.gif" alt="" />

As an example of how uniformity can help make a site more cohesive, take a look at what happens when someone clicks the About Us link in Figure 22.3. The user is taken to the page shown in Figure 22.4, which has a very similar feel to the previous page. The visual reiteration of the link as a title and the repetition of the background, logo, and link graphics all make it immediately obvious that this page is part of the same site as the other page. (Reusing as many graphics from the home page as possible also speeds display because these images are already cached by the web browser on the visitor's computer.) Another helpful little detail on this page is the highlighting of the About Us menu icon near the upper-left of the pagea small pointer is aimed at the About Us selection. (If you would like to view this site online, go to http://www.tallent.com/.)

Figure 22.4. Clicking About Us in the screen shown in Figure 22.3 takes you here. The graphical theme makes it instantly clear that this is part of the same site.

By the Way Although I'm using the tallent.com web site as an example of a "simple" site, in reality it is a surprisingly thorough site for a web consulting company. In some ways this makes the site an even better example because it maintains a simplistic feel while presenting a considerable amount of information. We should all set a goal of creating a "simple" web site no matter how much information we have to share.

By the Way It's worth clarifying that the tallent.com sample web site uses Flash, which is an animation technology that allows you to carry out some very interesting visual effects that aren't possible with HTML and CSS. Flash is a bit beyond the scope of this book, and its usage in the sample site really has no bearing on the style and uniformity of the pages themselves, which is the point of this discussion. The tallent.com developers could have foregone some of the fancy interactive animations and achieved the same look and feel purely with HTML and CSS. In fact, some users prefer such a simplified browsing experience.

Did you Know? The page shown in Figure 22.4 avoids another common disease that beginning web authors too often catch; I call it the "construction site" syndrome. If you've looked around the Internet very much, I'm sure you're as sick as I am of cute little road worker icons and dead-end pages that say nothing but Under Construction. Remember that when you put your pages on the Internet, you are publishing them just as surely as if a print shop was running off 10,000 copies. No publisher would ever annoy readers by printing a brochure, book, or newspaper with useless pages saying only "Under Construction." Don't annoy your readers either: If a page isn't ready to go online, don't put it online until it is ready, and don't put any links to it on your other pages yet. Don't be afraid to start simple and add depth to your site only as you get it ready.