لطفا منتظر باشید ...
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]
Figure 5.2. The Yahoo! home page.
[View full size image]
Figure 5.3. The Yahoo! search page.
( (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
(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.
(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]
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 "sitema86" 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.
Figure 5.11. A paragraph with a single inline link.
Figure 5.12. A paragraph with five inline links.
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.
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-los89 instead of something generic like page2l. (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.
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].
