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 -