You are on page 1of 56

Electronic Government Programme

Web Standards & Guidelines


Electronic Government Directorate
Information Technology & Telecommunications Division
Government of Pakistan

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

24 September 2003 1.1 Revised public draft EGD

17 April 2003 1.0 Initial public draft EGD

 Electronic Government Directorate, Government of Pakistan, 2003 Page 2


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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

2. Strategy and Management 8


2.1 Issues for the Organization 8
2.2 Strategic Tasks 8
2.3 Site Management Tasks 8
2.4 Roles & Responsibilities 9

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

 Electronic Government Directorate, Government of Pakistan, 2003 Page 3


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

4.6.3 Page Design Grids 21


4.6.4 Page Length 22
4.6.5 Modular Design of Pages 22
4.7 Typography 23
4.7.1 Visual Contrast and Page Design 23
4.7.2 Visual vs. Structural Logic 23
4.7.3 Type and Legibility 23
4.7.4 Pattern and Page Design 24
4.7.5 Manipulating Text Blocks 24
4.8 Tables 24
4.8.1 Tables and Page Layouts 24
4.8.2 Cell Attributes and Table Dimensions 24
4.8.3 Borders and Gutters 25
4.8.4 Advanced Tables 25
4.9 Frames 25
4.9.1 Introduction 25
4.9.2 Frames for Flexibility 25
4.9.3 Frames for Functionality 25
4.9.4 Frames for Interactivity 26
4.9.5 Aesthetics 26
4.10 Multimedia and Animation 26
4.10.1 Introduction 26
4.10.2 Site Covers 27
4.10.3 Design Elements 27
4.10.4 Digital Video 28
4.10.5 Digital Audio 29
4.10.6 GIF Animation 29
4.11 Web Page Downloads 29
4.12 Metadata 30

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

 Electronic Government Directorate, Government of Pakistan, 2003 Page 4


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

6.4 Code Layout 38


6.5 Title Tags 38
6.6 Graceful Degradation 38
6.7 Browser Compatibility 39
6.8 Color Depth 39
6.9 Screen Resolution 39
6.10 Testing for Accessibility 40

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

8. Promotion and Branding 47


8.1 Importance of Branding 47
8.2 Brands and Co-brands 47
8.3 Internal Branding 47
8.4 Brand Names 48
8.5 Market Research 48
8.6 Marketing and Promotion 49

9. Hosting and Domain Names 50


9.1 Hosting Guidelines 50
9.2 Structure of a Web Address 50
9.3 Domain Name Strategy 50
9.4 Domain Naming Conventions 51
9.5 Domain Name Eligibility Guidelines 51
9.6 Pseudo Domains 52

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

 Electronic Government Directorate, Government of Pakistan, 2003 Page 5


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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.3 Compliance and Implementation


These guidelines have been written to ensure that government sites are of high quality, are
easy to use and that they should present a coherent impression of Government activity. The
content and presentational style of individual web sites may vary greatly, but their adherence
to usability principles, basic features, technical implementation and good management
practice should not.
The guidelines offer a model of best practices for the design of web sites, which stresses the
need for ease of use, navigation and economy for the user. The key is that designers of
Government web sites should be aware of potentially exclusive practices and of the cost to
users of departing from the preferred model. Owners of web sites should be able to account for
their adherence to the guidelines contained herein and, where necessary, justify any departure
from the specified web guidelines.

1.4 Ownership and Maintenance


The ownership of the Web Standards and Guidelines document lies with the Electronic
Government Directorate (EGD), Government of Pakistan. The EGD is responsible for the
maintenance of this document. Keeping in view the growing nature of the Web and the
necessity to conform to best practices, this document should be reviewed bi-annually and
revised accordingly. The EGD will inform all concerned parties whenever a revision to this
document is made.

1.5 Definitions
NA

1.6 Acronyms and Abbreviations


CSS Cascading Style Sheets

 Electronic Government Directorate, Government of Pakistan, 2003 Page 6


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

EGD Electronic Government Directorate


FTP File Transfer Protocol
GIF Graphic Image Format
HTML HyperText Mark-up Language
ISDN Integrated Services Digital Networks
NA Not Applicable
PDF Portable Document Format
RAM Random Access Memory
URL Uniform Resource Locator

1.7 References
The table below contains details of documents referenced elsewhere in this document.
Document Title Publishing Organization

Hosting Guidelines Electronic Government Directorate (EGD),


Government of Pakistan

 Electronic Government Directorate, Government of Pakistan, 2003 Page 7


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

2. Strategy and Management


2.1 Issues for the Organization
An effective website is one of the means of delivering an organization’s business strategy. The
management of a web site will be more straightforward if there is integration between
electronic publishing and the departments whose material is presented through it. It is
essential to ensure that the various management tasks, which are necessary for effective use of
websites, are identified and that responsibility for their completion is clearly allocated and
understood.
Senior management should take keen interest in the electronic publication of information and
provision of services. A senior executive from each government agency or department should
be assigned with the specific responsibility of the overall management of its online presence.
Web sites should be viewed as an integral part of the government, than outside it. All units
should consider how they could best use the Internet to communicate with client groups. A
high level of awareness should be fostered amongst the staff regarding the ability of the
Internet to be used for giving and receiving information. It is desirable that as many staff
members as possible should be able to view its site, whether on the Internet or via a mirror on
the corporate intranet.
The complexity of the electronic publishing task and its increasing importance for the business
of government suggests that there is likely to be a requirement for a formal structure below
the supervising senior executives. It is recommended that a Project Manager be assigned the
responsibility of the overall management of the web site. They would work with the rest of
the department to ensure the integration of online processes. Also, there should be an
individual or a team, which monitors the maintenance of standards of web sites. The precise
structure of these relationships and the size and number of the teams involved varies and is
dependent upon departmental need.

2.2 Strategic Tasks


The strategic tasks, with respect to a web site, which should be addressed, are as follows:
• To identify the web site’s place in the government’s overall information technology
and communications strategy.
• To identify the audience for the web site, where possible, on the basis of market
research or dialogue with client groups.
• To understand and respond to users’ satisfaction with the site.
• Provision of resources, especially staff with the required skills, for the web site team.
• Integration of the web site with business processes, which might include electronic
dealings with the public, publication of information, recruitment and consultation.
• Integration of the web site into the department’s strategy for open government and
freedom of information.
• Integration of the web site with the departmental intranet and other systems.
• Monitoring of the development of the site and its success as a means of meeting
departmental objectives.
• Creation of future online strategy.

2.3 Site Management Tasks


Web Site Managers should pay consideration to:

 Electronic Government Directorate, Government of Pakistan, 2003 Page 8


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

• Technical specifications in support of business aims, including overall specifications of


the web site design, specifications of server requirements, etc.
• Procurement including tendering and selection of suppliers (where this is not part of a
pre-existing IT partnership), commissioning, monitoring contractors’ work and sign off.
• Building the team and establishing relationships within the organization. The Project
Manager should lead in identifying key staff with responsibility for the management,
design, publishing standards and development of the site.

2.4 Roles & Responsibilities


The roles and responsibilities required for implementing, and subsequently managing, the web
site, must be clearly defined. The Project Manager / Site Manager is responsible for ensuring
that this happens from the outset.
Specific roles will vary from site to site, but a few general roles are given below:
• Project Manager / Site Manager
• Research Analyst
• Information Architect
• User-Interface Designer
• Interaction Designer
• Graphic Designer
• Content Author / Copy Writer
• Brand Manager
• Usability Engineer
• Technical Architect
• Developer
• Tester
• Configuration Manager
• Network Administrator / Systems Engineer

 Electronic Government Directorate, Government of Pakistan, 2003 Page 9


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

3. Requirements
3.1 Requirements Gathering Process

3.1.1 Audience Definition


The ability to create usable and useful web site designs is highly dependent upon the
availability of a crisp audience definition. The easiest and the most cost-effective means for
collecting audience definition data is to conduct a survey. There are essentially two different
methods for conducting a survey - active and passive.
Active survey collection assumes that you or someone on your team is going to actively recruit
people to complete your survey. One common method is to email members of your target
audience and either send them the actual survey or point them to a web page where they can
fill out the survey. If there is an existing site, am email distribution can be created from users
who have sent in feedback. Another method is to seek out places where your audience is likely
to hang out – either virtually or physically. Newsgroups and mailing lists are good virtual
hangouts, whereas, user group meetings are good physical hangouts.
Passive survey collection is the easiest method of data collection, but it requires an
appropriate existing site to host your survey. For a passive survey, the web site owner merely
places a pointer to the survey from somewhere on the site (preferably the home page).
Another passive technique that has been tried is to use banner advertisements to interest users
in completing a survey. However, this is not a recommended technique since it may draw users
that would not typically visit this site.
With any type of survey collection, offering an incentive can easily increase the number of
respondents. The problem with incentives, however, is that they attract a non-representative
sampling of the total population visiting the site.
Survey questions typically fall into one of three categories:
1. Professional Profile (what is the user’s job title and what do they do for a living)
2. Surfing Profile (how, when, and why the user uses the web)
3. Site Usage (likes and dislikes; tasks users would like to perform, or content that the
user would like to read)
An effective survey will also enquire about the tasks a user would like to accomplish using the
Web that they cannot currently achieve. Such a question will help to identify the primary tasks
for your site. Before developing survey questions, it is critical that the survey author clearly
understands how each piece of survey gathered will assist in the design and creation of the
Web site. This will eliminate extraneous questions or questions of marginal value.
Unnecessarily long surveys result in incomplete surveys (particularly if there is no incentive to
answer questions) and might even harm the user’s perception of the Web site. However, the
reverse is also true – if you leave out important questions, you may not get another chance to
ask those questions before you complete your design. Adequate time should be set aside for all
team members to review the survey and to provide input.

3.1.2 Requirements and Task Gathering


After data about the target audience has been gathered, the next step in the process is to gain
a better understanding of the web site content. This is accomplished primarily by the
identification and prioritization of current and future tasks and requirements for the site. In
this process, content requirements for the site are referred to as ‘objects’. A web site object
is any piece of information that can be found on a particular Web site. Web site objects are
defined by the site designer/architect and can be as specific or general as necessary in order to
obtain meaningful results.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 10


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 11


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

3.2 Electronic Publishing

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.

3.2.2 Content Generation


Since information for publication within government is generally created through conventional
publishing techniques, material does not always reach the web team in electronic format.
Where late corrections are made to texts, there is a real risk of having no authoritative copy.
If there is to be rapid, accurate and accessible Internet publishing, government bodies should
adopt publishing strategies that establish an authoritative electronic version of documents as a
basis for both the electronic and paper versions of texts.
Organizations may find it useful to archive all documents in both word-processing format (for
future updates and re-releases) and in PDF format (to capture the format and any cover design
of a hard copy document). The Site Manager has a key role to play in pressing for this practice
to be established.
Information for the website should be provided and preferably created in an electronic format
which can easily be translated into HyperText Mark-up Language (HTML). Information for the
website should be accompanied by a 'display by' date, enabling the web team to ensure that
information is up to date.

3.2.3 Online Publishing Tools


There are various types of publishing tools for the publication of different types of data. Usual
minimum requirements for site creation and maintenance are:
• Text Editor: to write code in longhand.
• HTML Editor: to write code more efficiently.
• Graphics Editor: to produce, manipulate and modify images.
• FTP Software: to send pages to the server
• Email Software: to receive and reply to web site-generated email and forms.
Site management tools may be used which provide functions of HTML and text editors, FTP
software, link management tools and web statistics packages.
Static data publishing may be the most effective way to publish simply online. However, for
larger web sites or complex data sets, dynamic data publishing should be employed instead.

3.3 Content of Web Sites


Though the control of content on a web site is for the respective government body to decide
with their objectives, there are certain principles that Government web sites should generally
adhere to:
• The content should be comprehensive.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 12


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

• 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.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 13


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

3.4 Legal Issues

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.2 Copyright Issues


From the perspective of a department, agency or other public sector body, care is needed to
ensure that materials posted on their website do not infringe third party copyright. In this
regard, the usual rules apply: Material obtained from consultants, contractors and other
sources will raise copyright issues. The posting on the website of material in which third party
copyright subsists is a prima facie infringement of copyright.
The procedure for material on a website does not differ from that which applies to the
publication of a hard copy document. All reasonable endeavors should be made to ensure that
where third party copyright is involved, a license has been obtained or written permission is
otherwise sought.

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.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 14


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

• 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.5 Bulletin Boards, Discussion Groups and Chat Rooms


Where bulletin boards and discussion groups are used to invite comments and responses to
others’ comments, government bodies should be mindful of the level of moderation, which
must be provided. This is relevant both to the quality of the service, since a non-moderated
forum may justly be criticized as an inadequate means of consultation, and to the legal
requirement, to ensure that content is not unlawful.
The minimum level of moderation entails a disclaimer distancing the host from the opinions
and comments posted. However, there must be clearly stated and enforced rules for posting
which disallow defamatory, libelous, racist, sexist or otherwise offensive language. There must
be arrangements to promptly delete postings that contravene the rules. There should be a
registration system to enable users to post views and there must be arrangements to ban users
who break the rules. Postings must be read frequently. The maximum level of moderation
requires users submit contributions in advance so that the host can read them before posting
them onto the web site.
Chat rooms require a different form of moderation depending on whether they are permanent
or temporary. It is desirable that users of permanent chat rooms become members before they
can contribute. T his makes it possible to bar users for contravening rules, as for bulletin
boards. Permanent chat rooms must be monitored frequently, particularly during busy times.
It may be desirable to issue monitor status to trusted members, but this does not absolve the
host’s monitoring responsibility. Temporary or special occasion chat rooms typically have a
much higher media profile since they may feature a Minister or other prominent figure
responding to users’ questions and comments. In this situation, it is advised that questions are
submitted to the interviewee - either live or in advance - before being published in the chat
room.
Moderators or administrators will need access to profile details, so that they can exclude
people or re-admit users who forget passwords.
Regarding chat room and discussion group functionality, the site should state explicitly whether
it has been optimized for a particular browser or level of browser or screen resolution and
whether they require Java or a plug-in.

3.6 Conventions on Government Publicity


Websites maintained by Pakistan Government departments and agencies are a form of
publicity, and are subject to the following requirements. Government publicity should:

 Electronic Government Directorate, Government of Pakistan, 2003 Page 15


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

• Be relevant to government responsibilities;


• Be Objective and explanatory, not tendentious or polemical;
• Not be party political, nor liable to misrepresentation as such;
• Be produced and distributed in an economic and relevant way, so that the costs can be
justified as a proper expenditure of public funds.
These rules not only govern decisions on what should or should not be published on the Internet
but they also apply to issues of content and style – for example, departments should take care
when publishing Ministerial speeches on the Internet to remove overtly party political content,
such as direct attacks on policies and opinions of opposition parties and groups.

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.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 16


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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

 Electronic Government Directorate, Government of Pakistan, 2003 Page 17


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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.3 Simplicity and Consistency


Users are not impressed with complexity that seems gratuitous, especially those who may be
depending on a web site for timely and accurate work-related information. Most often, it is
the sites that have a new, different interface and navigation structure that users find hardest
to find their way around. This is why a site should be designed in the manner in which the
majority of people design. This is not to say that original work is discouraged, but the fact
remains that the most popular sites are the ones that do not ask users to figure out how they
work. The interface metaphors should be simple, familiar and logical to the audience. No one
cares how the web site works. They just want to read the content or use the features that are
being offered to them.
There is plenty of freedom to personalize your navigation structure through use of colors, icons
and text formatting. However, sticking to a basic underlying framework will ensure that the
web site is simple to navigate no matter how it looks aesthetically. The web pages that
extensively use graphics as navigation aids, should consistently apply them across every page in
the web site. Once the user is aware of the placement of standard links on the page header,
the interface becomes almost invisible and the navigation gets simpler.
For maximum functionality and legibility, the site design should be built on a consistent
pattern of modular units, all sharing the same basic layout grids, graphic themes, editorial
conventions and hierarchies of organization. One may think that this would lead to a more
boring and monotonous site. However, the goal is to be consistent and predictable, so that the
users feel comfortable while exploring the web site and are confident that they know how to
find what they are looking for.
Also, in order to preserve the effect of a ‘seamless’ system of pages, it may be worthwhile
bringing important information into the local site and adapting it to the page layout scheme
rather than using links to send the reader away from the web site.

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.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 18


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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.

4.5 Graphic Design

4.5.1 Design and Visual Logic


Graphic design creates visual logic - an optimal balance between visual sensation and graphic
or text information. Without the visual impact of shape, color and contrast, pages are often
graphically boring and will not motivate the viewer to investigate their contents. Dense text
documents without the contrast and visual relief offered by graphics and careful page layout
and typography are also more difficult to read. However, without the depth and complexity of
text, highly graphic pages risk disappointing the user by offering a poor balance between visual
sensation, text information, and interactive hypermedia links. In seeking this ideal balance,
the primary graphic design constraints in Web pages are the vertical, list-oriented structure of
HTML as seen in current Web browsers like Netscape and Internet Explorer, and the practical
bandwidth limitations on user access rates that may currently range from 14.4 modems to
Ethernet speeds or better.
Visual and functional continuity in your Web site organization, graphic design, and typography
is essential to convince your audience that your Web site offers them timely, accurate, and
useful information. A careful, systematic approach to page design can simplify navigation,
reduce errors, and make it much easier for users to take full advantage of the information and
features of your Web site.

4.5.2 Graphics and System Responsiveness


As Web systems evolve from informal novelties into widespread organizational, educational and
corporate use, the expectations for system performance are increasing. For a large
organization using a Web intranet system as a management information tool the aggregate
effect of the long delays caused by inappropriate use of over-large graphics or other
inefficiencies in key menu areas may cripple the cost-effectiveness of the system. This is
especially true when many users are accessing your Web site via modems, such as home-office
telecommuters, on-campus students, government officials, or field personnel.
Most studies on user response to computing system delays suggest that waiting times longer
than about 10 seconds are intolerable in routine, repetitive computing tasks. For the past few
years the (very slow) Web has gotten a free pass due to its novelty, but it seems unlikely that
users will be any more tolerant of Web systems than they are of any other networked service or
computing task.

4.5.3 Establishing a Visual Hierarchy


The primary task of graphic design is to create a strong, consistent visual hierarchy, where
important elements are emphasized and content is organized logically and predictably.
Graphic design is visual information management using the tools of layout, typography, and
illustration to lead the reader's eye through the page. Readers see pages first as large masses
of shape and color, with foreground elements contrasted against the background field. Only
secondarily do they begin to pick out specific information, first from graphics if they are
present, and second when they start parsing the "harder" medium of text and begin to read
individual words and phrases.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 19


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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.4 Directing the Reader’s Eye


English is read from left to right, and from the top of the page to the bottom. This
fundamental visual axis dominates most design decisions, and is the basis for most conventional
graphic design of print publications.

4.5.5 Color Schemes


Subtle pastel shades of colors make the best choices for background or minor elements,
especially if you are new to graphic design and color selection. Avoid bold, highly saturated
primary colors except in regions of maximum emphasis, where they should be used cautiously.
Type must always contrast sharply with any background color. If a dramatic or complex
graphic scheme is in mind for the web site, a professional graphic designer should be hired to
execute it. If you are not a designer and must do things yourself, keep everything
conservative, conventional and simple.

4.5.6 Graphical Distractions


Graphic embellishments, like horizontal rules, graphic bullets, icons, and other visual markers
have their occasional uses, but apply each sparingly (if at all) to avoid a patchy and confusing
layout. The same applies for the larger sizes of type on Web pages. One reason professional
graphic designers are so impatient with HTML is the grotesquely large type sizes displayed by
most Web browsers when using the "H1" and "H2" header tags. The tools of graphic emphasis
are powerful, and should be used only in small doses for maximum effect. Overuse of graphic
emphasis leads to a "clown's pants" effect where everything is garish and nothing is really
emphasized.

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.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 20


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

4.6 Balanced Page Design

4.6.1 ‘Smaller’ Screen


Web page design is largely a matter of balancing the power of hypermedia Internet linkages
against the ability to imbed graphics and motion media within networked Web pages. While
Web pages and conventional documents share many graphic, functional, and editorial
similarities, the computer screen is the primary delivery site for web-based information, and it
is highly unlike the printed page. Graphic designers often create page grids that look great on
their extra-large monitors, but forget that most users cannot display more than about half of
the typical Web page at any one time.
In page layout, the top of the page is always the most dominant location. However, on Web
pages the upper page is especially important, since the top four inches of the page is all that is
visible on a typical 14 to 16 inch computer monitor. Only 10% of Web surfers ever scroll the
page. A very common mistake, which should be avoided in Web design, is spreading the
horizontal width of the page graphics beyond the area most viewers can fit on their 14-15
inches screens.

4.6.2 Dimensions for Web Pages


Web page graphics should not be more than 535 pixels wide or more than about 320 pixels high,
or the graphic will be too wide to print on letter size or A4 paper. Even when the readers have
large display screens, the typical Netscape or Internet Explorer window still defaults to a
window width designed for smaller monitors.

4.6.3 Page Design Grids


A Web page can almost be of any length, but you have only got approximately 30 square inches
at the top of your Web pages to capture the average reader - that is all they will see as your
page loads. If a big, slow-to-load graphic is offered, many casual readers will leave without
seeing the rest of the Web site.
Consistency and predictability are essential attributes of any well-designed information system,
aiding users in identifying the origin and relationships of World Wide Web pages, providing
consistent and predictable access to interface and page elements, and a consistent graphic
design scheme. The design grids that underlie most well-designed paper publications are no
less necessary in designing electronic documents and on-line publications, where the spatial
relationships between on-screen elements is constantly shifting in response to user input and
system activity.
Current implementations of the Hypertext Markup Language (HTML) do not allow the flexibility
or control that graphic designers routinely expect from page layout software or conventional
multimedia authoring tools. However, the HTML markup language can be used to create
complex and highly functional information systems if it is used carefully. When used
inappropriately or inconsistently the typographic controls and inline graphics of World Wide
Web (Web) pages may result in a patchy, confusing jumble, without any apparent visual
hierarchy of importance. A carefully organized design grid that is consistently implemented
across a range of pages will aid your users in quickly finding the information they want, and
will increase the reader's confidence that they are using a thoughtfully organized collection of
information.
The goal is to quickly establish a consistent, logical screen layout - one that allows you to
quickly "plug in" text and graphics for each new page without having to stop and re-think your
basic design approach for every new page. Without a firm underlying design grid, your
project's page layout will be driven by the problems of the moment, and the overall design of
your Web system will look patchy and visually confusing.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 21


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

4.6.4 Page Length


Many human interface researchers and designers of graphic user interfaces have noted the
disorienting effect of scrolling on computers screens. This loss of local context within scrolling
computer screens is particularly troublesome when basic navigational elements disappear off-
screen as the user moves through very long pages. This argues for navigational Web pages
(home pages and menus in particular) that contain no more than about one to two 640x480
screens worth of information, and which feature local navigational links at both the beginning
and end of the page layout. Long Web pages require the user to remember too much
information that is currently scrolled off the screen - users easily lose a sense of context when
the navigational buttons or major links are not visible.
While visiting long Web pages, the user must depend on the global navigation bars to navigate.
In very long Web pages small movements of the scroll bar can completely change the contents
of the screen, leaving no familiar landmarks to orient by. This gives the user no choice but to
crawl downward with the scroll bar arrows, or risk missing sections of the page.
However, long Web pages are often easier for managers to organize, and for users to download.
Web site managers don't have to maintain as many links and pages with longer documents, and
users don't need to download multiple files to collect information on a topic.
It makes sense to keep closely related information within the confines of a single Web page,
particularly when the user is expected to print or save the text. Placing the content in one
place makes printing or saving easier. However, once you go beyond four screens worth of
information, the user must scroll so much that the utility of the online version of the page
begins to deteriorate. Long pages often fail to take full advantage of the linkages available in
the Web medium.
If the Web pages get too long, or contain too many inline graphics, the pages can end up taking
too long to download. Very large Web pages with lots of graphics can also overwhelm the RAM
memory limitations of the Web browser.
If you want to provide both a good online interface for pages and easy printing or saving of the
content:
• Divide the page up into chunks of two to three printed pages worth of information,
including inline graphics or figures. Use the power of hypertext links to take full
advantage of the Web medium
• Provide a link to a separate file that contains the full-length text combined into one
page, designed so the reader can print or save all the related information in just one
step. Do not forget to include the URL of the online version within the text of that page
so users can find updates and correctly cite the page source.

4.6.5 Modular Design of Pages


One of the primary advantages of online documents is that they can be rapidly updated. In
practice, the editor or "webmaster" of a large Web site is constantly swapping in new updated
files for old ones. In a well-designed modular system, pages covering particular topics can be
updated quickly without needing to change large sections of information or to re-format
complex pages. The page length may increase in a modular system, but the URL of each topic
page remains the same, regardless of how long the page grows. Thus modular systems are
better when you want to give your readers a sense of stability - the URLs of major pages
remain constant even while your Web site expands.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 22


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

4.7 Typography

4.7.1 Visual Contrast and Page Design


Good typography depends on the visual contrast between one font and another, and the
contrast between text blocks and the surrounding empty space. Nothing attracts the eye and
brain of the viewer like strong contrast and distinctive patterns, and these attributes need to
be carefully incorporated into Web pages. If everything is made bold, nothing stands out and
you end up looking as if you are SHOUTING at your readers. If every page is crammed with
dense text, readers see a wall of gray and their brains instinctively reject the lack of visual
contrast. Just making things uniformly bigger does not help at all. Even boldface fonts
become monotonous very quickly - if everything is bold, nothing stands out "boldly."
The major HTML headings should be used sparingly. One alternative to overly bold HTML
headers is to use the physical style controls of HTML to make text bold or italic without
increasing the font size. However, there are certain disadvantages to using physical styles to
control the typography of your Web pages. The HTML heading tags (H1, H2, etc.) are designed
to identify important titles and subtitles in your text, and are only meant to change the visual
display of the titles. If you use the "FONT SIZE" tags in Netscape and use physical styles like
"BOLD", automatic indexing and text analysis programs will have a difficult time analyzing your
web documents.

4.7.2 Visual vs. Structural Logic


No precise typography and page formatting is possible in current implementations of HTML. In
focusing solely on the structural logic of the HTML document, the framers of the Web ignored
the need for the visual logic of sophisticated graphic design and typography.
The standards organization responsible for codifying the HTML language is responding to the
widespread complaints that the heading tags in Web documents often produce clunky, over-
large titles and subtitles. Through style sheets and new font control tags future versions of
HTML will allow web designers to specify what size font each header level will produce in each
Web page. Thus, more sophisticated typography can be produced without giving up the
substantial advantages of using the conventional HTML header tags.

4.7.3 Type and Legibility


We read primarily by recognizing the overall shape of words, not by parsing each letter and
then assembling a recognizable word. The choice of uppercase or lowercase letters can have a
dramatic effect on legibility. Avoid all-uppercase headlines - they are much harder to read,
since words formed with capital letters are monotonous rectangles that offer few distinctive
shapes to catch the reader's eye.
In general, use down-style (capitalize only the first word, and any proper nouns) for your
headlines and subheads. Down-style headlines are more legible, because we primarily scan the
tops of words as we read. The use of initial capital letters in the headlines disrupts the reader's
scanning of the word forms.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 23


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

4.7.4 Pattern and Page Design


When your content is mostly text, typography is the tool you use to "paint" patterns of
organization on the page. The first thing the reader sees is not the title or other details of the
page, but the overall pattern and contrast of the page. The reader's eye scans the page first as
a purely graphic pattern, and then begins to track and decode type and page elements. The
regular, repeating patterns established through carefully organized pages of text and graphics
help the reader to quickly establish the location and organization of information, and increase
the overall legibility of Web pages. Patchy, heterogeneous typography and text headers make
it difficult for the user to see major patterns quickly. It becomes highly unfeasible for the user
to quickly predict where information is likely to be in located in unfamiliar documents.
Settle on as few heading styles and subtitles as are necessary to organize the content and then
use the chosen styles consistently. The fact that HTML provides six levels of headings does not
imply that you should use all six levels of headings in a single page.

4.7.5 Manipulating Text Blocks


Text on the computer screen is hard to read not only due to the low resolution of today's
computer screens, but also because the layout of most Web pages violates one of the most
basic rules in book and magazine typography - the lines of text in most Web pages are much
too long to be easily read. Magazine and book columns are narrow for physiologic reasons: at
normal reading distances the eye's span of movement is only about 8 cm (3 inches) wide. Thus,
designers try to keep dense passages of text in columns no wider than reader's comfortable eye
span. Wider lines of text require the readers to move their heads slightly, or strain their eye
muscles to track over the long lines of text.
Unfortunately most Web pages are almost twice as wide as the viewer's eye span, and hence,
extra effort is required to scan through those long lines of text. If you want to encourage your
Web site users to actually read a document online (as opposed to printing it out for later
reading), consider using the "BLOCKQUOTE" or "PRE" HTML tags to shorten the line length of
text blocks to about half the normal width of the Web page. Also in conventional print layout,
columns of 30 to 40 characters per line are considered ideal. However, this seems too sparse
to our eyes for Web page layout.

4.8 Tables

4.8.1 Tables and Page Layouts


Tables are currently the only HTML option for page layout. If a chunk of text is placed on a
page, the dimensions of the viewer’s browser window determine the length of the lines. When
the user resizes their window, the text reflows to fill the new space. Though some may
consider this a "feature," it actually hinders the user's experience with the content. The
conventions of print give us a comfortable place to access content. Without some adherence
to these standards you may discomfit and ultimately lose your readers.
To avoid discomfiture, use tables to define the areas of your pages. Use table cells to create
margins, place your text in table cells to limit the line length (ideally 10 to 12 words on a line),
and use cells to position elements on the page.

4.8.2 Cell Attributes and Table Dimensions


The behavior of a table depends largely on how its cells are defined. For the purposes of page
layout, cell widths with absolute values should be defined. Additionally, the cell should
contain a single-pixel GIF equal to the width of the cell to make sure that the table dimensions
do not change when the browser window is resized.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 24


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

4.8.3 Borders and Gutters


When we talk about tables we are not speaking of the ‘beauties’ that HTML offers for the
presentation of tabular content. We use tables to get around the limitations of HTML - in ways
they are not intended to be used. These are invisible tables, with their BORDER set to 0,
whose sole purpose is to give us control over page elements. Table borders are ugly and
unnecessary even in the context of the tabular materials they were intended for. It is much
cleaner to use spacing, alignment, and indents to delimit tabular information.
In print, the space between columns is referred to as a gutter. You can use tables to create
gutters, either through 1) adding a cell that serves as the gutter, or 2) by using the cellpadding
- space between cell contents and cell, or 3) cellspacing - space surrounding cell attributes.

4.8.4 Advanced Tables


Tables can be used in creative ways to help achieve effects that you may want to incorporate
into web-publishing efforts. There are a number of design challenges for which tables provide
the solution.
One thing that can be done with tables is take a composite image, split it into pieces and then
re-combine it into the cells of table. This is useful for creating wrap-around effects or image
captions. Watch out for hard returns in your HTML code when using tables to mortice images.
A hard return before a </TD> tag will add space between the table cells. You will also need to
set cellpadding, cellspacing, and border to 0 in order for the image to mortice correctly. A
single-pixel GIF should be used to keep the cells in the tables from collapsing. Tables can be
used to combine different text alignment specifications.

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.

4.9.2 Frames for Flexibility


One type of site suited to frames is one whose contents are expected to change frequently.
Since you can design a frame-based site to have one file for navigation, if you expect to add or
remove pages you will only have to modify that one file. Minus the frames, if a new page is
added to a section, each file in the section must be edited such that a new link is added to its
respective navigation column.

4.9.3 Frames for Functionality


Frames can provide a certain functional coherence to a targeted area of your site. Say your site
contains, among other things, a collection of poems. You could create a virtual "reading room"
for poetry using frames, with the left-most frame providing the navigation links and the main
frame displaying the poems. Visitors would most likely go to this area and navigate using the
links you provide. Hence, the quirky navigation of the Back button would not be too intrusive.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 25


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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.4 Frames for Interactivity


Frames can also allow users to choose their content. This is particularly significant when
working with large files. Say, for example, you have a movie file that you would like to put on
your page alongside other elements such as text. However, you want the download to be
optional for the user. If you simply include the HTML tag for the movie on the page with your
other page elements, the movie will download automatically with the page. Conversely, if
your page is a frameset, you can designate an area of the page as the movie space and give the
user a link to click if they wish to download the movie into that space.

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 Multimedia and Animation

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.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 26


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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.

4.10.2 Site Covers


Site covers are the most controversial of all site elements and can serve a number of different
purposes. Some function as "splash" screens that offer little information, but are intended to
entice users into a site by using snazzy graphics or effects. Splash screens have become a
common location for multimedia elements. Animations and sound can pique a user's curiosity,
compelling them to enter the site and explore. Using "splash" in the interior of a site, however,
is not something that is recommended. Any page element that is not relevant to the content is
simply distracting.
Others are used to establish an overall "look-and-feel" for a site. Such covers often provide
links to the major sections of the site, allowing visitors quick access to topics of interest while
providing a general site overview. Other covers have few graphics, but provide detailed
information and access to the content of the site. Which type of cover is most effective is
dependent on the nature and purpose of the site.
For many readers, site covers are simply an additional and annoying mouse click between them
and the content they are seeking. Such readers would like be presented with a site index at
the start rather than pretty graphics or spiffy animations. The key is to assess your audience
and then choose the entry that seems most appropriate.
Also, consider the function of your site. Is your typical visitor there for a single visit or will
they visit often? An online tool like a calendar or search engine should not have a purely
aesthetic site cover, as visitors will visit the site perhaps several times a day. An elegant but
non-functional cover on such a site will quickly become tedious. Of course, visitors who do not
want to enter through the front door can simply bookmark an internal page of your site, for
example, the table of contents. However, if you find yourself repeatedly making this argument
for using a site cover, you may want to adapt or even remove your cover to better
accommodate your audience.
An informational site, such as an academic, corporate, or general interest site, should have a
cover that establishes an overall visual design theme or metaphor for the site. It should also
identify and give a brief explanation of the purpose of the site, and provide a site overview by
presenting links to its major sections. This type of cover should answer the questions, Where
am I? What is it like here? What do these people do? What kind of stuff will I find?
With site covers, more than with any other aspect of Web site design, you must carefully gauge
the needs and expectations of your audience. Too much splash on a reference site will
exasperate, too little splash on an entertainment site will bore. The first impressions are what
matters most, particularly when there are so many other fish in the sea.

4.10.3 Design Elements


The combination of low bandwidth considerations and primitive interface options create
interesting design challenges for web developers who want to incorporate multimedia elements
into their sites. There are two main tenets that designers should adhere to - be sure to inform
the user that they are entering a high-bandwidth area, and provide them with the tools they
need to control their experience once in the area.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 27


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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.

4.10.4 Digital Video


The most current versions of the QuickTime plug-in and system software have a feature called
fast start. Movies can be saved in a special format that puts all the critical file information at
the start of the file data structure. As soon as this information reaches the client machine, the
movie can be set to play - users do not have to wait until the movie is fully downloaded before
clicking on the play button. Depending on network speed, a fast start QuickTime file can be
played almost immediately after the page is loaded. If the "auto play" option is set to true in
the movie's HTML tag, the movie will begin playing automatically as soon as the QuickTime
plug-in estimates it will be able to play the entire movie without waiting for additional data.
As long as the user's connection is faster than the movie's data rate, the movie will play from
start to finish without pause.
The implication of fast-start video is that duration is no longer an overriding concern for audio
and video site content. At one level, it no longer matters whether the video is one minute or
10, since with fast start each of these durations looks essentially the same. As long as the
user's connection and the movie's data rate are within the same range, a one-minute movie can
start playing at the same time as a 10-minute movie. File size is, of course, still a
consideration. A 6MB movie file needs to be kept somewhere on the client machine. Some
machines will crash if asked to hang onto large movie files. Assess your audience - their
network access, their processing power and memory configuration - and plan accordingly.
Set the data rate of your movies slightly lower than the throughput of your user's connection if
you want them to be able to watch your movies in real time. That implies a data rate of
around two Kbps for a 28.8 modem, five Kbps for ISDN, and five to forty Kbps for T1 lines. To
deliver true video at these data rates the compromises are great. The image size must be
small, the frame rate low, and the sound compressed. As a result of compression the image
quality will be less than optimal. Nonetheless, there is still interesting video and sound that
can be delivered using the web.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 28


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

4.10.5 Digital Audio


Sound and music can be delivered quickly and effectively over the Web. High-quality audio
files can be compressed so that they maintain their fidelity, yet the data rates required to
deliver the file remain reasonable. This is especially true when using streaming audio.
However, quality is imperative in web audio. An audio file that begins its digital life with
background noise or with a low dynamic range will be difficult to repair, and its flaws will be
more apparent after the extensive down sampling and compression required making the file
web-deliverable.
It is difficult to remove noise once it is present in a signal, so always try to record in the
quietest place possible and take steps to reduce or eliminate environmental noise. However, if
your recorded audio does have noise, you can reduce or sometimes eliminate it using the
equalizer and noise gate features of sound editing software such as SoundEdit 16.
One trick when using the equalizer to reduce noise is to raise each band individually until you
find the one that contains the greatest amount of noise. If you can pinpoint the band that adds
the most noise, you can lower that band and reduce the noise.
You can also use the equalizer to add substance to your audio files. In many cases your web
audio will be played on built-in computer speakers and your audio may lack the punch you had
intended. Using the equalizer to boost the mid-range frequencies will help fill out your sound,
but check your files on a variety of systems to ensure that your sound stays balanced.
It is also a good idea to normalize your sound files. Normalization ensures that you are working
with the loudest possible audio signal, and since you will lose volume due to down sampling for
the web, normalizing is an easy step toward increasing the quality of your music and sounds.
Normalizing a file finds the loudest peak in a file and then amplifies the entire file to make
that peak's volume 100%.

4.10.6 GIF Animation


The GIF file format has an option for creating animations that provides web site designers with
a low-tech option for adding moving images to web pages. The software used to create
animated GIFs is free and easy to use. Since GIF is a format supported by most browser
software, animations can be added to Web pages with the assurance that most visitors will be
able to view them. However, there are two main drawbacks to using animated GIFs - the first
of which is file size and the second, distraction.
Bandwidth is an important consideration when creating animated GIFs. However, since
animated GIFs do "stream" in the sense that they begin to play before they are fully
downloaded, there is some flexibility.
Animation should be meaningful, not distracting. Ideally, it should add something to the
content of the Web page. What it definitely should not do is disrupt the reader's concentration
with needless chatter. If you are using animation as content, e.g., to help illustrate a concept
or technique, open the animation in a secondary window using the TARGET="main" parameter
of the A HREF tag. This way, the readers can view the animation and then close the window.

4.11 Web Page Downloads


Page size
Large files are expensive and time consuming to download, especially for those with slow
network connections. This is exacerbated especially in case of for small businesses, as
sessions are likely to be during the period of peak calling charges. Large homepages have an
added disadvantage that the user cannot choose a more economical means of accessing the
site.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 29


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 30


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 31


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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

 Electronic Government Directorate, Government of Pakistan, 2003 Page 32


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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.

5.6 Writing to be Found


More than half of the Web users reply on search engines to navigate pages. When users link to
a page from a search engine, they should know immediately how the page relates to their
query. Highlight keywords, start the page with a summary, and follow the guidelines listed
under “Scannability”.
Query Terms
All possible query terms that can be used to search for the topic of the page should be included
in each page. The most important terms are to be listed in a keywords meta-tag together with
all common synonyms (including the ones not written in the body text). Generic terms that are
used by the users, or associated organizations, must be used to describe the topic of the page.
Do not include competitors’ trademarks in the meta-tag. In fact, use a controlled vocabulary
to add keywords to the meta-tags for your pages: Create a list of common terms for your
subject area and ensure that each of these terms is added to the key words meta-tag for those
related pages. Only use key words that describe the main topic of a page rather than a key
word only peripherally related to the page.
Titles
Each page must have a <TITLE>tag. The title text should be a single line with no more than 60
characters. The first 40 characters of the title should describe the topic of the page since
titles are often truncated in navigation menus and by search engines. The first word of the
title must be the most significant descriptor of the pages since a user often has to scan down
long lists of title to choose pages. Do not begin a title with a generic term such as ‘Welcome
to’ or an article like ‘The’. The title should be worded such that it makes sense even when it
is viewed totally out of context as a part of a long list of page titles. Different pages are to be
given different titles such that the pages about the same topic can start with same words but
end with words that signify the difference between them. Titles should contain no markup or
highlighting. In rare cases, a single keyword might be emphasized by use of uppercase.
Summary
Each page should have a short summary in a description meta-tag. This summary is shown
below the page title by some search engines. Descriptions must be 150 characters or less.
They should make sense when read completely out of context of the site, although it can be
assumed that they will be viewed along with the page title. Descriptions should tell users what
the page is about and allow them to judge whether it is relevant to their current problem. Do
not fill descriptions with hyperbole or promotional language.

5.7 Terms to Avoid


Writing well for the Web means taking advantage of the options the Web offers, but at the
same time, not calling attention to the Web. ‘Click here’, ‘follow this link’, and ‘this Web
site’ are just a few self-referential terms to avoid. Generally, if the words or phrases are
specific to Web use, then they should probably be avoided. A good test of web-term overuse is
to print the page out, read it, and see if it makes as much sense on paper as it does on screen.
One cannot possibly eliminate all references to the Web, especially when giving browser-
related instructions. However a common error to beware of is assuming that everyone reading
the page uses the same browser. The instructions should be detailed enough to be understood
without being specific to browser version or brand.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 33


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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 Content Accessibility

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

 Electronic Government Directorate, Government of Pakistan, 2003 Page 34


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 35


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

6.2.5 Image Maps


Use Client-side Image Maps
In a server-side image map, all of the information regarding the image and the links contained
within it are stored on the server. This implies that a screen reader cannot access this
information. Hence, client-side image maps should be used as much as possible – these are
also easier to implement.
Provide Alternate Text for Each Area
Just as every image needs its respective ALT attribute, each hot spot on an image map should
be given a unique description. The map as a whole should have a main ALT attribute to show
its primary function, and each part should additionally have a description of its destination. As
with all image maps, include a row of links beneath it to all of the links contained within. This
makes the image map faster to use and significantly increases its usability.

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

 Electronic Government Directorate, Government of Pakistan, 2003 Page 36


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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.

6.3 Standard document structure


These document structure recommendations will assist those who add to or take over
responsibility for websites.
• Document type must be included e.g. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">. The E-government Unit is examining the feasibility of a Government
DTD.
• Head tags must be included (opening and closing).

 Electronic Government Directorate, Government of Pakistan, 2003 Page 37


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

• Body tags must be included (opening and closing).


• Comment codes must follow a set notation e.g. <!--Comment Code text-->.
• The Body Tag must include the Text, Link, Vlink, Alink attributes.
• Comment codes must not be used to credit individuals or other companies.
• Metatags must be included according to the metadata standards.
• Sites must not use misleading metatags
• Content and physical Tags should be used accordingly.
• Tag attributes entered in the same order.
• HTML code must be commented and laid out in a way that ensure portability in terms of
others having to edit or reword code.

6.4 Code Layout


A standard layout must be adopted for HTML files e.g. Attributes must be added to Tags in the
same order throughout. Comment codes should be used to make portability easier.
The use of HTML validation tools such as CSE HTML Validator (http://www.htmlvalidator.com/)
or other similar tools such as those found at
http://tucows.inspire.net.nz/winnt/htmlvalnt.html is strongly recommended. Several later
model editors such as Allaire's Homesite (http://www.allaire.com/) also have code validation
tools built in.
It is recommended that HTML code be written to be readable to the human eye as well as by
machine as this aids in later maintenance. This can be achieved by using the standard indented
notation common in structured programming. See appendix 1 for an example.

6.5 Title Tags


Title tags are valuable for internal management, user navigation, and search engine
positioning.
• Title Tags must always be included.
• Title Tags should be no longer than 60 characters and where possible under 30.
• Title Tags should have a set syntax, describing the organisation and the content of the
page. To aid search engines, the most relevant text should be first , e.g. Content Subject
– Organisation.

6.6 Graceful Degradation


Graceful degradation means that a web page will not be adversely affected if viewed through
an older browser. This involves keeping the web site accessible to everyone, from the person
on the cutting edge of Internet technology to the person sitting in some outdated college
computer room. It does not need to look lovely - just viewable. The accessibility feature
comes as a part of valid structural HTML or xHTML code. However, there are additional
safeguards that can be enforced to realize this goal.
While the current generation of browsers has indeed done well supporting established web
standards, there is still a sizeable proportion of audience using browsers on or before the
version 4 mark. Hence, these people must be catered for as best as possible. While it would be
an ideal situation if everybody diligently downloaded the newest browser on each release, it is
simply not acceptable to expect this. The web site has to remain usable for users irrespective
of the version they are using.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 38


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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.

6.7 Browser Compatibility


A web site should look similar across the three major browsers – Internet Explorer, Netscape
Navigator and Opera. It may look better in certain browsers due to the quality of their support
for various standards, but is should be a goal to get the site design looking decent in all three
of these browsers. Designing to standards, instead of individual browser quirks, will ensure
this.
The decision about the level of technology to be used will have to be made upon the system
requirements and the audience. If a maximum and most diverse range of readers is desired
then aim as low as possible. For example, using proprietary tags causes severe accessibility
problems, as users who have chosen a different browser will not be able to reach some parts of
the web site. Limiting the audience like this is both naïve and unfair.

6.8 Color Depth


All the main backgrounds and table background colors should be specified from the 216 safe
color palette to spare you from big problems. People browsing with their monitors set at 256
colors will then be saved from seeing a site with messy colors. The text can be of any color,
but the presentation of any large blocks of information should comprise of web-safe colors.
GIFs are less of a problem though. A GIF will usually be simple and not require more than a
couple of dozen colors at most. Y ou should always try to save your GIFs in the safety palette.
This will ensure that they are really small in size.
It is simply impossible to have JPEGs looking the same at 256 colors since they use such a huge
color palette. In fact, JPEGs usually look really horrible at 256 colors, so it’s a good idea not to
have them all over your page. Try having links to them, or using thumbnails so that the low-
depth people can spare themselves from viewing them.

6.9 Screen Resolution


Currently, the prevalent resolution setting is 800x600 and the HTML source is designed to fit
within this. Many people seem to be moving into 1024x768, the next highest resolution. Very
few people are using the 640x480 screen resolution setting. Hence, it is safe to design for a
800x600 resolution – any higher and you will be annoying too many people; any lower and you
will be wasting valuable screen space.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 39


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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.

6.10 Testing for Accessibility


Get a Disabled Person to Look at the Web Site
The web site should be evaluated by using someone with a disability that might prevent him
from accessing information on the site. Ask the person with disability to browse the site and
inform about any problems. Particularly affected groups include visually impaired people
(blind, color blind, short or long sighted), dyslexic people and people with motor disabilities
(who may not be able to use a mouse).
View the Site using a Text Browser
Text browsers, such as Lynx that is available for free at <http://lynx.isc.org/release/>, should
be used to browse the web site. Problems that might be uncovered include those caused by
images with no or misleading alternative text, confusing navigation systems, or through the use
of frames.
Browse the Site using a Speech Browser
A free evaluation version of IBM's Homepage Reader, a speech browser used by many visually
impaired users of the Web, is available at <http://www-3.ibm.com/able/hprtrial3.html). The
browser "speaks" the page to user. The technique should be applied when using such a
browser: shut your eyes and try to comprehend what you are hearing. Alternatively, try
reading a web page out loud. Ask yourself - would it make sense if you were reading it to
someone who could hear you but could not see the site?
View the Site under Different Conditions
As suggested by the World Wide Web Consortium (W3C) Web Accessibility Initiative
<http://www.w3.org/TR/WAI-WEBCONTENT/>, a web site should be tested under various
conditions:
• Graphics not loaded
• Scripts and style sheets turned off
• Browsing without using a mouse
Check with Automatic Validation Tools
There are a number of web-based tools, which provide valuable information on potential
accessibility problems. These include Bobby from the Centre for Applied Special Technology
(CAST) <http://www.cast.org/bobby/>. It is possible to check whether the underlying HTML of
a web site conforms to accepted standards using the World Wide Web Consortium's HTML
Validator <http://validator.w3.org/>, as non-standard HTML frequently creates accessibility
barriers.
Acting on Your Observations

 Electronic Government Directorate, Government of Pakistan, 2003 Page 40


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 41


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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.

7.2 Planning for the Test

7.2.1 Defining Goals


Before starting the testing process, it is important to define the broad goals of the evaluation.
The question to answer is, ‘why are we running this usability evaluation?’. For example, are
you assessing respondents’ expectations and perceptions about the web site, or are you
collecting their feedback on what works well and what does not? You will also have to decide if
the results will primarily come through observation, or if the evaluation will be designed to
collect quantifiable feedback, such as the successful completion rate of a specific test.
Usability testing can aim at diagnosing problems, comparing alternatives and verifying that you
have met usability goals.
There are two different approaches to usability testing:
• Task-based Usability Testing: User tasks are identified and then presented to user
under controlled conditions. User actions and behavior are monitored and
documented.
• Open-ended Usability Testing: The user is free to set the context of the set, so the user
decides how to use the system or product. User actions and behavior are monitored
and documented.
Within each approach, there can be the following types of testing:
• Diagnostic Usability Testing: During development, the main goal of usability test is to
identify problem areas so as to fix them, and indicate areas of strength so as to
capitalize on them.
• Comparative Usability Testing: Instead of arguing about alternative designs, test both
of them – that is a comparative test. The web site may also be compared with that of
competitor’s.
• Verification Usability Testing: At the end of the development cycle, the goal may be to
ascertain how closely the web site is compatible with the preset usability goals.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 42


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

7.2.2 Selecting Participants


When the development of the product is nearing its end, a representative sample of users
should be involved in the assessment of the usability. In order to get a representative sample,
the designers, marketers and usability specialists can create a user profile on the
characteristics that are relevant to the successful completion of tasks. These user profiles can
be developed through market surveys, focus groups and by observing and interviewing
perspective users. The potential users can then be tracked down through customer lists,
related organizations or associations, email discussion lists, conferences, events and so on.
These users should, however, be unfamiliar with the product before the test is undertaken.
There are conflicting views regarding testers and whether they should be compensated or not.
However, the selection process becomes much easier if an incentive is provided. When
compensating participants, they should be clearly informed that they are being paid for their
time and honest reactions and not for validation or ego stroking.

7.2.3 Deciding on a Facilitator


A facilitator is a person who will conduct the testing and record its results. The choice of a
facilitator will depend to some degree on the resources that are available. Hiring an outside
usability consultant is preferable, since it builds in maximum objectivity and experience. A
facilitator may be chosen by keeping in mind some of the necessary qualities.
The most important quality of a successful facilitator is the ability to be objective and non-
judgmental. Many developers simply cannot distance themselves enough from what they have
created, to be effective facilitators. It is a natural reaction but it tends to adversely affect a
usability test. Uncomfortable situations may arise if the participant is struggling with the
product, and the designer attempts to interfere by providing suggestions on use. However, it is
equally important that designers of the web sites become aware of the problems that the
participants faced while using the product. This can be achieved by video taping the usability
test or by seating the designer in an adjacent room separated by a one-way mirror.
Another area to consider is experience and knowledge. A usability consultant or an on-staff
usability professional will have the experience and knowledge to conduct the tests with ease.
Other candidates will need to be trained if they are to avoid biasing users or leading them to
certain conclusions. However, they are expected to offer advice or assistance if the
participant is clearly unable to use the product in any way.
Personality and demeanor also have a lot to do with the facilitator’s success. A facilitator who
appears unfriendly, bullying or anxious can affect the outcome of the test. An ideal candidate
has a calm, open, and friendly personality and makes users feel that whatever they say is true
and fascinating. Usability test facilitators should also try to develop the ability to sense when
the participants need help, are uncomfortable in use, or need reassurance to voice the actions
they are undertaking.

7.2.4 Choosing a Location


Keep the setting of the evaluation informal and comfortable. Consider using a small
conference room with a typical PC, a little décor and a work area. A bit of background
distraction is actually a plus since it creates a testing scene which is closer to reality – nobody
works in complete silence. Regardless of where the evaluation is held, inspect the room the
day prior to the test. Make sure that all mandatory supplies such as computers, software and
chairs are present and that they are functional.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 43


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

7.2.5 Designing Tests


The structure of tests is dependent upon your goals for the test (diagnostic, comparative or
verification usability testing), the type of data that you want to collect (behavior or opinion,
objective or subjective, qualitative or quantitative) and your philosophy regarding interaction
with users (formal or informal).
In a usability test you usually want to answer question like these:
• Do users complete a task successfully?
• If so, how fast do they accomplish each task?
• Is that fast enough to satisfy them?
• What paths do they take while trying?
• Do those paths seem sufficient enough to them?
• Where do they stumble? What problems do they face? Where do they get confused?
• What words or paths are they looking for that are not present on the site?
• Do users realize, without being told, whose site they are working with, just from
looking at the home page?
• Do users click through pages or do they use the Search option?
• What words do they type in Search?
• What do they choose from the Search Results?
• How do they react to the download time of specific pages?

7.3 Conducting the Evaluation


If you have selected the participants properly, you will have a mix of individuals with varied
skills and experience for your evaluation. Before you begin, you will need to know a few basic
facts about your participants. It is important to get the users’ names, more for social reasons
than anything else, and to find out what their web skill level is. If you decide to ask other
preliminary questions, make sure they are tightly focused and essential to your evaluation.
Once you have attained the initial information, you will need to briefly reiterate what is
expected of users. Briefly try to explain that you are interested in discovering what they think
of the site, both good and bad. Reassure them that you are an objective observer and would
not be insulted by anything that they might say. Let them know that this is not a quiz and that
there are no wrong answers. Finally, tell them that you will not be touring them through the
site – instead, it will be the reverse. Ask them to think aloud about what they see and
experience as they move through the web site.
You may need to give users tasks to get them started, or keep them focused during the test.
Watch where they go, when they feel unsure or take the wrong path, and what makes them
react positively or negatively. When a participant is frustrated or confused, do not belabor the
point. The facilitator only needs to see if the participant could complete the task under
normal conditions in a reasonable amount of time. When they seem to stall or go around in
circles, give them another task, or ask them to explore another part of the site. Balancing
tasks with free exploration is essential since it increases opportunities for discovery. When
participants identify a problem, make sure you clearly document it.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 44


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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.

7.4 Reporting the Results

7.4.1 Report Vocabulary


Select the language used to describe the evaluation and the respondents carefully. Steer clear
from drawing conclusions based on observations. When a conclusion is based on an observation
and not a spoken response, make that distinction. For example, if a respondent appears
frustrated, or confused, the report should read, “The respondent appeared frustrated,” instead
of “The respondent was frustrated”.

7.4.2 Preparing and Organizing the Report


The goal for the written report is to provide a useful and readable document – not just a thick
of papers that gets filed away, unread. When writing the report, an executive summary should
be provided as well as specifications from the evaluation. With usability techniques, the goal
is to identify usability concerns and potential solutions. Therefore, a major portion of the
report should focus on usability shortcomings rather than areas that tested well.
Use the following sections as a guideline when preparing the Audit report:
• Overview: This is a high-level overview of the evaluation goals and methodologies used
to collect data. It describes the test respondents, the data collection process, the
testing facilities, and any considerations that potentially impact the results – basically,
this is the why and how of the test.
• Evaluation Highlights: This is the most important section of the report. It includes
self-explanatory headings such as ‘Significant Positive Feedback’ and ‘Significant
Negative Feedback’. Also include an ‘Interesting Findings’ section that discusses
unexpected feedback that was especially notable. The highlights section should
conclude with a selection of memorable quotes. A good evaluation captures
respondent feedback, and the best way to communicate that is through respondent
quotes.
• Results and Potential Solutions: Often the longest section of the report, this part
details the findings of the usability evaluation. The problematic areas should be
highlighted through a combination of narrative and screen captures. The screen shots
are especially effective for communicating the context of the problem. It might be
easy to identify a problem, but very difficult to document it.
• Next Steps: It is now time to figure out the solutions to the problems identified in the
auditing procedure. A usability evaluation does not exist in a vacuum, and the end
solutions often reflect a compromise between all site concerns such as visual design,
branding, technology, and resource constraints. Also, use this section to recommend
future evaluations.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 45


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

• Every good report also includes appendices:


• The questions asked to collect the data: This makes is feasible to reevaluate the site
using the same test script.
• Respondent profiles: This includes background information (demographics experience
level, Internet usage) on the test respondents.
• Screen Shots: They provide context for the evaluation and capture the version of the
site that was evaluated.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 46


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

8. Promotion and Branding


8.1 Importance of Branding
The branding elements of a web site should convey a single, unified message to all
stakeholders. Brand elements should include and leverage the government’s imagery,
iconography and messaging elements. Just what does “brand” mean in the online environment?
With traditional consumer products or services in the physical world, branding is easier.
However, with branding online it comes down to a person looking at a two-dimensional
computer monitor. Graphic design, information architecture, and easy navigation and usability
in the visual point-and-click confines of the web are critically important, as well as the actual
services provided on the site that give value to the consumer.
There is a need to implement a single brand identity that is enforced and promoted by the
relevant government body and their respective communications and promotion channels. This
requires a unified, seamless “look-and-feel” that a web site visitor experiences when on the
site. How the logo and taglines are used, which color palettes are chosen, what uniform
templates are used for different department content in subsections of the site, and how
outside promotional materials are coordinated with the look-and-feel of the site are critically
important in establishing a true brand.
To have this brand architecture, there are major implications in operating and maintaining this
portal site as well as cross-jurisdictional coordination to execute an effective and ongoing
marketing and branding campaign. Branding on the web isn’t about advertising; it’s an
ongoing, integrated process that needs a central organizational body to operate and
coordinate.

8.2 Brands and Co-brands


One way of branding a web site is by implementation in a “co-branding” architecture. The
term “co-branding” is an effective way to include various sites under the umbrella brand name
of a main site – with the attendant, unified look and feel of the site - while preserving their
related, yet distinct, departmental identities within sub-sections of the main site. A co-
branding approach is very effective for both consumers and agencies in preserving various
identities. It allows various government bodies to control their content and services within the
site while presenting the unified face of the main brand to site users in terms of look-and-feel
and common navigation controls.
Co-branding on the web does not mean basic “linking” from one site to another. If not
executed properly, the main site could become a “glorified linking page” where visitors simply
see a bunch of links back to the same old web pages now published by the agencies. However,
co-branding with the main brand name/logo brand and sub-brand name/logo (i.e. department
name headings) still implies a unified look-and-feel and a common navigation schema. The
visitor should always feel he or she is within the same umbrella main site, even though
transactions may be invisibly performed from disparate, back-end servers and databases.

8.3 Internal Branding


An awareness, education and training campaign about a new web site’s brand should be
developed for all levels of government employees to understand the importance of this online
endeavor before any well planned marketing campaign can be executed to establish the
branded web site externally. Significant, but surmountable challenges exist in creating brand
awareness and marketing government web sites among the disparate government entities.
It is recommended that such a campaign should identify and convey incentives and benefits
that would entice a government entity to participate in any required activity.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 47


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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.

8.4 Brand Names


The brand names on the web, particularly for a state government portal site, can be tricky.
Government bodies should avoid ambiguity, as well as trendy names that might be in vogue
today, yet sound silly tomorrow. This includes the prefix letters “e” or and “i” before a name
(like “EGov”), which are as trendy as they are inelegant sounding. “. com” and/or “. gov”
domains are the best use of suffixes to simplify the process of branding and making it easier for
consumers to find a site on the web.
Another substitute for a brand name could be the name of the government body itself. For
example, the Ministry of Foreign Affairs could have a web site brand name that is the same as
its official entity name.
In view of the different ways in which a brand name can be arrived at, the following guidelines
for brand names are given below:
• Where the web site represents a government body that currently has an existence in
the physical world, the web site name should be the same as it’s official entity name.
• Where the web site represents a government body that currently has no existence in
the physical world, and is primarily an online entity, the web site name should reflect
its online entity nature.
While the government bodies (ministries/divisions/departments, etc.) build web sites
principally for citizens, businesses, and government employees, it should avoid being perceived
as a trendy, Dot-com Company with an overly colorful brand name, which can easily lend itself
to frivolousness. Given the seriousness that is the business of government, combined with the
historic and regal imagery and messaging available, a simple name and associated brand
imagery that connotes the essence of the government should be used.
Either a professional branding firm, or even citizens and/or government employees within a
countrywide contest, could submit brief, catchy tag lines and slogans that capture the essence
of the information and services of the government’s portal site.

8.5 Market Research


Market research directed at truly understanding customer needs and preferences should be
undertaken throughout the life of a web site to ensure successfull, customer-centric web sites.
The dot-com world is now littered with sites that its developers “thought” would provide
valuable products or services that consumers would want and use -- and they were mistaken.
The key to marketing, as well as its definition, is to create products and services to fill
consumer needs. If we fail to ask web users directly what their needs and preferences are, we
are only guessing at the services that should be provided through the web site. The
Government bodies should engage in some market research to determine what services the
public would like to see provided through the proposed web site. This could be initiated by
surveying the public through a web site about the nine or ten finalists of new services that
potentially could be offered. This would help to gauge their preferences and provide valuable
insight into the two or three that generate the most interest. On an ongoing basis, user and
non-user preferences can be sought out by various means, such as conducting surveys, focus
groups and usability studies.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 48


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

8.6 Marketing and Promotion


A comprehensive and coordinated ongoing promotional campaign is warranted for a web site.
A phased approach, starting with a “soft launch” should be used until the web site is fully
functional with a broad array of services. Announcing the new brand name and describing
forthcoming services on the site could initiate this. As the site develops, targeted campaigns
directed at audiences appropriate to service offerings should be implemented. However, it is
very important to have a fully functional, well-designed site with many services in place prior
to launching any large-scale coordinated promotional campaign is executed.
To borrow an online industry quote, “Getting the word out and attracting people to a flawed
service is the preferred strategy for killing a web service.”
Prudent marketing should identify and promote all market segments such as citizens, small
businesses, employees, and other municipal or government agencies while coordinating the
overarching brand theme of the web site.
The advertising and promotional opportunities, that the government has access to through its
own channels of promotion, are extensive. Hence, an effective and far-reaching promotional
campaign could be implemented relatively inexpensively. There are several possibilities to
promote a new web site, including television and radio public service announcements; toll
receipt advertising; links from all current department sites; etc. Combined with an effective
PR campaign, a web site could receive significant traffic from these various channels of
advertising and promotion.
Additionally, there is a need for a central organization to plan and execute the marketing
campaign and coordinate with various government bodies. The central marketing organization
should be established within the proposed governance structure whose main responsibilities
would be developing and implementing a comprehensive marketing plan that would provide
consistency across all government bodies. The marketing plan would provide the roadmap for
the various marketing activities that should take place for the web site, from inception to full-
blown implementation.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 49


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

9. Hosting and Domain Names


9.1 Hosting Guidelines
Please view the ‘Hosting Guidelines’ document for further information.

9.2 Structure of a Web Address


The address of a web page is known as the Uniform Resource Locator (URL) and can be broken
down in the following fashion:
• Internet Protocol: The first element of the URL is the protocol - it is the http:// prefix
that designates the address as a World Wide Web page rather than an FTP site or email
address.
• Domain Name: The second element is the fully qualified domain name of a server. By
convention, the name usually starts with the prefix www if the machine identified is a
web server. However, this is not a requirement and in some cases there will be no
prefix to the domain name at all. The prefix www, which is generally interpreted as an
integral part of a domain name, is in practice a sub-domain representing the server
hosting your website. The actual domain name, such as wapda.gov.pk, is registered by
the organization through a naming authority and generally reflects that organization’s
name, acronym or a specialist subject area the web site is to represent. The fully
qualified domain name is the identifier of the entire website and bears no relationship
whatsoever to the organization hosting the service. This means that the department
can move the domain name, at any time, to another service provider without causing
problems for the end user.
• Directory and File Name: This third section is completely under the control of the
organization’s Web manager and is a direct reflection of the site architecture. The use
of different levels of directories and sub-directories in the construction of the website
will result in this URL becoming longer or shorter.

9.3 Domain Name Strategy


A domain name is intellectual property and accordingly may have financial and strategic value.
An organization having or planning to have an Internet presence should adopt and exercise a
centralized approach on planning the acquisition, management and use of appropriate domain
names.
All government bodies must have a domain name should have a domain name that reflects its
name that is commonly known by the public. The Top Level Domain in the domain name
should be .gov.pk. In addition, an individual government body may wish, as part of a defensive
strategy, to consider acquiring other, closely related host names, e.g., in the .org, .com Top
Level Domains. This may reduce the risk of confusingly similar domain names being registered
by third parties, thereby leading to confusion amongst Web users. This also reduces the
genuine risk of third parties acquiring name for vexatious purposes.
When registering any name you should be aware of the need to avoid infringing existing
trademarks and third party business names. Web managers also should be aware of ‘cyber
squatting’. This is a practice of buying up domain names reflecting the names of existing
organizations with the intention of selling the names back to you or for using them for ‘bad
faith’ purposes, such as, passing off.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 50


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

9.4 Domain Naming Conventions


A small number of three and four letter acronyms may be considered as ‘household names’,
e.g., PIA. However, for the broad majority of users, acronyms are meaningless. Web managers
should encourage a ‘user focused’ approach and register accordingly. For example, host names
like education.gov.pk, environment.gov.pk and defence.gov.pk may be considered intuitive
and unambiguous to a general user.
The domain name should be easy to remember, write and verbally communicate. In addition,
even if someone does not know the domain name, they should be able to make a logical guess
and find the relevant web site. For example, if a user wants to find the CNN site, that person
will make a logical guess of typing <www.cnn.com>.
The domain name should reflect the legal or trading name of the organization. The domain
name should be consistent with the web site name and vice versa. This can be in two ways:
either by including the top-level domain, or excluding it - both are acceptable. Consider the
following examples:
www.cnn.com for 'CNN.com'
www.yahoo.com for 'Yahoo!'
Broadly, there are three types of government bodies
• Ministries
• Divisions
• Departments
Whilst selecting a domain name, care needs to be taken to avoid infringing trademarks and
third party business names.
The naming of directories should also be carefully considered. For example, your top-level
directories may reflect organizational brands, projects or the editorial focus of the website.
They should also be unambiguous when spoken and easy to type. As with domain names, the
same care needs to be taken w.r.t the need to avoid infringing trademarks and third party
business names. Using the names of well-known people may also present difficulties.

9.5 Domain Name Eligibility Guidelines


The Internet Corporation for Assigned Names and Numbers (ICANN) is responsible for the
assignment of globally unique identifiers including Internet domain names. Country codes, such
as .pk are known as Top-Level Domains and their management is delegated to individual
country managers/registrars. The design of the naming structure under a country code rests
with the country manager/registrars. In the case of Pakistan, the country manager/registrar is
(PKNIC).
The eligibility guidelines apply to all new requests for registration of .gov.pk names.
Previously registered domain names should be regarded as exceptional, and not allowed to set
precedence. A Domain Naming Approvals Committee should approve all requests for domain
name registrations by government bodies.
The registration of .gov.pk names is limited to Government of Pakistan departments and
agencies, local government bodies and other associated and non-departmental public sector
organizations and projects. It is not for use by individuals, or by associations representing
public sector staff, or by public sector pension funds.
Projects and local authority departments should generally be treated as sub-domains of the
parent body e.g. <housing.authority.gov.pk> or <project.department.gov.pk>.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 51


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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.

9.6 Pseudo Domains


A number of domains have been registered which, at first sight, might be mistaken for officially
delegated country top-level domains. These domains are often referred to as ‘pseudo-
domains’. The registrants of these domains typically resell sub-domain names that also may be
mistaken for officially delegated domains. The common examples include: pakistan.com,
pakistan.net, pk.net. Under some circumstances it may be feasible to register such domain
names as secondary domains.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 52


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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.

10.2 Technical Maintenance

10.2.1 Tracking Site Activity


The more you know about user activity at your site, the better prepared you will be to plan
future updates. Tracking reports generated by server software can provide you with the
following information:
• The Number of Visits your Site Receives: indicates how well advertised a web site is
and how popular it is with users.
• Page Impressions: is the number of times a page is requested, including all graphics
that might be used to make up that page. Measuring ‘hits’ alone does not give a
meaningful analysis of usage - a page with 5 graphic elements will register as 6 hits but
only one page impression.
• Unique Visits: are calculated from unique IP addresses and time between requests, e.g.
20 minutes.
• Successful Requests
• Unsuccessful Requests: It is worthwhile to see what percentage of files are showing a
problem or do not exist. It helps indicate technical problems, which might need
correcting.
• Top Referring Sites: The pages, which users might link from whilst connecting to your
web site, may assist you in refining your advertising strategy and may uncover a new
category of users.
• The Order in which Users View your Pages: This can help you assess your navigation and
information design.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 53


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

• 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).

10.2.2 Maintaining Links


Web links break and change, sites move and are withdrawn. A broken or outdated link will not
only disappoint a visitor, but will adversely affect the overall impression of the web site.
Additionally, search engines tend to penalize or de-list web sites in case of persistent broken
links. At a minimum, check the site's links every month or two and correct or remove the ones
that are no longer working. You should check an external link more than once before deleting
it - it may be only temporarily inaccessible if its server is down. The tracking report generated
by server software can reveal the location of broken links.

10.2.3 Maintaining Version Control


The following tips would assist in maintaining efficient version control:
• Keep all versions of your site organized so that you can update files or refer to previous
versions efficiently.
• Maintain the naming and file directory system that you established during the initial
development of the site.
• Continue to back up your files and store them safely.
• Document your procedures for naming and structuring files so that others can grasp
your system easily.

10.2.4 Deleting Orphan Pages


It is convenient to allow obsolete pages to pile up on your server files. Evidently, it is more fun
to post web pages than to delete them. However, it is essential to get rid of orphan pages
periodically since search engines do not appreciate them – it just magnifies their amount of
work.

10.2.5 Adding New Web Pages


Adding web pages and keeping a consistent appearance can be achieved in three ways:
• ‘Save As’ an existing page, delete the old content and add new content, revise title,
and Meta tags.
• Copy and paste relevant sections of the code onto a new page.
• Use the template function of your authoring program to make a template for new
pages. Then add links to the new page on existing pages.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 54


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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.

10.2.6 Additional Tasks


The arrangements should be in place for the following analysis and where necessary, for
maintenance of the appropriate standards of performance:
• Assessing standards of performance over a typical low-end modem connection over an
open line and via a typical domestic ISP. This is in order to replicate the access
experience of the most access-challenged of users.
• Checking using different browsers and screen resolutions and with features such as
scripts and images disabled.
• Checking using disabled access evaluation tools.
• Check that the information is readable when printed, with both colour and monochrome
printers including laser, inkjet and dot matrix printers.
• Maintain a retention and management process for usage and change logs.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 55


Electronic Government Programme Version: 1.1
Web Standards & Guidelines Date: 24 September 2003

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.

 Electronic Government Directorate, Government of Pakistan, 2003 Page 56

You might also like