Developing an Effective Web Site
by Leslie Cortes, MD
Clinical Information Engines
accepted for publication in Medical Computing Today January 1998
Great Artists -
Join the Web -
Comments or questions for posting?
Introduction by Medical Editor: The two most common -- and not mutually exclusive -- reasons physicians create and maintain Web sites are to present their professional services, and to provide medical/clinical/educational resources. Sites can be constructed for colleagues, students, housestaff, or patients, or as a labor-of-love or commercial project for the Internet community.
The World Wide Web is a powerful information service that is fast becoming as ubiquitous as the phone book. The same Web pages residing on an office computer's hard drive or LAN server (as opposed to a Web server on the Internet) can provide information to patients, office staff, and colleagues. These pages can include office policies, frequently referenced clinical materials, and even patient education materials. This article is for physicians and other health professionals who wish to create a professional-looking, yet inexpensive, site that conforms to Internet standards.
Dr. Cortes' practical article concentrates primarily on designing professional service sites. For a medical practice, such a site can include information about a physician's hospital and practice affiliations, answers to patients' FAQs, a patient newsletter, and even links directly to online specialty and disease-specific resources.
But this article is also applicable to health care professionals looking to create and maintain online clinical and educational resources. Usually a physician creates a Web site with several objectives in mind; one of the unique features of the Internet is the easy coexistence of commercial, education, clinical, personal, and interactive resources on one site, although without concrete planning and clear goals this coexistence can be a double-edged sword. Experienced and responsible Web designers recognize the importance of making sure end users understand the context within which the site's content is presented, and the best time to avoid ambiguities is during the early stages of design.
Advances in Web programming and technology such as DHTML, push technology
"channels", and plug-ins are beyond the scope of this article. This article also does not address common programming techniques such as tables for presenting data. We welcome submissions on these and other topics from physicians and others experienced in these Web tools, for publication here to the Internet medical community.
Some of the leading Web site creation and maintenance tools include SoftQuad's HoTMetaL, Microsoft FrontPage, and NetObjects Fusion. Adobe PhotoShop and Kai's Power Goo are popular tools for graphics work. Commercial Web site developers usually buy the best productivity tools available, without much regard to price, because good tools pay for themselves. For physicians creating sites, however, Web
site development is only one part of teaching and practice. Fortunately, it is possible to create an effective site without an inordinate investment in time and money. And, the more the physician-client understands about good site design, the better the result is likely to be; this is true even if a commercial Web designer is hired.
Putting an effective Web site together requires more than finding the right tools and avoiding HyperText Markup Language (HTML) syntax errors. The site must present information that visitors want to read. This is what makes commercial and professional Web sites different from personal (vanity) home pages. A personal home page is about the author and the author's interests, whereas a professional Web page is about the reader and the reader's needs.
Spend a few hours looking around other medical sites. This will not only help you get a sense of what is already online that is similar to the site you'll be developing, but will also give you a feel for the style and substance of quality sites. From this perspective, many of the sites mentioned in the Medical Education articles on this site are well worth a visit.
The best Web site design reference I have found is Jakob Nielsen's. Nielsen, a professional designer at SunSoft (Sun Microsystems) and the author of numerous publications, including the excellent Usability Engineering (Boston, Academic Press, 1994; ISBN 0-12-518405-0), addresses key design issues. Nielsen's site is neither a Web site design primer nor a tutorial; rather, it is a source of design principles drawn from empirical work. Nielsen's site is most helpful for its eye-opening information on how users approach Web sites. For example, he notes how most users abandon a page that takes longer than 10 seconds to download, and also warns not to assume visitors will scroll down to read an entire page, or to use animated GIFs when text comprehension is critical.
Vincent Flanders's site is an excellent collection of common Web page design errors. Flanders teaches Web page design by counter-example, using live Web sites and wry humor. Before designing your site, visit the Nielsen and Flanders sites and, before launch, plan to return to review your site for the design flaws they discuss.
Good Artists Copy, Great Artists Steal
No, don't steal literally. Just as Flanders believes that showing Web authors examples of poor Web page design will help them avoid those errors, looking at professionally designed pages is equally educational.
Pick a favorite Web site and view it with a critical eye. If a particular page seems compelling, figure out why. Study the site graphics and the text. Sometimes the picture makes the page; sometimes it's the narrative style. Strive to create pages that use those same design elements. If the site is a delight to navigate, determine what makes it so easy to use and "steal" those ideas. When the HTML code behind a particular feature is not obvious, look under View for the HTML source. Browsers put the genius of the world's best Web authors and graphics designers on every desktop.
HTML as a Second Language
A Web page is a simple text document written in HTML, a page description language that lets authors determine the nature of page elements: text, tables, frames, images, and additions such as sounds or video presentations. Specialized HTML tags permit textual attributes such as type font, type emphasis (i.e., underline, boldface), and numbered lists. A Web browser is software capable of rendering an interpretation of a Web page, given its HTML description. HTML is largely a declarative language (HTML tags tell what a page element is, rather than specify how that element should be presented); thus, Web browsers have great latitude in composing pages for the end-user.
The upside of this flexibility is that a page description can present information independent of video resolution, screen size, color capability and depth, and bit-mapped graphics capability. The downside is that authors have limited control over the page's physical layout. For example, there is no reliable way to control for different video resolutions or to individualize breaks in printing. Web site designers have the onus of designing pages that will look good in a variety of hardware and software environments.
Web pages are simply ASCII text files, and any text editor is also a Web authoring tool. An ASCII text editor is included in every operating system from Mac to Unix, and many professional-looking sites are created using nothing more than a DOS text editor or Windows Notepad. Other simple editors, such as Microsoft's free Active-X Control Pad, are Notepad-like programs that include rudimentary page layout functions, HTML syntax help, and some scripting tools.
Unfortunately, using an ASCII editor means learning HTML as a second language. Before you start creating pages this way, you should read a good HTML reference such as NCSA's online A Beginner's Guide to HTML, and study a good HTML style guide such as Composing Good HTML. Also, take time to do a few tutorial exercises. There are many other sites at which you can learn HTML basics, get helpful tips and even download public domain graphics. Internet service providers (ISPs) such as America On Line (AOL) host HTML help pages for their subscribers. Others can use the GeoCities HTML resources and Netscape's Creating Net Sites.
The ASCII text editor approach has its virtues, but it is not without disadvantages. Among its advantages are existing familiarity with the software, zero investment in new software tools, and the ability to exercise complete control over HTML tags. Disadvantages include having to type out every single HTML tag, the absence of spell-checking and HTML syntax/link checking, difficulty in viewing an evolving page, and the absence of Web site management features.
There are ways around this, of course, such as toggling between a Web browser in one window and the editor in another. And an HTML page can be loaded into a full-fledged word processor to do spell-checking. These work, but awkwardly.
A better approach is to use an HTML editor. There are many inexpensive editors. Some are add-on extensions for popular word processors; others are wizard-like Web page generators; and still others are simple word processors that have dialog boxes to help create frames, tables, and lists.
A few editors are WYSIWYG Web content processors that allow the author to see how the HTML pages will appear online by working directly within the built-in browser's interpretation of the page. There are two pitfalls here. First, the end-user will frequently view the page with a browser other than the author's WYSIWYG tool. Second, just as there are many ways of saying the same thing in natural language, so too are there are many possible ways to declare page elements in HTML.
I use AOLpress (formerly GNNpress), which is a full-fledged WYSIWYG editor with an integrated HTML source editor. It is available for Mac, Unix, Windows 3.1, and Windows 95 platforms. AOLpress has a built-in spell checker, an HTML syntax and link validator, and built-in Web site management tools. The program is even equipped with a built-in HTML reference complete with interactive tutorials. Best of all, it is freeware. AOLpress is not a perfect tool, however. The latest version of AOLpress 2.0 for 32-bit Windows is more stable than the earlier 2.0 beta version, which had the unfortunate tendency to crash unexpectedly. (It's always a good idea to save work frequently--even in final versions of software--in case of program bugs.) If AOLpress becomes an orphan product, which I suspect it may, several of its features may become obsolete in a year or two. In the software business, anybody standing still is likely to get left behind.
Netscape Navigator Gold (NNG) is an alternative WYSIWYG HTML editor especially for those who already own the NNG browser. With NNG, there are fewer reasons to edit the HTML source, which is nice because editing in NNG is
more cumbersome than it is in AOLpress. To expand, the NNG table creation and editing dialog has more options. For instance, the AOLpress table creation dialog doesn't include table cell colors; NNG does. For pages that use tables as a layout device, the NNG table
dialog simplifies page creation. Also, placement of text around an image is easier in NNG if one is willing to accept the browser's creation of non-breaking spaces. I have mixed feelings about this because while this produces a very convincing "frame" effect, it yields HTML that may not look very nice in some browsers or at resolutions different from the one used to create the page.
NNG is less accommodating than AOLpress for doing source editing. From what I have read and actually witnessed, WYSIWYG editors share the annoying trait of rewriting the author's HTML. In my experience, AOLpress does this far less frequently than NNG. That is important because it spares me the frustration of having the editor "correct" HTML tags that are already correct.
There are plenty of inexpensive HTML editors that lack the convenient WYSIWYG feature. These rely on external browsers to provide the page view. Allaire HomeSite is a popular example. Like most such editors, HomeSite makes Web site development feel more like a programming exercise than a text processing task. On the positive side, HomeSite does provide tools that generate complex HTML tags. I would recommend it over the other non-WYSIWYG HTML editors I've tried.
The debate as to whether Web pages should or should not be written with WYSIWYG editors reminds me of similar debates concerning high-level programming languages. When WYSIWYG tools get to the point that they produce HTML as good or better than most handcrafted HTML, there will be less merit to the arguments against WYSIWYG editors. Until then, I will continue to use them for basic construction, and to view and refine the actual HTML of each completed page by hand.
The basic graphics toolset for Web design is one that creates and manipulates static GIF files. Simple painting programs such as the Windows Paint accessory do not. My choice is PaintShop Pro 5. It is shareware, but there are many shareware and freeware alternatives. Check shareware archives such as the FilePile, ZDNet Software Library and NONAGS sites.
A thumbnail image cataloging program can be helpful. There are several in the shareware archive resources mentioned above.
The last graphics tool is a GIF animator for creating and editing animated icons. If not a component of your basic graphics package, there are several available as shareware. Microsoft offers its GIF Animator as freeware.
Unfortunately, there is more to good graphics than just tools. The graphically inept should hire a graphic artist, find a good source of public domain art work, or simply stick to simple graphical elements. For PaintShop Pro users, Jeff Burton's homepage is an excellent source of graphics techniques. Those who choose a different painting tool should search the Web for pages of hints and tips relevant to the software.
Public domain archives of GIFs can save hours of work. Just make sure that your selection is indeed public domain before using it on your Web site. Some sites that claim to carry only public domain items in fact have copyrighted artifacts mistakenly (or purposely) posted as public domain. Some artists and graphics houses offer some of their copyrighted works royalty-free for noncommercial use; is your use noncommercial? Still another issue is that downloading software and images does carry some risk of computer virus infection.
Web Page Validation
Web page validation refers not only to spell-checking but also to HTML syntax checking, verification of hypertext links, and calculation of page loading times. HTML is continuously evolving, and the HTML validation tools built into today's HTML editors become quickly outdated. Worse yet, some editors produce syntax errors. Because all Web browsers attempt to make some sense of every site -- including those that contain flagrant HTML syntax errors -- there is no assurance that two browsers will interpret an errant page the same way.
To validate pages and gain confidence that they will appear correctly on any browser, use a free Web-based validator such as Dr Watson. Other sites such as Weblint and Doctor HTML will validate entire Web sites for a modest fee. Using two different validators is sometimes worthwhile.
Join the Web
Except for intranets or LANs, most sites are ultimately uploaded and maintained (published, or hosted) on an Internet server. Many ISPs will host their subscribers' noncommercial
and personal pages for free. Check with your ISP and search the Web for hosting services that provide free home pages. Those who are publishing a nonprofit educational site and do not have access to an educational institution should consider establishing such an alliance. Internet communities like GeoCities may be receptive to the idea of hosting sites for little or no charge in exchange for promoting their service.
While some hosting services provide their subscribers with software that automates the transfer of pages from an author's computer to the server, most do not. Some HTML editors, like NNG, have a built-in publishing wizard. For those who lack this ability, a File Transfer Protocol (FTP) program is the solution. Many FTP tools are shareware. Visit the Web shareware repositories, or search using the keywords FTP and the name of your operating system.
Both Nielsen and Flanders point out that every site is part of the larger Web, so it makes sense to go beyond providing visitors with a good professional site and integrate it into the larger Web community. There are several ways to do this. Use Meta keyword and description statements to help Web programs appropriately index the site. Register your site with the Web search engines that your intended audience actually uses. List the site in appropriate Web directories. Establish reciprocal links with other sites that the intended audience is likely to visit. Use unilateral links to sites whose content augments yours; this article, for example, is full of unilateral links.
The Web is a dynamic place. Sites frequently disappear, and domain names and site addresses often change without notice. Site maintenance is a housekeeping chore, the size of which depends on the size of the site and how often its content requires revision. Regardless of its magnitude, site maintenance is a chore that needs to be assigned or scheduled to insure it gets done periodically. The objective is to make sure that the site's pages have current information. This includes not only updating the site content, but also checking to make certain all links, especially those to other sites, are still relevant and valid. Either check the links manually or use a site validator, and create a prominent mechanism that lets visitors inform the Web site manager of inactive links.
A site larger than 20 pages is easier to manage with integrated site management tools. These tools show a graphical representation of the entire site, and this lets one easily identify and fix broken links. Some editors like AOLpress have them; many others do not.
For Further Information
Several newsgroups address Web development issues. Visit them under comp.infosystems.www.authoring. Lurk there and follow the discussions that interest you. When you feel sufficiently comfortable, ask questions. Some of these groups do maintain Frequently Asked Questions (FAQ) and FAQ-like postings (e.g., Frequently Encountered Problems). These are excellent when they are available; unfortunately, much of that work is charity or labor-of-love and so gets done only after folks have fed their families.
Want to know about HTML style sheets? See Cascading Style Sheets.
Want to learn what people are talking about when they say SGML? Read TUTORIAL -- A brief introduction to SGML and The SGML Web Page.
Web Sites That Help Build Web Sites is an annotated list of Internet sites useful for general Web reference, Internet software and tools, graphics, sounds and Web design.
of other articles