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 SiteI 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. "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. "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. 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. Figure 5.5. Google's comprehensive site map "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. Figure 5.7. A sample search page. "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 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 NavigationA 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.
Let's start with the links. Every page on your site should include links to these pages:
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.
Your site's pages must also link to each other in predictable ways:
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. 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 ContextNavigational 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:
|
EAN: 2147483647
Pages: 96