Thinking About Design

Claude had a question. "When you say 'design,' do you mean what the site looks like?" he asked.

"Yes," I answered. "What it looks like and how it's usedthe layout and the navigation."

"Layout I understand," Anita said, "but what do you mean by navigation?"

"How you move from page to page within the site," I explained, pointing to a Web page I had up on the monitor. "How you find your bearings within the site. Links, menus, site mapsall that stuff."

Claude was unimpressed. "Surely it's not that hard to do. Can't you just copy someone else's design?"

"Site design can be very hard if you do it from scratch," I said. "You can spend days thinking about and preparing your site. In fact, you can waste a lot of time on the smallest detailstrust me, I've done it!

But none of us are professional designers. So yes, Claude, you want to look at what other sites have done and do something similar, though you don't literally copy them."

"You can also buy books about Web design and learn from them," Stef said. "My friend has a few of those."

"Absolutelythere's nothing wrong with a good book!" I continued. "I have some I can lend if you're interested, but you can learn a lot just by looking at other sites."

Claude was eager to take me up on the offer. "Do you have a book that shows you how to add blinking text to your site?" he asked.

Now I knew who was going to need the most help! "You know, blinking text isn't a great thing to add to a Web site, Claude," I said gently. "In fact, as a nonprofessional you want to avoid getting too fancy, otherwise your site will look cluttered and confuse your visitors. Better to keep things simple. I'll show you what I mean shortly, but first let's talk about the important parts of a Web site and what kinds of things you need on your pages."

The Components of a Web Site

I turned to the computer and opened a new browser window. "As you can see," I began, "my browser automatically loads the Google search page www.google.com when it starts." They all looked at the big monitor while I was talking (Figure 5.1). "This is Google's home page. The home page is the Web site's main page, the one that shows up when you enter the site's address in the browser. Every site has a home page."

Figure 5.1. The Google home page.

[View full size image]

"It's very simple," Anita said. "I like it a lot."

"Now let's contrast it with Yahoo!'s home page," I said, opening www.yahoo.com (Figure 5.2) in a second browser.

Figure 5.2. The Yahoo! home page.

[View full size image]

"It's a lot busier," Anita said.

Portals

Yahoo!'s home page is called a portal because it offers a variety of Web-related services and links to other sites from one convenient page.

"That's because Google's main focus is its search engine," I explained, "while Yahoo! has a number of businesses to promote. If all you're interested in is searching the Web, Yahoo! has its own search page that is very similar to Google's home page." I had the browser display the Yahoo! search page found at search.yahoo.com (Figure 5.3).

Figure 5.3. The Yahoo! search page.

[View full size image]

Design Help

Many sites offer to help you design a home page, including www.homestead.com, www.TicTacWebsites.com, and www.SiteRightNow.com.

Stef spoke up. "That does look pretty similar!"

I closed the second browser and moved back to the Google home page. "Designing your home page is probably one of the hardest things you'll do," I continued, "because a visitor needs to be able to tell at a glance what the site is about and how to navigate through it. I'm sure you've all come across sites that had hard-to-use home pages."

"Yeah," Claude said, "sometimes they're so confusing I just hit the Back button and move to another site."

"Many sites try to pack too much information on their home page," I agreed. "If you're a big portal like Yahoo! it makes sensethat's really what a portal is, after allbut most sites aren't in that category. Google's minimalist approach is the other extreme. Your site will fall somewhere in the middle."

"So how do you find other pages on the Google site?" Stef asked, pointing to Google's home page.

"You click on the About Google link at the bottom," I said, as I clicked the link. "This brings you to a much busier page." The browser was now displaying the page www.google.com/about.html (Figure 5.4). "This is a site map page. A site map is basically a categorized listing of the site's important pages. It's a navigational aid that visitors can turn to when they don't know where to find something. Not every site needs a site map, but it really helps if you're doing the minimalist approach. The Google page you're looking at is a very basic site map. Oddly enough, Google has a bigger site map that has no link from its home page, though other pages within Google's Web site refer to it." Typing the address www.google.com/sitemap.html (Figure 5.5) directly into the browser brought up the comprehensive site map.

Figure 5.4. Googleite map.

[View full size image]

Figure 5.5. Google's comprehensive site map

[View full size image]

"What about other page types?" Stef asked again.

"There are no real standards beyond having a home page," I answered, "so it really depends on what kind of site you're building. But there are some common types." I switched the browser to Google's corporate information page, www.google.com/corporate/index.html (Figure 5.6). "These are Google's about pages, which describe the company itself. It's a good idea to have a page that describes what your site is about and how to contact you if there are problems or questions. Another good idea is to include a search page to let users find things on the site." I showed them a search page I had developed for one of my sites (Figure 5.7). "Google makes it so easy, because as an AdSense publisher you just need to sign up for AdSense for search and put the search code Google generates onto a separate page."

Figure 5.6. Google's corporate information page.

[View full size image]

Figure 5.7. A sample search page.

[View full size image]

"Or right on each page," Claude interjected.

"Yes, if you don't mind losing some screen real estate," I agreed. "Either way works. The important thing is that you have a search facility. Plus, using Adsense for search means you'll probably make some revenueit's not usually very muchfrom the searching itself."

"Every little bit helps!" Claude said happily, and I nodded in agreement.

"Beyond those basic pages," I continued, "there are no real rules. It all depends on the kind of site you're building. Some sites include a what's new page describing major changes in reverse chronological order, like the one on my personal site." Again I switched the browser, this time to www.ericgiguere.com/whatsnew.html (Figure 5.8). "Of course, a blog doesn't need a separate page for thisit's implicit in the blog itself."

Figure 5.8. A sample what's new page

[View full size image]

Anita spoke up. "What about other ways to navigate the site?" she asked. "I don't use site maps and search pages very much."

"That's a very good question," I answered, "and that brings us to our next topic." All three of them turned away from the monitor and listened carefully as I described how site navigation works.

Nav Tools Needed

Good site navigation tools are especially useful for visitors who arrive at your site directly from a search engine results page and never even see your home page.

Site Navigation

A key Web concept is the ability to jump from page to page using links. At its simplest, site navigation refers to the links that let visitors move from page to page within your site. But there's more to it than that: It's about making it easy for visitors to find what they're looking for on the site.

Landing Pages A landing page is any page on your site with a link from another site. Visitors "land" on your site by following those links. The home page is an obvious landing page. Once your site is found by a search engine, though, almost every page becomes a landing page, so good navigational aids are essential on all pages. Whatever you do, don't trap visitors on your site by disabling the browser's Back button or otherwise interfering with their browsing. Besides violating AdSense terms of service, such techniques almost ensure that visitors never come back once they manage to get away from your site.

Let's start with the links. Every page on your site should include links to these pages:

• Home page. Since the home page is the official starting page, make it easy to find with a link called "Home" or "Main Page." Or name it after the site's domain name. (Your site's logo, if you have one, should also link to the home page.)

• About page. First-time visitors often want to know more about the site and the people or organization behind it. The about page is also the ideal place to put contact information like email addresses.

  AdSense Search Box

  If you're using AdSense for search as your search facility, you'll have to wait until you're accepted into the AdSense program to add the search box, but you can still create the search page and link to it from the other pages.

  
  

• Search page. Even the most well-organized site benefits from a good search facility, so don't bury it away somewhere. Search boxes can even be placed directly on individual pages for added ease of use.

• Site map page. The site map gives visitors another way to quickly grasp what your site is about and what it has to offer.

Not only do these links entice visitors to stay, they also make the site look fuller and more professional. Creating these pages is an easy way to test and flesh out the initial look and feel of the site without worrying too much about the content. They'll also improve your chances of being accepted into the AdSense program. Most blogs provide these kinds of pages and links automatically, of course, though they may refer to them by different names.

Search Engines Love Site Maps Not only are site maps great resources for human visitors, they also let search engines like Google find all the important pages on the site, whether or not the home page links to them. Just make sure the home page links to the site map, and call it "sitemap.html" or some variation thereof so that humans and computers recognize it for what it is. Above all else, though, be sure to update the site map as you add or remove pages to your site!

Your site's pages must also link to each other in predictable ways:

• The first part of an article should link to later parts, and vice versa.

  Use Descriptive Links

  Strive to be as descriptive as possible with your links. Avoid redundant and generic phrases like "Click here" or "Click for more information," and describe what the target page is about (for instance, "Click to see a map of the campus").

  
  

• Long, multipage documents need a separate page for the table of contents.

• If you group pages into sections, there should be a main page for each section that links to each page in the section, and each section page should link back to the main page.

• Related pages should be linked together as well, whether or not they're in the same group.

Note that links can be added to a page at any time, so remember to add or update links as the site changes.

Links can be grouped together. A navigation bar lets the visitor quickly navigate the Web site without referring to the full site map. Horizontal navigation bars are usually found at the top (Figure 5.9) of the page, while vertical ones are normally found to the left of the page content (Figure 5.10).

Figure 5.9. A horizontal navigation bar.

[View full size image]

Figure 5.10. A vertical navigation bar.

Navigation links are often separate from the page content. Links in the content (inline links) must be used sparingly, because having many links makes the text harder to read, especially when links are underlined in the traditional manner. Compare a paragraph with a single link in it (Figure 5.11) to one with five inline links (Figure 5.12). Too many links too close together is just too confusing!

Figure 5.11. A paragraph with a single inline link.

Figure 5.12. A paragraph with five inline links.

Note that site navigation is built around internal linkslinks to other pages on the same site. External linkslinks to other sitesare also important, but they're not involved in site navigation.

Providing Context

Navigational aids work best if visitors have some sense of where they are when they visit your Web site. This is especially true for visitors who arrive at your site without seeing your home page. Providing them with context encourages them to explore your site in more detail.

Context is provided in a number of different ways. These are all small things, but together they provide important navigational clues for your visitors:

• Title. How many times have you come across an untitled page like the one shown in Figure 5.13? Every page on your site needs a title that accurately and concisely describes the page content. And remember that the title is one of the things AdSense uses to determine the page's topic, so include keywords in the title.

  Figure 5.13. An untitled page.

  

  
  

  Keywords

  Since they're also used by AdSense to determine the page's topic, include keywords in headings whenever possible.

  
  

  First Sentence Is Key

  The first sentence of a page is especially important, as it is used by search engines to describe the page unless you provide an alternate description.

  
  

• Page name. Like the title, the name of the page (the last part of the page's Web address) should be descriptive. For example, use about-weight-loss.html instead of something generic like page2.html. (The page name is also used by AdSense.) Page names should consist of numbers and lower case letters only, although you can separate keywords with hyphens.

• Headings. Headings should also be descriptive. The main heading should match or be similar to the page title, though it can be longer. Be consistent with your capitalization.

• Summary. For long pages, the first sentence or paragraph of body text on the page (that is, text that is not a heading) should summarize the rest of the page so the reader knows at a glance what the page is about.

• Locator. A locator shows the path to a page (Figure 5.14). It's often just a single line of links separated by arrow characters (>). Locators are useful when pages are grouped together in sections: Visitors can quickly move to other pages in the path by clicking on parts of the locator. (Some sites like to include path information in the title as well, as in "About DiabetesArticles," but this doesn't replace the locator.)

  Figure 5.14. A locator shows the path to a page.

  

  
  

  Nav Bar Highlighting

  If you use a navigation bar, be sure to highlight the appropriate part of the bar as an additional clue.

  
  

• Site name. Repeat the name of the Web site (dropping the initial www) on the page somewhere to reinforce your site's "brand," especially if you're using a name that reads better in mixed case. For example, MakeEasyMoneyWithGoogle.com instead of www.makeeasymoneywithgoogle.com, or VoIP-at-home.com instead of www.voip-at-home.com.