Web Page Design

Designing an Effective Web Page

A Web page is a place people visit to obtain information. Web pages can be informational (such as those maintained by CSUN organizations such as University departments) or personal  (as in the case of individuals who wish to communicate something about their own backgrounds and interests). For a business Web page, there may be an interest in marketing products or services. 

When you design a Web page, think about such things as purpose, organization, and style, as well as copyright laws and plagiarism. Making your pages readable to all who view them is also important (see suggestions on how to make your Web pages ADA compliant).

Purpose

If you are a University student or faculty member constructing a personal Web page the chances are that you have more than one goal in mind. For instance, if you are an expert on exotic fish, you may want to incorporate information about this esoteric subject on your Web site, with pointers (links) to other sites as well. At the same time, if you are teaching in the Biology Department you may want to make your course syllabus available and communicate other information to your students. As a University employee or student you are discouraged from selling and advertising commercial products, but you may wish to sell viewers on ideas. You may be active in professional or nonprofit associations ("Heal the Bay", for example) and your Web page might be an appropriate place to advertise the information and services that are available from that organization. 

Thus, to begin designing a Web page, first identify and clarify your purpose. This should lead naturally to the next step, to organize or map out your pages. 

Organization

Most Web sites have lots of information to convey to the visitor, which typically takes plenty of space. It is best to design a home page (e.g., index.html) that is essentially an introduction to what is available at your site, then provide links to additional information about each topic on separate pages. Don't try to cram everything you want to say into your home page. If you clutter the home page with excessive detail it will overwhelm the reader. The amount and diversity of the information you want to convey should give you the clues you need for proper organization. 

If you are maintaining a page for an organization or department, other people may be providing information they want to display. Some may be crucial information, vital to all readers. Other information the contributor deems important may be of lesser priority to the page maintainer, or to the reader. 

Resist the impulse and the pressure to put detailed information on the home page, no matter how important it may be! If there is something viewers must see, provide a clearly visible link to this information that will draw attention to it. (But see the section on Style in order to avoid distraction or garishness!) 

The best way to organize your pages is usually hierarchically, and by topic. For example, if you are on the faculty, you might wish to divide your pages into personal and professional, with professional pages further divided into classroom and student information and information about your research or community activities. These pages might also be subdivided if information is extensive into more manageable "chunks" of information. 

However, the nature of the Web allows for much flexibility. Unlike reading a traditional tract or essay, the Web page reader should be free to follow links to wherever he/she wishes to go. The need for a strict linear and hierarchical type of organization is less essential. But however you decide to organize your pages, the reader should feel a sense of logic about the relationships of the sections. 

One way to plan your Web site is to draw mock-up pages on separate sheets of paper. You can be sketchy while planning the general layout, indicating graphics, figures, and tables with blank areas. Having an outline of the planned text is also a good idea; the details can be filled in later once the overall organization plan unfolds. 

You should have a pretty good idea of how your page(s) will be organized and what information they will contain before you even begin to create them online. 

Style

Several short, linked documents are usually preferable to one long document. If you do use the latter, however, providing internal links among the various sections is helpful. This is especially true of technical documents, in which the reader may already be familiar with some, but not all, of the material. 

There are obviously many ways to be artistic, and Web page designers tend to evolve their own styles. The writer's own preference is to use the KISS principle ("Keep It Short and Simple") by avoiding clutter and glitz. However, some Web pages manage to appear "busier" than others, yet are artistically designed and attractive to view, as well as being reasonably accessible. 

Other points of style to consider are: 

• Contrast and Ease on the Eye.  It isn't a good idea to have large amounts of text presented in red, for instance. An even worse idea is to have red text over a pink background! Consider that what you see on your screen may not be exactly the same as what someone else sees. There is a lot of variability from one computer monitor to another, and even in using different browsers to view the same pages from the same computer.

  Take care to insure that the contrast is sufficient for distinguishing your regular text from your hypertext, too. 

• Visual Effects. Does the reader really need to see dancing bears on your home page? Novices are often very impressed with animation (JAVA "Applets"), but if associates check your page with any regularity they can quickly become very tiring, and interest wears and wanes quickly. Consider whether these have any relationship to your topic. Finally, consider that many Web browsers may be coming to you via phone lines. Loading full pages with complex graphics and animations can take considerable time and wear on the reader's patience. And bright, blinking or flashing displays (called "blinkies") are off-putting to most people. Once again, keep the KISS principle in mind. If you have favorite animations that you think are just great, place them in an optional section labeled something like "Click here to see cool animations." 

• Graphic Images. As a general rule, it is good to keep graphic displays small. If you use GIF or JPG images that are under 640x480 pixels you can be fairly sure that they can be seen in their entirety on all computer screens.

  In addition, if you make sure that your image resolution is only 72dpi (which is the best resolution you can see on a computer screen), you should be able to keep the file size small — and the smaller the image file size, the faster it will load.

• Use of Links. The use of links to related information is highly recommended. Any page of your own that is linked to your Web page should have a return link, usually near the bottom. Links to your organization and your department (e.g., CSUN and the Biology Department) are also recommended. If you would like feedback about your Web page, or about information contained in it, include a "mailto:" link near the bottom of the page so that readers can send you email comments. 

  When you include links to other sites you should review them once in awhile because they often change and need updating. While you're at it, whenever you make more than a minor change to any of your pages, make a note of when you did the last update. Keeping the date of change near the bottom of your home page is a good idea. 

• Writing Style. Consideration for the reader mandates that your writing style should be appropriate for your audience. Think of who will be reading which page: Does your audience consist of students or administrators, novices or experts? Then write accordingly. 

• Tables. Tables can provide an efficient means of organizing and displaying complex information. If you use tables, however, bear in mind that visually disabled readers (using screen reading software) may not hear the material in the column order. For such readers it might be well to provide a separate "plain text" alternative page. 

  Although increasingly rare, there may also be some readers who have text only access to your pages, such as those using the Lynx browser. In any case, it is a good idea to make the pages understandable from the text portion alone (without reference to images) to the extent that this is possible. 

• Text Breaks and Spacing. When writing text, appropriate use of breaks and heading levels can make a big difference in both the appearance and organization of your document. As a rule, any lengthy text will benefit from subheadings. Different levels of headings (boldness, size) should be used effectively to delineate hierarchy and emphasis. Remember that headings are really topic labels; they should be kept short and should be descriptive of the subject. As in all good writing, paragraphs should feature separate ideas, whether labeled or not. 

  For clarity, use of bullets may be helpful when enumerating points in list order. Bullets are usually preferable to numbered lists, unless the lists are very long and you need to reference particular points by number. 

• Using Templates. A template is, of course, a pattern or guide used as a starting point for constructing something. In concept, another person's page layout and design can be a template for your own page if it is organized in an appealing or useful way (why "reinvent the wheel"?). In addition, templates can be found in published sources in books and on the Internet for various types of pages (e.g., bibliography, frequently asked questions or "FAQ," or background and "wallpaper" templates). 

  Netscape's site contains a page of background samplers, for instance. See:

  http://www.netscape.com/assist/net_sites/bg/backgrounds.html

  Microsoft FrontPage users will find templates available within this tool for a number of basic page "types."

Copyright Laws and Plagiarism

Perhaps it should not be necessary to have to say this, but you should observe copyright laws and avoid plagiarism! The admonition is not only for students (the author has sponsored enough student writing to recognize this need), but also to faculty who wish to make materials of others available to their students. (For information about the fair use of copyrighted information, see: http://www.cetus.org/fairindex.html.) Make sure that, whatever you include, its display is both legal and ethical. 

Top

August 14, 2003

Prepared by J. S. Fleming and Gail Said Johnson
User Support Services

ITR's technology training guides are the property of California State University, Northridge. They are intended for non-profit educational use only. Please do not use this material without citing the source.