Internet Help - page banner Web Page Style Standards, Guidelines and Suggestions


* - Navigation Aid Marker Table of Contents for this page:

______________________________







 

Preface

This page describes something of writing for the Information Age, and may be helpful for those preparing web pages for the first time, especially when done in behalf of a government agency, or other public information source.

* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________

 

Notes About Terms Used

In this draft style sheet we make the following distinctions:
* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________
 

Planning for and Management of 
On-line Information Exchange

The essence of Government-sponsored information exchange (or any public information exchange) is participation and follow-up. If we merely want to provide a bulletin board service on which to post information for readers, we will have missed one of the truly great opportunities of the Information Age. By planning to encourage the active participation of readers in an information exchange, we can greatly improve our agency's stolid image, while at the same time expanding the flow of good ideas for substantial improvements in most of our activities and programs. Electronic information flows should be based on interaction, hypertext linking, navigation, search facilities, and connections to other online services and continuous updates. These are the significant features which separate web pages intended for information exchange, from those posted as brochureware.

In this context, when we plan the development of a website, we can benefit from considering the kinds of conversations it will foster, the kinds of follow-up it will require, and the kinds of changes it will encourage. We also need to consider the related information (see the Linking and Navigation section below), how it will all tie together, and the impacts that will create. Remember, we are not the only publishers any more. Others will publish related information, some of it helpful, some unhelpful. At some point, all this information will be linked together very conveniently so everyone can be fully informed as never before. We need to be careful to consider how our information, linked together with the other information, will help or hinder our reader community's development. We need to be sure we have the resources, and that we have done our homework so that we are able to provide the correct and complete information, and in the timely manner which will be most helpful.

At the same time, in a government agency, we want to foster active participatory democracy in ways that assure that the outcome will appropriately reflect that participation. These matters will require careful forethought, planning and integration in times of scarce resources. Government is behind the curve in many areas of on-line information exchange. We need to be actively engaged now in developing the skills at every level and in every department so that we are ready with an effective, planned and balanced response (delivered by an experienced staff) when the electorate begins using on-line means in significant numbers. We cannot afford to wait until our residents demand these on-line services and facilities: the learning curve is too steep, the demands reach into every corner of the enterprise and into every level, and the equipment and networking infrastructure are not, by any means, overnight placements.

The section "Before you start" below (and the rest of this paper), contains additional planning and management ideas to be considered.

* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________

 

Writing for the Information Age

Writing for the Information Age, and more specifically for the World-Wide Web and other on-line media, will require significant changes in writing strategies for most authors. When writing a letter, memo, report or other paper, a writer has traditionally had complete control over how the material was presented on the paper and at least some influence over the order in which it will likely be read. S/he has a large degree of control over (or at least an understanding of) the intended and likely audiences. S/he has also had the luxury of focusing on a narrow segment of the subject matter, when needed.

In writing for an on-line medium, and for web publishing in particular, writers need to keep in mind at least the following:

Remember that this world-wide system of interconnections only works if all kinds of equipment and systems can be hooked up to it (both for input and for output). As a writer, you can never fully anticipate who will see your work. And you will absolutely never know what equipment every reader has for viewing it. You know nothing of screen sizes, fonts or font sizes, line widths, or the availability of color or graphics. You don't even know if your reader is from a culture where writing is traditionally displayed from left-to-right, or right-to-left. Hypertext, the language of the world-wide web, is intended to take care of all the formatting and layout of your document, using settings which are the preferences of the reader.

The genius of the hypertext model is that you are providing the contents (as writers have always provided); and you are also providing the structure, but not the format or layout of the document. The format and layout are the responsibility (and the preference) of the reader. It is the reader's equipment, network connection and circumstances which largely determine how the material will be presented. Since the author could never anticipate each case, there is great advantage in a system which leaves these considerations to the reader, and provides the facilities to satisfy his/her preferences. It is also consistent with the "user-pull" (as opposed to "publisher-push") philosophy of the Information Age. It is a great struggle for most authors to maintain the separation of these two concepts when they start to write for the Information Age. It is also difficult to always keep in mind that the reader's equipment may not permit the display of any of the graphics you included in your document. Furthermore, the whole thing is complicated when the publisher is selling something or feels a strong responsibility to teach the reader. In that context, of course, we all have a responsibility to teach and enlighten. It may be helpful to see yourself, however, not as a grade-school teacher with stick in hand, but more as a doting grandparent, offering your sound advice to your students on their own terms, at their own pace and according to their own preferences.

To over-simplify for a moment, the structure has to do with the order of the presentation, what lines will show up as headings, sub- headings, ordered and unordered lists, etc.; whereas the format has to do with what fits on a line, with fonts and font sizes and colors, whether the graphics will appear at all, and if so, where they are positioned with respect to the text, etc.

The whole question of the distinction between "structure" and "format" is clouded by the fact that not everybody recognizes its importance. Those, in particular, who have something to sell, and who want to impose their format on the reader, often use measures which largely defeat the intent of "reader-pull" hypertext. Each author must come to grips with where s/he fits in the spectrum between fully "reader-pull" and the old "publisher-push."

In addition to the fact that the reader's equipment is unknown to the author, there is a philosophical component to this question of "reader-pull" vs. "publisher-push." In the Information Age, the power of selection has been transferred to readers (and away from publishers) in fundamentally important ways. Readers are empowered to seek after information from sources they trust and believe. Publishers, on the other hand, see much stiffer competition as everybody becomes a publisher in some sense. Much more, publishers need to earn the trust and confidence of their readers. The effects of this shift are to democratize and empower readers* in every stratum of society. Readers thus become much more self-reliant in learning, for example. And publishers who link together all the related material in convenient ways add value to their offerings that readers will remember.

Jim Sterne of Target Marketing has posted an article "Promote and Deliver" [cookies (cookie caution)] in the December 1998 issue of CIO Web Business magazine [cookies (cookie caution)] which is aimed at web marketers. Although his strong emphasis is marketing, the main thrust applies to all providers of on-line information: "give them what they want, or somebody else will." In government, we might say "give them what they want, or somebody will be elected who will." Another article in the same issue, "Have It Their Way" provides a similar emphasis. Both articles contain a number of good hints about the convenience of on-line information displays, particularly as they relate to the visitor's ease in reaching the customer service department or help desk. If your "web server is dishing up pages 24/7, customers want to know why they can't reach a service rep at 2 a.m. The Web never sleeps, so why should the customer service department?" In all these cases, applicability to government, health, education and other services is as obvious as it is to business.

Website Usability, Usability Design and Usability Engineering are all terms that describe how useful, usable and convenient your website is for visitors, the degree to which you have used User-centered Design (UCD) in its creation and the degree to which you understand your visitors' expectations, behaviors, and preferences. Keith Instone has posted "Usable Web: Guide to Web Usability Resources" which is "a collection of links and accompanying information about human factors, user interface issues, and usable design specific to the World Wide Web. Usable Web adds value to the links by providing descriptions, multiple organizational schemes (by date, by site, by topic) and custom search engine queries." Keith posts a number of papers and links describing User-centered Design Principles, a very good set of Topic Descriptions, and much more. He does it mainly as a project of passion, he says. I found the quality to be consistently high.

Jakob Nielson's Alert Box column "User-Supportive Internet Architecture" provides some good discussion about the "ideology of the Internet," and that it derives from a time now past. He points out that we now need a "more utility-enhancing, human-centered ideology" with more realistic assumptions and better facilities which emphasize convenience to the user.

As a government entity, our role as a publisher is to provide sound, accurate, timely and convenient sources of information that are reliable and accessible to everyone, and that are linked in such a way that most readers can navigate quickly to what they want, finding only as much detail as they want at that moment (easily skipping over detail needed at other times, or by other readers), and that are linked to the related material extensively. Remember, some readers will come to your page wanting the information that starts at the beginning and covers the "whole story" you have presented. Others will want only a fragment of the information (sometimes a fragment that is not at all important to your intent in writing the piece). As authors, our focus needs to be on a convenient structure that lets readers quickly meet their needs. If we do that (at the expense of spending very little time, effort and other resources on defining specific formats), then we will be serving our citizens in the best way, helping to foster the openness and increased particpatory democracy we are all seeking.

A good web page for conveying information is read, not like a novel, but like a map. Success is not measured by how many visitors it attracts, but rather how many readers quickly find what they want. The reader first needs to know if he has the right map (title and table of contents); then he needs to be able to quickly reach the fragment he wants today (links from descriptive table of contents). When he gets there, he needs to get to some of the footnotes for the detail he wants today. Finally, he needs links to related and background information available from others that is outside the scope of your article. Both material with greater detail, and material providing the overall context, philosophy, etc., are required. You never know which way he is going. An excellent website dealing with these aspects of web page creation is called "Good Documents," originally created by Dan Bricklin of Trellix Corporation [cookies (cookie caution)]. Notice how the "Good Documents" website is organized and presented. It contains sections on philosophy, where/how to apply, samples, comments from others, related sites and much more.

 The State of Connecticut has adopted two policies: "Universal Accessibility Policy for State Websites" and "ConneCT Website Policy" that cover pretty well the points to keep in mind in making your pages accessible to everyone. The ConneCT Management Advisory Committee (CMAC) has adopted the "Design of HTML Pages to Increase their Accessibility to Users with Disabilities" [maintained on-line by professionals employed in assistive and adaptive technology at the University of Wisconsin's Trace Research and Development Center - and titled by them: "Unified Web Site Accessibility Guidelines"] as the primary guideline to meet the objectives of the "Universal Accessibility Policy for State Websites." The "Unified Web Site Accessibility Guidelines" page also contains links to a very helpful "Page Author Check List" (containing one- line checks and suggestions for text, images, tables, frames, applets and much more), "Page Author Guidelines" (containing the descriptive material under similar headings, including examples) and an extensive set of "References" to websites providing additional information about disability and accessibility issues and about universal accessibility generally. Links are provided to pages describing design excellence from IBM, Microsoft, the "Best Viewed With Any Browser" website, "Universal Accessibility" (the Government of Canada Internet Guide), and many more. The above combination of links provides a comprehensive source of authoritative accessibility information for all serious web page designers and builders.

* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________
 

Before you start

* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________
 

Getting started with some background reading

  1. Read the Beginner's Guide to HTML and Berkeley Digital Library SunSITE's Guidelines for Web Document Style & Design. Consider carefully their suggestions.
  2. Read "Top Ten Mistakes in Web Design," by Jakob Nielsen, SunSoft Distinguished Engineer. [NOTE: as of 30 May 1999, Jakob has also posted "The Top Ten New Mistakes of Web Design"]. They are both brief and very readable. He hits the nail on the head in nearly every case.
  3. See also our page of help for HTML, especially the section on creating a web page. There is a reference there to Eric Tilton's paper "Composing Good HTML," particularly its section "Document Style Considerations" provides some interesting insights about the use of HTML to provide a device-independent way of describing information. Tilton emphasizes the importance of marking up a document so that your information is labeled as what it is instead of as how it should be displayed. [Paradoxically, the page does not have a table of contents (!)]. The point here is that HTML is intended to describe the structure of your page, not how it should be presented to your reader. You could profitably spend a week or two just looking around at HTML primers and style sheets, and forming opinions about what constitutes a good web page, and how it should be constructed for the best presentation on your reader's screen or paper (recognizing that you have only limited control of that aspect of its ultimate use).
  4. Jakob Nielsen has some terse advice for writing for the Web: "Be Succinct! (writing for the Web)." He adds other insights about nested headings, and writing in "coherent chunks," too.
  5. Jakob Nielsen also has some very good advice about Cascading Style Sheets. His paper "Effective Use of Style Sheets" describes a few dos and don'ts and provides links to related resources.
* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________
 

Picking web pages to begin with

  1. Define the overall hierarchy of your pages. Decide in advance, what pages you will publish, where they will fit, how they will relate to each other and to the pages published by other departments. Consider the kinds of interactivity they will foster, and be sure you (and others?) are prepared with follow-up material and resources that will provide a credible response to queries, etc. When new pages are added, it will then be clear where they go, what they should be linked to (and from) and how the follow-up will be handled.
  2. Define how each selected page fits with your purposes, benefits to be achieved and audiences to be reached (see "Before you Start" above), and how it fits with the related material. Refine the foregoing as needed to keep pace with developments, changes in strategy, etc. This will help everyone to stay on-side, and add to the overall coherence of your developing website.
  3. Select web pages whose content is fairly stable and which have long term interest to others. Documents which need to be updated every week will attract a lot of maintenance effort, and can be easily justified when they are already being updated for other purposes. Documents which give rise to questions and encourage feedback will require appropriate resources to handle the feedback effectively. To begin, some departments with limited resources will want to generate a web presence which tells their story with a minimum of on- going maintenance and follow-up.
  4. Try hard to integrate the preparation of web pages into the established work flows in place of existing or separate paper-based procedures. One department, for example, now posts Agendas and Minutes if their meetings on the web. They no longer separately prepare hard copy of these documents for distribution. Rather, they prepare these documents for posting on the web, and print copies from the web only as necessary for hard copy distribution. In the longer term, they can simply advise users that these documents are on the web, and that they can print the information from that source if it is needed in hard copy. More and more, as we post information on-line, we will need to consider reducing the costs of also preparing separate paper-based editions of the same information. By making the web pages so they can be printed by the users as an option, we may be able to smooth the way for future reductions of these costs. In some cases, of course, we will be able to eliminate the separate paper-based costs as soon as the information is made available on-line. That would be the ideal.
  5. Avoid picking pages which are likely to suffer from neglect. We are quite a bit better off with no web page on a subject than we are with a stale or out-dated one. In the on-line world, the neglect shown by an enterprise is more noticeable and significant than in other less-immediate contexts.
  6. Pick pages where you can tell the whole story. If you only have time and resources to present the end-point of some subject (particularly an advanced subject), it will generate a lot of questions, answering which will keep you busier than if you had written the whole story in the first place. And if you choose to ignore questions, you put the City's name and goodwill in jeopardy. It is always a good question to ask: "Will this page generate a lot of questions?" If it will, consider expanding it to reduce the incidence of questions, or publishing it in some other medium where there is substantially lower expectation of interaction between readers and authors.
  7. Consider selecting information that will expand participatory democracy rather than suppressing the need for interaction, follow-up and response. The facilities of the Information Age provide us with very significant opportunities to expand "customer listening" and active participation by the electorate in everything we do. Let's plan to be among the first to seize these opportunities for the development and improvement of our community.
* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________
 

Style Conventions and Standards

In this draft we offer guidance and suggestions for new web authors. The page is neither definitive nor authoritative. Some items are more important than others. Some are essential; others are preferences; still others are in between. Guidance is offered with the "why's and wherefore's" to the extent of the author's current understanding, with references to a few convenient sources, with the assumed bias of a government information source and under the overall guidance of the City's purposes in mounting an on-line presence. Additional information about the intent and applicability of these guidelines may be found in the Preface to this page.

 As questions are encountered which are not answered here, new authors are encouraged to suggest that both the questions and their answers be added. This will benefit all future beginners.

* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________

 

Graphics:

We are still in the stone age of graphics (and audio/video) transmission and the compression techniques which will ultimately help us onto the information highway with pictures, sounds and movies. Plain text has been compressed adequately since the beginning; but a great deal of work remains to be done for graphics, sound and video. Until the new compression techniques for graphics, sound and video develop somewhere past the bronze age, we are going to be stuck with extraordinarily large file sizes (and long load times) to convey very little information. For now, in order to compensate for these virtually unmanageable file sizes (and their long load times), we need to use graphics, sounds and videos sparingly, and only where they really deliver for us. For documents being distributed to readers of all sorts, valid cases of pages with large graphic images appear to be relatively few and far between.
 
 
  1. Start by keeping graphics to a manageable size:
  2. After making your page presentable without the graphics, review again the costs of including them and satisfy yourself that the value they add is justified (both by the delay to readers who wait them out, and by the loss of readers who are unwilling to wait).
  3. Warn your readers of large pages, weather its the graphics or other content that makes them large. Any file over 20-30 Kb should contain a warning at least at the links where it might first be selected. Keep in mind, however, that if you put a size warning on every link to a page, you are creating a maintenance headache every time the page grows by another 10 Kb.
  4. Jakob Nielsen posts a page entitled "Response Times: The Three Important Limits," which contains some interesting commentary (a three minute read) about response times generally, with specific notes about graphics impact on web page response times, and what it means in loss of readers.
* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________
 

Use of Advanced HTML:

  1. Be very cautious of your use of "advanced" HTML features, especially forms, tables, frames, etc. Forms require cgi-scripts running on our server; and tables and frames can look pretty if you are viewing them with an advanced browser. To somebody who visits your page with an older browser, the contents of tables are displayed as a shambles (not merely unreadable). In some cases you can make out what might be intended; in most cases, it is totally incomprehensible. As a government agency, we have an obligation to provide our information so that a reader can see it via any commonly-used access arrangement (perhaps all access arrangements).
  2. When you use frames, for example, a reader cannot bookmark the page he ultimately reaches (rather, only the frame from which it was accessed). That can be a significant annoyance to readers wishing to return to a useful page, or to refer others to it directly. And keeping a visitor from setting a convenient bookmark contravenes the open and "user pull" philosophies that government is encouraging. Frames also create difficulties in printing web pages, especially for new Internet users. The essence of the flaw in the implemention of frames is that the viewing context and the navigation context become disjointed. Viewers, however, expect them to coincide as they do in non-frames implementations. Again, as a government agency we need to be good Internet citizens and provide our information in readable and accessible form at all times, and to support an open, full "user pull" implementation. What this means, I think, is that we should not use tables or frames; and we need to be cautious about forms other than e-mail forms. Dr. Jakob Nielsen, Distinguished Engineer for Strategic Technology at SunSoft (the software planet of Sun Microsystems), and accessibility expert, hosts a page about frames, in which he says "just say no." He lists the top several dozen reasons why the current frames implementations are more of a plague to be avoided than a nifty feature to put to useful work. He also cites his "Top Ten Mistakes in Web Design," which new web page creators might like to consider reviewing. [NOTE: as of 30 May 1999, Jakob has also posted "The Top Ten New Mistakes of Web Design"].
  3. See also "Why Frames Are Not Supported at MIT" for an excellent discussion of why and how the use of frames reduces the audience that can be reached by your web offerings.
  4. Frames and tables are sometimes used in which page widths become customized to certain screen sizes and screen resolutions. Remember, these are defined by the visitor and his/her equipment. If frames are required, then they need to be tested with a large variety of screen sizes, resolution settings, etc., to be sure they make sense when displayed at all optional settings. Remember, also, that users will not scroll horizontally more than once or twice to read your page. If your page extends off the edge of a visitor's screen, virtually everyone will click off to somewhere else, after a line or two, no matter how wonderful your content.
  5. Frames are also sometimes used by authors who want to use one frame (usually in a bar to the left, or a strip at the top) to list navigation options, and to display the page selected by the visitor in a frame to the right or below. This can seem to work well when the content is displayed in the planned frame set. When a visitor finishes with the content page, the navigation options are all handy in the other frame. The visitor simply picks a new option, which then replaces the content in the other frame. But it is far from useful when the content page is displayed by itself.
  6. The < center> HTML tag is an advanced tag (believe it or not). Since part of the HTML design calls for browsers to ignore tags they do not understand, your line will be left-justified by those browsers. If your document looks equally good (or at least passable) when your centered lines are left-justified, then that advanced tag might be considered acceptable. Others, which result in a garbled display, might not.
* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________
 

Avoid Specifying Formats:

  1. Don't try to force your preferred layout on the reader. Remember that this is a user-driven medium, not a publisher-driven one; and you have no idea what equipment or systems the reader is using. One of the significant developments of the Information Age is the movement away from the "we know what is best for you" mentality of publishers. Help your reader to get what s/he wants quickly and with a minimum of fuss and bother--and certainly with the absence of annoyance. Remember, web visitors are on a mission to find specific information; everything else is a distraction. Take advantage of the hypertext model: design for its strengths rather than fighting its weaknesses. A good preface and table of contents go a long way in this area. See also "Writing for the Information Age" above.

  2. .
  3. See Jakob Nielsen's page "The Difference Between Web Design and GUI Design," where he points out that "designing for the Web is different from designing traditional software user interfaces. Mainly, the designer has to give up full control and share responsibility for the User Interface with users and their client hardware/software."

  4. .
  5. Preformatted Text: HTML does not generally recognize blanks other than to delimit words (either blank spaces or blank lines). This can be disconcerting to new web authors. For the really tough situations which require it, there is an exception to "user-pull" format control. It is called "preformatted text." When an HTML author specifies preformatted text, the lines are displayed just as they have been written, in a fixed-width font (usually Courier, and usually with 10 character per inch horizontal pitch), and with the lines determined by the author. This is one way to present what might otherwise be presented in a small table, for example.
     These few lines are examples of preformatted text.
     When you use it, keep in mind that you know nothing
     of the line widths of the equipment the reader is
     using. For that reason, if you keep your line widths
     around 65 characters or less, your message will be 
     displayed such that most readers will see it much as 
     you have written it. (These lines are around 55 
     characters wide, by the way).  Below is a small table.
 
     Customer            Year   Amount   Telephone   Code
 
     Fergussen, S        1983      900    555-4321   z
     Jones, Jayson G     1997    1,234    555-1234   y-89
     Smythe, Quincy      2000    1,100    555-6666
* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________
 

Keeping Web Pages Accessible For Everyone 
(including those with slow lines and/or non-graphics browsers):

Just as universal access is a central government role in global information exchange generally, web page accessibility is at the kernel of government web page publishing. We are in the information business, far from the entertainment business. We need to be publishing content which everybody--and this includes all of our constituencies, especially the local electorate--can access with reasonable convenience: not just those with the fastest lines, the latest browsers, the hottest plug-ins and the most up-to-date access mechanisms. Our information needs to be reliable, friendly and helpful; and it needs to encourage interactivity. The sections on "Graphics" and "Use of Advanced HTML" cover two important aspects of accessibility. The section "Avoid Specifying Formats" adds a philosophical view; and "Encourage Feedback" deals with openness and fostering participatory democracy. It is this combination that adds up to good accessibility.

Below are some further considerations, including page publishing which is intended for visitors with personal disabilities.
 
 

  1. "HTML With Style" is posted by WebReference as a tutorial on creating great (and "proper") web pages.

  2. .
  3. Be careful of background colors. They might look lovely on your monitor; but there is no adequate substitute for testing them on a variety of screens, or just sticking with plain old white.
  4. Remember that the universe of web visitors is growing at somewhere around 100% per year. This means that, on average, half of your visitors have been on-line less than a year. Many of them will find it very helpful if you start at the beginning and tell the whole story. This growth rate also means, however, that more and more of your visitors are old hands. Studies have shown that the novelty of web surfing, particularly for information content seekers, wears off quickly. Animated graphics (called variously "dancing baloney" and "bouncing irritants") that sometimes appeal to new users can be an annoying distraction to a serious visitor looking for solid content (and hoping to find something quickly; see Jim Sterne's "Flash is Trash" article [cookies (cookie caution)] in the October CIO magazine). Jakob Nielsen, who studies web page usability, posts a page describing "The Increasing Conservatism of Web Users," and reporting on the rapid slowing of innovation by Internet users. "Just give it to us plain and simple," says their feedback. Many do not want to be continually installing the latest plug-ins and upgrading their browsers to the latest versions. His chart showing that rates of uptake of new browser versions in 1997 are at scarcely half the rates from 1995 and 1996 is portentous.

  5. .
  6. "Branding and Usability," an article posted by User Interface Engineering compares the direct experience of visitors in search of information with the indirect messaging which advertisers have traditionally relied upon. Their conclusion is that easily finding what the visitor is seeking is the most reliable route to feelings of success and fun for visitors.

  7. .
  8. The "Web Accessibility Issues " page under the Americans with Disabilities Act - Information and Resources at UC Santa Cruz website points out that "recent guidance by the Department of Justice clearly states that ADA requirements apply to Internet web pages. In a response to an inquiry dated September 9, 1996, the DOJ states:
  9. As mentioned in the Graphics section above, always warn your readers of large pages, weather its the graphics or other content that makes them large. Any file over 20- 30 Kb should contain a warning at least in the links where it might first be selected. Keep in mind, however, that if you put a size warning on every link to an expanding page, you are creating a maintenance headache every time the page grows by another 10 Kb.

  10. .
  11. The State of Connecticut has adopted two policies: "Universal Accessibility Policy for State Websites" and "ConneCT Website Policy" that cover pretty well the points to keep in mind in making your pages accessible to everyone. The ConneCT Management Advisory Committee (CMAC) has posted their "Standard products" for review; and it has adopted the "Design of HTML Pages to Increase their Accessibility to Users with Disabilities" [maintained on-line by professionals employed in assistive and adaptive technology at the University of Wisconsin's Trace Research and Development Center - and titled by them: "Unified Web Site Accessibility Guidelines" (see their big list of links "Other Accessible Web Site Guidelines" and the entry page for DaMUW: "Designing a More Usable Website")] as the primary guideline to meet the objectives of the "Universal Accessibility Policy for State Websites." The "Unified Web Site Accessibility Guidelines" page also contains links to a very helpful "Page Author Check List" (containing one- line checks and suggestions for text, images, tables, frames, applets and much more), "Page Author Guidelines" (containing the descriptive material under similar headings, including examples). Links are provided to pages describing design excellence from IBM, the "Best Viewed With Any Browser" website, and many more. The above combination of links provides a comprehensive source of authoritative accessibility information for all serious web page designers and builders.

  12. .
  13. The Web Accessibility Initiative (WAI) points out "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." - a quote from Tim Berners-Lee, W3C Director and inventor of the World Wide Web. They also post "WAI Accessibility Guidelines: Page Authoring," a comprehensive checklist of accessibility items, and "WAI Reference List on Web Accessibility," a comprehensive list of links to design and development guidelines, research projects, white papers, tools and utilities, conferences and other resources all dealing with web page accessibility. In January 2000 they posted an extensive page of "Policies Relating to Web Accessibility," the index to which contains links to accessibility initiatives by country for about a dozen countries (and by region or legislative topic, mainly in the U.S.), and will be expanded to include more as they become available.

  14. .
  15. The Treasury Board of Canada has posted a "Common Look and Feel (CLF)" initiative with a substantial "Accessibility" section. This section points out that "Some Canadians rely on assistive technologies such as text readers, audio players and voice activated devices to overcome the barriers presented by standard technologies. Others may be limited by their own technology. But old browsers, non-standard operating systems, slow connections, small screens or text-only screens should not stand in the way of obtaining information that is available to others." The Government of Canada Internet Guide contains helpful sections for departments planning and setting up an Internet presence. The guide contains lots of rationale and general principles which would apply to any Internet website. Their "Universal Accessibility" section states "It is every Canadian's right to receive government information or service in a form that can be used, and it is the Government of Canada's obligation to provide it." The Treasury Board's "Government On-line" page provides links to components of their connectivity initiative. Their "Results for Canadians: A Management Framework for the Government of Canada" paper (Table of Contents only) provides additional insight. The December "Government Technology" [cookies (cookie caution)] issue posts an article "Wired for a New World" [more cookies (cookie caution)] which points out that "Canada is one of the most wired countries on Earth. Through multiple e-government initiatives, Canada is striving to become the world's most wired government."
  16. The other side (at least the reader's side) of this accessibility question has to do with helping the reader get quickly to the information s/he wants. That is what s/he is spending his/her scarce attention to get. A lively and (... er) "attention-grabbing" article "We've Got to Pay Attention!" [cookies (cookie caution)] has been written on this subject by Tom Davenport, professor of management information systems at Boston University School of Management and director of the Andersen Consulting Institute for Strategic Change. The article [cookies (cookie caution)] appears in the Think Tank section of the November 1998 issue [cookies (cookie caution)] of CIO Magazine [cookies (cookie caution)]. Tom makes the point that I.T. professionals are very adept at providing information (and lately providing easy access to it, enterprise-wide). But we have not been very good at assuring (or even paying attention-sorry) that it gets attended to. Tom's point is that it's the attention that is in short supply. We are flooded with information; and I.T. professionals (including web page authors) need to start focusing more on making sure that the important stuff gets attended to ... or displayed in a way that it garners the necessary attention. The article [cookies (cookie caution)] is a great three-minute read. Subsequently, Davenport posted another Think Tank article (CIO Magazine, [cookies (cookie caution)] issue of 1 Sept 1999 [more cookies (cookie caution)]), "The Eyes Have It," [yet more cookies (cookie caution)] in which he identifies ten principles which "will help you to attract and keep your customers' attention."
  17. In addition to paying attention to the reading and learning styles of your visitors, you also need to know some of the fundamentals about how they learn to use their computers better (... or not). It will help you quite a bit when you are contemplating adding a feature or navigation strategy that is unlikely to be found on other web pages. An excellent paper on this subject, "Paradox of the Active User" will likely surprise you on several fronts. It is about 20 pages in Adobe Acrobat format, but well worth the read. And if you are an active user yourself, you will likely see yourself several times in their findings. Anyhow, here are a few quotes from the paper:
  18. The Cyberspace Policy Research Group at the University of Arizona posts research findings concerning the effectiveness, openness and accessibility of websites of public organizations. "Our research is intended to establish, first, the reasons for the expansion of the Web into public organizations (diffusion/configuration research using modified event history analysis) and, second, the organizational effectiveness and accountability consequences of this expansion for policy issues in general and in specific."

  19. .
  20. The University of Delaware web team has posted their development notes for a recent website overhaul they undertook. It has a substantial accessibility focus.
* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________
 

Subject Taxonomy:

  1. Be careful of imposing your understanding of the subject's taxonomy on your reader. This is subtle. In a book, you often impose your taxonomy on your reader, especially in an introductory book. Part of what you are teaching your reader has to do with the classification of the information you are presenting. A web page is different. Here are some points to consider:
* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________
 

Writing like a Journalist:

  1. Consider writing like a newspaper Journalist (a good one). Tell the whole story in the Title. Then tell the whole story in the Preface, including your intent for the page (but in only one or two sentences). Then tell the whole story in the first paragraph. Then tell the whole story in the rest of the page. Each time you create interest and add significant detail.
* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________
 

Writing for the General Reader:

  1. Keep in mind also that your page may be read by persons with completely different cultural and educational backgrounds from yours. Some idioms may be confusing, or even insulting to some readers, for example. When portions of your page are copied by those who did not understand them, the content may be praised or panned; and you may even be held up to ridicule in some circumstances (sometimes without a hint of justification). Occasionally information is copied to forums that you do not even know about, and with comments which you will never have the opportunity to rebut. And all of that will affect the City's image too. The point here is that careful planning of document content is essential to successful web publishing.
  2. Consider writing for a reading age about the end of elementary school or early Junior High school. Provide definitions for new terms; and provide a table of contents and other internal navigation links that allow advanced readers to by-pass the introductory material.
* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________
 

Writing for the Reader who Scans:

  1. Experienced users have learned to scan web pages, rather than read them. In the first instance they are often very busy, and are looking for an answer to a specific question. And in the second instance, they are looking for credibility before they take anything you say very seriously.
  2. Using bold or italics or other changes in type faces will help them to see the significant information on your pages quickly.
  3. Lots of scanners use the first few words of a paragraph to decide whether to read the remainder. Therefore, you need to keep your paragraphs to a single idea, and you need to make that first sentence accurate and complete.
  4. Suppress the impulse to write only the point-form overview of your paper, however. You are catering to the reader who scans in part to let him know that you are a credible source of sound information. If you never get to the "whole story" of your paper, you leave the reader with the impression that it was superficial or weak. Is that the impression you wanted to create?
  5. Jakob Nielsen posts a page "How Users Read on the Web," which will be interesting to those wishing to prepare helpful web pages.
* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________
 

Linking and Navigation:
(within the page, and to/from other pages):

  1. Put a good Table of Contents on every page as one of your consistent standards. Then provide a link back to it from the bottom of every section within the page. In this way, the casual reader can click on a topic, skim over it, and find a link at the bottom of the section to get back to the Table of Contents (in order to quickly pick out his next topic of interest).
  2. Use lots of headings, and include them all in the Table of Contents (TOC) for the page.
  3. Use plenty of links to all the related City pages, both ways. It is hard to overdo convenient links. Remember that linking between pages is the essence of the World-Wide Web. The best page in the world is weak if it is not linked in its context with its related subject matter.
  4. Avoid using underscore for emphasis. Use bold or italics instead. Better yet: use heading level 4, 5 or 6--that defines the structure of what you want, rather than its format. Remember that links are usually underscored. Readers will wonder what is wrong with your link if you use an underscore otherwise as part of the text.
  5. Keep in mind that you never know where the reader will point his/her bookmarks/favorites (hence, where s/he will start reading your page, or suggest it to others). You may have made a point (or issued a warning) in the last section that would suffice if the reader had seen it. If the current section has a heading (and an internal bookmark), then the reader could have come directly to the current section from the TOC or via his/her own bookmark/favorite. If the warning is pertinent in this section, re-issue it, or (better) provide a link to it.
  6. Internal MS WORD Bookmarks:
  7. Include, on every page, a link back to both the GRAPHICS version and the TEXT version of the entry page so that visitors can choose a smaller size if they have a slower line, etc.
  8. Include a see also section at the bottom of pages which are part of a set, or part of a subject also treated by others. In this way, the reader has convenient links no only to your related pages (and their indexes), but those hosted by others.
  9. In all links, provide some descriptive information in addition to the links themselves. Give the reader enough information to make a pretty good decision whether s/he wants to go there or not. Of course, a long string of unannotated links is better than no "see also" section; but good annotations are a part of what distinguishes the high quality pages we are seeking to post.
  10. Forward and Backward Links - As you create a series of web pages, the useful links that come to mind will be "forward" links (that is, links from entry or table-of-contents pages to the pages containing the details and components of the subject you are describing). Once the pages are established, however, and particularly as they are linked to and from related pages, you will need to consider "backward" links also (these are links back up the chain to more general pages from which the user can navigate to other detailed or component pages). Since some subjects require large numbers of pages, it is quite helpful if you have installed both the forward and backward links in the shell pages from which many of the pages have been made. The whole point here is that as you build a set of pages, you tend to think of accessing and linking them according to the hierarchy in a top-down way. But in large subjects, many links and bookmarks will be set to pages at the bottom of that hierarchy; and readers who arrive via those links will never have seen the higher-level entry and table-of-contents pages. By providing links to them in the detailed pages from the outset, you can save yourself a lot of work down the road. This whole question is complicated by the fact that large subjects tend to be expanded as additional components are added after the initial designs are considered complete. These additional components need to be added to the original forward links (not too hard), and also added to the existing detailed pages (the ones which did not anticipate them). Correspondingly, of course, the new pages need to link to the existing detailed pages and their higher-level entry and table-of-contents pages.
  11. See Jakob Nielsen's page "Lack of Decent Navigation Support" for tips on how web page authors can help visitors to find what they are seeking.
* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________
 

Encouraging Feedback (to help foster active participatory government):

The Internet, and especially the World-Wide Web, are interactive media. Visitors expect to be able to ask questions, make suggestions, and "talk back" if need be. In government, we need to be especially attentive to making our pages so that the electorate can easily and conveniently tell us what they think. After all, "Uploading Governance" is one of our principal purposes in mounting an on-line presence.
  1. Use lots of e-mail "mailto:" links. In every authoring section, as a minimum, identify the person to contact for further information about page content, the person who maintains the page, a place they can ask for further general information about your site (INFO on our pages), and a place where they can contact the person who maintains the web site (WEBMASTER on City pages). Every time you mention a staffer's name, you should include his/her e- mail address (spelled out in full), and a "mailto:" link for convenience. In every case that the name has not been tested, make a test to be certain that the e-mail address is exactly correct. A "mailto:" link that does not work is quite a bit worse than nothing at all. Remember, by the time his message to your "mailto:" link bounces back to him, he will be long gone from your web page. He may have a very difficult time finding his way back to look for additional detail, or a correct mailing address. See also point above on picking pages where you can tell the whole story.
  2. In every case of a "mailto:" link, include the complete e-mail address also as a text string. Remember, some browsers do not have forms capabilities; and you want to make it as convenient as possible for readers to reach us. By providing the complete e-mail address as a text string, you permit your reader to use cut-and-paste to pop it into his mail handler or address book.
  3. For e-mail contact, departments may wish to create generic e-mail names rather than using personal ones. An e-mail address "agendas" may be established by the City Clerk, for example, in order to make it convenient for people to submit meeting agenda items. Internally, the e-mail name "agendas" is mapped to the person currently responsible for agenda preparation. When that changes, it is a simple one-time change to the maps. If personal names are used (especially in many places), then a big maintenance chore is created every time the assigned responsibilities change. Generic e-mail names are easy and cheap to create and maintain. But we always have to be careful that messages to these names are never routed to la-la-land.
  4. When using "mailto:" forms, you can also specify all or part of the "Subject:" line on the generated message. This can be very helpful in knowing where cryptic e-mail messengers were when they sent your department a message. [Believe it or not, many think you know where they were when they sent you the message.]
* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________
 

Testing Your Web Pages:

  1. Always test your web pages (particularly every new link) in three places:
  2. Always test your web pages with a text-only browser, and with at least two different page-widths. This assures that your presentation will work for at least some of the general cases as well as for the configuration of your particular desk-top. Remember: the user controls both the page width and the font used to display your page. That means he controls the layout. You only control the structure. It is hard to overstate the importance of this (sometimes subtle) implication for new web page developers. See "Writing for the Information Age" above.
* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________
 

A Few Technical Considerations:

  1. Always enter a "TITLE" line as the first line of the page. Some Internet search engines examine only the title line of a web page for key words to enter into their data bases. It is therefore worthwhile to spend time being sure that the key words in the title line are comprehensive and contain the synonyms which surfers may be using in their search criteria. There is a length limitation on the Title line that may be somewhere around 64 characters in some cases, and up to 512 characters in others.
  2. Use only up to eight character file names, sub-directory names and directory names; and use only lower-case characters. This is the combination that allows us to obtain consistent results with Macs, DOS or Windows and UNIX machines.
  3. Keep the .htm files for all your pages in the same DOS directory. Include only the lower-order (sub- directory) names in links subordinate in the tree from that directory. Do not include any higher-order path components in links (except the "../" relative designation). When a browser encounters a link that is missing the high-order components of the pathname, it uses the pathname of the current directory (the directory in which the file containing the link was found). This so-called "relative addressing" is very convenient for moving pages around in different directories IFF you put only the lower-order components of the path in the links between pages.
  4. Use only .htm suffixes on HTML files. There is an option to assume the .html suffix, but it will foul up your testing on a DOS machine. By using the .htm suffix, you can do all your testing in a DOS environment, and then transfer the files to the web server. If the web server is a UNIX machine, the homepage (only) will need to have an .html suffix. We have overcome this by just duplicating our homepage.htm as homepage.html. That way, when a user first arrives at our site, s/he gets the .html version; but any links back go to the .htm version. All our internal links stay as .htm's, both on our DOS machines and on the UNIX machine.
* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________
 

Publishing/Announcing your Web Pages:

  1. Add the title line to your SEARCH page, and make the entry (and the link) for the new page there as soon as the page is posted. Add synonyms and other material to the title line as appropriate and helpful in the search page (no length limitation applies there).
  2. Keep in mind that when you publish a web page, especially on an internal intranet server, that it will likely migrate to the World-Wide Web at some point. Initially, it will be for internal use only; but sooner or later either you (or somebody) will very likely want to publish that information more widely. If the other person is very polite, they might ask you to re-write it for a wider audience. If they are in a hurry or if they are a novice, they might just copy it the way it is. The point here is that web pages are akin to e- mail messages (see our caution on e-mail privacy, and especially the hazards paragraph and the records paragraph) in many respects. Electronic material is just plain easy to copy. Sometimes, the ease with which it can be copied causes it to be transported to places over which you have little control or even influence. If you just write it as if you were likely to be quoted, then you can perhaps save yourself some of the embarrassment which will otherwise result when it becomes a public document.
  3. Notify the appropriate search engines of your new page whenever you create one. This way, readers searching for the information you have just published will be aware of it right away.
* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________
 

Changing and Deleting Web Pages
(considering the stability of our website):

  1. Keeping old pages has a value you might not have thought about. Remember, this is a cross-linked medium. You never know who (or how many) have linked to your page in what they are presenting. And you never know about, nor do you control the contents of search engine and catalog data bases or who has added a link to any of your pages among their bookmarks/favorites. By keeping your old pages, you help maintain the integrity of the subject matter you are presenting. By prominently referring to your updated pages, you provide convenience for those who want the current information, and by not deleting your older pages you avoid dead ending your visitors.

  2. .
  3. Web pages on the City's web hosting service will not generally be deleted once they have been published. Care needs to be taken when pages are initially selected for publishing that we have the resources and the commitment to maintain them thereafter. For pages where resource availability is questionable, other publishing media should be considered.

  4. .
  5. Once a file has been installed on the web site, keep that file name for the page for which it was initially used. If you must change the file name, keep the old one too, so that search engine data bases and those with bookmark/favorite pointers to it will not generate either the error message "page could not be found" or (worse) some page unrelated to what we previously told them was there.
  6. Jakob Nielsen, SunSoft Distinguished Engineer, posts two pages. One is "Fighting Linkrot" which adds useful information on this subject, including reasons to pay attention to both in- bound and out-bound links. The other is "Web Pages Must Live Forever," in which he points out that "once you have put a page on the Web, you need to keep it there indefinitely:"
* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________
 

Creating Web Pages from PowerPoint Slide Presentations Automatically

This is a straightforward procedure. If you need help, see your system administrator. It is quick and easy; no training or understanding of web page creation is required.

* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________

 

Other Style Guides and Web Page Creation Resources

* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________
 

Sources of Related Information

* - Navigation Aid Marker [Return to Table of Contents for this page. Go to Top | Bottom* - Navigation Aid Marker
____________________________________________
 

* - Navigation Aid MarkerReturn to the Table of Contents or the TOP of this page.
* - Navigation Aid MarkerReturn to suite of Internet HELP pages.
* - Navigation Aid MarkerReturn to the Meek Family HOMEPAGE.

Horizontal Bar

.
Title: The Meek Family Website - Web Page Style Standards; Writing for the Information Age.
Contact for further information about this page: Chet Meek.

Voice: 780+433-6577; E-mail: cmeek@ocii.com

The URL for this page is: http://internet.ocii.com/~cmeek/WP_style.htm
Page last updated: 9 September 2004 (N4.8). Page originally created: 15 June 1995.