Examples 2

Dressing Up Your Site

Outside of the basic text on your site, there are many additions that can help to give added emphasis to the content. Images, javascript, navigation and media files are all common types of additions. Again, care must be taken so that the additions don't overwhelm the content, but enhance it.

Javascript

The most common type of addition to your site content is Javascript: so common, in fact, that you have probably encountered many Javascripts without being aware that your were doing so. Javascripts are tiny programs that make your web browser perform certain functions, such as image swapping effects or navigation, and are even used to create the annoying pop-up windows that we have all encountered. Used in moderation, Javascript can be useful, but keep in mind that some people don't allow Javascript to run on their computers and that people with some disabilities can't access it, so the more of it you use, the narrower your target audience (we will point out Javascript examples as they are used on this page).

Images

Images are useful for decoration or reference purposes. They can be of any size that will fit within the layout of the page. One way to handle this is to place a smaller, thumbnail of an image on the page. Clicking on the smaller image, such as the one on the left, will bring a larger version of the image into the browser window and the visitor returns to your page by pressing the back button.
   This is a simple method for displaying images, saves space on the page and allows your visitors to view the larger image only if they desire. The downside to this type of image display is that without a containing web page, you can't add any descriptive information to the image and the image has to stand on its own.

Image Swapping

If you run your mouse pointer over the image on the right, you will see that it changes. This is an example of image swapping using Javascript. You can also set up the page so images change with a click of the mouse. This can be a space saver and allows you to display multiple images with less clutter; possibly a before and after series of pictures.

Pop Up Windows

Perhaps you have a whole ton of images that illustrate an article. Ordinarily, you would need to worry about how long it would take for your page to load. With a Pop Up Window, your visitors need only click a link and the illustration appears (uses javascript).

The window that pops up can be any size, can be placed anywhere on the page and the information the window contains can be changed without changing the layout of your page. Other uses could be to link to other web pages, or just sections of text that would emphasize a point or contain a footnote.

Navigation

Navigation is the single most important aspect of a website and must be almost intuitive, in order to ensure that your visitors can find the information they want. Most sites run their navigation on the left of their content, as we do here, while others run their links across the top or bottom of the page and often use a javascript application to create special effects. The navigation we are currently using has all the aspects of a javascript, but, in its place, uses CSS to produce the color changes, making it more accessible. Again, it is just a matter of choice and what will work best in the layout of the page.

Mapped Images

Link to next section
   A different, and colorful, form of navigation for your site is a mapped image. The open book on the left has two pages. The page on the left is an active link and could take you to any part of your site, or even another web site. The text above the book is there for accessibility, as text browsers often can't use the mapped image. As you run your mouse pointer over the image, you will see that your pointer changes over the portions of the image that are linked. The biggest drawback to this type of navigation is that it is not always intuitive and can cause frustration for your visitors. Clicking on the left page will be tak you to the next section.

Floating Menus

If you are looking for navigation a bit out of the ordinary, another example of Javascript navigation is the floating menu over on the left. Javascript menus come in most any size and type: from static menus that stay at the top or bottom of your page, to a sliding menu like this one that floats along and keeps your navigation available at all times, regardless of where your visitors are on the page. The drawback to using Javascript navigation is that not all your visitors can access it for the reasons previously mentioned. The best method to work around this problem is to also display your navigation as plain text, just as we have done along the bottom of all our pages.

Media

Considering that music and video are becoming more common on the Internet, it is surprising that web page design is quite a bit behind the times. The W3C, the organization that establishes the rules for correct web page design, has yet to come up with a standard that is of any real use and there is no single format that web browsers can agree upon for audio and video content. For this reason, most all media additions to your site are proprietary, meaning that your visitors will need to have special software installed on their computer in order to hear, or view, your presentations. An additional problem The speed at which this content can be delivered is also dependent on what type of connection your visitors are using and the speed of your web host.

Music, an audio message from you, or sound effects can be placed on your website and either activated by your visitors, or set up to run in the background as soon as someone arrives at your site.

Here is an example of a short WAV file that would be under the control of your visitors. It is 0:07 seconds in length and depends on either Quicktime or Windows Media Player for the playback: two formats that are quite common and work as a part of the browser (providing your viewers have either of these components installed). I feel this is one of the best ways to allow a visitor to access audio content, since it works within the browser to deliver the audio and the visitor can decide if they want to listen or not. There is also an unapproved way to use audio within a page and it offers nifty controls. But, I've left it out of this page in favor of more accessible means of delivery. In addition, I have also added a text version of this short excerpt for the hearing impaired. Be aware that, in most cases, clicking the link will open a new browser window.
A spoken audio example in WAV format.
Transcript of spoken audio example.

Longer audio selections, or video, can present problems due to the time it takes them to load into the browser of your visitors when using the embedding style of the previous example. One possiblility is to offer these selections as downloads, although when you do this, you lose any control over their use once they have been downloaded. Another possibility is to offer audio or video in a streaming fashion, which would require you to have a web host that supports it (this can be expensive for large files). The content must also be encoded in a common form (such as MP3) and your visitors would need to have a player that plays the same type of content.

Here is an MP3 selection in a streaming format (music only, no text equivalent). It is 0:41 seconds in length and the speed at which it loads and begins playing is dependent on your Internet connection, the way your external MP3 player is configured and the speed of my web host. In most cases, clicking on this link will open an external MP3 player.
An audio example encoded in MP3.

Here is the same selection in the WAV format, so you can compare the speed and with the same conditions as mentioned above. Since the selection is music, there is no text equivalent.
A musical audio example.

As you can see, both delivery methods have their strengths and weaknesses. If you are on a dial-up connection, the streaming MP3 example is probably faster in that it starts to play as soon as the player is activated. The WAV example has to load into the page to the full length of the example before you can hear the entire selection. Of course, this is sort of a moot point for those with DSL or cable connections, but still should be kept in mind when considering your target audience.

Provided you have the copyright ownership of a work, we can convert your selections into MP3, WAV, or most common audio formats. We can also link these selections onto your pages in whatever delivery method you choose and make sure that they can be accessed through your web host. Please keep in mind that there are some problems in the use of MP3 files and their use on the Internet. If yours is a non-commercial site, there is no problem and there are other popular formats available for use on commercial sites.

These are just a few of the many ideas available for your website. Other possibilities would be the addition of a chat room, guest book, message boards, or even a search engine to help your visitors find what they are looking for on your site.

We recommend that when planning your site, you take some time to explore the Internet, in order to discover what you like and dislike. Once you have an idea of what you like, let us know what you found, and where you found it, so we can incorporate the design elements and ideas into your pages.