Web Template General Guidelines - iGovPhil...

DRAFT

Web Template General GuidelinesRevised as of December 14, 2012

Information and Communications Technology Office (ICTO)

Advanced Science and Technology Institute (ASTI)

Web Template General Guidelines Revised Draft as of 1214_2012

Republic of the Phil ippinesDEPARTMENT OF SCIENCE AND TECHNOLOGY

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

Toni A. Torres Project ManagerICTO

of 16





Table of Contents

References IDocument Approval I

1. Introduction 31.1 Rationale 31.2 Objective 41.3 Scope 4

Glossary 52. Description and Interface Requirements 6

2.1 Vertical Measurements 62.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

of 16





1. IntroductionThe 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 RationaleIn 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

of 16





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 ObjectiveThis 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

of 16





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

of 16





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 Requirements2.1 Vertical MeasurementsGovernment 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.

of 16





2.2 Homepage SectionA 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.

of 16





. Figure 2: Basic layout of a homepage

of 16





2.2.1 Inner PageAn inner page consists of six (6) sections.

of 16





Figure 3: Basic layout of an inner page.

2.3 Content Area PlaceholdersThe content area may only be divided intro four, three, two and one column(s).

of 16





Figure 4: Content Area Placeholders.

2.4 Section Components

Top BarThe top bar for all official government website has fixed components and navigations which shall include the

following:

1. Republic Seal

2. Main NavigationHomeTransparency

◦ 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)

of 16





3. Search bar

Main Navigation Specifications:

Item Action Property Size RGBTop 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.

of 16





Figure 6: Search Bar

MastheadThe masthead shall contain the following:

1. Agency Logo2. Republic of the Philippines3. Line4. Department Name5. Name of agency/Region

Figure 7: Masthead measurement – Agency Logo

of 16





Item Action Property Size RGBAgency Logo Links to home .png 100x100 222222

Republic of the Philippines

None Google Font 14 pt 222222

Line None .png Same length of Dept name

222222

Department Name Clickable, links to home

Google Font 24 pt 222222

Agency Name Clickable, links to home

Google Font 12 pt 222222

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 AreaComponents:

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

of 16





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 FooterThe agency footer shall contain all the navigation and links present in the Top Bar, Auxiliary Menu, and some from the content area.

Standard FooterThe standard footer shall contain the following:

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

of 16

Web Template General Guidelines - iGovPhil...

Documents

Transcript of Web Template General Guidelines - iGovPhil...