Professional Documents
Culture Documents
Version 1.1
Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003
Revision History
This section describes the revision history of this document.
Date Version Description of Change(s) Author
Table of Contents
1. Introduction 6
1.1 Purpose 6
1.2 Scope 6
1.3 Compliance and Implementation 6
1.4 Ownership and Maintenance 6
1.5 Definitions 6
1.6 Acronyms and Abbreviations 6
1.7 References 7
3. Requirements 10
3.1 Requirements Gathering Process 10
3.1.1 Audience Definition 10
3.1.2 Requirements and Task Gathering 10
3.2 Electronic Publishing 12
3.2.1 Introduction 12
3.2.2 Content Generation 12
3.2.3 Online Publishing Tools 12
3.3 Content of Web Sites 12
3.4 Legal Issues 14
3.4.1 Defamation 14
3.4.2 Copyright Issues 14
3.4.3 Linking 14
3.5 Bulletin Boards, Discussion Groups and Chat Rooms 15
3.6 Conventions on Government Publicity 15
3.7 Advertising 16
3.8 Recruitment 16
4. Design 17
4.1 Introduction 17
4.2 Navigation 17
4.3 Simplicity and Consistency 18
4.4 Modality 18
4.5 Graphic Design 19
4.5.1 Design and Visual Logic 19
4.5.2 Graphics and System Responsiveness 19
4.5.3 Establishing a Visual Hierarchy 19
4.5.4 Directing the Reader’s Eye 20
4.5.5 Color Schemes 20
4.5.6 Graphical Distractions 20
4.5.7 Consistency 20
4.6 Balanced Page Design 21
4.6.1 ‘Smaller’ Screen 21
4.6.2 Dimensions for Web Pages 21
5. Content Authoring 31
5.1 Simplicity and Informality 31
5.2 Credibility 31
5.3 Conciseness 31
5.4 Scannability 31
5.5 Readability 32
5.6 Writing to be Found 33
5.7 Terms to Avoid 33
6. Web Accessibility 34
6.1 Introduction 34
6.2 Content Accessibility 34
6.2.1 Text 34
6.2.2 Links 35
6.2.3 Color 35
6.2.4 Images 35
6.2.5 Image Maps 36
6.2.6 Multimedia 36
6.2.7 Animation 36
Tables 36
Frames 37
6.2.10 Forms 37
6.3 Standard document structure 37
7. Usability 42
7.1 Introduction 42
7.2 Planning for the Test 42
7.2.1 Defining Goals 42
7.2.2 Selecting Participants 43
7.2.3 Deciding on a Facilitator 43
7.2.4 Choosing a Location 43
7.2.5 Designing Tests 44
7.3 Conducting the Evaluation 44
7.4 Reporting the Results 45
7.4.1 Report Vocabulary 45
7.4.2 Preparing and Organizing the Report 45
10. Maintenance 53
10.1 Content Maintenance 53
10.2 Technical Maintenance 53
10.2.1 Tracking Site Activity 53
10.2.2 Maintaining Links 54
10.2.3 Maintaining Version Control 54
10.2.4 Deleting Orphan Pages 54
10.2.5 Adding New Web Pages 54
10.2.6 Additional Tasks 55
11. Auditing 56
1. Introduction
1.1 Purpose
The purpose of the document is to provide guidelines that will ensure a standardized and
quality approach in the design and implementation of web sites by various government bodies
(ministries/divisions/departments, etc.) belonging to the Government of Pakistan.
These guidelines should be read by:
• Government Officials involved in policy-making and formulating IT/Web project
proposals.
• Departmental Web Managers/IT professionals/MIS Staff that are responsible or involved
in managing and maintaining various government web sites
• Officials who wish to use the Internet in support of service delivery or communication
of information to the public
This document relies on publicly available information on similar policies around the world.
1.2 Scope
The scope of this document includes all current and future Government of Pakistan web sites.
This includes, but is not limited to, the Official Portal (Pakistan.Gov), ministry web sites,
division web sites and affiliated department web sites.
1.5 Definitions
NA
1.7 References
The table below contains details of documents referenced elsewhere in this document.
Document Title Publishing Organization
3. Requirements
3.1 Requirements Gathering Process
The process of identifying these objects depends upon the goal of the exercise and whether
there is already a web site in existence. If there is an existing site, and the goal is to better
organize existing information, the designer can identify the web site objects by simply going
through the pages of the existing site and creating a list of objects. If the designer is creating
a new site or wishes to enhance the information on an existing Web site, a requirements-
gathering activity should be conducted to determine user expectations based on the goals and
missions of the proposed site. There are many different methods for collecting requirements
for a Web site, and the method chosen will depend on the time and money available to the
designer.
• Focus Groups: Focus groups sessions are conducted using one of two methods:
traditional or electronic. In traditional focus group sessions, a moderator leads a
verbal discussion with a small group of individuals (usually less than 10). Since
data capturing is difficult during the session, these types of sessions are often
videotaped and then transcribed. Electronic focus group sessions utilize groupware
software to capture electronic discussions among participants. Electronic focus
groups are much more structured than traditional focus groups and allow for less
verbal discussion. Since discussions are captured electronically, report data is
available immediately after the session is concluded.
• Iterative Surveys: Using traditional survey techniques, requirements can be
gathered and prioritized through a series of open-ended questions. Participants
can be prompted with a list of known requirements or asked to start from scratch.
After collecting the data from the first survey, the researcher is responsible for
removing duplicate entries and clarifying vague responses. The second survey
includes the compiled list of requirements for participants to rate or rank based on
importance (or other factors, if relevant). If desired, follow-up surveys can be
conducted to gather further detail on specific requirements. The results from this
approach will closely resemble the output of an electronic focus group.
• Exploratory Surveys: If a large survey is already planned, then the simplest and
least costly method of gathering requirements data is to simply ask users to list the
specific content items they would like to have on the site. However, data will
likely be difficult to analyze and compile and it may also require a follow-up survey
to prioritize requirements.
• Scenario Building Exercises: Scenario building is another relatively inexpensive and
quick method for collecting requirements and task information. The primary advantage
of scenario building is that it allows users to create a context for their requirements
and tasks. This context allows users to be more creative and to identify requirements
and tasks that other methods may not bring to the surface. Additionally, users can
create multiple scenarios, with each scenario often yielding several tasks or
requirements for the site. As a result, users are able to identify a large number of tasks
and requirements in a short period of time (usually 30-60 minutes). One drawback to
using scenario building is that, while it is possible to have users complete the
questionnaire remotely, remote participation reduces the quality of the data.
• Competitive Review: This can be implemented with or without users. After
identifying competing Web sites, the researcher conducts a thorough and
systematic review of these sites. The review should focus on content and functions
that are missing from your existing site or site plan. However, without the
involvement of users, it is difficult to gauge the value of the content and features
discovered.
3.2.1 Introduction
In order to create and maintain a website that fulfills the Government’s electronic
communications objectives, each organization must look carefully at its existing publishing
processes. Government web sites need to be updated frequently and maintained constantly.
This section of the guidelines is designed to act as a guide and checklist for content production
and publication.
• A general rule of thumb is that all material published for the information of the public
at large should be available on the Internet. This includes not only high-level
documentation such as white papers and consultation documents, but also service-
based information such as guidance on access to benefits and applications for licenses.
There should be a general move towards making interactive forms available online.
Government bodies (ministries/divisions/departments) should aim to publish as much relevant
information and documents online as possible. The following list serves as a guide and example
as to the type of information that can be published online (please note that this is NOT a
definitive and comprehensive list and information requirements should be considered on a
case-to-case basis):
• Names of Ministers, staff, etc., and their responsibilities
• Organizational aims and objectives
• Organizational structure
• Organizational policies
• Business rules and regulations
• Public service agreements
• Press notices
• List of services and procedures
• Consultation documents
• Membership and terms of reference of advisory groups
• Complaints procedures
• Online Facility for feedback/complaints/suggestions
• Contact Info, e.g. Postal address, fax and telephone number, email.
• Publications such as research reports and statistical information
• Responsibilities, aims, and objectives of units and divisions
• Forms published by the department and guidance/instructions for their completion
• Site map that provides table of content / index
• Search functionality
• Online help
• Tenders
• Jobs
• Etc.
3.4.1 Defamation
The risk of defamation is not diminished by virtue of electronic publication. Anything on the
web site that looks like it could injure a person’s reputation should be scrutinized thoroughly
and legal advice sought when in doubt. This applies whether the material was authored by
civil servants (or other public sector employees) for the web site or originates elsewhere. Even
in situations where a public sector web site is merely a transient host, such as for a discussion
group or question and answer session, defamation will still be an issue.
When the manager of a web site first learns that there may be defamatory material on the site,
it is vital that swift action is taken to assess the situation. Such action can help to preserve
available defenses such as innocent dissemination. Where there is any doubt at all, it may be
best to remove the offending material from the site until a properly informed decision can be
reached.
3.4.3 Linking
Citizens and businesses visiting a site will often want information that is held a number of
departments. Departmental sites should provide better service by links to related information
on other sites, whether in central or local government or the private or voluntary sectors. A
general principle is that departments should not duplicate information from other sites for
which they do not have authoring responsibility. To do so risks the simultaneous publication of
conflicting versions of what should be the same information and will confuse users.
The following principles should be observed:
• Authors of content for web pages should offer links to relevant sites in other
departments, local government and external sites.
• Where possible, links should be to specific pages on other sites, not just to the home
page.
• Notice should be given whenever a link takes the visitor onto a site, which is not a
government body (ministry/division/department) site, and that that the information
provided is the responsibility of that external source and no longer that of the referring
site.
• Government bodies should adopt as open a position as possible in respect of incoming
requests for inclusion of links to other government sites.
• Web site teams should keep registers of the links on their sites and, where they have
established them, of links to their sites from elsewhere. They should test links from
the site on a regular basis and make arrangements to update links where necessary at
no more than 1 working day's notice.
• Web site teams must notify those with whom they have placed links back to their site
of any decisions, which will make those links ineffective or where they should be
superseded by links to new pages.
The creation of a link to a non-government site can raise legal issues depending on the manner
in which it is achieved. Where another website can be opened while the visitor remains in the
public sector website (in a frame, for instance), this might constitute an infringement of
intellectual property rights. There is also a possible liability where a seamless, non-obvious
link is provided to another site and the visitor thinks he or she is still in the public sector
website. The prudent advice is that where at all possible, permission to link should be sought
in advance from the controller of the site to which the link will be made.
If appropriate, a suitable disclaimer can be given which might read:
“The [department or agency name] is not responsible for the contents or reliability of the
linked websites and does not necessarily endorse the views expressed within them. Listing shall
not be taken as endorsement of any kind. We cannot guarantee that these links will work all of
the time and we have no control over availability of the linked pages.”
3.7 Advertising
Government sites are permitted to carry advertising. In designing pages, government bodies
should ensure that advertisers' branding does not detract from the effectiveness and
appearance of their own branding or that of the government as a whole. Particular attention
should be given to avoid any implication of endorsement of products or services of
contradiction between government messages and those of advertisers. Where advertising is
used, it is suggested that banner ads do not exceed the industry standard of 468x60 pixels and
8k-file size for static images and 12k for animated GIFs. Advertising hosts should be aware of
the implications associated with total file sizes.
3.8 Recruitment
The Government should provide assistance to people who want to join the public sector, in
gathering information about the job opportunities and applying for them. This can be made
possible by the provision of a recruitment gateway to the public sector through Government
web sites. In the short term, notified vacancies can be posted on the central civil service
careers site. However, departments should include recruitment pages on their respective web
sites, to which the central site can link. Vacancy information can then be updated more
promptly. A message that a department is not recruiting is almost as important to applicants
as vacancy information, and may reduce the number of general enquiries about vacancies.
4. Design
4.1 Introduction
Users expect a level of design sophistication from web pages. The goal is to provide for the
needs of all of your potential users, adapting web technology to their expectations, and never
requiring the reader to simply conform to an interface that puts unnecessary obstacles in their
paths. Hence, a research on the needs and demographics of the target audience becomes
necessitated. This ‘user-centered’ approach to design leads to a general improvement in web
site interfaces and to an improved correlation between site features and functions and user
wants and expectations.
4.2 Navigation
Government sites should have a comprehensive and easy-to-use navigation structure. At the
current state of web technology, most user interactions with web pages involve navigating
hypertext links between documents. The main interface problem in web sites stems from the
lack of sense of direction within the local organization of information.
A navigation bar can provide readers instantaneous knowledge of the depth of the visited web
site. Just glancing over the navigation links should give users an idea about what is on offer
and a fully featured navigation bar encourages them to explore the web site. It is important to
allow access to the rest of the web site from anywhere. Ideally, a user should be able to go to
any page in a maximum of two or three clicks, with the main pages accessible in one.
There are many ways of presenting navigation: in a bar down one side of the screen, along the
top and bottom, or in a frame that stays with the user throughout his visit to a site. Some
navigational elements that are essential are listed as follows.
Link Back to the Home Page
This is the most important link on any page. The home page should act as a central hub that
connects to all the other parts of the site. Hence, the home page link is an escape route. If a
user has gone deep within a site, and off the track, he can always return to the home page and
look again. If a graphic or logo is being used as a home page link, its established placement is
the top-left corner of the layout. Users now expect graphics in this position to behave in a
certain way.
Search Facility
When a series of clicks through pages does not find the users what they are looking for, a
search facility facilitates their cause. However, a search is useless if it does not work
efficiently. The appropriate use of metadata tags and some of the options integrated in the
search engine being used will improve the user’s searching experience.
Breadcrumb Trail
It is the row of links that shows the user’s navigation path to the current page and can bring a
user back through the site. It can either be placed at the top of the page where it is probably
most useful, or at the bottom. This is yet another way of preventing users from feeling lost. If
they take a wrong turn, they can go back up the site hierarchy to any page that they have
already visited. Additionally, if they hit upon a page that they find relevant, they can get into
the correct section to gather more content along similar lines.
Page Jumps
These are necessary additions to a lengthy page. They are equally important in place of the
page up and page down buttons. Most people prefer not to touch their keyboards while
browsing, and many do not like using the scroll bar either. Hence, in case page jump are not
utilized, only the very tops of the web pages will be read.
Site Map
A full Index or Site Map is essential even on a modestly sized web site. There should be a link
to a site map on all pages and this link should be as prominent as the home page link. Not only
do indexes offer a gateway to every other page of the site, but they also impress the readers
with the depth of content available and encourage them to stick around.
It is when designers go overboard on navigation that a problem arises. Too many links
overwhelm readers and consequently, they skip over most of them in an effort to not waste
time reading irrelevant material. There is no need to link to every other page on the site from
any page (with the exception of an index). This approach will hinder a reader more than it aids
them. Enclose the navigational links into small groupings of four or five sections at a time,
with headings so that scanning the navigation bar becomes faster.
4.4 Modality
A mode is an interface state wherein users have different actions for different states, e.g.
changing shapes of the cursor can indicate whether the user is in an editing mode or a browsing
mode. Modes need to be used cautiously.
A preemptive mode is one where the user must complete one task before proceeding to the
next. In a preemptive mode, other software functions (e.g. file save dialog boxes) are
inaccessible. Preemptive modes, especially irreversible preemptive modes, should be
minimized.
The interface should be designed in such a manner that it facilitates reversibility of user
actions. Web users should also have access to escape routes from operations.
Thus the overall graphic balance and organization of the page is crucial to drawing the reader
into your content. A dull page of solid text will repel the eye as a mass of undifferentiated
gray. However, a page dominated by poorly designed or overly bold graphics or type will also
repel sophisticated users looking for substantive content. What you want is an appropriate
balance that attracts the eye with visual contrast. Proportion and "appropriateness" are the
keys to successful design decisions, but these aspects can only be determined within the
context of your overall purpose in developing a Web site - by the nature of your content, and
most importantly, by the expectations of your audience.
4.5.7 Consistency
Establish a layout grid and a style for handling your text and graphics, then stick with it to
build a consistent rhythm and unity across all the pages of your site. Repetition is not boring -
it gives your site a consistent graphic identity that reinforces a distinct sense of "place," and
that makes your site more memorable. A consistent approach to layout and navigation allows
readers to quickly adapt to your design, and to confidently predict the location of information
and navigation controls across the pages of your site. If you choose a graphic theme, use it
throughout your site.
The graphic and editorial style of your Web site should evolve as a natural consequence of
consistent and appropriate handling of your content and page layout – do not simply import the
graphic elements of another Web site or print publication to "decorate" your pages.
4.7 Typography
4.8 Tables
4.9 Frames
4.9.1 Introduction
Frames facilitate the display of multiple HTML documents on a single page. There are quite a
number of practical uses for this functionality. However, frames-based pages behave
differently than regular pages since frame-based documents are not HTML documents. They
are Meta documents, which call and display HTML documents. A frame page contains no body
HTML tags - only the parameters for the frames and the URLs of the HTML documents
designated to fill them. Hence, frames can sometimes yield unexpected results, particularly
when using the Back button. If you have been navigating within a frame and then press ‘Back’,
you will go back within the frame instead of going back to the previous page. Despite their
unpredictability and aesthetic limitations, frames provide a functionality that is appropriate for
certain content, and that can greatly facilitate site maintenance.
You can also use frames to provide additional interactivity to your page. Frames allow you to
put a page up on the user's screen and change its contents without actually rewriting the entire
screen. The frames can interact; clicking a link in one frame can change the contents of the
other. For example, a text with annotations in one frame can be linked to a footer frame, and
clicking on the text reference fills the footer frame with the corresponding note.
4.9.5 Aesthetics
Many page designers have not used frames because of their prescribed borders and limited
flexibility. However, the current versions of browser software allow many more frame
parameters to be defined. In fact, frame borders can be set to zero. This allows you to design
using the functionality of frames without requiring them to be visual and perhaps inharmonious
elements on your page.
4.10.1 Introduction
Perhaps the most powerful aspect of the computing technology is the ability to combine text,
graphics, sounds, and moving images in meaningful ways. The promise of multimedia has been
slow to reach the web because of bandwidth limitations, but each day brings new solutions.
The options enumerated here are certainly not the only ones - and will surely soon become
outdated - but they are the solutions which have proved to be the most practical and effective.
However, since multimedia comes with a high price tag in terms of bandwidth, it should be
used sparingly and judiciously.
The options for content are essentially defined by bandwidth. Audio files can be compressed
so effectively that sound can now be considered for site content, particularly for intranet sites.
Animation files at present are not terribly useful as content because of compression
limitations. Most animation file formats require the file to be fully downloaded before it can
be played, so file size is a serious limitation. Also, most popular animation formats do not
support compression, so that if one content-rich GIF image is 30k, two combined makes 60k
and so on. If people using modems will access your site, forget about digital video, at least for
the moment. The quality compromises required to deliver video to modems altogether obviate
its usefulness.
Each day brings a new plug-in that allows users to see new and exciting things using their
favorite browser software. This is especially true of multimedia - the options for encoding and
delivering audio, animations, and video are dizzying. It is tempting to create files that utilize
the functionality offered by these custom plug-ins, but there are two considerations designers
should bear in mind. Firstly, the bother and potential confusion of downloading and installing
plug-ins will deter a large percentage of users. Secondly, it is not prudent to create content in
a custom file format that could quickly become obsolete. It is best to create multimedia
content in the standard formats for operating systems and browser software.
If you are creating content for a web site, tailor your multimedia elements for web delivery.
Think of creative solutions that may be more modest but will be viewable by your target
audience. For example, instead of using true full-motion digital video and audio that will
require so much compression and size reduction as to render it useless, use audio and a
sequence of still images to add multimedia to your site.
It should be ensured that the visitors to your site are informed about the high-bandwidth areas
before entering it. For example, have the contents page of your site explain clearly where you
are sending the user before they choose to go. Also, be sure to explain what browser software
and plug-ins are required so that users are not confronted with unfriendly dialog boxes.
Additionally, as with all data-intensive site elements, make certain that multimedia content is
relevant.
Be sure to provide users with status information and controls when presenting multimedia
elements. For example, the QuickTime controller bar, though perhaps not aesthetically
inspiring, is an extremely effective interface element that provides both controls and status
information. It allows users to adjust the volume of a movie, play and stop and scrub through a
movie, and also provides information about the movie's download status. The problem with
dispensing with such elements is that users will hit your page and have no way of controlling
their viewing environment. The users will have an unsettling moment as soon as they are
simply unable to control their interaction with your site.
If a site is being created for a specific audience and not for global interests, more flexibility is
available. User can be required to use specific browser software, plug-ins, and you can take
steps to ensure that they know what to expect when visiting your site.
Different types of web page require different file size restrictions, thus:
• Homepage total file size should not exceed 30KB including graphics.
• Standard, informational page total file size should not exceed 100KB, including graphics
• Special case pages (such as reports, statistical data etc where it is advantageous for the
user to be able to print the file in one job) total file size should not exceed 300KB. In such
cases, the user should be warned in advance explaining the file size. Good internal
navigation is also required.
Consider ways in which file sizes can be reduced, such as:
• Splitting large documents into multiple pages, and providing a detailed table of contents.
• Providing alternative compressed download files such as zipfiles of single or multiple
documents.
File type
The primary file format for information delivery is HTML. Adobe Acrobat (*.PDF) and other
formats (such as Word or Excel) can be included as alternative files, but the information should
be available in HTML primarily.
Where large files are unavoidable, such as with major reports in a word-processing file,
compressed versions should be provided. The preferred standard for compression is
PKZip 2.04g, but whatever standard is used, a link to a downloadable version of a suitable
decompression utility must be provided.
Be aware also that PDF particularly poses issues for accessibility (users must convert a PDF to
text for text-speech readers to cope) and searching (most search engines cannot index PDF
files properly). Wherever the PDF format is used for displaying information, an alternative
option of viewing the same information in HTML format should also be provided.
Downloadable Forms
All downloadable forms should be created in PDF format by using Adobe Acrobat software.
Appropriate text should be placed on the web site informing the user to use suitable version of
‘Adobe Acrobat Reader’ to view the forms. In addition, a link should also be provided for
downloading the free Adobe Acrobat Reader software.
4.12 Metadata
Work is progressing on a government-wide approach to metadata, drawing on the experience
and knowledge of those organizations that have already made progress in this area. This issue
will be dealt with more details in a future version of these guidelines.
Metadata can be added to the head of an HTML document and must be included on the
homepage and main section pages, or any pages that are registered with search engines. There
are metadata management tools that can assist in adding metadata to pages.
Metadata alone cannot be relied upon for search engine retrieval and should be used in
conjunction with the text, which is displayed on the page itself.
Metadata should also be included on HTML pages that use tables, frames or other formatting
elements for proper placement of graphics and textual information or for some other purpose.
5. Content Authoring
5.1 Simplicity and Informality
Web users prefer a down-to-earth language that can be read and understood by all.
Convoluted writing and complex words are even harder to comprehend online. Simplicity of
language facilitates faster reading and comprehension of the online text. Clever or cute
headings should not be used since users rely on scanning to pick up the meaning of the text.
Also, the use of metaphors should be limited, particularly in headings since users might take
them literally.
Since the Web is an informal and immediate medium compared to print, users appreciate a
somewhat informal writing style and small amounts of humor. However, given people’s
different preferences for humour, it is important for a Web writer to know the audience before
including humor in the site. Of course, using humour successfully may be difficult since a site’s
users may be diverse in many ways (eg. culture, education, and age). Additionally, puns are
particularly dangerous for any site that expects a large number of international users.
5.2 Credibility
The services and the utilities derived from a web site can be deemed useless unless the web
site is considered to be credible by its users. Credibility is an important issue on the Web
where users connect to unknown servers at remote locations. One has to work to earn the
user’s trust, and exaggerated claims or overly boastful language does not help this.
Users rely on hypertext links to help assess credibility and accuracy of the information
contained in web sites. The quality of a site’s content also plays its part in influencing users’
evaluations of credibility. Also, a web site conveys an image - a tastefully done web site can
add a lot of integrity and authority to the site.
5.3 Conciseness
Consistent with users’ desire to get information quickly is their preference for short text.
Experts feel that the word count for the online version of a given topic should be
approximately half the word count used when writing for print. Users find it excruciating to
read too much text on screens, and they read about 25 percent slower from screens than from
paper.
On the Web, one needs to split each document into multiple hyper-linked pages because of the
users’ unwillingness to read long pages. Many users want a web page to fit on one screen and
dislike scrolling through masses of text. Hence, the text should be terse and vital information
should be placed right at the top. Along with the need for the conciseness is the requirement
for the web sites to make their points swiftly.
5.4 Scannability
Seventy nine percent of the Web users scan pages and do not read word-by-word. Web users
approach unfamiliar web text by trying to scan it before reading it and this activity saves their
time. Elements that enhance scanning include headings, bold text, highlighted text, bulleted
lists, graphics, captions, topic sentences and tables of contents.
Highlighting should be used liberally in order to make keywords stand out - highlight about
three times as many words as one would when writing for print. The <STRONG> tag, rather
than the <EM> tag, should be used for keyword highlighting. Since <STRONG> is usually
rendered as boldface, this is typically the best way to highlight words. Colored text or colored
backgrounds may also serve the purpose, but do not use blue for words. The color blue is
reserved for hyperlinks. The hyperlinks also stand out by virtue of being colored, and hence
should be written to do double duty as highlighted keywords. Only key information-carrying
words should be highlighted. Avoid highlighting entire sentences or long phrases since a
scanning eye can only pick up two (or at most three) words at a time. Also, highlight words that
differentiate your page from other pages, and words that symbolize what a given paragraph is
about.
The <EM> tag is usually rendered as italics and can be used to make figure captions or
emphasized sentences or phrases stand out. However, do not use it for large blocks of test
since italic typefaces are slower to read online. Bulleted and numbered lists slow down the
scanning eye and can be used to draw the Web users’ attention to significant points. Words
and pictures can also be a powerful combination, but they must work together. Graphics that
add nothing to the text are a distraction and wastage of time.
Each paragraph should contain one main idea; use a second paragraph for a second idea, since
users tend to skip any second point as they scan over the paragraph.
Start the page with the conclusion as well as a short summary of the remaining contents. This
is known as the inverted pyramid style. Web writing that presents news, summaries and
conclusions upfront is constructive and saves time. A user likes the ability to read a summary
first and then decide whether to read the whole text or not.
5.5 Readability
Web writing style should be conducive to reading. The following guidelines will help improve
readability:
Heads
The topmost head on the Web page should be an H1, worded so that the user knows why the
page is important. The heads should clearly indicate the content of the sections. The text
should be organized in such a manner that the hierarchy is no deeper than four levels. Lower-
level heads are hard to distinguish and disorienting for online readers.
Lists
A greater number of lists can be accommodated on a Web page than on a printed page. When
the order of entries is important, numbered lists should be used. Conversely, use unnumbered
lists whenever the sequence of the entries is not important. The number of the items in a
single list should be limited to nine. Generally, limit lists to no more than two levels: primary
and secondary.
Captions
A caption should uniquely identify the related illustration or table. For example, do not give
the same name to the caption as you have given to a head on the same page or another page.
Illustrations should always be captioned except when the context is so clear that a caption
would seem redundant.
Hyperlinks
If the information can be succinctly presented on the current page, do not use a hypertext link.
Where possible, include the description of the information to be found in the link. Hyperlinks
should be used to provide supplemental information like definitions of terms and abbreviations,
and reference information.
6. Web Accessibility
6.1 Introduction
The early consideration and subsequent implementation of accessible web design features can
effectively reduce or altogether prevent a plethora of potential access problems which often
occur when disabled individuals, or individuals with hardware/software constraints, attempt to
use the Web. From conception to implementation, web site designers must be ever mindful of
possible access barriers if the desired goal is to create a government web site that is accessible
to the widest possible audience.
Typically a government web site serves a largely heterogeneous population that is comprised of
users with vastly different learning styles and capability levels. This user base most assuredly
includes a widely diverse group of disabled individuals, which can be identified as having one
or more of the following limitations:
• Visual disabilities: blindness, low vision, and loss of visual acuity.
• Auditory disabilities: complete deafness or some level of hearing loss.
• Cognitive disabilities: speech, language and learning impairments.
• Physical disabilities: impaired mobility or loss of fine motor control.
By following the guidelines below, content will become accessible not only to people with
disabilities, but to all users of the Internet, irrespective of their chosen access device. This
may include people who may have a text-only screen, a small screen, or a slow Internet
connection. Also, users may be in a situation here they are unable to utilize certain functions,
e.g., browsing while driving, or without sound, or they may not have a current browser or a
voice or Braille browser.
6.2.1 Text
Avoid Using Images to Display Text
The old method of putting text into a GIF in order to get a specific font or effect is particularly
damaging to many readers. Users with limited vision often rely on the ability to resize text so
that it is legible, or to change its color. Using this method inhibits both actions. Instead,
attempts should be made use of the greater typographic opportunities of CSS text formatting to
achieve a comparable effect. Logos are an exception to this rule, of course, but they should
include an ALT attribute.
Avoid Using Absolute Fonts
In an effort to keep their sites looking as similar as possible across browsers and platforms,
many designers define their content text in absolute font sizes, like points or pixels. This
makes resizing the text in the browser impossible, and hence, many people will be simply
unable to read it. Relative font sizes like EMS, keywords and percentages to define text size.
This should be done in CSS. Alternatively, font sizes should not be specified at all and user
preferences should be allowed to take over.
Specify the Language of the Text
The attribute LANG can be given to any element to specify what language the text is in. This
assists the search engines and screen readers, some of which are able to read out the text in
the appropriate language provided it is specified properly. This attribute should be applied to
the main <HTML> tag; the <SPAN LANG=”…”> tag should be used to denote smaller changes in
language. Back out text by expanding out acronyms and abbreviations using the <ACRONYM>
and <ABBR> tags. The <DFN> tag should be used to explain complicated terminology.
Avoid Using ASCII Art
The formation of pictures and icons using icons, such as :-) to make a smiley face, or --> to
make an arrow, cause problems in screen readers. They call out the characters as they appear,
so the arrow will translate as ‘dash dash greater-than’. While emoticons are acceptable in
chat rooms, they should not appear on web pages – graphics with an appropriate ALT text
should be used instead.
6.2.2 Links
Links Should be Understandable When Read out of Context
Screen reader users or readers without mice often move between links with the tab key. Blind
users can generate a links list to allow easy access to specific links and it also makes scanning
simpler. Hence, a link must clearly and succinctly indicate its destination or function without
the words around it. Avoid using link text such as ‘click here’ or ‘more’. Use the TITLE
attribute to add informational tool tips to your links. It can also be used to offer additional
information about the reason behind linking to a certain page, and to describe the content of
the upcoming page.
6.2.3 Color
Do not Convey Information Solely Through Color
Designers often use bright colors to call attention to certain areas of a web page, or to things
like required form fields. However, this emphasis is lost on the blind, those with limited vision
or with color blindness. The use of bright colors needs to be accompanied with secondary
emphasis using text formatting, or with the addition of asterisks (*). Many of the new devices
which people shall be using to access pages will only have black and white displays.
Contrasting Foreground and Background Colors
This requirement is applicable for all users. As a general rule, black should be used as the
main text color and placed on a white background. The use of red and green together should
be avoided. Text should never be placed over a background image that makes it difficult to
read.
6.2.4 Images
Provide Alternate Text for all Images
The ALT attribute should be used in every image on a web page. Screen readers will read out
the ALT text of the images that their users cannot see – hence this text should describe the
image comprehensively. The alternative text should serve the same purpose and convey the
same meaning. Creating proper descriptions also assists users who browse with their images
option turned off for faster downloading. An ALT attribute should be added to every applet
and graphical form button too.
Provide Full Descriptions for Informational Images
Special graphics like charts, diagrams and graphs should be given more description than an ALT
attribute. Add in a caption underneath the image for best results. The ALT text in this
instance should be the title of the image.
6.2.6 Multimedia
Do Not Convey Information with Sound Alone
Hard of hearing readers will miss out on the audio cues. If a sound is used to denote an action,
like when a user moves the mouse over an image, add a visual cue to it. However, using sound
in a page design is not recommended and tends to be annoying. In case the web site offers
downloads of audio containing speeches, you should try to include a text transcription of their
content. Not only will this result in higher levels of usability for people with hearing
disabilities, but also it is invaluable for people without the means to download large sound
files. Text versions of non-text objects are great for accessibility as they can easily be
transmitted in various ways for people with certain needs.
Provide Alternatives to all Multimedia
Accessing multimedia elements can be a hassle for all visitors, especially when it comes to
those multimedia elements that demand a specific piece of software or experience bandwidth
constraints. Often a low-bandwidth or alternate version of an effect is more desirable than the
optimum. The aforementioned text transcripts are always a good idea. Along with this,
compressed versions of videos should always be made available for those with slower
connections or for anyone who wishes to preview the full-scale version.
6.2.7 Animation
Avoid Flickering and Unnecessary Animation
Animated GIFs, flash movies, <BLINK> and <MARQUEE> tags are all used to display a variety of
moving elements on-screen. Animation is always distracting and often irritating to all visitors.
More seriously, a flickering animation can cause epileptic seizures in some people. Try not to
use animation at all – it rarely benefits a page or gets any further information across, than a
static image would. Also, limit the amount of ad banners that are placed on the web pages
since they are extremely annoying and distracting.
6.2.8 Tables
Use Structural Markup Correctly in Data Tables
Data tables are used to display information as opposed to layout tables, which are utilized to
layout page content and design. The <TH> tag should only be used for the heading of the
column or row, and not for creating boldfaced cells. This facilitates screen readers in picking
out the important cells. Also, try to keep data tables simple by breaking larger ones into
smaller separate tables. Only recent screen readers are able to use the newer markup to fully
describe the table, and it can be difficult for readers using these programs to get a grasp of the
table if it is overwhelmingly big.
6.2.9 Frames
Provide Meaningful Names and Page Titles for all Frames
Screen readers identify the individual frames in a page to their user by calling out the frame’s
name and <TITLE>. Giving these elements meaningful values like ‘Navigation’ and ‘Content’
instead of ‘nav’ or ‘left’ allows users of screen readers to access the desired frame more
easily. The name should clearly indicate the frame’s function.
Do not use Non-essential Frames
Designers sometimes use frames for margins or borders around content pages. This implies that
screen readers must identify each frame to the user despite some of them containing no
meaningful content. Hence frames are plain bad for accessibility and cause time consumption
and frustration for blind readers. If a frame contains no proper content, it should be
eliminated. Use margins and padding for spacing concerns.
6.2.10 Forms
Associate Labels with all Form Elements
Every form field (text box, radio button etc.) should have a text label defined with the form
accessibility tag, <LABEL>, as screen readers can not always accurately guess which part of
explanatory text points to which field. Defining it explicitly with this tag implies that mistakes
shall be prevented. The text labels should also be placed in standard positions, like above or to
the left of text boxes and select boxed; and to the right of radio and check boxes.
Include Instructions with each Field
Special form instructions and required field notes should be included in the field label. Screen
readers generally only read out the label when filling out a form. Screen magnifiers will also
miss out on instructions if they are far away from the concerned fields. If the instructions are
too unwieldy to go in the label, make sure they are placed above the form, rather than below,
and keep them short and simple, incorporating a list where possible.
Make sure Fields Tab Logically
Screen readers and people without a mouse must tab between fields. Often the logical next
field is not the one that follows in the HTML code due to the layout of the form. The
<TABINDEX> tag can be used to make every click of the tab key a logical progression to the
next field in order.
The amount of people with browsers below version 4 is low enough, so a site can be designed
that is usable to this minority but still looks modern enough to best browsers. HTML 4 and CSS
are the cut-off points. The more recent W3C technologies have been designed to be backwards
compatible – i.e., work acceptably in older browsers that lack support for them. Hence using
CSS, for the presentation of the web sites, is highly recommended. Browsers that cannot do
CSS will still be able to render the HTML document, so the web page stays readable.
While in the last few years the trend has been the abundant use of hacks and presentational
markup to make the web sites comparable across browser versions, this practice is not
advisable anymore. CSS may be used to beautify the pages for users with capable browsers,
but the code should not be filled with extraneous font tags just to service the users of old
browsers (while dumping a large file size and compatibility penalty on those with a modern
browser). It is okay to have the web pages looking bare in old browsers – making sure they are
accessible should be a much higher concern.
Next, decide whether a page that takes up the whole screen (called a flexible layout) is
needed, or whether a design more rigid and fixed to a certain width (called a fixed layout) is
required. In case of a flexible layout, all table widths should be 100%. This implies that the
web page will adapt to the resolution of the reader. However, the downside to this approach
is that the site will have to be checked in all the resolutions to determine whether the content
still fits and looks good.
If a fixed width design approach is taken, then the width should normally be 770 pixels.
Extensive testing should be carried out to ensure an optimized width.
Details of any problems found should be noted - the effect of the problem, the page which was
affected, plus the cause of the problem. It is unlikely that all accessibility problems in the site
will be found, but the tests described here will give an indication of whether the site requires
immediate attention to raise accessibility. Improving accessibility for specific groups, such as
visually impaired people, will often have usability benefits for all users.
Commission on Accessibility Audit
Since it is highly improbable to catch all accessibility problems and the learning curve is steep,
it may be advisable to commission an expert accessibility audit. In this way, it will be possible
to receive a comprehensive audit of the subject web site, complete with detailed
recommendations for upgrading the level of accessibility of the site.
7. Usability
7.1 Introduction
Usability testing is a product test approach that is used to assess the usability of an interface,
system or product. The overall goal of usability testing is to identify and rectify usability
deficiencies, along with intent to create products that are easy to learn and to use, and
provide high utility and functionality for the users. Usability testing is most powerful and
effective when implemented as part of an iterative design process – even if important product
flaws or deficiencies are missed during one test, another testing cycle offers the opportunity to
identify these problems or issues. Early tests can assist in modeling the structure and tasks of
the product, while later tests assist in fine-tuning the characteristics of the features of the
product. Usability tests range from product testing with rigorous controls to more informal
exploratory studies. The type of test to use depends on the objective of the product test, along
with the resources that are available to the experimenter.
Do not lead participants – it is about their opinions, not yours. If you think they are trying to
make a point but cannot quite articulate it, paraphrase what you think they are saying and
then enquire if it is correct. Look out for body language and facial expressions. It is possible to
observe emotions such as confusion, frustration, satisfaction or surprise. Nonverbal
communication is often more revealing than spoken responses.
It is hard to moderate and collect feedback at the same time. Have an assistant help take
notes and observe. Make sure he or she captures quotes from the participant, because that
makes the final report more convincing. This is also a great way to expose other members of
your teams to the inner workings of a usability evaluation. Audio and video are good for
archival purposes but they increase cost and are rarely watched. If video was shot, it is useful
to create a highlights reel.
A private intranet site for state employees could be established to educate and train
government employees about the essence of a web site, how it provides value, and how they
can assist with the overall endeavor.
The acceptance of a name is conditional on that name being used specifically and exclusively
for the organization on whose behalf it is registered. The approved domain name on a web
server will lead directly to the home page for that organization and not to that of its
ISP/hosting service or any other agent. Abuse of this principle will result in the withdrawal of
name.
The Domain Naming Approvals Committee should approve all requests for domain names in the
light of certain principles that should be drawn up by this committee.
10. Maintenance
10.1 Content Maintenance
Sites die when they do not change. The content needs to be alive, current and accurate - with
fresh information people will have a reason to return to the site time and time again. If the
project is evolving, and producing new information and materials, and new relevant sites are
springing up, they should be added. Also, ensure these changes are clearly flagged on the first
page of the site. Additionally, old articles, comments and other information should be
archived. If visitors are willing to fill in a brief form on the site giving you their email address,
you can build a mailing list and email them about new material on the site.
You might want to think about doing a complete site redesign every few months, as it not only
keeps it fresh, but it also gives you the opportunity to take advantage of newer technology as it
comes out. This also helps to improve your site as time goes on, as you'll invariably learn
better techniques through each iteration.
One other way of keeping things fresh is use dynamic content to your advantage. This can be in
many forms, such as:
• JavaScript or CGI scripting to create content
• Using cookies to track previous visits, and customize content
• Randomizing elements of the site, such as main graphics, logos, etc.
If the site looks different every time somebody visits, they'll be more inclined to come back
again. If the content is customized to them individually, then you can 'target market' your
information, and improve your odds of successfully reaching that person.
• Most Frequently Visited Pages: can show where internal marketing efforts would work
best.
• Least Frequently Visited Pages: evaluates whether to continue upkeep on certain
pages.
• Referrer Log: It provides you with the search terms used to identify how users are looking
for items. This will especially help in improving metadata.
• Traffic Analysis: should be undertaken, focusing on peak times (to assess bandwidth
requirements) and dead times (should essential maintenance require the site being down
for a short time).
Each approach has its pros and cons. Most web designers tend to adopt all three of the
approaches simultaneously. For larger sites, the template solution might be the only way out.
However, templates add markup to the html, increasing page size. For a small site, option one
might be more preferable. It may be less convenient to add a link to all pages, of course, but
the clean source is worth the trouble.
11. Auditing
In order to ensure that a web site is of acceptable quality and is conforming to required
standards, auditing of the web site and related business processes should be carried out. It is
usually better if independent consultants do this task since they will have an objective
perspective and will not be biased or influenced by organizational issues in any way.
Site auditing should be carried out at least once a year.