Guidelines for designing a Government website

March 2000

Prepared by

Electronic Governance Division

gov.mit.gov.in
.Ministry of Information Technology
www.mit.gov.in
Electronics Niketan
6 CGO Complex
Lodi Road
New Delhi 110003

Website design guidelines. Ministr..!' of Information Technology Page No. 1

 Govt. of India
Ministry of Information Technology

Guidelines for designing a Government website

"

Contents

The Design guide has been divided into the following sections:

1. Introduction and Benefits of Web presence

2. Government Website Goals
3. Web Methodology
.4. Contents of a Website
5. Website design tips

~ Interface Design
~ Site and Page Design
~ Web Graphics
~ Scanning Tips
~ Continuous improvement
~ Cross-platform support

6. Operation and updation of the Website

7. Resources
~ Manpower
~ Software tools required

8. Internal guidelines within a MinistrylDepartment

Website design guidelines. Ministry of Information Technology Page No. 3

 Guidelines for designing a Government website

1. Introduction

The advent of new technologies coincides with increasing demands for public access to
government information. The tools of the Internet provide a vehicle for improved
information sharing among branches of government as well as with the public. Many
governments have created, or are seeking to create, a Web presence. A set of information
delivery principles and Web site design criteria are therefore presented.

Benefits of Web Presence

Citizens, taxpayers and all sorts of government constituents and special interest groups
are crying out for increased government accountability. They want government to
improve services, cut waste, streamline existing activities, and provide greater public
access to information. The use of the Internet is already beginning to change the way
government operates in response to these constituent mandates.

Government use of the Internet has the potential to provide better government service.
When government delivers information, in many cases it is delivering the government
service itself. This new interactive medium, with its built-in measurements and feedback
loops, allows government to 'relate' to individual constituents with a new depth and
frequency. It can add an entirely new dimension to government's relationship to its
stakeholders.

Clearly, the Internet offers a unique opportunity to streamline the delivery of government
services, enhance communication with its citizenry, and serve as a catalyst for
empowering citizens to interact with government. Proper use of the technology will
increase opportunities for citizens to participate in government by voicing their opinions
and concerns. Internet technology has set the stage for the online public services of the
future.

A govt. website aim at publishing contents which have direct relevance to the public at
large. Considering the fact that Electronic Governance will be the wave in the new
millennium, Web sites are going to be the key delivery channels and hence must contain
as many online services as possible. However, the online environment is a dynamic and
challenging arena and 'doing it' and 'doing it well' require two very different levels of
planning and collaboration.

2. Government Website Goals

Major goals to be achieved through the implementation of a government Web site are:

1. To build a user-friendly place on the Internet available to citizens for access to

and dissemination of government information and services.

Website design guidelines. Ministry of Information Technology Page No. 4

 2. To gain the experience necessary to build a foundation for improved access to
government information and delivery of services through the use of information
technology.

3. To promote the country to the rest of the world in a manner that enhances
tourism, economic development opportunities and other national or regional
interests.

3. Web Methodology

The following methodology can be generally applied in the development process of a

Web site:

Audience: Is it clear for whom the Web site is intended: government employees
or user/customers (constituents, special interest groups, etc.)?

Purpose Statement: Is there a statement of the site's purpose or a clear

articulation of the reason for and scope of the site's existence?

Objectives (list): Does the Web site meet the specific goals of the purpose
statement?

Web Specification: Is there a clear sense of organisation regarding what pieces

of domain information will be presented as well as any technical or policy
limitations on that presentation?

Domain Information: What is the breadth and depth of the knowledge and
information in the subject domains presented in the Web site?

Web Presentation: How well have both style and content elements been used to
present the information delivered to the user?

4. Contents of a Website

Prime Minister has approved the proposal that all Central Ministries and Departments,
and the PSUs under their administrative control, shall launch websites on the Internet by
26th January, 2000. The essential ingredients of the Gal websites as formulated by the
Prime Minister's Office are:

~ Bi-lingual (Hindi and English versions to be launched simultaneously)

~ Essential Information:
o Brief introduction to the Ministry and the Minister in-charge
o Administrative set-up of the organization, with names, office address,
phone numbers and e-mail addresses of officers upto the JS level.
o Brief write-up on major activities of the organization

Website design guidelines. Ministry of Information Technology Page No.5

I
o Latest Annual Report of the organization.
o Special section if organization is involved m promoting investment,
especially foreign investments.
o E-mail address for receiving suggestions/complaints etc.
~ PhotographsNideo/audio clips should be used wherever possible to enrich the
website.
~ Publications (other than Annual Report) should be listed and procedure for
ordering these should be explained.
» Section for posting of press releases/handouts.
» Section for tenders/notices
~ Forms for the use of the general public should be posted for downloading and
online processing.
~ Links to related sites.

Apart of what has been mentioned above, other recommended contents are:

~ Guestbook
~ Latest hews in the respective area.
~ What's New
~ Local search engine
~ Site map
~ date of last revision
~ DDS (Discussion Forums)
~ Chat
» FAQs (Frequently asked questions)

5. Website design tips

Interface Design

Build clear navigation aids

Users should always be able to easily return to your home page, and to
other major navigation points in your local site. These basic links, that
should be present on every page of your site, are often graphic buttons that
both provide basic navigation links, and help create the graphic identity that
signals the user that they are still within your site domain. You can use popup
windows in your website to display contents from other sites/pages and still
remain in your site thereby providing better navigation control.

No dead-end pages
Every Web page should contain at least one link.

Website design guidelines. Ministry of Information Technology Page No. 6

 Access Issues
Provide the user with the information they want in the fewest possible steps, and
in the shortest time.

Bandwidth and interaction

Users will not tolerate long delays. Human-factors research has shown that
for most computing tasks the threshold of frustration is around 10 seconds.
Web page designs should be well "tuned" to the network access speed of say
around 33.6 kbps phone line connections. Average home page size of around 50k
is reasonable. Putting huge bitrnap graphics on your pages is not desirable.
However, if you are building a corporate Intranet site where most users will be
accessing your Web server at Ethernet speeds or better you can be much more
ambitious in your use of graphics and multimedia.

Simplicity and consistency

Users accessing the government sites are looking for timely and accurate work-
related information, Your interface metaphors should be simple, familiar and
logical to the audience

For maximum functionality and legibility your page and 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.

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.

Feedback and dialog

Feedback also means being prepared to respond to your user's inquiries and
comments. Well-designed Web sites should always provide direct links to the
"webmaster" responsible for running the site.

Flexibility & Managing time

The front page must be so designed that addition/deletion of new links is easy.
Many Web sites must be frequently updated so the information doesn't get
stale. But the presence of the new information may not be obvious to
readers of your Web site unless you make a systematic effort to let them
know about it. If items listed the on the menus on your home page are
updated you could just put a "NEW" graphic next to each updated item.
You should also date every one of your Web pages, and update that as
information changes so that users can be sure that they have the latest
version of things. However, if your site is complex, with many levels of
information spread over dozens (or hundreds) of pages you might be better

Website design guidelines. Ministry of Information Technology Page No. 7

 off making a "What's New" page that is specifically designed to inform
users that information in your site has been updated.

Home pages
In complex sites with dozens of topic areas it is not practical to load up the
home page of a Web site with dozens of links. The page gets too long to
load in a timely manner, and the sheer complexity of long pages may be
off-putting to many users. One must place submenus on the home page.
Each major submenu in effect becomes a mini-home page for that section
of your Web site. We can use cascading style sheets, ASP(Active Server Pages)
or any other technology to get dropdown menus.

Page Design

There should be a balance between the Graphics & Text. The amount of
graphics should be carefully "tuned" to the bandwidth available to the mainstream of
your audience.

Choice of colors
Subtle pastel shades of colors typically found in nature 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, and even there use them cautiously. Type must always
contrast sharply with any background color. If you have a dramatic or complex
graphic scheme in mind, hire a professional graphic designer to execute it. If you
are not a designer and must do things yourself, keep everything conservative,
conventional, and simple.

Printing considerations
Pages with lots of text should always be designed to print properly, as the
majority of readers will print those pages, and if the page is too wide they will
lose several words from each line of text along the right margin of the page.

Page Size, Page Headers & Footers

In general, you should favor shorter Web pages for:

~ Home pages, and menu pages

~ Documents to be browsed and read online.
~ Pages with very large graphics.

The header area of a Web page should contain a prominent title at or very near
the top of the page. Graphics placed above the title line should not be so large that
they force the title and introductory text off the page on standard office-size
monitors (640x480 pixels).

Website design guidelines. Ministry of Information Technology Page No.8

 Page footers should always carry basic information about the origin and age
of the page -.Most Web pages are bigger than the average display screen, so that
by the time most readers have scrolled to the bottom of the Web page the
,
navigation links you might have provided at the top of the page are no longer
visible. Well-designed page footers usually offer the user a set of links to other
pages.

Type & Legibility

Avoid all-uppercase headlines. They are much harder to read, because words
formed with capital letters are monotonous rectangles that offer few distinctive
shapes to catch the reader's eye: In general, use downstyle (capitalize only the
first word, and any proper nouns) for your headlines and subheads. Downstyle
headlines are more legible, because we primarily scan the tops of words as we
read:

Web Graphics

Most web pages will use GIF and JPEG files. In practice GIF format is popular for most
page design elements, and the JPEG format mostly for photographs.

Graphic dimensions for web pages

The "safe area" for Web page graphics is determined by two factors:
~ the minimum screen size in common use today (640 by 480 pixels)
~ by the width of paper used to print 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 your readers have large display screens, the typical
Netscape or Internet Explorer window still defaults to a window width designed
for smaller monitors
The following size recommendations are based on the typical dimension of
a Web browser on a 14 inch or 15 inch Macintosh or Windows 95/98 screen:

Graphic "safe area" dimensions for layouts designed to print well:

Maximum width = 535 pixels

Maximum height = 295 pixels

Graphic "safe area" dimensions for layouts designed to maximize screen

usage:

Maximum width = 595 pixels

Maximum height = 295 pixels

Website design guidelines. Ministry of Information Technology Page No.9

Scanning tips

It is a popular claim that images are made better by scanning larger and resampling
smaller to get the reduced size. This idea claims that elaborate image programs (like
PhotoShop) can do a better resampling job than the scanner can I have to agree,
sometimes it can. It's probably best to just scan to get the image size you need in the first
place. And it's so practical. It is true that if the image might be resized after the scan, it's
always much better quality to resize to reduce the image size rather than to resize to
increase the image size. So what is important for determining scanning resolution. for
video is:

I.How large is the area to be scanned?

2.How large do we want thefinal image to be?

And the obvious answer is to select a resolution that will scale that input
size in inches to that desired output size in pixels.

But if scanning for the web, keep in mind that many people use 640x480 screens,
whether you do or not. It is a very good idea to switch to 640x480 and check your own
web pages.

For copying text to the printer, or for OCR, use 300 dpi and Line art mode. Line art mode
is l-bit 2-color (B&W) like ClipArt or fax. Since Line art mode is only 1/24 the
memory size of color, we can handle the large image without much pain.

Standardisation of softwares within the Ministry

As each Ministry is in the process of using IT to automate various workflow related

activities within the Ministry and use Web as the front end to disseminate information
and services to the public, key information of the Ministry will be residing in the backend
databases. It is important to standardize on the use of Databases within the Ministry and
also ensure that the Databases used support the latest Web technologies like XML.

Cross-platform support

The Netscape and IE and not consistent in their behavior when it comes to certain HTML
tags, DHTML functions, javascripts etc. Hence use them carefully and test your pages in
both the browsers

Local Search Engine

Website design guidelines. Ministry of Information Technology Page No. 10

 As the site becomes complex, it is desirable that a search facility is made available. There
are different ways of implementing the same. Index Server of Microsoft on an NT is very
resource intensive search engine and should be used only if you have a high end web
server. On Unix, there are many public domain search engines which work well. We have
tried the Excite local search facility and that works fine. If you decide to develop one,
kindly consider the following:

6. Operation and Updation of the Website

Once the website has been designed, it is important to host it and publish the same. The
advantage of hosting a website within the Ministry is manifold. The updations can be
very fast and the website can be linked with the workflow of the Ministry thereby
providing a smooth interface with the backend applications and online processing of the
same on Web.

Next, it is extremely important to keep the contents updated or else users will lose
interest after visiting your site once or twice. Regular updation must be done by the in-
house web team.

7. Resources

Manpower
Minimum team required for any website design and hosting comprises of:

1. Web Administrator.
2. Content creator and site designer
3. Programmer
4. Graphics Designer & Artist

Software Tools for designing

Graphics

» Gif cruncher to reduce the gif and jpg image size. Online at
www.gifcruncher.com
» Image map software to create clickable images
» Adobe Acrobat to create.PDF files for download
» Image Styler and Adobe Photoshop for web graphics

Web Authoring

» Netscape Editor
» Frontpage 2000
» Dreamweaver

Website design guidelines. Ministry of Information Technology Page No. 11

 ~ Hotdog

Animations

~ Macromedia Flash
~ Hotdog

Scanning software

~ Finereader

The above mentioned softwares have been listed because we have used then. However
there are many other packages which could be better suited to web development.

8. Internal guidelines to be followed by various ministries for content provision to

their respective web masters.

I
~ The material to be put on the web should be edited in MS Word only.

~ Tabs should not be used while entering the text.

~ The font of the text should be Arial and font size should be 10.

~ The color of the normal text and headings should be in black.

~ The font size of headings should be 14.

~ If the material contains some tabular data, the tables should be made by Table
option of MS Word, not by tabs or spaces

~ If the material is lengthy, such as a manual or a book, different chapters or

sections should be made into different MS Word files and the index of that
chapter should also be prepared.

For anyfurther information, you may contact:

Mrs. Renu Budhiraja

Additional Director
Electronic Governance Division
Ministry of Information Technology
Electronics Niketan
6 CGO Complex
Lodi Road, New Delhi 110 003

Website design guidelines. Ministry of Information Technology Page No. 12

 Ph: 4364757 extn 200512105
Fax: 4363079
Email mailto:renu@mit.gov.in

Website design guidelines, Ministry of Information Technology Page No. 13