OIT Tech 32px
pagemasters toolbox -- classic commonspot

Page and Site Design for New Pagemasters


Table of Contents


 

Getting Started


Web sites should be organized to  provide effective access to the resources that you have on-line.  The initial design may be intended, in part, to conceal missing items;  once they are no longer missing, they can be highlighted, instead.  Usage statistics can provide some insight into the ways that people use your Web pages, but remember that they are intrinsically incomplete:  usage reports are based on Web requests that came to the server. As such they count "hits" for every time a browser starts up that has its home page configured to be a page from the server. They also count hits every time any Web search engine checks the page. No "hits" are recorded for any time a user goes to a page that is displayed from the browser's cache. No hits are recorded for any time a user goes to a page that is displayed from a "proxy server" (such as AOL).  Although usage statistics are intrinsically limited in their accuracy, they are often the only available information, so they should be considered, but with caution.  For example, if a page is heavily visited, you do not know whether that is repeat traffic, people on their way to various pages that it links, or whether it is one-time visits by people who are desperate because they can't find what they want anywhere else.

Designing a Web site is an iterative process that includes three distinct but interacting phases:

  1. The conceptual design (what information will be on what pages, how will the links among the pages be organized, how will navigational and content layers and pages be separated or mixed, etc.).

  2. The choice of the exact text for the terse labels on the shortcut buttons, for short text links, and for any banner graphics.

  3. The visual design of the pages:  what will be the shape, size, and placement of the shortcut buttons and other graphic and text elements.

Some otherwise attractive conceptual designs or visual layouts will falter in practice because of the difficulty of one or both of the other phases, especially the difficulty of communicating through terse text or compact graphics exactly what will be found if one follows a particular choice.  The current design of the "official_pages1" template in CommonSpot has room for enhancement in this respect (e.g., many people do not immediately recognize that the Cutler Hall woodcut logo in the upper left corner is a clickable link to the main Ohio University page); we have attempted to address this issue by making "Ohio University" in the copyright statement clickable to reach the main Ohio University page and displaying it underlined in the graphic at the lower right corner.

 

Goals


Designing a Web site calls for the balancing of several mutually contradictory design goals!  In particular:

  1. Keep the text and graphics files small so that the pages will load quickly, and the space they occupy on the screen small so that as many choices as possible are visible with minimal scrolling, even on small screens.

  2. Keep the graphics visually appealing (e.g., use textured or banded rather than uniform ("smooth") color behind the text on the buttons, even though it doesn't data-compress as well).

  3. Minimize the number of files that have to be visited on the way to the item of interest (i.e., have fewer navigational layers).

  4. Keep each file simple, with only a few choices, both to make it easier to choose and also to minimize scrolling.

  5. Have choices that are targeted to various identifiable sub-audiences (e.g., prospective students, their parents, prospective employees, current students, current employees, etc.).

  6. Provide every sub-audience with direct, simple access to all parts of the organization's Web presence, since there really is no telling what might be of interest to each individual, even though you can probably predict fairly well which will be the most popular items for many of the sub-audiences.

  7. Your audience should find it easy to conceptualize the overall organization and structure of the links among your site's pages, based on the first few pages they enounter.  They should not feel confused or disoriented when they confront the navigational links.  This does not mean that you can't include some "random" links, as needed, but it does mean that the primary navigational links should form a readily visible organic whole. 

  8. If your pages are part of a larger organization's Web presence, that fact should be obvious, perhaps by the use of a logo graphic in a standard location on the page, color choices, font choices in graphics, etc.

Goals 3 and 4 are always in conflict.  For example, to navigate among the 80,000-plus Web pages at Ohio University requires a minimum of 5 navigational layers, but that only works if there are a dozen choices at each layer.  If the layers were simpler, with only two choices at each point, it would require 17 layers of navigation!  For most Web sites, the navigational layers' pages should offer between four and ten choices.  An example of a page whose authors have chosen to emphasize fewer clicks, rather than fewer choices, is the OSU home page, which has 168 links, more than three times as many as the Ohio University home page (depending on how you count the choices in pop-up menus).

If we follow goal 5 but don't pay attention to goals 6 and 7, we would end up with most of our audience frustrated by having to choose between using a generic home page as a starting point that requires an extra layer of navigation to reach any content pages, on the one hand, or, on the other hand, using a specific home page as a starting point that is often one click closer, but sometimes requires going back up to the generic home page and down an alternate path.  One way around this would be to have all the audience-specific pages be like the generic home page, except with the choices in a different sequence, and with perhaps a few choices at or near the top that are "promoted" from the second or third layer of the generic set.  For example, have "Admissions and Financial Aid" as one button on the generic home page, and have four of the choices from that sub-page all be on the "Prospective Students" home page.  This does run the risk of compromising goals 1, 4, and 7.

 

Designing Pages and Sites


A solid, well-designed web page creates the ultimate first impression.  People all around the world will be accessing your pages.  Your pages will not only reflect upon yourself and your department, but also on Ohio University as a whole. 

Your primary audience will be people who come to your site seeking information.  In many cases they will be trying to find answers to very specific questions.  Your first goal, then, is to ensure that the information is present on one page or another within your site.  You will want to do more on your web pages than having just lists of links, with no real content.

Your second goal is to ensure that people can find the information easily.  If your site includes a lot of information, it will be quite reasonable to organize that information into categories, and provide one or two layers of navigational pages that provide links to the content layer of your pages.  You should keep the number of layers to a minimum, so that your reader will not be forced to make an "endless" succession of choices on content-free pages before finally reaching the real information, but do provide enough layers so that the number of choices on each page is not overwhelming.  Because each member of your audience will think about the subject in his or her own way, it is quite reasonable, in fact usually a very good idea, to design your navigational layers so that there is more than one sequence of links that can be used to reach any given content.  It is, after all, "the Web," not "the tree."

Your third goal is to ensure that people find the site comfortable and interesting, so that they will be inclined to return.  We cannot emphasize enough the importance of a good layout and design for keeping interest in your web pages. 

When you design your own site, it is often reasonable to include a "hotlist" page, one containing links to other pages on the Web that you think visitors to your site would be likely to find interesting.  Just be sure that your site is rich in original content, too. If you have links on your pages that lead to other people's work, consider carefully whether to include links to pages that may be considered controversial, or might offend some members of your intended audience.  Be especially cautious about links located on your home page.

Web sites, and the pages they are composed of, present challenges to the author and editor that differ from those of hardcopy publications.  With printed materials you not only have control of the layout of the text and graphics on the page, but you also have control of the type face and size, and the paper thickness, quality, and surface finish.  Your Web pages, on the other hand, will be seen by people using a wide variety of computer hardware and software:  PCs and Macs, running new and old operating systems, with large and small screens, using Internet Explorer, Netscape, Safari, Opera, etc.  Some, but not all, will have adjusted their browser to use a larger than standard font, ignoring the font choices coded in the HTML; some, but not all, will have adjusted their browser to use a window that fills the screen; some, but not all, will have disabled scripting; etc.  Time and effort expended on ompimizing the on-screen placement of page elements as seen by your browser will be of no benefit, and may actually impair the usability of your site, for part of your audience.

 

Flow


Smooth flow is one of the most important things about Web pages, and it is all too often neglected.  Especially if you have a lot of information, it is very important to make the pages and information flow together in a coherent manner.

Pages with paragraphs of information that look like this are distracting to read, and impossible to navigate.  Sometimes you cannot even get one clean sentence of information read without having a bunch of links distract you.  It is similar to trying to watch 3 TV programs at the same time, each showing you a minute's worth of the show before switching to the other. Bleah.

I know it sounds contrary to the overall principle of the Web, but try to use links sparingly.  Avoid having two links in a document that point to the same thing unless it is something like an example to look back on continually.  Name your links clearly, and give a description nearby if necessary.  Give people a chance to read your information and rest their mouse button finger.

Remember that each link is an opportunity to lose your reader -- some fraction of your audience will follow each link and be beguiled by the page they land on, never returning to complete reading your page.  At the same time, links embedded in paragraphs may be the most natural way to lead people to the information they came looking for.  What is required here is the thoughtful exercise of judgment by the pagemaster.



Deciding to Publish


When you first are working on a new subsite, the question that must be answered is, "Is this draft better than having nothing?"  Bear in mind that initially the correct answer to that question will be "NO!"  As soon as the answer is "Yes!" you should publish the current version and let OIT know that it is ready to be linked from the University Front Door pages by sending E-mail to servicedesk@ohio.edu, or by phone to 593-1222.

As you continue to work on your page, the question to ask is, "Is this version better than the public version?"  Again, often the answer to that question will be "No."  Whenever it is "Yes," you should publish the improved version.


When you are working on an official page, be very certain that you know who has the authority to answer these questions!  You and your supervisor should develop a clear understanding as to the nature of modifications you should make and publish immediately without seeking approval (spelling and punctuation errors, for example) and what kinds of modifications require explicit approval in advance.

Some "spelling and punctuation errors" may actually be issues of meaning; be especially careful about this if the Web page's visible text is in a language that is not your native language.


 

Boilerplate


There are four important pieces of information that should be included on every page

  1. A contact E-mail address. Make sure it is clearly visible in the text of your page, as well as having an E-mail link for those whose browsers can use it.  Use your own E-mail address on your personal page.  For departmental pages, the E-mail address should be a departmental short-form address (e.g., "servicedesk@ohio.edu"), not your personal E-mail address (so that when responsibility for the pages passes to someone else, whether during your vacation or longer-term, only the delivery address will have to be changed, not any of the HTML pages).

  2. Your name, or at the very least an impersonal identification, such as "Registrar's Office Staff."  In some situations, your will also want to include a postal address or phone number. 

  3. The date the file was most recently revised.  This helps people judge the likely accuracy of the information when they read it on screen, or if they read a copy of the page printed from a browser that did not put the current date on the paper.

  4. The URL of the file, for the benefit of those whose browsers may print the file with no URL or with an incomplete URL.

These four items can be combined readily into a standard "boilerplate" ending for your page, such as we have used below, at the end of this page.

Few things are more frustrating than trying to find someone through the web, finding their homepage and then - no way to get in touch.  Remember, content is important, and even these four pieces of information will give you more content than a lot of pages out there. The E-mail address serves a dual purpose because it also encourages others to give you feedback on your web page, and feedback is the best way you can find errors.  Trust me, people will point them out.

 

Web pages:  Fragile vs. Robust


Web pages, or the Web site consisting of a group of linked Web pages, are "broken-by-design" if they do not make reasonable compromises among the goals discussed in the previous section.  Web pages are "fragile" if they work with some browsers, but not with others, i.e., if they are easy to break.  In a nutshell, Web pages will break if they contain tags that the browser doesn't understand, or if they have been composed with unjustified assumptions about the browser, its configuration, or the hardware it is running on.  The rest of this section discusses the methods you can use to avoid creating fragile Web pages.

A very convenient feature of HTML is that browsers will ignore tags that they don't understand.  This means that it is easy to predict what all older browsers will do in the presence of a new tag, so that it is possible to make correct decisions about whether, and how, to use new tags.

As you browse the Web with a modern graphical browser, you will see many pretty pages, whose authors have done things you will be tempted to emulate.  In many cases, however, you will find that you must make a compromise between page designs that are pretty on some browsers, but are fragile (because they are ugly or non-functional on other browsers), and robust page designs whose appearance may be more "sturdy and functional" than "elegant."  Often you will find that for a comparable or only slightly greater initial effort, it will be possible to create page designs that are both robust and elegant.

As you make your choices about the design of your pages, you should keep clearly in mind the user population you expect to be serving; for example:

  • If you are a faculty member teaching a class that is scheduled to meet in a lab with large-screen, ethernet-connected machines that are running the latest version of Netscape, and you are confident that your students won't want to study those Web pages by dialing in from their off-campus apartments, then you can be quite uninhibited about the HTML features you use, needing only to test them in that lab. 

  • If you are writing departmental pages that you expect to be visited by prospective students and their parents from around the country, then you need to be very careful to write robust pages.  Many members of your audience may well be using freenet or other accounts that provide only text-based access (e.g., Lynx), or they may be using older computers, or they may be connected by slow dial-up lines.

Additional information on the demographic characteristics of Web surfers who visit Ohio University sites and their hardware and software can be found on-line at http://stats.cats.ohiou.edu/.  Additional insight may be found in the analysis of the Ohio University Front Door server log files:  go to http://www.ohiou.edu/operations/analog/ and select a recent month (beware the large file size), and then select "Browser Summary" and also scroll down through it to the "Operating System Report".  About 20% of our audience is not using Microsoft Internet Explorer, and about 20% of our audience is not using Microsoft Windows.

 

Multi-platform Support


A common mistake web developers make is looking at the pages on only one type of machine, and under one resolution.  Remember that web browsers exist on just about every type of computer platform there is, and they are all a little bit different.

Make sure you view your page on a high-resolution display.  Few things will cause more giggles about your pages than formatting errors that would have been revealed by viewing them on a large screen.  Images that line up just right on a 640x480 14-inch monitor may go all over the place on a 1920x1200 24-inch display.  Unless you or a friend view your pages on a high-resolution display, you won't be able to fix the errors, because you won't even know they exist.

Likewise, consider how your pages will appear on the small display area of a Palm Pilot or similar PDA.

Different displays will render color images differently.  Often an image that has smooth gradations in color when viewed on a good monitor will appear striped or blotched on a more common display that is capable of fewer colors.

Be aware of LYNX, and how your pages look when viewed through that text-only interface.  Sometimes you may not care very much, but it is important to at least look at it under LYNX before you roll it out.  We certainly do not advocate making major changes to your design because of small formatting discrepancies when viewed with a text-only web browser, but the information should be accessible.  If you are going a highly graphical route, make sure there is an ALT attribute in every IMG tag.  Sometimes a separate version for LYNX users will be the best solution.  LYNX is gradually becoming less important though, now that high-speed connections are more common, so don't let it limit your design too much.

Do be aware that LYNX or similar browsers will continue for years to come as the browser of choice for visually impaired people, because it is so much easier to automate audio output for text.  The United States government has published guidelines on the application of the Americans with Disabilities Act ("ADA") to questions of Web site design, in order to ensure that all students have full access to on-line educational resources.  Many people with learning disabilities have discovered that they can grasp information from the Web more easily by using a speaking browser, so that both sight and hearing are simultaneously engaged.

A more thorough discussion of these and other design issues is available on-line, "Keeping Your Web Pages Robust."