Read an Excerpt
Planning and Organizing Your Web SiteIt used to take hours to create a Web page, and the developer had to have a broad knowledge of various Web languages beyond Hypertext Markup Language (HTML) in order to create a successful site. Using FrontPage, you can create a simple site or a complex site with very little effort, and you don't need to have any prior knowledge of HTML or any other Web language to use FrontPage; while you create the site and maintain it, FrontPage does all the tedious HTML coding for you.
Proper planning and organization are critical when you create a Web site. While FrontPage makes it easy to organize a site, there is still a great deal of preparation that goes into making a Web site successful. This module will help you create a well-planned Web site using FrontPage's management tools.
Planning a Web SiteWhen you create a Web site, you are creating it for a purpose. The purposes of Web sites vary greatly: to inform, entertain, sell products, promote brands, and more. Often times, the purpose of a site is expressed through its design and content.
For you to understand better how a site's purpose affects the layout and content, we will compare the differences between two Web sites. Notice the differences between their design and content. Figure 2-1 shows the home page of Jakob Nielsen's useit.com Web site. Jakob Nielsen has long been one of the leaders in promoting usability on the World Wide Web. The purpose of his site is to share information about himself, his work, and World Wide Web usability.
Figure 2-2 reveals the home page of shockwave.com. Notice the stark contrast between the home pages in Figures 2-1 and 2-2. You can see that the shockwave.com site is mainly for interactive entertainment. This site features cartoons, shows, games, music, and more. In contrast to useit.com's simple colors and layout, shockwave.com uses more colors and images to promote their shows, games, and more. The navigation of the two sites varies also. useit.com has a simple navigation system that comprises of text links, while shockwave.com's navigation uses images and text to aid in navigation. Notice that the links for the main portions of the shockwave.com site are placed on the top of the page.
Before creating your site, it is important to know who your target audience is. You should know who it is that will be inclined to visit your site, and you should always keep them in mind while developing your site. The following are examples of potential audiences:
- People who might be interested in a product you sell
- People who want to know more about a particular topic
- Users of a specific product
Though FrontPage makes it easy to create a site, you need to do some planning before you start, or you may waste a lot of time. Consider issues such as the number of pages, the basic site structure, and the page content. A lot of people plan a Web site exactly right, but continue to add things after the initial design is set. This results in scope creep: creating and re-creating a site before it's finished because of a new idea or design. Because the Internet gives you the ability to update regularly, it is best to complete your Web site and update it gradually as feedback and opinions from people pour in. Most sites are updated frequently to keep the content fresh and engaging to visitors, and any minor design modifications can be made then. Sites that get updated often attract not only new visitors, but also existing visitors who will visit the site often to see what is new.
A great way to find out about the appeal and functionality of your site is to ask people you know to take a look at it and give you their feedback. Often, the comments provided by them will give you valuable insight into what you are doing correctly and incorrectly. While it may take some time to gather the opinions and incorporate the modifications, it is well worth the time and effort.
Understanding DesignOne of the most difficult skills to acquire is design. While it is not imperative that you have extensive knowledge in design, a bit of knowledge can help you in creating your site and attracting visitors. There is always a balance between information on the site and the site's overall design. A good site should feature a complimentary combination of design and information. With experience, it is possible to create a site that combines great design with great information. This section will briefly introduce you to some key design elements and give you tips on using good design techniques in your site.
TypographyTypography is the text and style of text that you present to your visitors. The style of text you use throughout your site sets the atmosphere of what your site is about. Make sure that the type of font, font colors, and font size suit your site's purpose. Many users do not read a lot of text while visiting a Web site, but they do scan for things they might find useful, so make key phrases or words stand out. The following tips will help you to use typography to your benefit in your Web site:
- Do not overwhelm your visitors with large chunks of text. Instead, break large pieces of text into smaller paragraphs.
- Do not use extremely large fonts in your site's body text; likewise, do not use fonts that are too small. Fonts that are too large or too small make it hard for the reader to follow the text on the page.
- Try to use fonts that are suited for reading. Some of the more artistic fonts are distracting and make reading very difficult. While there are thousands of fonts available, most of them fall into a few categories. The two more common categories are serif and sans serif. Times New Roman and Garamond are examples of serif fonts, and Helvetica and Avant Garde are examples of a sans serif fonts. Note the extra design elements on the ends of the letters in the Times New Roman and Garamond fonts. These extra design elements are called "serifs"; therefore, because Helvetica and Avant Garde do not have these extra design elements, they are "sans serif' (sans means "without" in French). When you have a large block of text, it is commonly recognized that serif fonts are easier to read than sans serif fonts. Make the text contrast with the background. It is much easier for the eye to follow text that contrasts with the background.
- The following are good resources for information on typography:
- Yale Style Guide http://info.med.yale.edu/caini/manual/pages/ typography.html
- Microsoft Typography http://www.microsoft.conVtypography/ default.asp
- Adobe Type Topics http://www.adobe.com/type/topics/main.html
ColorOne of the most important aspects of planning a site is determining what type of a color scheme to use. While FrontPage comes with several predefined themes that offer a wide assortment of great color schemes, you may want to choose your own color combination that will suit your site. The colors of a site can reflect the nature of the site: flashy colors can be used for the promotion of products, while more subtle colors can be used for a site that is informative. Here are some tips that can help you to use color effectively on your site:
- Use color to enhance your message, but try not to use color in a way that takes away from the message.
- If you are adding color to the text or a text background, make sure that the text is still legible. The lack of contrast between colors can make text hard to read.
- Try not to use colors that are too bright or hard on the eyes. Neon text usually annoys visitors.
- As an alternative to colored text and backgrounds, many people use images in their place. Instead of having a text link, you could use an image. Instead of using a single background color, you can create a repeating background pattern. For more information regarding images, please refer to Module 4.
A great way to learn about color is to check out other Web sites that use color well. A Web site that has numerous links to sites that use color and design well is http://www.coolhomepages.com/.
Another important area of your site is the layout. Layout is how information and other elements on your site are organized. The following guidelines will help you with layout:
- Try not to have your site be cluttered with information. Use space to your benefit. Having too much information on one page can actually dissuade people from reading the site.
- Test to see how your site looks on smaller monitors. Different-sized monitors provide different results.
- Try to keep the site's layout effective at all monitor resolutions. The most popular resolutions are 640 x 480 pixels, 800 x 600 pixels, and 1024 x 768 pixels.
- Because your home page is the primary entry to your site, the home page should give your visitors a sense of what your site a is about without them having to scroll excessively. Key topics and features should immediately stand out once the page has been loaded.
Ifa page fills the whole screen of a browser that is running at a 1024 x 768-pixel monitor resolution, more than likely, users who have monitor resolutions of 640 x 480 pixels and 800 x 600 pixels will have to scroll horizontally.
Figures 2-3 and 2-4 show the same Web site at a 640 x 480-pixel resolution and an 800 x 600-pixel resolution. Notice how the page conforms to the size of the browser and that there are no horizontal scrollbars. ...