DRAFT

Web Template
General Guidelines
Revised as of December 14, 2012
 R epublic of the Philippi nes
DEP A RT MENT OF SC IENC E A ND TEC H NO LO GY
Information and Communications Advanced Science and
Technology Office (ICTO) Technology Institute (ASTI)

References

Title Description

Executive Order _____________

Joint Resolution No. 1, Series of 2010

NCC Memorandum Circular 2002-01

NCC Memorandum Circular 2003-01

Administrative Manual – CMS: Drupal

Administrative Manual – CMS: Joomla!

Document Approval

Name Signature Organization / Position Date

Project Manager
Toni A. Torres
ICTO

Page 2 of 16
Web Template General Guidelines Revised Draft as of 1214_2012
 R epublic of the Philippi nes
DEP A RT MENT OF SC IENC E A ND TEC H NO LO GY
Information and Communications Advanced Science and
Technology Office (ICTO) Technology Institute (ASTI)

Table of Contents
References I
Document Approval I
1. Introduction 3
1.1 Rationale 3
1.2 Objective 4
1.3 Scope 4
Glossary 5
2. Description and Interface Requirements 6
2.1 Vertical Measurements 6
2.2 Homepage Section 7
2.2.1 Inner Page 8
2.3 Content Area Placeholders 9
2.4 Section Components 10
Top Bar 10-11
Masthead 12
Auxiliary Menu (Optional) 13
Content Area 13
Agency Footer 14
Standard Footer 14

Page 3 of 16
Web Template General Guidelines Revised Draft as of 1214_2012
 R epublic of the Philippi nes
DEP A RT MENT OF SC IENC E A ND TEC H NO LO GY
Information and Communications Advanced Science and
Technology Office (ICTO) Technology Institute (ASTI)

1. Introduction
The Government Web Template is an initiative by the Philippine Government to institutionalize a
corporate identity for all government websites through a standard design, navigation and content.
The National Government believes that government websites help improve the delivery of timely and
needed information and services to its citizens.
The Government Web Template is one of the components of the Integrated Government Philippines
Project, which aims to make the bureaucracy more efficient, effective and transparent through the
use of interactive, interconnected and inter-related government applications.

1.1 Rationale
In recent years, the Internet has become the first option for people to get information. People are now
more used to going online to get the latest news, announcements, sports results, reviews, recipes,
weather reports and much more. The Philippine Government, through its various agencies,
recognizes the potential of improving and furthering government services through the use of websites
for delivering information and providing public services.
However, independent studies and various personal observations, have noticed that the information
presented in government websites is not well organized or is hidden under too many links. Another
observation is that government websites differ from one agency to another in terms of navigation and
content. Both conditions present a problem for citizens to efficiently and quickly access the
information they need.
A lot of government websites were also found to have not been following prescribed guidelines on
content and elements outlined in the different government circulars. Content-wise, a number of
websites have not complied with the Transparency Seal requirement of the National Budget Circular
542 as well as the NCC Memorandum Circulars Nos. 2002-01 and 2003-01. Protocols on the use of
the Philippine Flag were also seen to have been violated.
There has been an increase in the use of mobile devices to access government websites in recent
years. However, most government websites are still not “mobile friendly.” Also, with the recent
attacks from both local and foreign entities, there is also a need for government websites to be more
secure and robust.
With the realization that increased transparency, efficiency and trust in government can be achieved
through enhanced e-Government systems (Philippine Development Plan 2011-2016) and with more

Page 4 of 16
Web Template General Guidelines Revised Draft as of 1214_2012
 R epublic of the Philippi nes
DEP A RT MENT OF SC IENC E A ND TEC H NO LO GY
Information and Communications Advanced Science and
Technology Office (ICTO) Technology Institute (ASTI)

people relying on the Internet to get the information they need, it is high time agency websites are
better designed and equipped, ready to provide information and online services.

1.2 Objective
This document provides and describes the specifications of the web templates that shall be
implemented and strictly applied to all official government websites. It gives details on the
components and configuration setup for modification, and the interfaces where they can be
accessed. Its main objectives are to:
1. Institutionalize a corporate identity for all government websites by having a common
look and feel that will also facilitate the ease of use and navigation for users;
2. Facilitate the creation and/or migration of agency websites and content buildup by
providing templates based on mature web content management systems platforms;
3. Ensure that the design and content of government website comply with the different
circulars on the creation of agency websites;
4. Ensure government websites to be responsive for optimal viewing on mobile devices;
and
5. Institutionalize accessibility for Persons with Disabilities (PWD) on all government
websites.

1.3 Scope

1. Government Agency Categories

▪ National Government Agencies (NGAs)
▪ State Universities and Colleges (SUCs)
▪ Local Government Units (LGUs)

2. Content Management System Types

▪ Drupal
▪ Joomla!
▪ Wordpress

Page 5 of 16
Web Template General Guidelines Revised Draft as of 1214_2012
 R epublic of the Philippi nes
DEP A RT MENT OF SC IENC E A ND TEC H NO LO GY
Information and Communications Advanced Science and
Technology Office (ICTO) Technology Institute (ASTI)

Glossary
Breadcrumb A trail or navigation aid used in user interfaces for users to keep track of their
locations within programs, documents or websites.
Column
Column Width A vertical measurement that is 30px wide.
CMS Content Management System (CMS) is a computer program that allows publishing,
editing and modifying content on a web site as well as maintenance from a central
interface. Features of CMS include Web-based publishing, format management,
revision control, and indexing, search, and retrieval.
Drupal Drupal is written in the PHP programming language. The software is ready-to-use
upon download and also includes a Web-based installer and add on modules. The
software supports content management, collaborative authoring, newsletters,
podcasts, image galleries, peer-to-peer networking, file uploads/downloads and
more.
Homepage The opening page of a website.
HTML5 Hyptertext Markup Language (HTML) refers to the main markup language for
displaying web pages and other information that can be displayed in a web
browser. HTML5 is the latest generation of HTML and was designed to provide a
comprehensive platform for Web pages that eliminates the need to install third-
party browser plug-ins such as Java and Flash. HTML5 also provides support for
2D graphics, document editing, drag and drop, browser history management, audio
and video playback and local file storage.
Joomla! Joomla! is a free and open source content management system (CMS) designed to
assist users in building websites and other online applications. The Joomla Web
CMS is considered to be a popular choice for many types of websites, including
corporate sites, news or blogs, government applications, small business sites and
sites where secure logins are required.
Template A web template is a tool used to separate content from presentation in web design,
and for mass-production of web documents. It is a basic component of a web template
system. Web templates can be used to set up any type of website. In its simplest
sense, a web template operates similarly to a form letter for use in setting up a
website.
Theme A theme refers to the design of the web page. It's a way to coordinate all the
elements that go into making the web page so that they complement one another
and reinforce the site's subject matter.
Widget A widget is a stand-alone application that can be embedded into third party sites by
any user on a page where they have rights of authorship. Widgets allow users to
turn personal content into dynamic web apps that can be shared on websites

Page 6 of 16
Web Template General Guidelines Revised Draft as of 1214_2012
 R epublic of the Philippi nes
DEP A RT MENT OF SC IENC E A ND TEC H NO LO GY
Information and Communications Advanced Science and
Technology Office (ICTO) Technology Institute (ASTI)

where the code can be installed. It is a small application that can be installed and
executed within a webpage by an end user.

2. Description and Interface Requirements

2.1 Vertical Measurements
Government websites should be designed using a responsive framework with a standard width of 1190px on
regular screens that scales down gracefully on smaller devices of 320px in width. This would allow the website
visitor to access the website content on multiple types of devices. Website layout should be based on a twelve-
column grid layout that scales down to a one layout on the smallest of mobile devices.

Figure 1: Breakdown of 12-column grid.

This measurement is applicable in all sections of the website (desktop).

Note: Vertical measurements in other devices are not fixed in pixels but are proportion based on the grid
presented above.

Page 7 of 16
Web Template General Guidelines Revised Draft as of 1214_2012
 R epublic of the Philippi nes
DEP A RT MENT OF SC IENC E A ND TEC H NO LO GY
Information and Communications Advanced Science and
Technology Office (ICTO) Technology Institute (ASTI)

2.2 Homepage Section

A government homepage is broken down to seven (7) major sections. These are the top bar, masthead,
auxiliary menu (optional), banner, content area, agency footer and standard footer.

Page 8 of 16
Web Template General Guidelines Revised Draft as of 1214_2012
 R epublic of the Philippi nes
DEP A RT MENT OF SC IENC E A ND TEC H NO LO GY
Information and Communications Advanced Science and
Technology Office (ICTO) Technology Institute (ASTI)

. Figure 2: Basic layout of a homepage

Page 9 of 16
Web Template General Guidelines Revised Draft as of 1214_2012
 R epublic of the Philippi nes
DEP A RT MENT OF SC IENC E A ND TEC H NO LO GY
Information and Communications Advanced Science and
Technology Office (ICTO) Technology Institute (ASTI)

2.2.1 Inner Page

An inner page consists of six (6) sections.

Page 10 of 16
Web Template General Guidelines Revised Draft as of 1214_2012
 R epublic of the Philippi nes
DEP A RT MENT OF SC IENC E A ND TEC H NO LO GY
Information and Communications Advanced Science and
Technology Office (ICTO) Technology Institute (ASTI)

Figure 3: Basic layout of an inner page.

2.3 Content Area Placeholders

The content area may only be divided intro four, three, two and one column(s).

Page 11 of 16
Web Template General Guidelines Revised Draft as of 1214_2012
 R epublic of the Philippi nes
DEP A RT MENT OF SC IENC E A ND TEC H NO LO GY
Information and Communications Advanced Science and
Technology Office (ICTO) Technology Institute (ASTI)

Figure 4: Content Area Placeholders.

2.4 Section Components

Top Bar
The top bar for all official government website has fixed components and navigations which shall include the
following:

1. Republic Seal

2. Main Navigation
Home
Transparency
◦ About Us
▪ Mission Vision and Objectives
▪ Historical Background
▪ Organizational Structure
▪ Functional Areas
▪ Mandates and Functions
◦ Name of Officials (with position, designation and contact information)
◦ Reports
▪ Annual Reports (Budget Circular Nos. 507 and 507-A last 3 years)
▪ Financial
◦ Approved budgets and targets
◦ Procurement
▪ Bids and Awards
▪ Contracts Awarded
◦ Procurement
◦ Job Opportunities

Major Programs and Projects (List of all agency products and services)
◦ Products and Services
- May contain but not limited to the following: Services Offered, Prescribed Steps, Documentary
Requirements, Rationale, Fees and Charges, Goals and Objectives, Description, Expected Major
Outputs, Project Structure, Contact Details, URL, etc.
◦ Ongoing Projects

Contact Us
◦ Feedback
◦ Follow up
◦ Comments
◦ Complaints
◦ Directory (downloadable PDF file)

Page 12 of 16
Web Template General Guidelines Revised Draft as of 1214_2012
 R epublic of the Philippi nes
DEP A RT MENT OF SC IENC E A ND TEC H NO LO GY
Information and Communications Advanced Science and
Technology Office (ICTO) Technology Institute (ASTI)

3. Search bar

Main Navigation Specifications:

Item Action Property Size RGB

Top Bar No action - 1190x45px #222222
Republic Seal No action - Colored
Mainnav (level 1) Clickable/Dropdown Google Font 12pt #ffffff
Mainnav (level 2) Clickable/Dropdown Google Font 12pt #ffffff
Mainnav (level 3) Clickable Google Font 12pt #ffffff
Search bar Input box - - -

Figure 5: Top bar – Republic Seal measurements.

Page 13 of 16
Web Template General Guidelines Revised Draft as of 1214_2012
 R epublic of the Philippi nes
DEP A RT MENT OF SC IENC E A ND TEC H NO LO GY
Information and Communications Advanced Science and
Technology Office (ICTO) Technology Institute (ASTI)

Figure 6: Search Bar

Masthead
The masthead shall contain the following:

1. Agency Logo
2. Republic of the Philippines
3. Line
4. Department Name
5. Name of agency/Region

Figure 7: Masthead measurement – Agency Logo

Page 14 of 16
Web Template General Guidelines Revised Draft as of 1214_2012
 R epublic of the Philippi nes
DEP A RT MENT OF SC IENC E A ND TEC H NO LO GY
Information and Communications Advanced Science and
Technology Office (ICTO) Technology Institute (ASTI)

Item Action Property Size RGB

Agency Logo Links to home .png 100x100 222222
Republic of the None Google Font 14 pt 222222
Philippines
Line None .png Same length of 222222
Dept name
Department Name Clickable, links to Google Font 24 pt 222222
home
Agency Name Clickable, links to Google Font 12 pt 222222
home

Auxiliary Menu (Optional)

The auxiliary menu is optional. The agency may use it as breadcrumb* or put an extra set of navigation. Refer
to Possible Contents below.

Content Area
Components:
1. Background – All agencies shall use white background only (#ffffff)
2. Icons – All icons should have a description (for persons with disabilities)
3. Font – The following are required:
◦ Font face: Verdana, Arial and Tahoma
◦ Style: Bold, Underline and Italic
◦ Size: 10-12pt
◦ Color:
4. Borders and Tables – Colors are customizable.
5. Transparency Seal – A seal should be visible on the home page.
6. Social Media Section – A social media section must be visible on the same spot on all agency
websites.
7. Others?

Possible Contents:
The following are lists of possible contents. Final web content will depend on the Agency's needs and
requirements and are subject for approval of the Office of the President (PCDSPO) (and/or) .
Contents should comply with the UN-ASPA Stages of E-Government.

 Newsroom, Press Release, Announcement, Advisory, Issuance, Updates, Featured, Archive

Page 15 of 16
Web Template General Guidelines Revised Draft as of 1214_2012
 R epublic of the Philippi nes
DEP A RT MENT OF SC IENC E A ND TEC H NO LO GY
Information and Communications Advanced Science and
Technology Office (ICTO) Technology Institute (ASTI)

 Log in (Employer/Members, Students/Faculty/Alumni, etc)

 Downloads (Forms
 Links, Site Map
 Webmail
 Results (Examination)
 Forum, Message boards, FAQs
 Registration, Requirements, Application
 Calendar of Events, Philippine Standard Time
 Secretary's Corner, Director's Corner, Dean's Corner, etc.
 Official Organizations

Agency Footer
The agency footer shall contain all the navigation and links present in the Top Bar, Auxiliary Menu, and some
from the content area.

Standard Footer
The standard footer shall contain the following:

1. List of all Government Agencies (link to gov.ph)

Page 16 of 16
Web Template General Guidelines Revised Draft as of 1214_2012