Producing Online Heritage Projects

2. Project Development

2.4 Technical Possibilities

Technical Needs

If you are considering in-house Web-based development, you will first need to conduct thorough research on your in-house computer and software capacity. You will also need to decide where you will store your product in development, either on an in-house server or through a Web hosting company. One option is to purchase a server for your institution, although this is only recommended if the museum can predict high online traffic, or needs to secure a large number of files. This location can also serve as the production area where members of your team can share files via FTP. If you are working with a multimedia team, they can be consulted to provide you with the best option for the size of your final product. Uploading digitized material onto the World Wide Web is analogous to installing objects in a physical exhibition. The appropriate materials and an understanding of the installation process are essential.

You may decide that it is less expensive to contract an outside multimedia specialist than it would be to upgrade your computer system. On the other hand, you may decide that your computer system can handle the development process and that you do indeed have in-house personnel skilled in Web-based design and development.

Technical requirements for processor speed, memory and storage space are determined by software requirements. These requirements in turn are determined by the type of work to be completed. Always check the technical requirements of the software you intend to use. Software requirements indicate the technical requirements. Generally, the more graphics or image-intensive the task, the greater the processing speed, memory and storage space you will need.

Expert Advice

A dedicated computer for the Web development process is an excellent idea. This ensures that all the graphics, text and programming files are stored together and that you have sufficient computer power to complete the project.

Design Considerations

Every method and program you employ to design your online product has advantages and limitations. Here are some recommendations to help you work within these considerations.

Expert Advice

A general rule of thumb is to keep navigation to about 20 per cent of the page and content to 80 per cent of the page.

Page layout

The key to successful design is clear and understandable navigation. Strike a balance between the need to present all of the navigation options to the user and keeping the pages uncluttered.

The two most commonly used browsers are Internet Explorer (IE) and Netscape, with IE being more widely used. To meet the needs of most Web users, your online product must be viable in both browsers, and in IBM-compatible as well as Macintosh platforms.

Your Web layout should be intuitive, inviting and easy to follow. Think of creating a template to be used throughout the Web product. This will save valuable production time when adding the content. Consistency from page to page for the placement of a menu bar and use of colours, simplifies user navigation. It is advisable to use Cascading Style Sheets (CSS) to maintain this consistency. CSS are also easily updated in future Web projects. See Style Sheets later in this section.

Fonts

Your choice of text fonts is very important. Headings and titles can be created with graphics, so this is where you can be a little more creative. It is best to use no more than three different fonts, one for the header, one for the sub-heading and another for the body. For content, choose a medium-sized font that is legible. It is best to select from True Type Fonts (TTF), like Arial, Helvetica and Times Roman, which are delivered with most computer systems. You can choose to leave the font unspecified and accept the default of the user's browser. This means content will work on all systems. Or you can include a list of possible fonts in your style sheet. The browser will pick and display the first available font on the list.

Frames

Frames provide a way to display several pages at once. In a typical example, a frame with overall site navigation will remain static and provide access to various content pages. Generally, frames are being used less often in Web design because they can have an impact on accessibility (discussed in section 2.4, Technical Possibilities).

Some limitations of frames:

• Many browsers cannot print frame pages appropriately.
• Search engines have a hard time indexing pages in frames.
• If people bookmark a page, they may not see the same page when they click on the bookmark the next time because the bookmark does not include a representation of the state of the frames on the page.
• In order to make your Web product as accessible as possible, you need to title frames according to international standards. Be sure to use text prompts that let visually-impaired users know about a new window.

Some positive aspects of frames:

• Frames can be useful for maintaining navigation and keeping it visible as a user scrolls down a page.
• If the frame remains the same over several pages (e.g., top and left-hand navigation), the page will load faster, as only the page content is changing.
• In a large online product, a universal change to a frame (e.g., a logo or navigation button that appears on all pages) can be made once and applied across all pages.

Graphics

Graphics create that vital first impression. Keep in mind, however, that response time is also part of that first impression, so keep the file size small!

Managing file sizes can be as simple as saving photographs in a JPEG format, but design elements should be saved as GIFs. Please refer to section 2.3, Multimedia Content Treatment, for more about GIFs and JPEGs. Compression is maximized when the proper formatting is used.

Always keep in mind the goals and objectives of your online product. If you are developing a multi-use online product, then keep animation and introductions to a minimum. If, however, you are developing a feature in a virtual exhibition that the user visits only once, you have an opportunity to be more creative with your presentation. Try not to get caught up in trends. For instance, in the Web's early days, a lot of flaming and animated logos were featured. Such effects become outdated relatively quickly.

Style sheets

The World Wide Web is the ultimate cross-platform system, so your pages may be displayed on a wide variety of devices. A style sheet is a set of explicitly defined rules governing the presentation features of a document. With Cascading Style Sheets (CSS), the cascading comes from the way the style sheets are applied to the elements in the document.

For example, a style sheet can define the length of a line of text and the width of the page margins. It can specify that all text should be green, and that the first line should be indented. It is best to have the style specifications written in one place only, and then applied across all specified pages. Any changes to specifications will then be made across all pages. This saves time and maintains the continuity.

Meta tags

Meta tags are key words and phrases included in HTML page code. Of all the possible meta tags (and there are many), the "keywords" and "description" meta tags are important to search engines, which index meta tags.

When placing the meta tags in your Web pages, use contents of description to summarize the main theme of the Web page or section and expand the theme or message in the title tag. The first sentence of the description is the key to capturing user interest. Some search engines display the first 20 to 30 words contained in the meta tag description after the title of the document. It is therefore important for each Web page or section to have a different description and for this description to relate directly to the information contained within the page.

Meta tags go in the <HEAD> section of the HTML page (the same section as the <TITLE> tag). Figure 13, Meta Tags, shows how descriptive these tags can be.

Figure 13: Meta Tags

Search engines vary in the amount of text they will read in a <META> description. The description text should be limited to less than 100 words. When selecting these important "description" and "keyword" meta tags, keep the Web product's goals and users' needs in mind. When choosing keywords, think of what, where, when, why and who.

Although meta tags are used by some search engines to index and rank Web pages, more and more search engines are looking at other factors for indexing, such as keyword density and links to your Web product. When devising meta tags, it is therefore important to remember to consider the needs of your users, and not just the search engine requirements.

For more details on how to register your online product with a search engine, turn to section 3, Getting Ready to Launch.

Standards and Guidelines

Many large organizations have set standards for Web design within their organization so that visitors entering any page of the organization's Web site will recognize it and know where to find certain navigation elements, such as Search, and Contact. An example of very specific standards can be found for Government of Canada Web sites at the Treasury Board of Canada's Common Look and Feel for the Internet ²⁶ Web page.

These kinds of standards usually specify:

• screen resolution (for example 800 x 600 pixels)
• placement and size of logo
• standard navigation to be included, such as Contact or Search
• style guidelines for fonts, colours and other design elements

If your organization has not yet established Web standards, find out if there is a style sheet for print. If so, consult it to provide a consistency of look and feel across your institution's various types of communications. Keep in mind that such guidelines should be followed for style, not for technical specifications. If your heritage organization has either a municipal, provincial or federal affiliation, follow their guidelines for Web-based communication.

Accessibility Issues

You can provide more equitable access to your online product by taking a number of concerns into account. If your pages address accessibility issues, you can display the Web Access Symbol. This symbol, which is available from the National Center for Accessible Media ²⁷, can be used to identify Web sites or pages for which an effort has been made to enhance access for disabled users.

Visual disabilities

Blind or visually impaired users can listen to text pages reasonably easily if they have access to a screen reader that reads aloud through a synthesizer. Users with reduced eyesight typically need larger fonts, a standard feature of most Web browsers. To support them, use relative font sizes rather than encoding information with absolute font sizes. For example, when using style sheets, instead of setting the font size attribute to a specific number of points or pixels, set it to a percentage of the default font size. By doing so, your text will grow or shrink as the user issues "text larger" or "text smaller" commands, and the initial appearance of the page will match the user's preferences.

The colour of text should contrast with colours used in the graphics or backgrounds. Failure to maintain sufficient contrast makes it difficult for users, especially those with visual impairment, to read your text.

Texts in different languages should not be put on the same Web page. Specialized screen readers cannot move from one language to the other. When using a table, remember when incorporating content that the screen reader will read the top row from left to right, and continue reading across each of the following rows ²⁸.

Hearing disabilities

When featuring video and audio files, provide text of the audio component so that users who have a hearing disability have an option to read through the narrative.

Expert Advice

A good source of information on adaptive technologies is the Adaptive Technology Resource Centre (ATRC). Open to anyone interested in learning about assistive technology, the ATRC offers regular drop-in hours, during which you can try adaptive technologies, or discuss ideas, questions, or solutions with ATRC staff. For more information, please consult the contact information included in the endnotes ²⁹.

ALT attributes

In addition to making your text legible, you can also offer an alternative method for displaying your images to people who cannot see them, either because they are blind or they have turned image loading off. They will be able to see or hear the alternative text (ALT). A title or brief description of the image is all that is required. HTML code is used to insert an image that has the ALT description into a page.

International accessibility guidelines

The World Wide Web Consortium (W3C) is an international regulatory body of Internet technology experts and interested organizations that develops standards and guidelines for the Web. Certain guidelines specifically address the issue of making Web content accessible to people with disabilities. You can test your online product in development against these guidelines on the W3C Web site ³⁰.

Each checkpoint has a priority level assigned by the working group based on the checkpoint's impact on accessibility. W3C has outlined three levels of priorities (required, recommended and optional) for Web content developers.

The guidelines are available in English ³¹ and in French ³². You can make your online product better by familiarizing yourself with the guidelines and implementing at least some of the recommendations. You also give more people the opportunity to enjoy your online product.