Lesson 5:
Using Web Technology Effectively

By Cindy Eves-Thomas, University of Maine Cooperative Extension

Understanding the limitations of the Web medium

The Web medium differs from most other information mediums in that the user has a great deal of control over the appearance of the Web pages they visit. They can control

• font and text size,
• graphics (on or off),
• the order in which they view the pages of a Web site,
• monitor size, and
• browser and platform choices.

As a Web author, you need to understand that it's not always possible, or even desirable, to control all aspects of your Web page design. Knowing what is possible and broadening your view of what is acceptable will save you both time and frustration. 

Font and text size

Users can set fonts and text sizes in their browsers to satisfy their own unique levels of personal comfort. Your goal as a designer is not necessarily to fight the users' preferences, but to ensure the readability of your information. 

"Serif" fonts have tiny cross lines at the ends of unattached lines, like this Times Roman "E." 

"Sans serif" means literally "without serif," like this Arial "E." 

Sans serif fonts, such as Helvetica or Arial, are easier to read on screen than are serif fonts, such as Times Roman, because screen resolution causes the cross lines on serif fonts to break up and appear fuzzy, hindering readability and slowing the user. 

Ironically, the most common default setting for text in browsers is Times Roman, and many users do not take the time, or know how, to change the manufacturer's default font settings. 

As the designer, should you specify a sans serif font, and override the user's selection?

Not necessarily. Keep in mind that when users do change the manufacturer's default font settings, they do so to achieve a level of personal comfort. When you override your user's choices, you are ignoring their needs. 

You may also be specifying a font that does not exist on the user's platform. A Mac platform, for example, will try to substitute a Mac font for the PC font you specified, changing the look of your page. PCs also display text larger than Macs do. Anything below 9-point is practically unreadable on Macintosh systems.

The solution is to specify relative, rather than absolute, fonts and font sizes.  

Specifying relative fonts allows the user resize text, while at the same time keeping your text in the same proportions you intended.

Set relative font and font size in your HTML code:
<font face="sans serif" size="H2"> 
or
<font face="Verdana,Arial,Helvetica" size="-1">

Specifying absolute fonts prevents users from making your page's text larger if they need to see it more clearly, or smaller if they think it's too big.

Code for absolute font and font size would look like this:
<font face="helvetica" size="18pt">

Return to Understanding the Limitations

Graphics turned off

Users can turn off graphics in their browser settings. They may do so to decrease download times or they may be using assistive technologies, such as screen readers for the visually impaired, which cannot interpret graphical elements. Always check your layout with the graphics turned off to ensure that your information is understandable and no vital information is missing.

Always use ALT tags

To accommodate users who turn off graphics, be sure to include an ALT (Alternative Text Tag) for all graphical elements. The general rule when using images on a Web page is to provide an ALT attribute in the image code that provides the same information the visual user sees. This is called "providing an equivalent experience." An ALT should be meaningful and contain no more than nine words.

Image:

Image source code:
<IMG SRC ="bbeartop.gif" ALT="The University of Maine Black Bear">

NOTE: If you have a logo which represents your organization on the page, it is not enough to just say ALT="UMaine logo." Such a tag would "pass" various accessibility tests, but this tag is not providing an "equivalent experience." A better ALT attribute would be: ALT="The University of Maine Black Bear." This is the text which conveys the information shown on the logo.

Animated image:

(Refresh your screen to view the animation.)

Animated image source code:
<IMG SRC ="pubsbook.gif" ALT="animated book flips through pages">

Use longdesc (long description) files to describe complex graphics

In order to facilitate assistive technologies such as screen readers, describe a complex chart or graphic in detail by using a description link, normally called a D-link. Rather than spell out "description link," the convention is to use the letter D near the chart or graphic, which (when selected) takes the user to another document that describes the chart/graphic. The D can be very small, such as 2- or 4-point or may be the same color as the background. (It doesn't need to be visible to sighted viewers.)

<IMG SRC="4hwheel.gif" ALT="4-H Targeting Life Skills Wheel"><A HREF=longdesc.htm">D</A>

In this coding (above), a sighted person would see the D next to the chart, and a screen reader would speak the letter D.

You can also make the D invisible, still placed next to the image, but having an ALT text of D. The invisible D might be a transparent gif with D as the ALT text, or the letter D coded to the same color as the Web document background.

<IMG SRC="4hwheel.gif" ALT="4-H Targeting Life Skills Wheel"><A HREF=longdesc.htm"><IMG SRC="transparent.gif" ALT="D"></A>

Make the D into a link to a file named "longdesc.htm" or "longdesc.html." In this longdesc file, you can write a full description of the graphic. If you have more than one photo being described in the longdesc file, use a bookmark to take the user directly to the description of the related photograph.

To see an example of a graphic with a D link to a longdesc file, visit the National Human Genome Research Institute's "Human Genome Lecture Series" at http://www.nhgri.nih.gov/CONF/Lectures/2002NHGRI.html. Notice the small D at the lower right of the poster. Follow the link to the text file equivalent.

Return to Understanding the Limitations

Page order

Users do not read Web sites in a linear fashion, as they do with printed books. Most jump from place to place via hyperlinks, following their own interests and skipping anything that strikes them as superfluous. 

As the Web author, you can provide clear, logical pathways to your information, but you can't and shouldn't try to force users to follow one specific path.

Return to Lesson 2: Organizing Your Information Effectively to review ways to create an effective site structure and site navigation.  

Return to Understanding the Limitations

Monitor Size

Most monitors are set to a default of 640 x 480 dpi. The user can change this setting, but most don't or don't realize they can. To accommodate the greatest number of users, design your page to a maximum width of 640 pixels.¹ 

The buffer (the offset) between the outer edge of the browser window and its contents varies from browser to browser. Horizontal offsets range from 8 to 10 pixels. Vertical offsets range from 8 to 16 pixels. To allow for the offset, as well as the smallest sized monitors, you may want to design your pages to fit 470 x 300 pixels. This is small, but these dimensions will allow users with 13-inch or 14-inch monitors to view your entire page.² 

Height is less important than width because the user can scroll down the page -- if they know how and if they realize there is more information further down the window. Always put your most important information within the top 640 x 480 screen where it is less likely to be missed.³ 

Always avoid the need for horizontal scrolling.

Also avoid telling users to set their monitors to a specific resolution for best viewing. The simpler it is for users to view your information, the more effective your site will be.

Return to Understanding the Limitations

Browsers and Platforms

Your Web page design will look very different when viewed on various browsers running on various computers (platforms). Test your pages by opening them in a variety of browsers  (Netscape and Internet Explorer are the two most popular Internet browsers). Also, try viewing your pages on different platforms (i.e., Mac vs. PC). 

Go a step further and try viewing your pages on WebTV, a Palm handheld, or with a screen reader for the visually impaired. Your pages will appear considerably different on screens of various sizes and resolutions. They won't appear at all when using a screen reader, but will be presented in an audio format.

Not all browsers support all features. To find which browsers support java, frames, plug-ins, style sheets, etc., go to Webmonkey's browser reference.

Return to Top

Controlling download time

After content, download time may be your greatest concern as a Web page designer. Internet users have a very low tolerance for slow download times. We learned in Lesson 1 that the average time individuals are willing to wait for a page to download is only 8 seconds, no matter how stunning your design or how useful your information. Aim for page loads of four to five seconds.

Keep in mind, too, that some users will be viewing your pages with older, slower modems as well as older, more limited computer systems. (See Lesson 1, Bandwidth Issues for statistics on connectivity.)

If you want your site to appeal to most people:

Use text instead of graphics whenever possible. Studies have shown that most Web users look for text, not graphics.⁴

Limit the number of graphics, in order to decrease download time. Use graphics only when necessary to help users understand what they are looking for or to convey information that cannot be expressed effectively with text.

Optimize your graphics. Even one seemingly small graphic can have a large file size. The file size of a graphic (number of bytes) does not necessarily correspond to its physical dimension (pixel width x pixel height). Use an image manipulation program such as PhotoShop or ImageReady to reduce file sizes and to optimize your graphics for the Web.

Re-use the same graphics from page to page. Once a graphic has downloaded to the user's browser, it doesn't need to be downloaded again for subsequent uses.  

Keep tables simple. Tables generate large amounts of HTML code, which may cause slow downloads. Use tables only when they're necessary. Keep the number of rows, columns, and cells to a minimum. Avoid nesting tables within tables.

Keep all file sizes small. Limit the entire byte size per HTML page (including text, images and ALL code) to 40K or less.  Add together the GIF, JPEG, and HTML files that make up your page and keep that number as low as possible. 40K takes 20 seconds to download on a 14,400 bps modem, less time on faster modems and longer on slower modems.

If your page makes sense without an item, leave it off.

Always consider the limitations of various browsers, hardware platforms, and bandwidth.

Return to Top

Controlling appearance 

Using tables to control the appearance of your pages

HTML tags for creating tables were originally developed for presenting tabular data. Web authors now often use tables to control the layout of their pages. 

Tables, however, can generate excess code, which often results in slower download times. To minimize table code,

• use tables only when they are necessary;
• keep the number of rows, columns, and cells to a minimum;
• avoid nesting tables within tables.

Something else to keep in mind: browsers render tables only after the entire contents of a table has been downloaded. Be sure to place any text or graphical elements you want your viewers to see first outside of your table.

The standard tags for describing a table are <table>, <tr>, and <td>.  The <table> tag defines the contents of the table. Each row is defined by <tr> tags, and data cells are indicated by the <td> tag. 

There are many different tags for controlling how tables display. Border widths and colors, cell dimensions and background colors, positioning, etc., can each be customized with HTML tags. Browsers often interpret these tags differently, however, so results vary from browser to browser or between platforms. Always test your pages in a variety of viewing environments.

Placing <font> tags around a table will not affect the font of all the text within the table. The <font> tag and its attributes must be repeated around the content in every cell of the table. For complex tables with lots of cells, the repetitive tags can add significantly to the size of the HTML file. Style sheets are a more efficient way to apply style information to the contents of a table.⁵

Unless you put something within a table cell, the cell can collapse or not display at all. Many designers insert invisible spacer GIFs into otherwise empty cells to ensure that the cells display properly. A simpler method that results in less code is to insert a "nonbreaking space character" (&nbsp;) or a single line break (<br>) within the cell.

<TD WIDTH=50>&nbsp;</TD>

Unless otherwise specified, a table (and its rows and columns) will size automatically to the dimensions of its contents. When specifying the size of a table you are merely specifying the minimum size. Specified dimensions work only as long as they don't conflict with other display directions within the table or its cells.

Using relative values (percentages) for the width of your table allows it to resize to fill any browser window. Although the actual column widths change when the browser window resizes (and their contents rewrap), the columns remain in proportion to one another, no matter which browser or platform is being used.⁶

Using style sheets to control the appearance of your pages

By using style sheets, you can control the layout and typography of your Web pages by specifying point sizes (relative and absolute), page margins, leading (space between lines), indents, borders and text background colors -- as long as the user's browser supports style sheets. You can imbed a style sheet in your page, link to a detached style sheet, or add inline styles to your page.⁷

Style sheets can reduce coding and improve download time. For example, to make all of the Level 2 headings in your document red by using HTML, you must put a <font> tag in each heading tag.

<h2><font color="red">Heading</font></h2>

Using only HTML markup, you must repeat the font tags for every Level 2 heading in your document. If you have twenty Level 2 headings in your document, you must insert twenty <font> tags into your document. If you want to change your red headings to green, you must make the change in twenty separate places.⁸

To make all the Level 2 headings in your document red by using a style sheet, you can define all your headings in one place at one time. Making a change is easier and download times are faster because there is less coding in the document:

H2 {color: red;}

Style sheets can be applied to multiple pages. By saving a style sheet to its own document, and linking it to all of the documents on your Web site,  you can quickly create a consistent look for an entire Web site. If you then wish to change the look of your site's pages, you need only edit a single file and the change will appear throughout the entire site.⁹

Cascading Style Sheets (CSS) allow you to apply additional or special styles to pages that already use an existing style sheet.  Let's assume you've applied a style sheet to a group of Web pages and now you want to add a set of pages that share many of the same styles, but also have specialized rules that apply only to them. You can create a second style sheet that is imported into those pages, in addition to the already existing style sheet, or you can simply place the special styles into the pages that need them. By understanding the cascade rules and using them to your advantage, you can create highly sophisticated sheets that come together to give your pages a professional yet easily changed look.¹⁰

Web users can (in some browsers) create their own style sheets (called reader style sheets) that will cascade with the author's styles as well as the styles used by the browser. This way, a reader who is color-blind could create a style that makes hyperlinks stand out¹¹:

A:link {color: white; background: black;}

Unfortunately, not all browsers support style sheets. Be sure to check your pages with the style sheets turned off to ensure they are readable and usable (even if less visually appealing) by browsers that do not support style sheets or users who deactivate them. If the document is confusing or information is missing when the style sheet is turned off, the page should be redesigned.

Using a Web-safe palette to control color

To ensure that most users see your colors as you intend them, use "Web-safe" colors when creating graphics for your site or when selecting colors for your text, link, and backgrounds. There are a total of 216 colors which are supported by both PCs and Macs. The easiest way to recognize Web-safe colors is by their hexadecimal RGB code. Every color is specified this way: #RRGGBB. The "#" indicates hexadecimal data. There are three pairs of hex digits that indicate the amount of red, green, and blue in the final color. The web-safe colors consist of pairs that have only repeated multiples of three in each position. In other words, the only safe amounts in each of the red, green, and blue components are pairs of any of the following: 0, 3, 6, 9, C, F.

Examples of Web-safe colors: #009933, #FFCC66, and #CC33FF.

Examples of non-safe colors: #109833, #FFC396, and #CC33F0.

The Web-safe color palette:¹² 

Other color tips

• Use white backgrounds for the fastest download times
• Make text black to contrast best with a white or light background
• Keep colors to a minimum to load faster
• Remember that background colors don't always print (white text on a black background may print as nothing)
• Do not use color alone to convey information -- many users are partially or totally colorblind. 

Return to Top

Keeping your site simple

The key to effective Web site design is simplicity. The best Web sites create a satisfying user experience. Information is easy to find. Interactive features such as search functions, and online forms, are simple to use and work the way they are intended. The user's expectations are met.

Provide simple, clear instructions for interactive features.

When you include interactive features on your site, provide easy-to-follow instructions near them. Avoid jargon or complicated explanations. Test your interactive features and your instructions.

Stick to standard conventions.

Users learn how the Web works by visiting many sites. They expect to see the same familiar conventions wherever they go. When you don't follow established conventions on your pages, you risk frustrating (and losing) your visitors. When you use standard conventions, users can focus on content -- their reason for visiting your site in the first place.

Here are some common conventions:

• Underlined, blue text means "hyperlink." Avoid underlined or blue text for anything but hyperlinks. Expect that many users may miss your links if you put links in another color or remove underlines. Ideally, your links should show visitors where they have been by turning a different color (usually purple) after they have followed it.
• Navigation cues are located on the top and/or left of every page, with the same links arrayed at the bottom.
• Navigation to and from anywhere within your site is available on every page. Include links to pages above and below the current level, pages related to the current page, and the home page. Don't strand your visitor, and don't provide links to unfinished ("under construction") parts of your site. (Would you want to find yourself at a dead end where there is nothing worth seeing and no way out?) Also, don't direct the user to the back button on the browser; the menu bar is an opportunity for your visitor to leave.
• Everything is obvious. A function that is not obvious to the visitor, such as an invisible rollover, will often be missed, causing users to move on. 

Use drop-down menus sparingly.

Drop-down menus do have their advantages. They

• conserve screen space;
• prevent users from entering erroneous data, since they only show legal choices; and
• they are a standard widget, so most users know how to operate them.¹³

To maximize the effectiveness of drop-down menus on your site, avoid the following designs:

• Interacting menus, where the options in one menu change when users select something from another menu on the same page. Users get confused when options come and go.
• Very long menus that require scrolling make it impossible for users to see all their choices at one glance. A user may select a choice before viewing all of the available options. It is often better to present a long list as an HTML list of traditional hypertext links.
• Menus of state abbreviations, such as for U.S. mailing addresses. It's faster for the user to type the abbreviation than to scroll through the drop-down menu. (Free-form input into fields with restricted options does require data validation on the back end.)
• Menus of data well known to users, such as the month and year of their birth. Users often type this sort of information automatically before realizing a drop-down choice exists. They must then go back and delete the data they just entered. ¹⁴

Add an effective search function.

More than half of Web users rely on search engines to navigate pages. Studies show, however, that the average user does not know how to conduct a successful search.¹⁵ In addition, most search functions give bad or no results, frustrating users.

To maximize the usefulness of a search function, label it clearly with instructions. Provide a mechanism to make it simple for users to narrow their search. Too many irrelevant results will overwhelm users.

Test your search function thoroughly to see that it gives accurate and fast results.

Make fill-in forms accessible to all users.¹⁶

Fill-in forms (surveys, online order forms, feedback, comment forms, online tests, etc.) make your Web pages interactive by collecting information from users. Forms can present great difficulty for a non-visual user. To make online forms accessible to everyone,

• provide contact information so that users can contact you with problems or request the form in an alternative format;
• provide coding to associate text labels with their form controls;
• do not use graphical buttons. If you do, use ALT text that describes the function;
  <IMG SRC="Submit.gif" ALT="Submit Button">
  Or
  <IMG SRC="Reset.gif" ALT="Clear Form">
• specify a logical tab order with "tabindex" attribute;
• use the "For" attribute in the <label> element to associate the label with its form controls.

If you cannot make a form accessible, you should include an alternate form which can be downloaded, scanned, or printed if necessary, and mailed or e-mailed -- or list a phone number to call someone for assistance.

Avoid the pitfalls of frames, splash screens, Flash, plug-ins and other "cutting edge" Web technologies.

Most users are looking for content and do not want to download plug-ins or software upgrades. To satisfy most users, take a minimalist approach to Web site design. Consider adding "cutting edge" technology only when there is a compelling reason to do so. 

Frames

Many Web designers use frames to improve navigability. Navigation buttons, logos, instructions or copyright information are placed in a static frame (usually at the top or left side of the page), and are visible at all times. A second frame displays content, which changes when the navigation buttons in the static frame are selected.

Updating your site's navigation menu or logo (or any element in your static frame) is easy with frames because you need to make the change in only one place.

Not all users like frames.

Before you decide to design your site using frames, consider some common complaints:

• Users cannot bookmark individual pages within a framed site. When they select a menu option and a new page displays, the URL in the "Location" field at the top of the browser remains the same.

• When users print a page on a framed site, they must be sure the cursor is in the frame they wish to print.

• Many users find navigation within a framed site confusing. 

• Search engines encounter problems with frames.

• Not all browsers support frames.

• Users can become "trapped" in a frame set.

Not all sites with frames meet ADA accessibility requirements.

If you decide you do want to use frames, be sure to provide a way to make your pages accessible to people who use assistive technologies, like screen readers. 

• Provide a No-Frames alternative. Make sure the No-Frames link is the first link in the frame with the initial focus.
  <A HREF="contents.htm">No Frames.</A>

• Include a NOFRAMES element at the end of each FRAMESET.
  <NOFRAMES><A HREF="contents.html" title="site contents">Go to the Contents page.</A></NOFRAMES>

• Provide a title for all frames.
  <FRAME SRC="main.htm" title="Contents Page">

• Do not include an image directly in a frame -- put it in an HTML document.

• Describe the layout and purpose of frames and how multiple frames relate to each other. Use the "longdesc" attribute on the FRAME and IFRAME elements to designate a long description.

Splash screens

Most designers enjoy creating splash screens; it's one of their few opportunities to go all out and control every aspect of a page's "look." However, consider a splash screen from a user's perspective. Ask yourself, does the splash page tell me anything useful? Does it get me quickly to the information I want? What will I see if my graphics are turned off?

Let your audience determine whether or not you should add a splash screen. If your visitors are high-end users with an interest in graphic design or technology, go ahead and create a nifty splash page. If your visitors are varied and interested in accessing information quickly, skip the splash. 

Flash 

Flash typically lowers usability because it breaks with the Web's fundamental interaction style. Flash intros in particular decrease user control and revert the Web to a presentation style similar to television rather than an interactive medium. Like splash screens, Flash intros delay the users' ability to get to your content.¹⁷ 

Other usability problems with Flash include the following:

• The "Back" button does not work. When within the Flash object, navigating with the Back button  takes you out of the object and not, as expected, to the previous state.
• Link colors don't work, making it difficult to track navigation.
• The "Make text bigger/smaller" button does not work, forcing users to read text in the designer-specified font size. These pre-set sizes may be too small (or too large) for some user to easily read.
• Flash reduces accessibility for users with disabilities.
• The "Find in page" feature does not work. In general, Flash integrates poorly with search.
• Animated text is harder to read for users who lack fluency in the local language.¹⁸

Flash also tends to encourage bad design, such as the creation of nonstandard GUI (Graphical User Interface, pronounced "gooey") controls and gratuitous animation. Nonstandard controls reduce a site's overall usability because users must first figure out how they work before they can actually use them. Gratuitous animation provides no informative content that answers users' key questions.¹⁹

Plug-Ins

Before installing plug-ins, return to Lesson 1: The Plug-In Controversy, and ask yourself the six questions about your audience's needs.

JavaScript and applets

JavaScript is not consistently supported across browsers and browser versions. Some users turn off JavaScript because of security concerns. Users often encounter problems when downloading or running applets. 

To ensure that the content of JavaScript or other applets on your Web pages are accessible to everyone, be sure to

• provide alternative presentations of content for each script and applet that conveys information. Use the NOSCRIPT element, supply a description as content of the APPLET element or the OBJECT element;
• provide alternative mechanisms for each script and applet that performs an important function, other than presentation of information;
• if an applet requires user interaction that cannot be duplicated in an alternative format, make the applet directly accessible;
• provide a mechanism for the user to freeze all moving or blinking objects, particularly those that contain text.²⁰

Dynamic HTML (DHTML)

Dynamic HTML is used to 

• create interactive and multimedia-rich documents,
• dynamically update content,
• change the appearance of content,
• hide, show, and animate content, and
• display content with more design flexibility and accuracy through the use of Cascading Style Sheets (CSS).

Unfortunately, the two leading browser makers, Netscape Communications and Microsoft, currently have different implementations of DHTML in their fourth-generation browsers. Netscape and Microsoft have pledged future support for a standard that is currently being decided by the World Wide Web Consortium (W3C).

World Wide Web Consortium (W3C) continues to encourage protocol standards 

W3C was formed to encourage the development of common protocols that promote the Web's evolution and ensure its interoperability. To learn more about cross-technology Web issues and the most recent advances, visit  www.w3.org.

Return to Top

Summary

In Web design, form follows function. As a Web author, you must look to your audience to define the function of your site. Are your users looking for a practical, reference utility or an artistic form of entertainment? Perhaps they want something in-between, which means you must balance information and aesthetics.

Here's what the top 100 Web sites have in common (www.grokdotcom.com/kiss.htm):

• fast download times
• few graphics
• little, if any, multimedia
• no frames
• similar navigation systems
• high contrast text with lots of white space
• most links in traditional blue underlined text
• no background imagery
• very few obvious JavaScripts
• no DHTML
• no splash pages
• solid database-powered back end²¹

Return to Top

Activities:

1. Add height and width tags to your graphics to allow your text to fill in while your image loads. Add short, descriptive ALT tags to your graphics. 

EXAMPLE:

<img src="../images/bbeartop.gif" width="170" height="127" alt="The University of Maine Black Bear">

2. Optimize your graphics. 

• Crop out unnecessary information.
• Keep graphic resolution to 72 pixels per inch.
• Keep graphic dimensions less than 560 x 420 pixels. Smaller is better.
• Use 8-bit color (256 colors).
• Save artwork and line drawings in GIF format.
• Save photographic images in JPEG format.

3. Simplify your tables. For a quick lesson on how to simplify tables that are used to control page layout, see Webmonkey's "Lean and Mean Tables," by Steve Mulder.

4. Test your site with a variety of the online programs and services listed below.

BrowserSizer (www.applythis.com/browsersizer/). BrowserSizer is a free downloadable program that can be run on your local computer to check screen sizes. It allows for checking your screen resolutions of 640 x 480, 800 x 600, 1024 x 768 and WebTV. It also allows you to check items in Internet Explorer and Netscape Navigator. Since it is a free program, it is somewhat limited, but will allow those who design on large monitors to look at how the average user may see their Web page.

Netmechanic (www.netmechanic.com) allows you to submit a Web page (not a site) and get a download time report (for various connections). It also will test your HTML coding, spelling, and check links. Netmechanic has a free sample section which is currently located under the HTML Toolbox link.

WebTV checker (developer.webtv.net/) The WebTV Viewer program is currently beta-level software on both Windows and Macintosh. This means that it has not been completely tested and debugged. It allows you to preview your sites as they will look to a WebTV viewer, but on your computer's monitor. Currently the program is free, but you do have to agree to their license agreement. You will need to download the program to your computer. After installing the program, and opening up the program, you will need to enter your URL in the WebTV Viewer - Browser Window and hit enter. The program will load your URL and let you see how your Web page will look to those 1.1 million people using WebTV.

5. Try overriding the default browser offset. Use the following attributes on the <BODY> tag to reduce your horizontal and vertical buffers of your browser to zero.

<BODY MARGINWIDTH=0 LEFTMARGIN=0 MARGINHEIGHT=0 TOPMARGIN=0>

This coding does not work in Navigator 3.x, so that browser will maintain its default offset.

Return to Top

Examples of effective Web sites:

Amazon.com  has spent years and millions of dollars making their site simple to use. If you are doubtful about putting something on you site, ask yourself, "Would Amazon do this?"

Colors demonstrates good use of flash and real media.

Digital Club Network is seriously interactive -- move your mouse around!

National Geographic Online features virtual journeys and stunning photographs. Both  educational and entertaining. 

The Life of Birds features low bandwidth use of quality graphics.

Return to Top

Return to Top

Resources:

• Basic Website Design Concerns, Penn State University.
• Cascading Style Sheets: The Definitive Guide, Eric A. Meyer.
• Color, University of Arizona.
• Designing Accessible Web Sites, Iowa Program for Assistive Technology, and Iowa Department for the Blind.
• Designing for Multiple Browsers Without Being Bland, Stephen Traub.
• Designing Successful Web Sites, The Rough Notes Magazine.
• Drop-Down Menus: Use Sparingly, Jacob Nielson. 
• Flash: 99% Bad, Jacob Nielson. 
• Grading the Browsers for Style(sheets), Jeffrey Veen.
• KISS Your Visitors if You Want Them Back, GROK Dot Com.
• Lean and Mean Tables, Steve Mulder.
• Phase One Accessibility: Forms, University of Arizona.
• Print Design vs. Web Design, University of Missouri Outreach and Extension.
• Saying No: How to Handle Missing Features, Jacob Nielson. 
• Time for Stylesheets? Not Quite Yet, Jeffrey Veen.
• Web Design in a Nutshell, Jennifer Niederst. 
• Web Page Design Guidelines, University of Maryland.
• WEBWATCH: Latest Isn't Always Greatest, David Strom.

Return to Top

Footnotes

¹Web Page Design Guidelines, University of Maryland.
²Ibid.
³Ibid.
⁴KISS Your Visitors if You Want Them Back, GROK Dot Com.
⁵Web Design in a Nutshell, Jennifer Niederst.
⁶Ibid.
⁷Designing for Multiple Browsers Without Being Bland, Stephen Traub.
⁸Cascading Style Sheets: The Definitive Guide, Eric A. Meyer.
⁹Ibid.
¹⁰Ibid.
¹¹Ibid.
¹²Color, University of Arizona.
¹³Drop-Down Menus: Use Sparingly, Jacob Nielson.
¹⁴Ibid.
¹⁵KISS Your Visitors if You Want Them Back, GROK Dot Com.
¹⁶Phase One Accessibility: Forms, University of Arizona.
¹⁷Flash: 99% Bad, Jacob Nielson.
¹⁸Ibid.
¹⁹Ibid.
²⁰Designing Accessible Web Sites, Iowa Program for Assistive Technology, and Iowa Department for the Blind.
²¹KISS Your Visitors if You Want Them Back, GROK Dot Com.

Return to top
Return to the main index.