Characteristıcs of Good Page Desıgn

Characteristıcs of Good Page Desıgn

CharacterIstıcs of Good Page Desıgn

Web pages need to be well designed in order to effectively communicate with the people who use them. Knowing how to create well-organized, easy to read and use web pages is more important than knowing lots of HTML tags.

People won't use your pages if they are difficult to read and/or slow to load. If your site isn't well organized and people will be less likely to explore your pages and will never know what you have to offer.

Before authoring web pages, you should prepare a chart of features to be included the web pages (for example, tables, frames, controls), and map these against the browser support available for each feature. This exercise helps in identifying which browsers your site will not support. For example, if you're designing frames, you'll need to know which browsers don't support frames, and you'll need to provide a way for those browser users to view the content.

Design characteristics have been broken down into five categories.

1.Page identification. People can get to your pages from anywhere and access them in any sequence. Be sure every page is identified so people know it is yours.

2.Navigation aids. Help people find their way to your information.

3.Browser independence. It is the World Wide Web, make it work for everyone.

4.Readability. This is what it's really all about.

5.Transfer speed. Nobody likes to wait


1. Page Identıfıcatıon

It is important to realize that your page can be accessed from anywhere. The person accessing the page may have no idea where it is located or how it is related to the rest of your pages. Some key components of page identification:

The <title> tag

The <title> tag should be meaningful and unique to your document. This title will not appear on your page, but it will identify your page in the browser. It is an important means of identifying your page to the world.


You need to identify the author(s) of the page. It is fairly standard to include an email link or a link to a comment form. This allows you to take credit for your work and gives others an opportunity for feedback. You may want to consider a link to a page that provides some biographical information so your readers will know your qualifications.


Your readers need to know when your document was written. Most authors use the date on which page was last updated. It is not a bad idea to include the original creation date, either. Since it is possible that people from anywhere in the world will read your page, the date format should be Month day, year (February 21, 1997).

2. NavIgatıon Aıds

There is no guarantee that the person reading it knows anything about the rest of your pages or their relationships to one another. People are more likely to explore a site that has navigational aids Here are a few pointers to keep in mind when developing your navigational aids:
Avoid dead-ends and Don't rely on the browser's back and forward buttons
At a minimum, every page should have a link to your home page or to a menu page. Without these links, visitors from the outside (from a search engine page, for example) will be unable to explore your site. It is a good possibility someone will get to your site from an unknown location it, is important that you provide them with a way to "surf" your pages.
Avoid "404 Not Found" errors
Be sure your links are good. If you are developing a series of pages, don't activate a navigation link until the target page is available.
Be consistent
Develop a standard navigation system for each set of pages and stick with it. Use the same links, text and format on all pages.
Be careful with navigation icons
If you use icons as navigation aids, be sure they have text labels.
Duplicate your navigation bars
On pages that are likely to be more than one screen in size, it is a good idea to place your navigation links at the top and the bottom of the page. If he or she reads the full page, it's nice for him or her to be able to move on without scrolling back to the top. This becomes more important as pages grow in length.
Logical links
If your pages are arranged in a logical series, it is helpful to provide links to the logical previous and next page in the sequence. It is best to identify the pages by name rather than to use "previous" and "next."

3. Browser Independence

Try to remember that you are working with the World Wide Web. There are hundreds of browsers in use. Some display graphics, some do not. Some will read the most current version of HTML (3.2), others may not have been updated since HTML 1.0. Display and spacing will vary from browser to browser. There are also thousands of different kinds of computers used to access the Web. Screen sizes vary. Available fonts will vary. Color capability and display will not be the same. Processing speed and Internet connection speed will vary.
The reason HTML and the Web have been so successful is that both were designed to be platform, connection and browser independent. Take advantage of this capability and, although it will be somewhat more work, your pages will be more successful. A good web designer needs to learn about browser differences and test their creations in two or more browsers.
Show consideration for non-graphical browsers
Use the ALT parameter in your <IMG> statement to provide a text placeholder. ALT tags have two advantages: The browser will load the text first, so readers can start reading while they're waiting for the full graphic. You can provide information to readers who are browsing with graphics turned off. If you use image maps, provide text equivalent links.
Avoid browser specific tags
Avoid relying heavily on browser-specific HTML tags.
Don't get overly involved in visual details
Your page will look different on every browser and on every brand of computer, and quite possibly on different models of each brand of computer. You are dealing with a huge variety of screen sizes, font selections, and display capabilities. Don't get overly carried away in getting everything just right, you'll be wasting your time.
Use Standard Fonts for Windows and Macintosh Computers (make sure you specify alternative fonts using the FACE=... option>.
Use the hexadecimal color codes (such as "#FF0000"), and not the names of the colors (such as "red"), as some browsers don't support the color names.
Avoid specifying sizes in <TD> tags Fonts and sizes may be different on readers' systems; so specific <TD> size parameters can result in truncated text.
Use percentage values for widths as opposed to absolute pixels. When you do use pixel values for tables, try using a width no larger than 580 pixels to accommodate those on 640x 480 screen resolutions. If you're targeting a more general audience, stick with designing for an 640 x 480 resolution screen for your web pages.

4. Readability

Your page was created to provide information. Presumably you want people to learn from it and/or be entertained by it. If it is difficult to view, graphically too busy or too boring, poorly written, poorly proof-read or poorly organized your readers will not complete it nor will they return to view it again.
Use a spell checker, if available. Have at least one other person critically read your pages.
Use backgrounds carefully
Background graphics may be fun, but they can make the text on your page very difficult to read. The same is true for background colors.
Keep your pages short
Users tend to get "lost" as they page or scroll through long documents. Try to keep your pages to no more than six screens in length.
Provide overview pages
As your web becomes more complex, consider developing a contents page, a site map or an index of your site. This will help you stay organized and provide your users with a picture of the way your site is organized.
Integrate links with your text
Try to make your text flow naturally. Your links should appear meaningfully within your text. "More information about HTML 3.2 is available." is better than "For more information about HTML 3.2, select this link." Avoid phrases like "click here."
Use meaningful graphics
Be sure your graphics are directly related to the content of your page. Graphics are fun and can add to the meaning and design of your page, but don't use them just because they "look cool." Overuse of inappropriate/unrelated graphics clutters your page and makes it difficult to read.
Animated gifs
While they are cute for a while, they can become quite irritating since there is no way to turn them off. It is best to use animated gifs that endlessly repeat the animation only if there is a critical reason, i.e., the animation is essential to clarify a concept. There are several problems with animated gifs in terms of the usability of your page: links won't always work because the browser is animating the image and misses your selection, the status bar at the bottom of most browsers is useless because it is filled with messages related to the animation.

5. Transfer Speed

Nobody likes to wait. Studies indicate that computer users consider delays longer than 20 seconds to be very frustrating. Most Internet connections are overloaded as it is. Spend time in designing pages that will load as quickly as possible.
Shorter pages load faster
The longer your page, the more time it will take to load. Try keeping your pages to less than six screens in length.
Don't overuse graphics
Graphics are a real speed killer. Even the smallest graphic file is usually larger than a long page of text. Try to limit the total size of all images used on a page to 50K.
Use smaller graphics with fewer colors
Don't make your graphics be any larger than necessary. When converting or compressing them, reduce the number of colors as much as possible without sacrificing legibility.
Microsoft Windows Provide 256 different colors while Mac operating system supports only 216 colors out the windows 256 colors. To ensure that your graphics display correctly on all platforms, you should use colors out of 216 colors available on all platforms.
Avoid animated gifs
Since animated gifs are created by combining several versions of the same image and then rotating through the versions, they are much larger than normal gifs.
Use width and height attributes
Some browser formats the page with text first and adds the graphics later. If you don't specify the size of your graphic, the browser will have to reformat your page when it downloads the graphic. This results in an annoying screen flicker. If you specify WIDTH and HEIGHT then most of the browsers will reserve that much space for the image to be downloaded and screen flicker is avoided.