Приглашаем посетить
Чернышевский (chernyshevskiy.lit-info.ru)

Organizing a Larger Site

Previous Page
Table of Contents
Next Page

Organizing a Larger Site

For complex sites, sophisticated layout and graphics can help organize and improve the looks of your site when used consistently throughout all of your pages. To see how you can make aesthetics and organization work hand-in-hand, let's look at a site that needs to present a large volume of information to several different audiences.

Figure 22.5 shows the main page for my personal web site at http://www.michaelmorrison.com/. I know that this seems like shameless self-promotion, but my site is actually a good example of a reasonably sophisticated site in terms of layout and organization. My site includes individual pages for more than 40 computer books, as well as magazine articles, downloadable code and games, news feeds, a blog, discussion forums, and much more. It would be impossible to include all of that information on my site without a well-planned overall web site design that is efficient and consistent.

Figure 22.5. The links on the left side of my personal web site lead to a surprising wealth of information.

Organizing a Larger Site


The first page a visitor sees should always begin by explaining what the site is about and provide enough introductory information to "hook" the intended audience. In my case, I include a quick news blurb followed by the latest blog entries on the main page. This keeps the main page fresh with content that changes frequently, thereby encouraging visitors to return to the site regularly. Granted, not every visitor is interested in knowing what the weather is like where I live, but then again, it's okay to have fun with your site and include some content just to liven things up a bit.

By the Way

My web site uses a splash page, which is an initial page that shows a title or some other introductory information, and then redirects to the main portion of the web site. Along with serving as a brief introduction, my splash page serves an important practical purpose because it allows me to keep the old version of my site online, along with a new version (the one you see in the figure). To "activate" the new version of the site, I simply changed the redirection of the splash page.


Did you Know?

One criticism you could make about my site is the lack of emphasis on benefits to the visitor. It is absolutely essentialespecially for commercial sites or any site intending to serve the needs of some audienceto make the very first words on the page explain why it would benefit a visitor to look further. Research shows that you have 3 to 5 seconds to convince visitors that your site is worth their attention before they head elsewhere, possibly never to return. Use those seconds wisely! (Hint: Is the phrase "Welcome to the Home Page of…" worth wasting two of those precious seconds on?) Of course, in my case most visitors arrive at the site from one of my books, such as this one, and therefore already have a motivation to poke around and see what's on there.


My site shown in Figure 22.5 and Figure 22.6 is organized into seven main categories (not counting Home or Administrator), accessible through the menu link icons that appear on the left side of each page. It's important to notice that these icons were chosen to quickly give visitors access to resources that meet their needs. Always organize the main links on your site according to the questions or desires of your visitors, not necessarily the structure of the information itself. For example, you can navigate to a specific discussion forum directly from the detail page on one of my books, as well as view all the forums at once by clicking Forums on the main menu. This redundancy is important because it allows visitors multiple navigation paths to arrive at information without wading through material they aren't interested in.

Figure 22.6. You get this page when you click Forums in the screen shown in Figure 22.5.

Organizing a Larger Site


Figure 22.6 is the page you would see if you clicked Forums in the screen shown in Figure 22.5. The graphics and color theme are consistent with the home page, and the menu along the left edge of the page remains consistent with the main menu (the figure shows the page scrolled a bit to reveal more of the forums). Basically the entire framework of the page is the same on all pages of the site, with the main content area in the middle being the only part of each page that changes significantly. Visitors never have to back out of a dead-end page or feel as if they've gotten lost within a messy hierarchy of unorganized pages.

By the Way

My personal web site is built using a combination of HTML, CSS, a programming language called PHP, and a database called mySQL. These technologies come together to form a software package known as a content management system. I elected to use such a system because my old site, which was pure HTML and CSS, was difficult to maintain given that I needed a great deal of interactivity with readers via discussion forums. I explain the basics of content management systems and whether or not you might consider using them for your own web sites in Hour 24, "Beyond Traditional Web Sites."


Getting back to general site design, keep in mind the following fact: Studies have repeatedly shown that people become confused and annoyed when presented with more than seven choices at a time, and people feel most comfortable with five or fewer choices. Therefore, you should avoid presenting more than five links (either in a list or as graphical icons) next to one another if at all possible, and definitely avoid presenting more than seven at once. When you need to present more than seven links in a navigation list, break them into multiple lists with a separate heading for each five to seven items.

It will also help your readers navigate your site without confusion if you avoid putting any page more than two (or at most three) links away from the home page, and always send readers back to a main category page (or the home page) after they've read a subsidiary page. In other words, try to design somewhat of a flat link structure in which most pages are no more than one or two links deep as compared to the home page. You don't want visitors to have to rely heavily on their browser's Back button to navigate through your site.

Did you Know?

Clicking Home at the top of the menu in any of the pages on my site will take the reader back to the home page (see Figure 22.5). The link uses an absolute address (http://www.michaelmorrison.com/) instead of a relative address (index.html) so that anyone who saves the page on his hard drive can still go to the online site by clicking this link. See Hour 3, "Linking to Other Web Pages," for a review of absolute and relative addresses.



Previous Page
Table of Contents
Next Page