Advanced Website Creation
Advanced Website Creation |
|
Dale A. Charletta, MD has reported no financial interest, arrangement or affiliation with a commercial organization that may have a direct or indirect influence in the subject matter of this presentation.
Contents
The transformation of the World Wide Web from research tool to socioeconomic phenomenon has changed the nature of the relationship between web site and web surfer. What was once a strictly text-based medium is now capable of providing a rich multimedia experience. This change has been made possible by advances in processor speed, network bandwidth, software and the sophistication of site designers.
Unlike passive media such as textbooks, journals and videotapes, the Web enables a two-way interaction with the user. But there is more to interactivity than technology. Site designers must also be aware of human interface issues when designing and implementing websites. A simple, well-conceived text-only site is often more interactive than a site employing poorly-executed multimedia features.
This paper is written to help site designers interested in creating or updating their sites. It may also be useful for anyone interested in World Wide Web design.
History
Physicist Tim Berners-Lee created the World Wide Web as a way to share nuclear accelerator research data among research sites. It was initially text-based, but employed hyperlinks. A hyperlink is special text that transports the user to another web page when clicked. Simple hyperlinks served the research community well, but the adoption of the Web by the general public and industry accelerated when multimedia elements such as images (still and motion) and audio were grafted onto the Web specification. The early site designers were usually computer programmers. They were forced to manually edit the HTML (Hypertext Markup Language) code that sits behind each web page. As the site design tools became more sophisticated, site designers were able to concentrate on the appearance of the site rather than the details. This change has enabled users without computer backgrounds to create web sites. Much as having a word processor does not make one a writer, having the latest site design tools does nothing to ensure a well-designed, interactive web site. The nuances of graphic and multimedia design can't possibly be distilled into one monograph, but there are many fundamental concepts that should be kept in mind by site designers. Note that these rules are not ironclad. Even the most egregious transgressions can "work" if executed correctly.
Site "Generation"
David Siegel, web site designer, outlines the basic generations of web sites in his book Creating Killer Web Sites:
First-Generation sites have a few pictures, all left-justified. They contain wall-to-wall text on a gray background. They use many horizontal rules between paragraphs. They have hyperlinks within the document, and maybe a row of hyperlinks at the bottom to serve as a navigation bar. They may have irritating blinking text, or a repeating background pattern in a contrasting color that makes it difficult to read the text.
Second-Generation sites exploit the capabilities of newer browsers to arrange elements on the screen in a visually appealing way. Graphics are esthetically placed among blocks of text. A solid background color blends into a menu bar.
"A third-generation site uses typographic and visual layout principles to describe a page in two dimensions. Third-generation site designers carefully specify the position and relationships of all elements on the page, retaining fine control of the layout. Third-generation sites use metaphor and visual theme to entice and guide, creating a whole experience for surfers from the first splash screen to the exit."
The second edition of Creating Killer Web Sites, published in 1997, describes these three generations of site design. I've added another: the Fourth-Generation site. Fourth-Generation sites are rare. They spin out customized web pages in real-time rather than regurgitating pages created months ago and stored away on the server's hard drive. Examples of fourth-generation sites are online merchants that tailor their sites to better appeal to the user's interests (as gleaned from earlier purchases or a user profile completed during initial registration); portal sites that customize the weather, sports and news headlines to your preferences; and corporate sites that queries the corporate mainframe computer to indicate those items that are currently in stock. These sites offer the ultimate in user interactivity. The software that runs some of these sites costs millions of dollars to develop. However, it is now possible for individual site designers to create fourth-generation sites. Databases such as Access, FileMaker and 4th Dimension now incorporate web interfaces that allow designers to serve up data in real-time, and allow users to modify the data.
Effective Use of Hyperlinks
Hyperlinks should enhance the flow of information, not hinder it. They should be easily identified, not hidden within obscure icons. Hyperlinks used for navigation should be of a consistent style from page to page. This adds cohesion to the site and orients the user, much as highway signs can be easily recognized among billboards. Sites that use obtuse hyperlinks to guide the user to dead-end pages, with no way of returning, are to be condemned.
Each page should provide a link back to the "home", or starting page.
Effective Use of Graphics
Previous editions of this document stressed the need to minimize the size of graphic files displayed on web sites, since transmitting large graphics files results in unacceptably long delays. With the increasing availability of broadband Internet access, this is becoming less of a concern. Keep your audience in mind. Physicians are more likely to use broadband than the general population. If your site uses large files, particularly audio and/or video, consider giving low-bandwidth users the option of viewing an alternate version of your site that has pared-down graphics files.
Web designers should understand how to decrease image file size. For example, for photographic images that have gradual transitions between adjacent colors, use the JPEG file format. For images having large areas of the same color, such as bar graphs, GIF images are smaller. It is also possible to pre-load "pop-up" images, those invoked by JavaScript programs (see later), to prevent delays. Avoid the temptation to use animated GIF's. They produce bloated files, since each frame of the animation is essentially a GIF file. If animation is necessary, use a file format optimized for small file size, such as QuickTime or Flash (discussed later). It's important to use graphics to augment, not distract from, the web designer's goals.
Graphics should provide a consistent "look and feel" to the site.
Most professional sites use graphic design elements to give the user of sense of familiarity as he or she navigates an unfamiliar site, in much the same way a navigation bar containing hyperlinks was added to each page of early web sites. Instead of a row of text hyperlinks, most sites now use invisible tables, in which a rectangular picture occupies every cell. The table is repeated on each page, at the top, side or bottom, for navigation.
Graphics can give web sites the appearance of an interactive "GUI", or Graphical User Interface. For example, control elements such as buttons, list boxes and popup menus, particularly when combined with background JavaScript or CGI (Common Gateway Interface) processing of user input, can make a web site behave like a fully interactive computer program.
Choice of color scheme for graphics should be considered. Certain colors in combination work well together, analogous to the way music notes combine to make a chord. They engage the user's attention. Contrasting colors (such as red text on a dark blue background, a combination that appears on many ASNR PowerPoint presentations) cause visual fatigue.
Empty space is a powerful design element that is exploited by professionals but almost never used by novices. It guides the user's eyes from one part of a web page to the next. It also effectively separates blocks of text. Most early web sites used horizontal rules to separate paragraphs. Professionals never use horizontal rules.
Audio
Like animation, audio can enhance the interactivity of a web site, but this comes at the cost of speed. Audio files are large. Like large images, they take a long time to download. Users with slow connections do not tolerate delays. A short audible "click" accompanying a mouse-click on a 3-D picture of a button is an example of effective use of sound to provide feedback.
Animation
Animation, if done correctly, can make web sites come alive. There are many ways to animate web sites. Some work better than others.
The simplest method employs animated GIF's for short animation. Most banner ads are animated GIF's. Most graphics programs, such as Adobe Photoshop, can create animated GIF's. These files are unfortunately quite large. They also do not support hotspots, or distinct areas of the animation that can be hyperlinked separately.
Dynamic HTML, or DHTML, is an increasingly popular way to provide animated graphics. DHTML is only supported by "modern" web browsers. DHTML is actually a combination of HTML (HyperText Markup Language, the hidden format that underlies all web pages) and JavaScript (a programming language developed by Netscape, based on the Java programming language created by Sun Microsystems). DHTML, especially when combined with customized JavaScript applications, can enable web sites to behave much like full-blown applications. Images can be moved around the page, morphed into other images, made invisible or visible, to name a few tricks. DHTML is used frequently by web designers to create "rollover effects" to add interactivity. For example, if the cursor is simply placed over a picture, a text caption can be made to appear below it. User interaction with one part of the web page can invoke an action in another part. In addition to having a high "coolness" factor, rollover effects are exploited by professional site designers to make web pages more concise. Instead of cluttering a page with a tremendous amount of text or images, or linking an outline of the information to multiple remote pages each containing more specific detail (and thus fragmenting the presentation of information, not to mention causing delays as each linked page loads), a better approach uses blank space to contain the detail information, which is displayed only when the user asks for it, and is replaced by other information (another rollover effect) when the user selects another option.
Frames can also help organize hierarchical information. Frames allow a browser window to display several web pages at once, each within its own "windowpane". Design elements such as navigation controls (or banner ads) can be fixed in place without "scrolling-off" as the user explores the content.
Apple QuickTime and Macromedia Flash are two of the most popular and effective multimedia standards. They are both capable of taking control of the web experience by incorporating sound, motion, interactivity and programmability. As an added bonus, they allow extreme levels of image and audio compression.
QuickTime uses the Sorensen video compression codec (code-decode algorithm), which was chosen as the standard for digital television.
Flash and QuickTime support the MP3 audio compression standard, which has a "lossy" compression ratio of around 10:1.
Both programs also support "vector" graphics, which define graphic objects as shapes (mathematically) rather than as pixels. For example, a circle on the screen is defined by its center coordinates, radius, border thickness, fill color and border color, rather than each individual pixel. Vector graphics are very compact.
Both formats also allow multimedia streaming, which is a technology for playing an audio and/or video file while it is being downloaded in the background.
Microsoft Windows Media Player and RealNetworks RealPlayer are alternative multimedia formats supported by many professional web sites. As expected, Microsoft's product is relentlessly increasing in market share.
Animated site "introduction" pages can draw the user in and set up the "theme" of the site, but always remember that even the slickest animation will become stale from repetition. Always include a "skip" button to exit introductory shows early. Better yet, use "cookies", which are small snippets of data the web page places on the user's hard drive that persist between visits, to remember the user's wishes. Sometimes the best interactive feature is the ability to enable the user to decline to sit through the interactive features!
Java and JavaScript
As noted above, these hidden programs (or links to them) on a web page can provide the user with a richer browsing experience. When executed correctly, they can make a web site fully interactive, reacting to user input rather than just serving up pre-rendered pages. A Java-powered web site can resemble a computer program instead of a newspaper.
This power comes with drawbacks, however. Java and JavaScript are implemented differently on each operating system (Windows, Macintosh, UNIX variants), operating system version, browser (Netscape, Microsoft Internet Explorer, Safari, Mozilla, Opera, etc.) and browser version. Site designers who incorporate these programs into their sites should preview their sites on several different operating systems and browsers.
Page Layout Issues
Web users view pages at a variety of monitor resolutions (horizontal and vertical pixels). For this reason, the W3C (World Wide Web Consortium) specification initially contained no method of placing items such as text or images at particular screen positions. Long lines of text simply wrapped to the next line on the user's screen, in an unpredictable manner. Graphic designers, who are accustomed to having absolute control over how things look, went to convoluted extremes to "hack" web pages to look "right". Better graphic placement control is now incorporated into version 4.0 and above browsers.
Font (Typeface) Issues
There is currently no way to absolutely control how large your text appears on a user's page by using standard HTML formatting. Fonts differ between Microsoft and Netscape browsers, and between Windows and Macintosh computers. One way around this limitation is to use "pictures" of text. This works well for headlines and menus, but is unworkable for the main text of your page. You can't search a picture for a particular word. Also, graphics cannot be translated by text-to-speech software that enables blind users to access the Web, and is invisible to the many users who use text-only browsers or those who configure their browsers to suppress pictures (often used to increase speed). You can (and should) attach a text "tag" to your graphics for these reasons. All modern site design programs support this feature.
Modern web browsers offer some help in the area of fonts. Instead of using one of six "heading" tags, which vary the text size in unpredictable ways, site designers can now specify the height of the font in pixels. There is also support for "serif", "sans-serif" or "typewriter" typefaces.
Another feature of modern browsers that facilitates the consistency of text is Cascading Style Sheets, or CSS. CSS allows you to define your own text styles that can be used globally or only on one page. The text size, style (bold, italic, underline, etc.), basic font type (serif, sans-serif, and typewriter), font color, background color, hyperlink color, visited hyperlink color, and other features can be defined. Cascading style sheets are a powerful tool exploited by professional designers to create crisp, clean, cohesive sites.
So how does the site designer enhance the design of his or her site? Modern site design programs, such as Adobe GoLive and Macromedia DreamWeaver, include a layout grid, onto which text and graphics are placed. This works well for pictures, but as noted above, text has a tendency to produce unpredictable results. Another solution is to use Adobe Acrobat. Acrobat is a file format based on the PostScript standard that has been used since the mid-1980's to generate consistent paper printouts of computer text and graphics. This precise control over output, including the ability to embed different typefaces with absolute accuracy, can also be used on web pages. To create Acrobat documents, one needs to purchase a copy of the full application for around US$300. The Adobe Acrobat viewing software, which includes a browser plug-in and a stand-alone viewing application, is free from www.adobe.com. Shareware programs that generate Acrobat .pdf files (Portable Document Format) from any application are also available. Unfortunately, the information contained within Acrobat .pdf files is invisible to some web search engines. OS X, Apple's new operating system, allows applications to print directly to .pdf format without any additional software.
The Web continues to evolve. Each iteration of standards adds new interactive tools to empower the site designer and user alike. Matching the features of your site with the capabilities of your users is like trying to hit a moving target. When designing your site, keep your audience in mind. Most radiologists will be using relatively current browsers on relatively fast machines and relatively fast Internet connections. If your site is aimed at less advanced users, consider paring things down.
When designing your site, keep in mind what you're trying to accomplish. If you're interested in dissemination of neuroradiology information, don't bore the user with a 30 second introductory animation. Such an animation would be more appropriate on your personal web site featuring your digital photography. A well-designed interactive web site will complement the professionalism of your practice.
A continuously-updated list of links related to the World Wide Web is available at http://dir.yahoo.com/Computers_and_Internet/Internet/ World_Wide_Web/.
Copyright © 2004 American Society of Neuroradiology, www.asnr.org