Designing a Web Site

You can borrow some of the design principles from designing displays when you design a Web site. Remember, though, that the key word here is site. The first documents displayed on the Internet using the http protocol were called home pages, but it became apparent very quickly that companies, universities, governments, and people were not going to be displaying just one page. The term Web site replaced home page, indicating that the array of pages would have to be organized, coordinated, designed, developed, and maintained in an orderly process.

Printing is a highly controlled medium, and the analyst has a very good idea of what the output will look like. GUI and character-based (CHUI, character-based user interface) screens are also highly controlled. The Web, however, is a very uncontrolled environment for output.

Different browsers display images differently, and screen resolution has a large impact on the look and feel of a Web site. The standard resolutions are 1024  768 pixels or 1600  1200 pixels. The issue is further complicated by the use of handheld devices, such as mobile phones, that are used to browse the Web. The complexity deepens when you realize that each person may set a browser to use different fonts and may disable the use of JavaScript, cookies, and other Web programming elements. Analysts and users face many decisions when designing a Web site.

In addition to the general design elements discussed earlier in this chapter, there are specific guidelines appropriate for the design of professional-quality Web sites. Web terms are defined in the table illustrated below

General Guidelines for Designing Web Sites

There are many tools as well as examples that can guide you in designing Web sites.

USE PROFESSIONAL TOOLS. Use software called a Web editor such as Adobe Dreamweaver or Microsoft Expression Web. These tools are definitely worth the price. You will be more creative and you’ll get the Web site finished much faster than working directly with HTML (hypertext markup language).

STUDY OTHER WEB SITES. Look at Web sites you and other users think are engaging. Analyze what design elements are being used and see how they are functioning, then try to emulate what you see by creating prototype pages. (It is not ethical or legal to cut and paste pictures or code, but you still can learn from the other sites.)

Firefox, which is part of the open source software movement, is a useful browser for studying other Web sites. It has a number of extensions created by third-party developers that are available as free downloads. Run Firefox and click “Tools/Extensions” and “Get More Extensions.” There are pages of extensions, but one called Web Developer is very useful to designers and Webmasters. It allows the analyst to outline tables and styles and to view JavaScript and cookies; it provides form information as well as a wealth of other useful items from which to choose. Palette Grabber is another extension that allows Web developers to see a display of color codes just by picking any color on a Web site. There are also tools for working with XML.

USE THE RESOURCES THAT THE WEB HAS TO OFFER. Look at Web sites that give hints on design. One such site is useit.com.

EXAMINE THE WEB SITES OF PROFESSIONAL DESIGNERS. As you look at professionally designed pages, ask yourself, “What works? What doesn’t work? In what ways can users interact with the site?” For example, does the site have hot links to email addresses, interactive forms to fill in, consumer surveys, games, quizzes, chat rooms, and so on? What about color schemes and pervasive metaphors?

USE THE TOOLS YOU’VE LEARNED. Figure below provides a form that has been used successfully by Web designers to evaluate Web pages systematically. You might want to use copies of the form to help you compare and contrast the many Web sites you will visit as you go about learning Web page design.

CONSULT THE BOOKS. Something that can add to your expertise in this new field is to read about Web design.

LOOK AT SOME POOR EXAMPLES OF WEB PAGES, TOO. Critique poor Web pages and remember to avoid those mistakes. Examine the Web site found at www.webpagesthatsuck.com. Despite its “counterculture” name, this is a wonderful site that provides links to many poorly designed sites, and points out the errors that designers have made on them.

CREATE TEMPLATES OF YOUR OWN. If you adopt a standard-looking page for most of the pages you create, you’ll get the Web site up and running quickly and it will consistently look good. Web sites may be made using cascading style sheets (CSS) that allow the designer to specify the color, font size, font type, and many other attributes only once. These attributes are stored in a style sheet file and then are applied to many Web pages. If a designer changes a specification in the style sheet file, all the Web pages using that style sheet will be updated to reflect the new style.

USE PLUG-INS, AUDIO, AND VIDEO VERY SPARINGLY. It is wonderful to have features that the professional pages have, but remember that everyone looking at your site doesn’t have every new plug-in. Don’t discourage visitors to your page.

PLAN AHEAD. Good Web sites are well thought out. Pay attention to the following:

1. Structure.
2. Content.
3. Text.
4. Graphics.
5. Presentation style.
6. Navigation.
7. Promotion.

Structure – Planning the structure of a Web site is one of the most important steps in developing a professional Web site. Think about your goals and objectives. Each page in the overall Web structure should have a distinct message or other related information. Sometimes it is useful to examine professional sites to analyze them for content and features.

To help plan and maintain a solid structure, a Webmaster can benefit from using one of the many Web site diagramming and mapping tools available. Many software packages, including Microsoft Visio, have Web charting options built into the software. Although helpful for development, these tools become even more important when maintaining a Web site. Given the dynamic nature of the Web, sites that are linked to your site may move at any time, requiring you or your Webmaster to update the links.

In the figure below, a map of a section of the authors’ Web site is shown in the Microsoft Visio window. In this example, we explore the Web site down to all the existing levels. Notice the links to HTML pages, documents, images (GIF or JPEG files), and mail-tos (a way to send email to a designated person). The links can be either internal or external. If a link is broken, a red X appears and the analyst can investigate further. This Visio file can be printed out in sections and posted on the wall to get an overall picture of the Web site.

Content – Provide something important to Web site users. Exciting animation, movies, and sounds are fun, but you have to include appropriate content to keep the user interested. Supply some timely advice, important information, a free offer, or any activity that you can provide that is interactive and moves users away from a browsing mode and into an interactive one. “Stickiness” is a quality a Web site can possess. If a user stays at your site for a long period of time, your site has a high degree of stickiness. That is why a merchant includes many items of interest on a site.

Use a metaphor or images that provide a metaphor for your site. You can use a theme, such as a storefront, with additional pages having various metaphors related to the storefront, such as a deli. Avoid the overuse of cartoons, and don’t be repetitive.

Every Web site should include an FAQ (Frequently Asked Questions) page. Often these are created based on the experiences of users and technical support people who identify the topics of continuing concern. Eighty percent of the questions will fall into the FAQ category. By having answers readily available, 24 hours a day, you will save valuable employee time and also save user time. FAQ pages also demonstrate to users of your site that you are in concert with them and have a good idea of what they would like to know.

On the Web, COTS software takes on another meaning. A Web site may take advantage of prewritten software. Examples include search engines (such as Google), mapping software (such as MapQuest), weather information, and news and stock tickers. Web site designers value these packages because they can increase the functionality of the site, and the additional features encourage users to bookmark their clients’ Web sites because they provide valuable bonus content.

Text – Remember that text is important, too. Each Web page should have a title. Place meaningful words in the first sentence appearing on your Web page. Let people know that they have indeed navigated to the right Web site. Clear writing is especially important.

Graphics – The following list provides details about creating effective graphics for Web sites:

1. Use one of the most commonly used image formats, JPEG or GIF. JPEGs are best for photographs, and GIFs are best for artwork images. GIFs are limited to 256 colors but may include a transparent background, pixels that allow the background to show through the GIF image. GIF images may also be interlaced, meaning that the Web browser will show the image in successive stages, presenting a clearer image with each stage.
2. Keep the background simple and make sure users can read the text clearly. When using a background pattern, make sure that you can see the text clearly on top of it.
3. Create a few professional-looking graphics for use on your pages.
4. Keep graphic images small, and reuse bullet or navigational buttons such as BACK, TOP, EMAIL, and NEXT. These images are stored in a cache, an area on the browsing computer’s hard drive. Once an image has been received, it will be taken from the cache whenever it is used again. Using cached images improves the speed with which a browser can load a Web page.
5. Include text in what is called a title attribute for images and image hot spots. The text displays when the user moves the mouse over the image. An alt attribute provides text for screen readers and is essential to support Web accessibility for visually impaired site visitors.
6. Examine your Web site on a variety of displays and screen resolutions. Scenes and text that look great on a high-end video display may not look good to others with poorer-quality equipment.

Presentation Style –  The following list gives added details about how to design engaging entry displays for Web sites:

1. Provide an entry display (also called a home page) that introduces the visitor to the Web site. The page must be designed to load quickly. A useful rule of thumb is to design a page that will load in 14 seconds. (Although you may be designing the page on a workstation at the university, a visitor to your Web site may be accessing it from home.) This entry display should be 100 kilobytes or less, including all graphics. The entry page should contain a number of choices, much like a menu. An easy way to accomplish that is to design a set of links or buttons and position them on the left side or the top of the screen. These links can be linked to other pages on the same Web site or linked to different Web sites. A specialized text menu may be included in a smaller font at the top or bottom of the page.
2. Keep the number of graphics to a reasonable minimum. It takes additional download time to transfer a graphics-intensive site.
3. Use large and colorful fonts for headings.
4. Use interesting images and buttons for links. A group of images combined into a single image is called an image map, which contains various hot spots that act as links to other pages.
5. Use cascading style sheets (CSS) to control the formatting and layout of the Web page. CSS separates the content (the text and images) from how they look (the presentation). Cascading style sheets are commonly stored in a file external to the Web page, and one style sheet may control the formatting of many pages. An advantage of using external style sheets is making a change in the style sheet; for example, changing the color of bold text will change the formatting of all the Web pages that use the style sheet. Cascading style sheets may also be used in a single Web page, and any duplicate styles will override an external style sheet if one is used. This allows the designer to vary from the standard look and feel of a Web site, perhaps for a “special sale” Web page or some other exception. Styles may be added to individual items on a Web page, overriding any other style sheets.
6. Use divisions and cascading styles or tables to enhance a layout. Tables are easy to use and provide adequate layout. However, tables are not well suited for visually impaired visitors. Screen reading software reads across the page, not necessarily in a table column. Divisions control the layout by providing blocks of text on the Web page. Each block may be defined with a position from the top and left of the screen or a larger block, and it may have a width and height, as well as border style and background color. Divisions eliminate the need for tables within tables and simplify design; screen reading software will read all the text in the division, making the site accessible for visually impaired viewers.
7. Use the same graphics image on several Web pages. Consistency will be improved, and the pages will load more quickly because the computer stores the image in a cache and doesn’t have to load it again.
8. Use JavaScript to enhance the Web page layout by having images that change when a mouse is moved over them, having menus expand, and so on. JavaScript may be used to reformat the Web page based on the height and width of the screen. If the Web site is multinational, JavaScript can detect the language being used (a browser setting) and redirect the viewer to a different Web page in a different language.
9. Avoid overusing animation, sound, and other elements.

Navigation – Is it fun for you to follow links on the Web? The answer most likely is that it depends. When you discover a Web site that loads easily, has meaningful links, and allows you to easily return to the places you want to go back to, then chances are you think it is fun. Fun is not just play; it can be an important part of work too. Recent research shows that fun can have a powerful effect on making computer training effective.

If, on the other hand, you can’t decide which button or hot spot to push, and you are afraid to choose the wrong one because you might get into the wrong page that takes a long time to load, navigation is more painful than fun. An example is visiting a software company’s page to find information about the features of the latest version of a product. You have choices such as products, download, FAQ, and tech support. Which button will lead to the answers you’re looking for?

Most importantly, observe the three-clicks rule. Users should be able to move from the page they are currently on to the page containing the information they want in three clicks of the mouse button.

Promotion – Promote your site. Don’t assume that search engines will find you right away. Submit your site every few months to various search engines. Include keywords, called metatags, that search engines will use to link search requests to your site. General information about metatags, may be found at searchenginewatch.com/showPage.html?page=2167931. Free metatag generating software may be downloaded at www.siteup.com/meta.html, and a metatag builder may be found at vancouver-webpages.com/META/mk-metas.html. You can also purchase software to make this process easier. If you try to use email to promote your site, others will consider it junk email or spam.

Encourage your readers to bookmark your Web site. If you link to and suggest that they go to affiliated Web sites that feature the “best movie review page in the world” or to the “get music for free” Web site, don’t assume they’ll be coming back to your site in the near future. You will encourage them to revisit if they bookmark your site (bookmarks are called “favorites” on Microsoft Internet Explorer). You may add a Click here to bookmark this page link to your Web page to automate the process. You may also want to design a “favicon,” or favorite icon, so that users can identify your site in their lists of favorites.

Maintaining Web Sites

As a Web developer, you may also be asked to maintain and update Web sites on an ongoing basis. This is a service you can provide, and the payment can be agreed upon during initial project contract negotiations and project budgeting. By now you recognize that there are many features on corporate Web sites that are stable, and thus require infrequent updating. However, the picture is different on ecommerce sites, where content needs to be refreshed seasonally. Featured items change, as do trends, discounts, and interactive features. Content management systems (CMS) are powerful software tools that can enable the analyst to develop and maintain Web sites and other online applications. An increasingly popular CMS is Joomla! which can be found at www.joomla .org/about-joomla.html. It is based on PHP and MySQL. Unlike many proprietary CMS, which are expensive and not widely available, Joomla! is an open source solution that is made freely available to any developer.

Creating Blogs (Web Logs)

Blogs, also called Web logs, are being written by corporate users for both internal and external communication. Blogs are informal and personal, and they often invite comments and feedback. They are easy to create and update and are designed to change daily. Companies are using blogs for advertising and to build social networks for consumers, clients, and vendors around their products, building trust and customer relationships.

Corporate blogs are monitored out of a sense of responsibility for the participants. Guidelines, policies, and laws that shape monitoring practices include shared cultural, ethical, and legal values such as respecting other employees and customers; not publishing any sensitive or secret corporate information or anything protected by copyright (without permission); and excluding anything that is hateful or profane or that violates anyone’s privacy.

Even with all of the preceding guidelines, you still need to ensure that blog posts are written in a human voice, not immersed in legal language. The latest entry should be at the start of the blog. It should contain the following elements:

1. The permalink, or permanent link, specific for the blog post. The permalink should never change.
2. The headline or title of the post.
3. The primary link, which connects the reader to the subject under discussion.
4. An optional summary, often appearing after the link.
5. The blog text or commentary.
6. An optional image.
7. A block quote containing quotations or other material from other sources that contributes to the discussion (often indented or in a different font to set it apart from the main text).
8. Links for comments by other people.
9. Other blog software features, such as a calendar, search form, and other universal features.