Page Elements

  • Design Template
  • Site Architecture
  • Navigation
  • Content
    • Tables
    • Forms
    • Images

A well designed page will combine text, graphics, and other ways of presenting additional information without cluttering the page. There are many ways of doing this, the use of pop up windows works unless the viewer has the blocker enabled. One good work around for this is the use of Sticky Notes A small JavaScript which pops up more information on a subject without using the traditional Pop Up windows treatment, which can be disabled with the use of a pop up blocker.

Design Template

One of the first elements to consider is the style or look of your site. To keep the site uniform throughout Style Sheets are used to define how elements are presented and keep the format of the pages the same. Style sheets are used as code added to each page, or globally utilizing one core script added to each page as it is loaded. Global style sheets are useful for very large sites but not recommended for smaller sites since they do increase server load and bandwidth use by calling the script each time a page is loaded or refreshed. Style sheets for smaller web sites can be added to each page, decreasing the server load, bandwidth use, and reducing the load time of the page. One important item to take into consideration is setting up an online store. If so the style of your site must be able to integrate with the software used to set up and operate the store keeping the same look and feel through out the site.

Site Architecture

Forethought must be given to the basic architecture of the site. What subjects need to be presented, how will this material relate to each other, what will the flow process be, can viewers navigate through the site easily. There are some basic requirements besides the entrance page.
Most sites will have pages for:
  • Products or Services
  • Terms of Service
  • Privacy Statement
  • Mission Statement
  • Contact Information
  • About Us
  • Site Map

Site Navigation

The viewer navigates through your site by the use of links. The most commonly used are text links and buttons. Links can be embedded in the text of the page to allow immediate access to more information on the subject matter.
Some sites may benefit from having a menu placed at the top of the page, if the information presented is not what the viewer is looking for perhaps another page on the site may peak their interest, keeping them on your site. There is a variety of menus available, most can be customized to have the look and feel common to the site. There are heirarchal drop down menus, which can be horizontal or vertical, and can have sub-menus. Most larger sites will have the drop down type to save space on the page. Whichever is used it is usually best to maintain the same menu structure throughout the site.
The Prime Real Estate of the page is what the viewer sees when the page is first rendered, care must be taken in the placement and type of menu used. This site has it's links listed at the bottom of the page and buttons on the top left for user convenience.

Content

What you want to present is as important as how it is presented. The viewer is looking for specific information, there is 10 seconds or less to get their attention. The basis of the presentation must be clear and concise, the information must be what they are looking for. There are many ways of expanding on the information once you have gotten their attention. In order to do this you must define your audience and present the core information they want first, then take the opportunity to expand on it.

Tables

Tables are for displaying data in an easy to read form, with columns, headers and rows. They can have borders around the table and the individual cells. Color can be added to the text, background, cells and borders. Before style sheets existed the use of tables and nesting tables was the most effective way to format the presentation of a page.

Forms

Forms are used to collect data from a user. The data is then processed by a back end script to do any function needed. Forms can be used to add information to a data base, send email, search, register, log on, or display additional data on the page. With the use of scripts the data in the form fields can be dynamically changed in response to the user's input.

Images

Images consist of photos and graphic art. They can add a great deal to the appearance of a page if used properly. Care must be taken with images to maintain accessibility to visually impaired visitors, non graphical browsers, and the search engine robots. The search engine robots can not detect the information displayed with images which could cause useful and important information about your web site not being sent back to the search sites.

Valid XHTML 1.0 Transitional  Valid CSS!