0% found this document useful (0 votes)
15 views14 pages

Guidelines for Government Website Development

This document provides technical guidelines for website development and maintenance for government bureaux and departments in Hong Kong. It covers essential topics such as domain name registration, bilingual page requirements, mobile-friendly design, performance optimization, and web accessibility standards. The aim is to ensure effective and user-friendly dissemination of information through government websites.

Uploaded by

raxaxkms123
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
15 views14 pages

Guidelines for Government Website Development

This document provides technical guidelines for website development and maintenance for government bureaux and departments in Hong Kong. It covers essential topics such as domain name registration, bilingual page requirements, mobile-friendly design, performance optimization, and web accessibility standards. The aim is to ensure effective and user-friendly dissemination of information through government websites.

Uploaded by

raxaxkms123
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Technical Notes on

Website Development and


Maintenance

Nov 2024

Digital Policy Office


The Government of the Hong Kong Special Administrative Region
Table of Contents

1. Introduction................................................................................ 1
2. Registration of Domain Names ................................................. 1
3. Use of Portable Document Format........................................... 1
4. Bilingual Pages ........................................................................... 2
5. Browser Requirements .............................................................. 4
6. Mobile Friendly Design ............................................................. 4
7. Optimise the Performance of the Websites ............................. 5
8. Use of HTML5 (HTML Living Standard) .............................. 6
9. Improve Site Visibility to Public Users .................................... 7
10. User Feedback ............................................................................ 8
11. User Preference .......................................................................... 8
12. Web Accessibility Conformance Logo and Statement ........... 9
13. Linking up with the [Link] Portal ............................... 9
14. Use of GeoInfo Map Viewer ................................................... 10
15. Use of LandsD Map Application Programming Interfaces
(API).......................................................................................... 11
16. Enable HTTPS and URL Redirection for non-www domain
names ........................................................................................ 11
17. Other Related References ....................................................... 12
1. Introduction
This document supplements the “Guidelines on Dissemination of
Information through Government Websites”. It highlights some useful
technical information and good practices in developing websites for
reference by Government bureaux and departments (“B/Ds”) to enable
effective, efficient, and user friendly dissemination of information through
websites.

2. Registration of Domain Names


Domain names are Internet addresses of websites. When setting up websites,
B/Ds are advised to register a bilingual pair of English and Chinese domain
names under the “[Link]” and “政府.香港” categories to facilitate public
access. All Government domains should adopt Domain Name System
Security Extension (DNSSEC) so as to facilitate the general public in
verifying the authenticity of Government's Internet services and strengthen
the public's confidence when using e-Government services.

Reference

Hong Kong Internet Registration Corporation Limited (HKIRC)


[Link]

Domain Name Registration Policies, Procedures and Guidelines for .hk and
.香港 Domain Names
[Link]

Hong Kong Domain Name Registration Company Limited (HKDNR)


[Link]

3. Use of Portable Document Format


Use the Portable Document Format (“PDF”) only for very long documents
or when the exact formatting must be preserved. We should avoid using PDF
file solely for information that is of wide public interest because PDF file
may not be readable on mobile devices or by users without the necessary
reader. Whenever PDF file is used, provide a hyperlink to access the
required reader software. PDF should be produced by proper PDF creation
tools instead of scanning from a document, as scanned image of text is
inherently inaccessible.

- 1-
Image-based documents, such as TIF files produced by scanning, should be
converted into a text-based document with Optical Character Recognition
(“OCR”) software prior to producing the PDF file. Alternative text (alt text)
should be provided for pictures (except for decorative purpose) in your
document and all contents should be accessible by assistive tools such as
screen readers in a correct reading order. B/Ds are advised to test the PDF
file by using a screen reader in order to ensure accessibility features, such
as appropriate alternative texts and correct reading order, are in place.

Use Password Protection in PDF

If password protection is required for a PDF file, relevant accessibility


option permitting access by screen readers should be enabled, such as
“Enable text access for screen reader devices for the visually impaired”
option in the “Password Security Settings dialog” must be enabled when
creating a PDF file. This feature allows screen readers to access the content
of the PDF file while preventing users from copying, printing and editing
the file.

Convert PDF files to Fast Web View PDF files

Convert the PDF files to Fast Web View PDF files before uploading to the
websites to minimise file size and facilitate page-at-a-time downloading. To
facilitate keyword searching, the document summary of the PDF file
containing information on the author, document title, keywords, etc. should
be properly completed.

Reference

PDF Techniques for WCAG 2.1


[Link]

4. Bilingual Pages
Use separate pages for the Chinese and English versions. This is to avoid
upsetting English screen reader software which cannot handle Chinese
encoding.

If the entry page is in Chinese, the link to the ‘English version’ should be
placed at the top of the website to facilitate language switching. Limitation
in English screen reader software is also the reason for placing the English
version as a link of the website.
- 2-
Government websites should include simplified Chinese version in addition
to the English and traditional Chinese versions to enhance the accessibility
of the websites to other Chinese communities. Web Content Hosting (WCH)
Service of DPO provides Simplified Chinese Conversion Service
([Link] (for government
internal access only) which provides conversion into simplified Chinese
version in offline mode. Webmasters should verify and review the translated
web content before publishing.

Online Translation

For websites that use their own online translation system to convert
traditional Chinese character web pages to simplified Chinese character web
pages, a disclaimer should be included in every government website to
remind users that the content in the translated version are conversion from
the traditional Chinese character version using a translation software, and
users should verify the translated version by making reference to the
published traditional Chinese character version.

ISO/IEC 10646 coding standard

The ISO/IEC 10646 coding standard should be adopted for newly


established Chinese version websites or websites undergoing major revamp.
The adoption of the ISO/IEC 10646 standard provides a unified coding
standard that ensures compatibility.

Some HKSCS characters were assigned to Private Use Area (PUA) code
points when the versions of the ISO/IEC 10646 did not include them. Since
the release of the ISO/IEC 10646:2011, all HKSCS-2008 characters are
included.

Webmasters are advised to check and convert the PUA characters to


standard code points for better content searching and interchange. The
following on-line tool can detect the PUA characters of a web page:
[Link]

Charset Code

The "charset" code should be included in all web pages to facilitate web
browsers to choose the character type. The “charset” code should be put
before the <title> tag to avoid any potential display problem if the title has
Chinese characters. The “charset” code should be added between <head>
and </head>, or before <body> tags in the following way:

- 3-
In the HTML5, the charset declaration should be:

<meta charset=”UTF-8">

Reference

Common Chinese Language Interface


[Link]

ISO/IEC 10646 & Hong Kong Supplementary Character Set (HKSCS) (for
government internal access only)
[Link]

5. Browser Requirements
To facilitate the public users in accessing government websites, web pages
should be viewable and supported by the prevailing versions of popular
browsers. Industry standard HTML should be followed and browser-
specific features should be avoided for best compatibility with popular
browsers.

With the advancement of web technologies, some aged multimedia and web
application technologies once widely supported via browser plug-in might
have been de-supported or planned to be de-supported. Using de-
supported browser plug-ins will expose users to the risks of cyberattacks.
B/Ds should phase out those browser plug-ins from government websites
and web applications before they reach the end-of-support.
B/Ds should test their web pages with all popular browsers prior to
production launch, and re-test as soon as possible upon launch of new
browser versions.

6. Mobile Friendly Design


In addition to desktop devices, it is now a major trend for the public users to
access government websites through mobile devices.

- 4-
It is imperative to implement “mobile friendly design” to provide good user
experience for website access across different devices (including desktop,
notebook computers, tablets & smartphones). By automatically adjusting
website contents to fit into different screen sizes, resolutions and orientation,
users will be provided with optimal viewing and interaction experiences,
enhancing readability and navigation of contents for best viewing effects. In
particular, horizontal scrolling will not be required when viewing website
contents, and size and spacing of contents (e.g. text, graphics) can also be
automatically adjusted to fit into the screen for best viewing experience.

A thematic site on mobile friendly design of government websites is


available for your reference and it can be accessed under ITG InfoStation
(for government internal access only) via the following URL:

[Link]

7. Optimise the Performance of the Websites


Many users may access government websites through mobile devices with
limited bandwidth and there is cost implication for viewing web pages of
large file sizes. As such, when designing websites, developers should take
necessary measures to optimise the sizes of web pages and the
corresponding multimedia files. The following paragraphs highlight some
of the related best practices.

Remove Unnecessary HTML Tags

Unnecessary tags increase page size and induce poor semantics. Nested
HTML tags are one of the common reasons of bloated HTML pages.
Unnecessary or empty tags should be removed.

Avoid Inline Cascading Style Sheets (CSS) and JavaScript

Inline CSS and JavaScript codes not only increase page sizes, but also
discourage the separation of functionalities. The “presentation layer” (CSS)
and “behaviour layer” (JavaScript) of a web page should be separated from
its structure (HTML). Separating resources files also improves the response
time of a page because browsers can concurrently download the files and
the page.

Enable Compression

Modern browsers support compression for HTTP requests. Enabling


compression on web servers can reduce the sizes of the HTTP responses,
and hence can significantly reduce the amount of time in downloading

- 5-
resources, reduce data usage of the clients, and improve the time of
rendering web pages.

Leverage Browser Caching

Downloading web pages may require multiple roundtrips between the


clients and servers. All web server responses should specify a caching policy
to help the clients determine if and when it can reuse previously downloaded
contents. Less frequent updated contents, such as images, CSS and
JavaScript coding, might have longer caching time, while more frequently
updated contents might have no caching and shorter caching time.

Minify Resources

Minification of resources reduces the sizes of HTTP responses by removing


unnecessary or redundant data, such as code comments and formatting,
unused code segments, long variable and function names. There are many
free tools available from the Internet for minification of various resources.

Optimise Image Sizes

As images often account for most of the downloaded bytes of a web page,
optimising image sizes can often result in large byte savings and
performance improvements.

Support Flexible Video Resolution

Most cloud video-streaming services in the market support users to choose


a lower video resolution to save bandwidth. Some service providers can
even detect the user’s network condition and automatically adjust the video
resolution (a.k.a adaptive bitrate). Adopting video streaming services
with flexible video resolution support can help users to save data usage,
particularly for viewing large video files.

8. Use of HTML5 (HTML Living Standard)


B/Ds should actively consider using HTML5 upon development or
revamping of websites. The main advantages are as follows:

 It is mobile device friendly, eases the development of mobile websites


and makes it possible for mobile websites to access some smart phone
native functions, e.g. GPS locations.

 It is an industry standard and supported by all popular browsers.


Adopting HTML5 improve website compatibility across browsers.
- 6-
 It supports video and audio web contents and is convenient for playing
back multimedia files directly in browsers without the need of
additional software.

Reference

HTML Living Standard


[Link]

9. Improve Site Visibility to Public Users


Search Engine Optimisation

To ensure websites have high rankings among search engine results, B/Ds
should include the descriptive titles in each web page and in the tag “title”.
For example, use a descriptive title between “<title>” and “</title>” instead
of using a common phrase such as “What’s New”. The meta tags
“descriptions” and “keywords” should include keywords commonly used by
users to search for the web pages. B/Ds should avoid using general titles for
many web pages. Examples of such bad titles are “Press Release”, “Today’s
News”, “untitled”, etc. The visibility of web pages in search engine results
is generally improved if the meta tags are descriptive, relevant, precise and
meaningful. On the other hand, search engine will lower the ranking of those
web pages with bad titles.

Besides, it is a common practice for the popular search engines (e.g. Google) to
publish their own guidelines for search engine optimisation of their own
products. B/Ds may refer to these guidelines for reference. Here is an example
of a Google guideline: Search Engine Optimization (SEO) Starter Guide
([Link]

Reference

GovHK Search Service (for government internal access only)


[Link]

- 7-
10. User Feedback
The views, opinions and feedback from public users may help improve the
design and enrich the contents of the websites. Collections of user feedbacks
can be carried out via online and/or offline channel(s), e.g. user satisfaction
survey, focus group discussions and etc. Through these exercises, it not only
provides better understanding on users’ needs and satisfaction towards the
websites, but also identifies areas of improvement. The findings can be used
to enhance the design of the websites for better user experiences, and enrich
the contents of the websites for better meeting user needs.

11. User Preference


For better relations with website users and their best viewing experience,
government websites should recognise a user’s previous preferences by
storing his/her preferred language, font size and/or colour preference, etc.,
with 1st party cookie(s) (i.e. the cookie(s) under the domain of your website)
based on the last access. When a user accesses a government website, B/Ds
should check the 1st party cookie(s) about the stored user preferences and
automatically redirect to the welcome message page of the corresponding
language preference with appropriate font size and/or colour preference.
However, if the user’s browser does not have that cookie and it is not a
departmental website, it should go to the first language selection page of the
website as usual. If it is a departmental website, “Common Look and Feel
Guidelines and Design Specifications” should be referred.

Reference

Common Look and Feel Guidelines and Design Specifications (for government
internal access only)
[Link]

It is important to note that, if cookies are used in a government website, the


website must have a notice under Important Notices for providing relevant
information on the purpose, the kind of data to be stored, and the expiry
date, etc.

B/Ds should also avoid the use of 3rd party cookie(s) as browsers like Safari,
Firefox and Chrome have started to block or planned to block 3rd party
cookie(s) by default to prevent user tracking across the Internet to better
protect user privacy and prevent exceptional user experience while
accessing the government website.
- 8-
For cookies related to collection of personal data of users, please refer to
the “Statements for collecting personal data online” in the Guidelines.

12. Web Accessibility Conformance Logo and Statement


Government web pages conforming to W3C WCAG 2.0/2.1/2.2 Level AA
standard should display the corresponding W3C conformance logo to claim
the relevant conformance and to help raise awareness of web accessibility
design. By default, the scope of the claim by a W3C WCAG 2.0/2.1/2.2
Level AA conformance logo refers to a single web page. If the claim is
meant to apply to include more than one web page, the conformance icon
may be accompanied by explicit scope information explaining which web
pages are covered by the claim.

For non-conforming web pages, exceptions must be justified and a “web


accessibility conformance” statement / explanation with the following logo
should be provided:

This “Web Accessibility Conformance” logo can be downloaded in


[Link] When
users click on this icon, it should link to a web page with a “web accessibility
conformance” statement / explanation.

B/Ds should set out their own “web accessibility conformance” statement /
explanation according to their circumstances.

Reference

W3C WCAG 2.0/2.1/2.2 Conformance Logos


[Link]

Digital Accessibility Campaign


[Link]
cessibility/[Link]

13. Linking up with the [Link] Portal


As promulgated in September 2018 for the Open Data Policy, all B/Ds
should, as a matter of principle, endeavour to release data (except personal

- 9-
data) for free public use via the Public Sector Information (PSI) Portal
([Link]). All data opened up should be in machine readable formats
(i.e. CSV / XML / JSON), updated timely (particularly for real-time data),
properly documented and without any unnecessary terms and conditions
imposed on their use.

The PSI Portal has been launched since March 2015 and revamped in end
2017 to disseminate PSI in machine-readable formats for the public free use.
The “Guidelines for the Dissemination of PSI” includes the standards, best
practices and other technical arrangements for linking up B/Ds’ PSI with the
PSI Portal.

Reference

[Link] (for government internal access only)


[Link]

14. Use of GeoInfo Map Viewer


With increasing information from B/Ds containing spatial elements, it’s
beneficial to provide a map viewer for better presentation of those
information in B/Ds’ websites. The Lands Department has make available
the GeoInfo Map Viewer service to facilitate B/Ds to embed a standard map
viewer for easily presenting its spatial information in its websites. The map
viewer provides a unified and up-to-date map contents and presentation of
the whole Hong Kong Territory. B/Ds should consider adopting the GeoInfo
Map Viewer service where applicable.

- 10 -
Reference

GeoInfo Map Viewer


[Link]

15. Use of LandsD Map Application Programming


Interfaces (API)
To reduce time and efforts required by B/Ds to acquire digital maps from
LandsD or other digital map providers, B/Ds should consider adopting
LandsD Map API services where applicable. LandsD Map API has been
launched to all B/Ds since December 2018. It provides a rich set of
geospatial and mapping functionalities, enabling B/Ds to build the web
applications enriched with location and mapping features.

LandsD Map API adopts open-standard Representational State Transfer


(REST) API framework, allowing B/Ds to integrate LandsD’s digital maps
into web applications. It supports open standards for the global geospatial
community such as Tile Map Service and Open Geospatial Consortium
(OGC) that are supported by the mapping application development
frameworks including the open source map API libraries such as
OpenLayers or Leaflet.

For more information on LandsD Map API reference and sample codes on
using LandsD Map API, please refer to the LandsD Map API portal website.

Reference

Map API service (for Internet access)


[Link]

Map API service (for government internal access only)


[Link]

16. Enable HTTPS and URL Redirection for non-www domain


names
Most web browsers enforce HTTPS connections automatically in the client
side. To facilitate public users in accessing government websites with both
“www” and “non-www” domain name URLs (e.g. [Link] and
[Link]) , webmasters should implement HTTPS server certificates for
- 11 -
both “www” and “non-www” domain names of their websites, by the
means of adopting a wildcard certificate or a multi-domain certificate.
Webmasters should then implement URL redirection rules in DNS
platforms such as Domain Name Hosting Service of DPO, for redirecting
HTTPS/HTTP requests for “non-www” domain name to the “www”
counterpart in HTTPS.

17. Other Related References


The following references are also related to the implementation and
maintenance of government websites.

Reference

IT Security

[Link] Internet Services - Central Internet Gateway (for


government internal access only)
[Link]

HKSARG Interoperability Framework


[Link]
ability_framework/[Link]

Electronic Transactions Ordinance


[Link]
lation/eto/

Domain Name System Security Extension


[Link]

- 12 -

Common questions

Powered by AI

The use of PDF is discouraged for widely disseminated governmental information because PDFs may not be easily readable on mobile devices or by individuals without the necessary reader software . PDFs are often less accessible to people relying on assistive technologies compared to web-based content formats . Additionally, ensuring the accessibility of PDFs requires careful preparation, including proper document structuring and the addition of alternative text, which may not always be consistently applied .

The advantages of using HTML5 in developing government websites include its mobile device friendliness, which supports development and optimizes access for mobile users . HTML5 allows access to some smartphone-native functions, such as GPS locations, improving functionality for users on different devices . Additionally, it is an industry standard supported by all popular browsers, improving compatibility across browsers . HTML5 also supports multimedia content, enabling direct playback of video and audio without additional software .

Bilingual content facilitates broader access to governmental information by accommodating both Chinese and English speakers . Separate pages for each language prevent encoding issues, improving accessibility for screen reader software which may struggle with mixed languages . Additionally, providing simplified Chinese versions supports users within different Chinese communities, enhancing inclusiveness and communication . This is crucial in a bilingual region like Hong Kong for effective public service delivery .

Browser compatibility ensures that web pages are viewable and functional across all popular browsers, which is crucial in providing equal access to government services to all users . By following industry standards and avoiding browser-specific features, websites maintain wide compatibility and reduce accessibility barriers . Testing web pages with multiple browsers prior and post-launch of new versions ensures ongoing compatibility and functionality .

The GeoInfo Map Viewer enhances presentation by providing a standardized and up-to-date map interface for displaying spatial information . It allows integration of spatial elements seamlessly within government websites, ensuring consistency and ease of use for the public . By facilitating better visual representation, it aids in comprehending complex geographical data and improves overall user interaction with spatial content on the site .

Key considerations include removing unnecessary HTML tags and avoiding inline CSS and JavaScript to reduce page size and improve semantic quality . Separate CSS and JavaScript from HTML to allow browsers to download resources concurrently, improving response time . Enabling compression and minifying resources reduce the size of HTTP responses . Implementing these strategies effectively enhances performance by reducing page load times and improving user experience across devices .

To improve visibility, government websites should use descriptive and specific titles for web pages instead of generic ones like 'What's New' or 'Press Release' . Meta tags such as 'description' and 'keywords' should also be precise and relevant to common search terms used by the public . Utilizing search engine optimization guidelines from entities like Google enhances these practices . Overall, these methods contribute by ensuring high rankings in search engine results, thereby increasing public accessibility .

To support mobile-friendly design, government websites should implement responsive design that adjusts content to different screen sizes and orientations without requiring horizontal scrolling . It is important to automatically adjust size and spacing for better readability and interaction on mobile devices like tablets and smartphones . Thematic resources on mobile-friendly design help provide guidance and reference for ensuring optimal user experience across platforms .

Government websites should collect user feedback through online and offline methods such as satisfaction surveys and focus group discussions . Analyzing this feedback helps better understand user needs and satisfaction levels, identifying areas for improvement . The insights gained should inform enhancements in website design and content, ensuring that the sites are more aligned with user expectations and preferences, ultimately improving the overall user experience .

Enabling HTTPS enhances security by encrypting the data transmitted between the user's browser and the website, preventing man-in-the-middle attacks and data interception . URL redirection for non-www domain names ensures that users accessing a site from different URLs are consistently directed to the secure HTTPS version, maintaining secure interactions across different entry points . This consistency in security protocol helps build user trust and complies with modern web security standards .

You might also like