# Presentation: 292813

## Designing and Building Web Based Information Systems - I

- Mark Rodekohr
- Energy Information Administration
- June 1997

## Organization of Presentation

- Characteristics of Successful Web Based Systems
- User Characteristics
- Layout
- Functionality

## Characteristics: Transparent

- Site organization should be easy for users, not very familiar with the subject area, to understand
- Do not organize a web site based on a internal office organization
- While it is easy reorganize web sites this can lead to many additional problems relating to bookmarks, file redirection's etc.

- EIA site organization
- Fuel Groups:
- Petroleum, Natural Gas, Electricity etc.
- Subject Areas:
- Prices, International, Forecasting, Financial etc.

## Characteristics: Information Readily Accessible

- Design a file structure that allows users to get information with as few clicks as possible.
- Good example of what not to do - look at the World Bank (http://www.worldbank.org) site.

- EIA’s web design goal - keep users within three clicks of getting data
- It is well worth the time to plan the site structure in advance before putting files up

## Characteristics: Use Standards

- The use of standard page formats greatly improves the look and feel of a web site
- Once users understand the common format they find it easier to use the site.

- EIA has developed a electronic products styles and standards manual
- All second level and some third level pages have a common (table based) look and presentation format

## Characteristics: EIA Standards Manual

- Introduction
- Section 1. The Basics
- Section 2. Standards and Styles for EIA Authors
- Section 3. World Wide Web "Home Page" Style Guidelines
- Section 4. Listserve Instructions
- Section 5. Procedures and Guidelines for Products on the EIA CD-ROM

- Section 6. Standard Operating Procedures for the EIA Web Site
- Section 7 Fax-on-Demand System
- Section 8. Facsimile Document Style Guide
- Section 9. Glossary

## Web Standards: Starting Code

- <meta name=“description” content=“ write a one-to-three sentence description of the html page.”.>
- <meta name=“keywords” content=“put in keywords that are associated with the topic(s) of the page”>
- <html>
- <head>
- <title>A short (several words) but accurate and descriptive title
- </title>
- </head>
- <body>

## Web Standards: Ending Code (1)

- <hr>
- <center>
- <P><a href="/cgi-bin/imagemap/imagemaps/footer.conf"><img src="/gifs/footer.gif" ISMAP></a></P><br>
- </center>
- File last modified: DATE <p>
- <DL>
- <DT>Contact:
- <DD>Contact Name <br>
- <DD><a href="mailto:cname@eia.doe.gov.">CName@eia.doe.gov</a><br>
- <DD>Phone: (202) 586-xxxx <br>
- <DD>Fax: (202) 586-xxxx <br>
- </DL>

## Web Standards: End Code (2)

- <br>
- URL: http://www.eia.doe.gov/directoryname/filename.html <br>
- <br>
- <center><i>
- If you are having technical problems with this site, please contact the EIA Webmaster at<ahref="mailto:wmaster@eia.doe.gov">wmaster@eia.doe.gov</a><br>
- </i></center>
- </body>
- </html>

## Tips for Producing Web Based Art

- Never use more colors than you need, for example if a graph consists of 5 colors save it as a 8 color gif file (you can only save graphics in multiples of 4 colors)
- Always use a gif format (interlaced is best)
- Never use more than 256 colors most people cannot see the difference.
- Try and use transparent images for art work
- Try and use a windows rgb palette when generating art and graphics

- In HTML files it is sometimes much easier to use Paint Shop Pro to capture complex WordPerfect tables and use them as 4 color graphics than try
-     and use HTML code to reproduce the table
- Try and keep the number of graphics/art per page reasonable using large numbers tends to detract from the overall presentation
- The average VGA monitor (14") has a screen size of 640 by 480 pixels.

## EIA Second Level Page Format

## Characteristics: Maintenance

- Design site with ease of maintenance as a goal
- Include procedures to dealt or archive old files
- Control access so that only those familiar with good practices are allowed write access

- Even though EIA controls access there have been problems relating to:
- Use of nonstandard code
- The same file appearing in more than one location
- Old files are not deleted

## Characteristics: Features

- Features are very important to maintaining a active user base they keep people coming back
- EIA features include:
- Press Releases
- Contacts
- Data Query System
- Bookshelf

- EIA features include:
- Listserv (20,000 signups)
- Links to related sites
- FAQ
- Quiz
- Calendar
- Presentations

## Characteristics: Search Engine

- With a large web site it is important to have a search engine.
- EIA uses the Verity search engine which is fairly expensive but works well.
- Other, more targeted search approaches can be developed using simple html links or some perl coding.

## Users

- Know who they are, what computer systems they use and develop a strategy to effectively serve the different user groups
- EIA strategy consists of:
- Using the existing paper products to deal with traditional users.
- Using the web to serve those users who need information in the most timely fashion available
- Using listserv, fax on demand to deal with users who have low or no bandwidth capacities
- Using the CD to serve those power users who need our large databases

## Users: Web Logs

- The use of standards web logs can tell you much about your user base including:
- What type of organization they come from, commercial, government, foreign etc
- What type of operating system and browser they use
- How they entered your web site (from what source a major search engine etc.)
- What they found useful

## Layout

## Layout 

- Design opening page to fit on a 15” monitor with as little scrolling down as possible
- Use a four sector approach
- Do not use any large picture files (increases load times)
- Use plain backgrounds with fonts that show sufficient contrast to the background

## Functionality - I

- Design site for the average user
- Make minimal demands on the user (as many functions as possible should be made available via a web browser)
- Where cost effective present results in a variety of formats including:
- PDF (good for CD’s)
- HTML
- Spreadsheet
- Database

## Functionality - II

- Web based data applications servers (Cold Fusion) can be used to present data in a variety of formats including:
- HTML tables
- Comma delimited dos text files (good for spreadsheets)
- Graphs