Effective: January 13, 2014
Government Website Template Design (GWTD) Guidelines
This GWTD Guidelines is an annex to the Memorandum Circular of the Government Web Hosting Service (GWHS) issued by the Department of Science and Technology – Information and Communications Technology Office (DOST-ICT Office), through the Integrated Government Philippines (iGovPhil) Program.
- Policy Framework
2.1 Statement of Policy
2.2 Guiding Principles
2.3 Complementary Guidelines
- Content, Structure, and Design of Government Websites
3.1 Basic Interface Requirements
3.2 Other Possible Features to Include
3.3 Open Access: Transparency and Accessibility of Government Content
3.4 Specific Content Guidelines
3.5 Display of User Policies
- Recommended Website Governance Structure for Content Management, Creation, and Coordination
The GWTD is an initiative of the Philippine Government to institutionalize a corporate online identity for all government websites through a standard design, navigation, and content. Included in the GWTD Guidelines are the details on the content, structure, and design of government websites, e.g. what are the sections to be included, what are the required measurements, what are the other possible features to include, etc.
The Government Web Template guidelines shall apply to the:
- National government agencies (NGAs);
- Government financial institutions (GFIs);
- Government-owned and -controlled corporations (GOCCs); and
- Inter-agency projects.
This template shall also be advocated to the following government agency categories:
• State universities and colleges (SUCs);
• Constitutional bodies;
• Local government units (LGUs); and
• Legislative and judicial branches of government.
It shall also apply to these content management system (CMS) types:
• Joomla!ii; and
This document has been developed and issued by the DOST-ICT Office and DOST-Advance Science and Technology Institute (ASTI), through the iGovPhil Program.
Policies and associated publications under iGovPhil Program can be found at http://i.gov.ph/.
Queries, suggestions and clarifications with regard to this policy may be forwarded to firstname.lastname@example.org.
The Government Web Template is an initiative of the Philippine Government to institutionalize a corporate online 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 (iGovPhil) Program that aims to enhance the effectiveness, efficiency, and transparency of the government through the use of interactive, interconnected, and interoperable government applications.
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 by using 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; and
• 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;
• 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;
• Have been violating protocols on the use of the Philippine Flag. Executive Order No. 23, s. 1936, promulgates and orders that “the specification for the Philippine National Flag be strictly observed by all civil and military branches of the government.”
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 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 people relying on the Internet to get the information they need, it is high time that agency websites are better designed and equipped, ready to provide information and online services.
1. 2 Objectives
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:
• 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;
• Facilitate the creation and / or migration of agency websites and content buildup by providing templates based on mature web content management systems platforms;
• Ensure that the design and content of government website comply with the GWTD Guidelines;
• Ensure that government websites are responsive to optimal viewing on mobile devices; and
• Institutionalize accessibility for persons with disabilities (PWDs) on all government websites.
2. Policy Framework
2.1 Statement of Policy
2.1.1 Key Result of the Aquino Administration’s Social Contract with the Filipino People: Institutionalize Open, Transparent, Accountable, and Participatory Governance
The creation of this policy is aligned with Section 2 of Executive Order No. 43, series of 2011, which mandates: “To achieve focus and optimal impact given the available resources of Government, all departments and agencies shall orient their programs, projects, and activities towards the pursuit of [the] five (5) key result areas.” One of these key result areas include: “Transparent, accountable, and participatory governance – to institutionalize open, transparent, accountable, and inclusive governance.”
2.1.2 The Role of Government Communications and the Philippine Government’s Web Strategy in Good Governance
It is the policy of the State to recognize the vital role of communication and information in nation-building, as provided for by Section 24, Article II (Declaration of Principles and State Policies) of the 1987 Constitution.
Further, Section 2(b) of Executive Order No. 47, series of 2011, mandates the ICT Office, under the DOST, to provide an “efficient information and communications technology infrastructure, information systems, and resources to support an effective, transparent, and accountable good governance and, in particular, support the speedy enforcement of rules and delivery of accessible public services to the people.”
2.2 Guiding Principles
2.2.1 Open Government: Transparency and Accountability
The Philippine Government is strongly committed to building an open, transparent, and accountable government.
Currently, the Philippines is a member of the steering committee of the Open Government Partnership (OGP). The OGP is an international partnership among governments who have strong commitment to transparency, accountability, and citizen participation in governance.
The government ensures that a culture of good governance and transparency is maintained both in public and private sectors. Examples of transparency include posting of the National Budget online and the use of social media, such as FaceBook and Twitter.
2.2.2 Citizens’ Access to Public Information: Open Data Initiative
One of today’s government initiatives is to launch a data portal, the data.gov.ph. The main purpose of this data portal is to make information more accessible to the general public.
With the launching of this portal, it shall be expected that:
• Agencies will submit all datasets to the data portal; and
• Data will be presented through infographics to make the information more appealing and more comprehensible to a wide audience.
Meanwhile, it is the responsibility of the agency to present accurate data to the public and to update them periodically.
Policies that surround the open data initiative include: Open Data License and Data Sharing Agreement.
Under the Open Data Initiative, it has to be noted that not all data sets shall be uploaded. A level of sharing shall be set to determine data that can be shared and those that cannot be disclosed to the public.
2.2.3 Digital Inclusion and Citizen’s Access
On June 29, 2010, the Joint Circular No. 1, series of 2010, was signed by the National Computer Center (NCC) and the National Council on Disability Affairs (NCDA) to set accessible website design guidelines as recommended by the Philippine Web Accessibility Group (PWAG). Its objective is to enhance usability and web accessibility of government agencies.
The PWAG defines web accessibility as “making [the] website accessible to anyone using the Internet.” It is the responsibility of each agency to “not put barriers or restrictions on [its] website in order for the [end users] to experience their viewing pleasure.”iii
Meanwhile, to provide guidelines on the gender-fair use of language, the University Center for Women’s Studies of the University of the Philippines in Diliman, Quezon City released a primer, the “Gender-Fair Language.”
2.2.4 Citizen’s Engagement and Participation
Section 93, or the Transparency Seal Provision of the General Appropriations Act of FY2013, requires government agencies to “maintain a transparency seal on their official websites.”
This also hopes to “inspire Filipinos in the civil service to be more open to citizen engagement; on the other, to invite the Filipino citizenry to exercise their right to participate in governance.”
Aligned with this, the government also recognizes the need to include sections about feedbacks, comments, social media, etc., on government websites to forge a deeper government-citizens engagement and increased citizen participation.
2.2.5 Privacy of Personal Information
The Philippine Government “recognizes the vital role of information and communications technology in nation-building and its inherent obligation to ensure that personal information and communications systems in the government and in the private sector are secured and protected.”
The R.A. 10173 or the “Data Privacy Act of 2012,” an act “protecting individual personal information and communications systems in the government and the private sector,” aims to “protect the fundamental human right of privacy of communication while ensuring free flow of information to promote innovation and growth.” (refer to Sections 2.3.5 and 3.5.2)
2.2.6 Information Security / Cybersecurity
The “National Security Policy 2011-2016: Securing the Gains of Democracy” – a document that “lays down the fundamental and comprehensive framework on inter-related issues and concerns that may impinge on national security” – aims to “identify the strategic priorities to establish the correct balance in the ‘guns or butter’ debate for the allocation of scarce resources, and to establish the prioritization, among others, between external and internal defense.”
Section VI.B.2 of the National Security Policy mentioned “cybercrimes” as an example of “transnational crimes.”
The government recognizes that the “growing cyber space dependence comes with an increased level of exposure and vulnerability to cyber attacks. These could lead to the paralysis of communication infrastructure, international financial systems, critical government services and defense / military command and control systems.”
2.3 Complementary Guidelines
2.3.1 Government Web Hosting Service (AO No. 39 s.2013)
The Administrative Order No. 39, issued on July 12, 2013 by Malacañang, mandates “government agencies to migrate to the Government Web Hosting Service (GWHS) of the Department of Science and Technology – Information and Communications Technology Office (DOST-ICT Office).”
Under this administrative order, the national government agencies (NGAs), government financial institutions (GFIs), and government-owned and controlled corporations (GOCCs) are expected to deliver “reliable information and provide state of the art online services, which are free from impairment and disruption.”
Hosting of the websites of constitutional bodies, local government units (LGUs), and other autonomous branches of the government by the DOST-ICT Office shall be encouraged but undertaken at the instance of the above-mentioned government entities. Once hosted under the GWHS, agencies will be required to produce and regularly update the contents of their websites; develop online services; and employ a webmaster to take care of their websites.
2.3.2 Unified Web Content Policy (UWCP)
Upon migration to the GWHS, all government agency website are required to follow the Unified Web Content Policy (UWCP). This policy will require agency sites to sport a “common look and feel” across all government websites.
The UWCP hopes to address issues of efficiency, accessibility, and transparency in terms of dealing with the general public through the government websites.
2.3.3 Open Data in Government Policy Framework
Upon launching of the data portal (data.gov.ph), agencies shall be required to submit accurate and updated datasets and to comply with the related policies to be released, such as the Data Sharing Agreement and Open Data License.
2.3.4 Technical Guidelines in the Content Management Systems for Government Websites
Comprehensive technical guidelines in the Content Management Systems for Government Websites shall be issued by the DOST-ICT Office. These documents will serve as a step-bystep guide to designated webmasters of government agencies in managing their own websites (e.g. managing content, monitoring the site, managing users, etc.).
2.3.5 Government Guidelines in Ensuring Data Privacy In Compliance With the R.A. 10173
The processing of personal information shall be in compliance with the R.A. 10173, otherwise known as “Data Privacy Act of 2012.” (refer to Section 3.5.2) Personal information, as defined in this act, refers to “any information whether recorded in a material form or not, from which the identity of an individual is apparent or can be reasonably and directly ascertained by the entity holding the information, or when put together with other information would directly and certainly identify an individual.”
2.3.6 Government Guidelines for the Use of Social Media
The guidelines for the use of social media shall be released, outlining the details on how government agencies shall use different social networking sites for a more accountable and transparent government.
2.3.7 PWAG Web Accessibility Checkpoints
As recommended by the Web Design Accessibility Recommendation Checkpoints of the Philippine Web Accessibility Group (PWAG), government sites shall implement the accessible website design guidelines stipulated in the Joint Circular No. 1, series of 2010, by the National Computer Center and the National Council on Disability Affairs, signed on June 29, 2010 (refer to Section 3.4.1).
2.3.8 Information / Cybersecurity Technical Guidelines for Government Websites
The DOST-ICT Office will also release Information / Cybersecurity Technical Guidelines for Government Websites, along with the other complementary guidelines. Such guidelines aim to provide an increased level of security among government websites for a safer, faster, and more efficient online government service to the public.
3. Content, Structure, and Design of Government Websites
One of the most important aspects of government websites is the User Experience.
User Experience in web design involves a person’s emotions when interacting with a given system. It addresses aspects of the system such as usefulness, usability, desirability, findability, accessibility, credibility, and valuability.iv User Experience is subjective in nature because it involves the individual’s perceptions with respect to a system.
The government recognizes the need to align the Government Website Template to the principles of User Experience.
3.1 Basic Interface Requirements
3.1.1 Vertical Measurements
Government websites should be designed using a responsive framework with a standard width of 1190 pixels (px) on regular screens that scales down gracefully on smaller devices of 320 px 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 12-column grid layout that scales down to a one layout on the smallest of mobile devices. 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.
3.1.2 Homepagev Section
A government homepage is broken down into seven major sections. These are the top bar, masthead, auxiliary menu (optional), banner, content area, agency footer, and standard footer.
Figure 2: Homepage basic layout
Figure 3: Basic layout of a homepage
3.1.3 Inner Page
An inner page consists of six sections.
Figure 4: Basic layout of an inner page
3.1.4 Content Area Placeholders
The content area may only be divided into three, two, and one column(s).
Figure 5: Content Area Placeholders
3.1.5 Section Components
The top bar for all official government websites has fixed components and navigations which shall include the following:
◦ Republic Seal
Agency shall follow the exact measurements of the Republic Seal displayed at the Top Bar.
Figure 6: Republic Seal measurements
Agencies shall adhere to the following main navigation specifications:
|Top Bar||No action||–||1190x45px||#222222|
|Republic Seal||No action||–||–||Monochromatic|
|Mainnav (level 1)||Clickable/Dropdown||Arial||12pt||#ffffff|
|Mainnav (level 2)||Clickable/Dropdown||Arial||12pt||#ffffff|
|Mainnav (level 3)||Clickable||Arial||12pt||#ffffff|
|Search bar||Input box||–||168x25px||–|
A department with attached agencies shall put another top bar menu that will link to the sites of these agencies.
A home button shall be made visible at the Top Bar. It shall be seen in all site pages. Pressing this menu can take the user back to the site’s main page.
This top bar component shall be in compliance with Section 93, the Transparency Seal Provision, of the General Appropriations Act of 2013. This section shall contain the following:
1. The agency’s mandates and functions, names of its officials with their position and designation, and contact information;
2. Annual reports, as required under National Budget Circular Nos. 507 and 507-A dated January 31, 2007 and June 12, 2007, respectively, for the last three (3) fiscal years;
3. Their respective approved budgets and corresponding targets immediately upon approval of this Act;
4. Major programs and budgets categorized in accordance with the five key results areas under EO No. 43, s. 2011;
5. The program/projects beneficiaries as identified in the applicable special provisions;
6. Status of implementation and program/project evaluation and/or assessment reports; and
7. Annual procurement plan, contracts awarded, and the name of contractors/suppliers/consultants.
◦ Products and Services / Major Programs and Projects
Agencies shall include the products and services offered on their sites. This section on the Top Bar will be a portal to all agency products and services as well as ongoing projects.
A Products and Services section shall also be located at the Content Area of the website. This section shall include logos, with corresponding description, of the products and services that will take the user to the landing pages. This section shall be present in all the website pages.
◦ Contact Us
Contact information shall be provided to give end users a way to inquire about the agency and its services offered.
This link shall also enable the visitor to give feedback, follow-up inquiries / concerns, send comments and complaints to any of the agency’s products and services. The page shall also display the agency’s physical address.
◦ Search Bar
A search function on sites should be an agency’s priority. This shall allow the visitors to easily navigate a site. It will let the users search important documents/information in the site.
The masthead shall contain the following:
• Agency Logo;
• Republic of the Philippines;
• Line; Department Name (optional);
• Agency Name / Region (optional); and
• Tagline (optional).
Agency logo shall not exceed 100 pixels in height.
Masthead image shall not also exceed 100 pixels in height.
Figure 9: Masthead measurement – Agency Logo
|Agency Logo||Links to home||.png||100 pixels(height)||222222|
|Republic of the Philippines||None||Trajan Pro Font||14 pt||222222|
|Line||None||.png||Same length as the Dept. name(1 or 2 pixels)||222222|
|Department Name||Clickable, links to home||Trajan Pro Font||12 pt||222222|
|Agency Name||Clickable, links to home||Trajan Pro Font||24 pt||222222|
|Tagline||None||Trajan Pro Font||12 pt||222222|
Tagline of each agency shall be located below the Agency Name.
The auxiliary menu is optional. The agency may use it as a breadcrumb or put extra set of navigation.
Agency shall maintain menu to two levels only.
To create a consistent look and feel and to establish a corporate and professional look for the content area, government agencies shall strictly comply with the following standards to each of the components of the Content Area:
Figure 10: Sample background for the site’s content area
For the website to be user-friendly, particularly to persons with disabilities, the icons need to have descriptions.
Figure 11: Sample icon with corresponding description
In order to maintain a consistent appearance across government websites, agencies are required to follow this font description:
• Font face: Verdana, Arial, and Tahoma
• Style: Bold, Underline, and Italic
• Size: 10-12pt
• Color: The agency may use its own color/s.
◦ Borders and Tables
An agency has the option to use its own color/s as standard color/s for its website.
This section must be included on all pages within the site and look the same across each page. This shall contain the following features:
The Downloads link shall contain useful documents, e.g. forms, manuals, policies, presentations, etc. The link on the homepage shall take the user to a page that contains the list of various downloadable documents (refer to Figure 12).
Figure 12: Downloads page
The website’s archive is a required element in government websites. This shall contain an organized list of the past articles / press releases. Articles shall be sorted monthly so that the user can easily trace the previous information needed.
Figure 13: Archives section at the Agency Footer
◦ Site map
The presence of site map is essential and beneficial for easier navigation of the whole site. This shows the structure of the website. It is particularly helpful and useful to visitors because they can easily go to a specific page on the site and get the needed data or documents. Another purpose of site map is so users will not get lost as they crawl or navigate the website pages. Moreover, this element can also help enhance web presence of the site.
On this section, it is required to put the seal of the Republic of the Philippines. This shall also be seen across all pages included within the site.
Republic Seal Details
◦ Copyright Placement
“All content is public domain unless otherwise stated.” This statement shall be put below the seal of the Republic of the Philippines on the Standard Footer.
3.1.6 Required Contents to Be Included
Below is a rundown of the required contents or elements to be included in each section of the template.
|Sections||Required Contents to Be Included|
|Top Bar||Republic Seal; Home; Transparency; Products and Services; Contact Us; Search Bar|
|Masthead||Agency Logo; Republic of the Philippines; Line; Department Name; Agency Name / Region|
|Content Area||White Background|
|Agency Footer||Archives; Site Map; FAQs|
|Standard Footer||Link of Government Directory; Seal of the Republic of the Philippines; Copyright Placement|
Display of the Transparency Seal
The transparency seal shall be “prominently displayed on the main page of the website of a particular government agency.”
Section 6.1 – 6.4 of the National Budget Circular No. 542 talk about the monitoring of compliance with the Transparency Seal provision:
6.1 Upon the enactment of the GAA of 2013, compliance with Section 93 became mandatory. As stated in the provision the respective heads of the agencies shall be held accountable for non-compliance, which is tantamount to a violation of the law.
6.2 Random audits will be undertaken by the DBM CIO, in partnership with Civil Service Organizations (CSOs).
6.3 Government-wide compliance audits will likewise be undertaken by the DBM CIO. Reports on data gleaned from such audits shall be submitted to the President and disseminated to the media.
6.4 In cases of failure to comply, the DBM CIO will issue a notice to the errant agency, giving it a reasonable period of 15 days upon receipt of the said notice, which conform with the publication requirement.
Philippine Transparency Seal Details
|Philippine Transparency Seal||Clickable (linked to Transparency page)||.png||250×250||–|
There should also be an ALT text for the Transparency Seal on the website.
Display of the Philippine Standard Time (PhST)
Rule III Section 2 of the created IRR of the PhST Act (Republic Act 10535) requires the Display of the Philippine Standard Time on the official time devices of the national and local government offices:
“All national and local government offices shall be required to display the Philippine Standard Time (PhST) on their official time devices, including but not limited to their respective bundy clocks, displayed clocks, quartz clocks and websites, in accordance with the official time being provided by the PAGASA using its network time protocol.”
Display of the “Skip to Content” Link
According to Maturity Stage 2-5 Checkpoint (see Section 3.4.1), a “Skip to Content” link shall be provided in every page.
Display of the Citizen’s Charter Link
To promote transparency on how a government agency transacts with the general public and to improve an agency’s efficiency in the delivery of services, a display of the Citizen’s Charter Link on the Top Bar shall be required. This link shall then direct the end users to the Citizen’s Charter page.
The Citizen’s Charter page shall contain the following:
• Mandate of the government agency;
• Frontline services of the government agency that may be demanded by customers;
• Service standards;
• Steps on how to avail the products and services offered by the agency; and
• Image of the Citizen’s Charter.
3.1.7 Requirements for Citizen’s Engagement / Transactional Modules
The following requirements for Citizen’s Engagement / Transactional Modules may be considered by each agency:
Helpdesks and FAQs
Frequently Asked Questions (FAQ) page is a required element of a government website template. An FAQ page shall be found on the website to answer common inquiries from the user. A link to this page shall be placed at the Agency Footer. A link may also be put in the Auxiliary Menu of a government website.
The FAQ page must be in a table format, divided into three columns with the following labels: Component, Question and Answer.
Each agency should also set up its own helpdesk that will provide the following:
• Answers to users’ questions; and
• Information and guidelines on the agencies’ products and services.
Contact details, which include e-mail and telephone number, shall be provided to contact the helpdesk team of an agency. A helpdesk link shall be put on the Agency Footer and may also be seen on the Auxiliary Menu.
Social Media Modules
Social media modules are recommended contents to be included in a government website. These modules shall be placed on agency websites that will allow users to “like” or share the contents of the sites to their social media accounts. Such modules do not only help in generating views to agencies’ sites, they also encourage citizens’ engagement and participation to government’s products and services.
These shall be placed at the Agency Footer of a government website.
User Login / Password
This feature aims to improve the interactive web presence of government sites. It is for the use of the agency or school’s employer, members, students, faculty, alumni, etc.
3.2 Other Possible Features to Include
Agencies have the option to include specific features or sections that may be considered “best practice” and that may be useful to the end user.
However, it must be noted that these features are subject to approval by the Presidential Communications Development and Strategic Planning Office (PCDSPO), an attached agency of the Office of the President. These shall also comply with the United Nations e-Government Development Database’s (UNeGovDD) Stages of e-Government (refer to Annex 1).
Inclusion of these features is based on specific requirements and needs of agencies.
3.2.1 Recommended Sections
The events calendar may serve as a way to publicize the events of an agency that have been approved and scheduled. The purpose of including this section is to enhance the transparency in all government offices.
Posting examination results is optional, depending on the need of an agency. However, this may enhance web presence to government sites as this may increase web traffic.
Secretary’s Corner, Director’s Corner, Dean’s Corner
Including this section in a website may be important in an agency or school. This page shall contain the online commentary or message of the head and the associates that aims to address important and prevailing issues relevant to the end users.
Link to Webmail Service
This feature can also help improve the web presence of a government site. This may also include functions, such as calendar, organizer, and address book that may be useful to the end users.
Showing comprehensive photo galleries is one of the essential assets of a government site. Products and services that are being offered as well as programs and projects held by the agency shall be displayed on this section. This makes the website more appealing and dynamic. Deeper than that, it shows that the agency is trusted to provide and deliver high quality services to the people.
3.2.2 Parameters for Agency Customization
Below are the customizable style properties of some sections in the template:
3.3 Open Access: Transparency and Accessibility of Government Content
It is the government’s main thrust to provide effective, efficient, accessible, and transparent governance to the general public. As such, government agency websites shall comply with government provisions and initiatives to make them more user-friendly.
On Compliance with the Requirements of Transparency Seal
An agency website shall prominently display the Transparency Seal on its main page, as provided for by Section 93 of the General Appropriations Act of FY2013.
On the Release of Government Data and Datasets (Open Data Initiative)
To make information more accessible to the public, agencies shall submit its datasets to the data portal (data.gov.ph), to be launched by government. A guideline shall be set with regard to data that can be shared and cannot be disclosed to the public.
Responsive Web Design: Uniformity Across Platforms and Devices
Government agency websites shall use the responsive framework to allow the end-user to access the website content on different types of devices. Website layout shall scale down to a one layout on the smallest of mobile devices. (refer to Section 3.1.1)
3.4 Specific Content Guidelines
3.4.1 Accessibility to People With Disabilities (PWDs)
Government sites shall include accessible features for people with disabilities (PWDs) to provide better and equal degree of service to the general public, based on the Web Design Accessibility Recommendation Checkpoints of the Philippine Web Accessibility Group (PWAG).
Maturity Stage 1 (MS 1) Checkpoints
MS 1-1 Provide an Access Instruction page for visitors explaining the accessibility features of the web site. Put an e-mail hyperlink for visitors to communicate web page accessibility problems.
MS 1-2 Avoid using words such as “This” or “Click Here” in naming or labeling links. Use descriptive hyperlinks to support text browsers.
MS 1-3 Attach ALT (alternative) text to graphic images so that assistive computer technology such as screen readers can reach the content.
MS 1-4 Provide a “D” hyperlink to a page providing descriptive text of photographs that contribute meaningful content to the page.
MS 1-5 Provide text transcriptions or descriptions for all audio and video clips.
MS 1-6 Provide alternative mechanisms for online forms such as e-mail or voice/TTY phone numbers since forms are not supported by all browsers.
MS 1-7 Avoid access barriers like: PDF files with no equivalent HTML or ASCII files, nonlinear page formats, frame formats, and content that requires users to download software to access it.
Maturity Stage 2 (MS 2) Checkpoints
MS 2-1 For ALT texts:
MS 2-1-1 Decorative images must contain null ALT text or ALT=””.
MS 2-1-2 Anchor elements within the Image Maps must contain ALT texts.
MS 2-1-3 ALT texts that have more than 80 characters long must be changed to “D” hyperlink.
MS 2-2 Provide a Site Map with a link appearing on every page.
MS 2-3 All pages must provide a link back to the home page.
MS 2-4 Use Access keys in creating shortcuts to important links and form controls.
MS 2-5 Provide a “Skip to Content” link in every page.
MS 2-6 Make the language in your web site easy to understand.
MS 2-7 Do not use blinking, rolling or scrolling markup tags on your web pages.
MS 2-8 Provide a LABEL text and ALT text on the input elements of your forms.
MS 2-9 Avoid using the FONT SIZE markup in your web pages or change the size to relative units.
MS 2-10 Provide a Search form within your site.
MS 2-11 Layout must be navigable even if the page style is turned off.
MS 2-12 Website content must appear clearly even when colors are turned off.
MS 2-13 Provide descriptive titles for every page.
MS 2-14 Page style must be consistent all throughout the website.
MS 2-15 Provide enough contrast between foreground and background color combinations.
MS 2-16 Avoid background sounds or music that may distract the users’ focus on the content.
3.4.2 Use of Gender-Fair Language
Government agencies, when writing their web contents, shall also consider the genderfair use of language, based on the recommendation of the University Center for Women’s Studies of the University of the Philippines in Diliman, Quezon City.
The primer, “Gender-Fair Language,” talks about sexism in language and provides guidelines for non-sexist writing (refer to Annex 2). Sections included in the said guidelines are: Generic Man, The Pronouns “He” and “His,” Sex-Role Stereotyping, and Sexist Language in Quoted Material.
3.4.3 The PCDSPO Style Guide
The PCDSPO has initiated the formulation of its style manual to be used “consistently for all documents and correspondence.” Included in this manual are the collated points of grammar and style that are presently in use by the incumbent Speechwriters Group, Correspondence Office (in English and Filipino), and PCDSPO staff.
The PCDSPO Style Guide is divided into the following sections: Copyediting; English Usage and Grammar; Spelling and Language; Punctuation; Abbreviations; Dates, Time, and Measurement; Pronouns; Prepositions; Possessives; Numbers; Tables; Figures; Notes; Bibliographies; Reference Citations; Names; Filipino Terms; Foreign Terms and Phrases; and Corresponding Letters and Memoranda.
The copy of this style guide can be downloaded from the official website of PCDSPO (http://pcdspo.gov.ph).
3.4.4 Online Writing Guidelines
Optimizing a website for the search engines, otherwise known as “Search Engine Optimization” (SEO), means designing and promoting it in an effective way, so that the website is easily found in a search engine, such as Google. Effective SEO leads in more web traffic for a website, as such, enhancing the site’s web presence.
“The Easy Step Guide to SEO,” prepared by Joe Torres for an advance online workshop by the Commission on Information and Communications Technology (CICT), now known as the Information and Communications Technology Office (ICT Office), was launched on June 19, 2010 in Cagayan de Oro City.
The manual talks about the necessary steps to optimize a website for various search engines. This is broken down into four lessons (refer to Appendix C): Effective Web Design, Keywords, Writing Powerful Articles, and Promoting Your Website.
3.4.5 Use of Multimedia for Web Optimization
A guideline on the use of Multimedia for Web Optimization is being developed to provide guidance to government agencies in posting multimedia materials on their websites.
3.5 Display of User Policies
Display of User Policies shall be included as part of the Standard Footer of each government website.
The processing of personal information shall be allowed, subject to compliance with the requirements of R.A. 10173, allowing disclosure of information to the public and adherence to the principles of transparency, legitimate purpose, and proportionality.
Personal information must be:
1. Collected for specific and legitimate purposes.
2. Processed fairly and lawfully.
3. Accurate, relevant, and up to date. (Inaccurate or incomplete data must be rectified, supplemented, destroyed or restricted.)
4. Adequate and not excessive in relation to the purposes for which they are collected and processed.
5. Retained only for as long as necessary in fulfillment of legal or legitimate business purposes.
6. Kept in a form that permits identification of subjects for allowable length of time.
3.5.2 Security Policy
Government sites need to be ultimately and completely secured so that users will be assured that online transactions are safely conducted.
3.5.2 Intellectual Property Rights Policy
This section of the website, to be displayed at the Agency Footer, shall conform to the Government Digital Assets Licensing Framework (GDALF), which includes policy on licensing, use and redistribution of government data and information. The GDALF is included in a separate Executive Order to be issued by the Office of the President.
4. Recommended Website Governance Structure for Content Management, Curation, andCoordination
Organizing a web team is a vital part of e-governance as it supports the goal of the government to have an effective, secure, and reliable e-government services to the end users or the public. Some of the typical roles on a web team that each agency may consider are enlisted below. Take note that some of these roles may be combined or expanded, depending on the size of an agency.
Chief Information Officer
The chief information officer (CIO) is responsible for all aspects of the agency’s information technology and systems. The CIO shall have a strong leadership skill to develop and implement information technology initiatives. He should direct the planning and implementation of IT systems to support the agency’s operations in order to deliver speedy, efficient, and secure e-government services to the public.vi
Web Content Manager / Communication Director
It is required that an individual who will act as the agency’s web content manager has wide experience and skills in web writing and editing, site management, and graphic design. He or she shall work hand-in-hand with the back-end programmers and designers in keeping the website updated, using technologies like the content management system. It is also his task to oversee planning and execution of web projects and quality assurance.vii
Management Information System Head
The role of a management information system (MIS) head is crucial in a web team as it generally involves managing the agency’s information technology (IT) activities, ensuring stability, and smooth operation.
Specifically, below is a rundown of the MIS head’s responsibilities, depending on the size of an agency:
• To solve problems in a multi-server environment with the help of a variety of applications and software systems.
• To ensure that technological resources work reliably.
• To provide system stability across platforms.
• To recruit, hire, and mentor staff.
• To supervise security efforts to mitigate breaches from hackers and to keep confidential data and information safe.
• To analyze, research, and recommend improvements to present infrastructure and systems, etc.viii Webmaster
Generally, it is the responsibility of a webmaster / content manager to handle the Content Management System administration page. Specifically, he / she is tasked:
• To ensure that the site is operating properly;
• To manage content and queries;
• To manage CMS user accounts;
• To migrate the current site’s contents to the Government Website Template CMS;
• To manage / revise the site codes;
• To ensure the site’s security;
• To manage the database/s; and
• To handle the CPanel Administration.
Part of the webmaster’s essential responsibilities also includes developing, uploading and updating website’s contents.
The main responsibilities of a database manager include:
• Making sure that all the data are protected and backed-up.
• Improving the effectiveness of the database tools and services.
• Ensuring that all the data adheres with legal regulations.
• Monitoring database performance.
• Building new databases.
Web Content Writer
A web content writer is responsible for creating web-ready optimized contents for the agency website. The responsibilities also include learning search engine optimization (SEO) techniques, staying up-to-date with the trends and news, familiarizing with the style guide produced by the PCDSPO, and editing articles to be published on the website.ix
A graphic designer is an expert in designing and editing logos, displays, layouts, banners, videos, etc. Part of the requirements is being adept with the latest software. Specifically, the graphic designer is knowledgeable in softwares like Adobe Illustrator and Photoshop.x
Social Media Curator
The duties of a social media curator include:
• Helping in content management, scheduling, and creating posts for various social networking sites, such as Facebook, Twitter, etc.
• Working closely with staff in editing and posting content to social networking sites.
• Periodically reporting insights gained from social media monitoring.
• Writing and editing content as needed.xi
Privacy Officer / Personal Information Controller
A Privacy Officer / Personal Information Controller refers to a “person or organization who controls the collection, holding, processing or use of personal information, including a person or organization who instructs another person or organization to collect, hold, process, use, transfer or disclose personal information on his or her behalf,”xii as defined by the Data Privacy Act of 2012.
Figure 14: The proposed organizational structure of a web team
Web Measure Model: Stages of e-Government Evolutionxiii
|Stage I: Emerging Presence||
|Stage II: Enhanced Presence||
|Stage III: Transactional Presence||
|Stage IV: Connected Presence||
The Easy Step Guide to SEOxiv
SEO is an acronym for “search engine optimization.” Optimizing a website for search engines means designing and promoting it in an effective way, so that the website is easily found in a search engine.
The goal of optimizing a website is to have it appear as one of the top results, or even better, the top result for a specific search query.
How well your website is optimized is always relative to specific search terms, since web users search for specific words.
Thus, it is impossible to optimize a website for all search terms. You need to come up with a list of appropriate search terms that people would use to find your particular website.
Effective SEO results in more traffic for your website, which is extremely desirable. For commercial websites, for example, more website visitors mean higher profits.
This manual will guide you through the steps you need to take to optimize your website for search engines such as Google.
Lesson 1: Effective Web Design
Design Principles for Google
• Make a site with a clear hierarchy and text links. Every page should be reachable from at least one static text link.
• Offer a site map to your users with links that point to the important parts of your site. If the site map is larger than 100 or so links, you may want to break the site map into separate pages.
• Create a useful, information-rich site, and write pages that clearly and accurately describe your content.
• Think about the words users would type to find your pages, and make sure that your site actually includes those words within it.
• Try to use text instead of images to display important names, contents, or links. Search engine crawlers don’t recognize text contained in images.
• Make sure that your <title> elements and alt attributes are descriptive and accurate.
• Check for broken links and correct HTML.
• If you decide to use dynamic pages (i.e. the URL contains a “?” character), be aware that not every search engine spider crawls dynamic pages as well as static pages. It helps to keep the parameters short and the number of them few.
• Keep the links on a given page to a reasonable number (fewer than 100).
• Use robots.txt to prevent crawling of search results pages or other auto-generated pages that don’t add much value for users coming from search engines.
• Test your site to make sure that it appears correctly in different browsers.
• Make pages primarily for users, not for search engines.
• Avoid malicious tricks intended to improve search engine rankings.
• Avoid duplicate content.
• Don’t use unauthorized computer programs to submit pages, check rankings, etc.
Lesson 2: Keywords
The Key to Getting Found
To really optimize your website for search engines, you need to focus on one thing:
Write relevant, content-rich, search-engine-friendly articles for any keywords, or sets of keywords, that you want to be found for.
Let’s say your website is about baseball cards. First, decide on a list of keywords for your website. This website really helps with finding good keywords: www.wordtracker.com
Good keywords are those that find a good balance between:
• High Popularity (keyword frequently searched)
• Little Competition (keyword rarely found on other sites)
Naturally, it is very desirable, but almost impossible to find a keyword that is highly popular, but has as good as no competition.
Keep in mind that whatever keywords you pick, they must be relevant to the content your website provides.
Keywords with High Popularity but High Competition:
Keywords with Little Competition but Low Popularity:
american baseball card collections with prices
best selling cards national baseball league 1980-1990
Vernon Smith’s baseball card price guide
A good compromise between Popularity and Competition:
baseball card price guide
baseball card prices canada
baseball cards 1950
baseball cards 1988
rarest baseball card list
baseball card collection value
collecting baseball cards usa
michael jordan baseball card
base ball card prices
Lesson 3: Writing Powerful Articles
Powerful Articles: Overview
Writing powerful articles that are search engine friendly consist of several components:
• Quality content
• Good page titles
• Good meta descriptions
• Good URL structure
• Meaningful anchor texts
• Efficient use of headings
• Good use of images
Writing information-rich articles with quality content is the most important thing you can do for your website. There are other technical details that really help getting found, but good content is crucial, above all things.
Using the keywords of your choice (roughly 2-5 per article), you incorporate them in an organic way into your writing. Use the keywords as often as possible, but not too often either.
Your article should read smoothly, while giving away a lot of useful information, hopefully about the specific keywords that the article focuses on.
Good practices for content:
• Write easy-to-read text
Users enjoy content that is well written and easy to follow.
• Stay organized around the topic
It’s always beneficial to organize your content so that visitors have a good sense of where one content topic begins and another ends. Breaking our content up into logical chunks or divisions helps users find the content they want faster.
• Use relevant language
Think about the words that a user might search for to find a piece of your content. Users who know a lot about the topic might use different keywords in their search queries than someone who is new to the topic.
For example, a long-time baseball fan might search for [ncls], an acronym for the National League Championship Series, while a new fan might use a more general query like [baseball playoffs]. Anticipating these differences in search behavior and accounting for them while writing your content (using a good mix of keyword phares) could produce positive results.
Create fresh, unique content
New content will not only keep your existing visitor base coming back, but also brin in new visitors.
• Offer exclusive content or services
Consider creating a new, useful service that no other site offers. You could also write an original piece of research, break an exciting news story, or leverage your unique user base.
Other sites may lack the resources or expertise to do these things.
Good Page Titles
Good practices for page <title> tags:
• Accurately describe the page’s content
Choose a title that effectively communicates the topic of the page’s content.
• Create unique title tags for each page
Each of your pages should ideally have a unique title tag, which helps search engines know how the page is distinct from the others on your site.
• Use brief, but descriptive titles
Titles can be both short and informative. If the title is too long, search engines will show only a portion of it in the search result.
Good practives for description <meta> tags:
• Accurately summarize the page’s content
Write a description that would both inform and interest users if they saw your description meta tag as a snippet in a search result.
• Use unique descriptions for each page
Having a different description meta tag for each page helps both users and search engines, especially in searches where users may bring up multiple pages on your domain.
Good practices for URL structure:
• Use words in URLs
URLs with words that are relevant to your site’s content and structure are friendlier for visitors navigating your site. Visitors remember them better and might be more willing to link to them.
• Create a simple directory structure
Use a directory structure that organizes your content well and is easy for visitors to know where they’re at on your site. Try using your directory structure to indicate the type of content found at that URL.
Meaningful Anchor Texts
Good practices for anchor text:
• Choose descriptive text
The anchor text you use for a link should provide at least a basic idea of what the page linked to is about.
• Write concise text
Aim for short but descriptive text – usually a few words or a short phrase.
• Think about anchor text for internal links too
Paying more attention to the anchor text used for internal links can help users and search engines navigate your site better.
Efficient Use of Headings
Good practices for heading tags:
• Imagine you’re writing an outline
Similar to writing an outline for a larger paper, put some thought into what the main points and sub-points of the content on the page will be and decide where to use heading tags appropriately.
• Use subheadings sparingly across the page
Use heading tags where it makes sense. Too many heading tags on a page can make it hard for users to scan the content and determine where one topic ends and another begins.
Good Use of Images
Good practices for images:
• Use brief, but descriptive filenames and alt text
Like many of the other parts of the page targeted for optimization, filenames, and alt text are best when they’re short, but descriptive.
• Supply alt text when using images as links
If you do decide to use an image as a link, filling out its alt text helps search engines understand more about the page you’re linking to. Imagine that you’re writing anchor text for a text link.
• Store images in a directory of their own
Instead of having image files spread out in numerous directories and subdirectories across your domain, consider consolidating your images into a single directory (e.g. brandonsbaseballcards.com/images/). This simplifies the path to your images.
Lesson 4: Promoting Your Website
Submit Your Site
• Submit your website to the major Search Engines
• Submit your Sitemap using Google Webmaster Tools
• Submit your website to free directories such as dmoz.org.
• Reach out to those in your site’s related community. Make sure all the sites that should know about your pages are aware your site is online. It is important that you receive static incoming text links from other high-quality, topic-related sites, with a descriptive link text that accurately portrays the content of a page.
Further Promotional Steps
• Promote your website offline.
• Blog about new content or services.
• Use social media sites such as Facebook.com for promotion.
• Add your business to Google’s Local Business Center. This will promote your website on maps.google.com.
• Add links and articles about your website on wikipedia.org.
Guidelines for Non-Sexist Writingxv
• Generic Man
1. Replace man with specific nouns or verbs that say explicitly what you mean:
|Manpower||Labor, human resources, personnel|
|To man||To operate|
2. Use nouns that encompass both man and woman
3. In making general statements, add women.
|Man is vulnerable.||Men and women are vulnerable.|
|Man is a rational being.||Women and men are rational beings.|
• The Pronouns “He” and “His”
• The most common alternatives are he or she, he/she, she or he and lately, s/he. Too much of this can be awkward, so use the following alternatives (for nos. 2-9), whenever feasible.
• The plural form may be substituted:
|The student must submit his paper on time.||Students must submit their papers on time.|
|An employee must present his ID when entering the building.||Employees must present their ID when entering the building.|
• The first or second person may be used instead, when appropriate:
|As a government employee, he faces the problem of low wages.||As government employees, we face the problem of low wages.|
• The pronoun his may be replaced by an article or dropped altogether
|A researcher must acknowledge all his sources.||A researcher must acknowledge all sources.|
|When the team leader submits his report, read it carefully.||When the team leader submits the report, read it carefully.|
• The pronoun one may be substituted when warranted by the text
|The individual often wonders how he can help in this time of crisis.||One often wonders how one can help in this time of crisis.|
• The sentence my be recast in the form of an impersonal or passive construction:
|The student must submit his paper on time.||Papers must be submitted on time.|
|A researcher must acknowledge all his sources.||All sources must be acknowledged.|
When you have to use third person pronouns throughout a long text:
• Use both female and male pronouns but vary the order.
• Alternate male and female pronouns throughout the text.
• Repeat the noun or find a synonym.
Commission on Elections Resolution No. 2977
Section 1. Certificate of Candidacy.—
(a) No person shall be elected President, Vice-President, Senator, Member of the House of Representatives, provincial, city or municipal official unless he files a certificate of candidacy in the form prescribed by the Commission and within the period fixed herein.
(b) No person shall be eligible for more than one office to be filled in the same election. If he files a certificate of candidacy for more than one office, he shall not be eligible for either. However, before the expiration of the period for the filing of certificate of candidacy, he may declare under oath the office for which he desires to be eligible and cancel the certificate of candidacy for the other office or offices.
(c) A person who has filed a certificate of candidacy may, prior to the election, withdraw the same by submitting to the office cconcerned a written declaration of withdrawal under oath. The filing of withdrawal of certificate of candidacy shall not affect whatever civil, criminal or administrative liabilities which a candidate may have incurred.
(Sexist usage identified by bold print.)
Section 1. Certificate of Candidacy.—
(a) No person shall be elected President, Vice-President, Senator, Member of the House of Representatives, provincial, city or municipal official unless he files a certificate of candidacy in the form prescribed by the Commission and within the period fixed herein.
(b) No person shall be eligible for more than one office to be filled in the same election. Anyone who files a certificate of candidacy for more than one office shall not be eligible for either. However, before the expiration of the period for the filing of certificate of candidacy, the candidate may declare under oath the office for which eligibility is desired and cancel the certificate of candidacy for the other office or offices.
(c) A person who has filed a certificate of candidacy may, prior to the election, withdraw the same by submitting to the office concerned a written declaration of withdrawal under oath. The filing of a withdrawal of a certificate of candidacy shall not affect whatever civil, criminal or administrative liabilities which a candidate may have incurred.
• Sex-Role Stereotyping
1. Identify both men and women in the same way when it comes to profession or employment.
|Stewardess, steward||Flight attendant|
2. Do not represent women or men as occupying only certain jobs or roles:
|The kindergarten teacher… she||The kindergarten teacher… he|
|The engineer… he||The engineer… she|
|Convention participants and their wives||Convention participants and their spouses|
|“Mothers must see to it that their children bring snacks for recess”||“Parents must see to it…”|
3. Treat men and women in a parallel manner:
|President Ramos and Cory||Former President Ramos and former President AquinoFormer Presidents Aquino and Ramos|
|Agassi and Steffi||Andre Agassi and Steffie Graf|
|Sampras and Venus||Pete Sampras and Venus Williams|
|Man and wife||Husband and wife|
• Avoid language that trivializes women and reinforces stereotyped images:
|The president’s girl Friday||The president’s assistant|
|A man-sized job||A big job|
|She did well for a woman.||She did well.|
• Avoid language that calls attention to the sex or sex role of the referent, e.g. “working mothers” or “working wives.”
• Sexist Language in Quoted Material
• Paraphrase the quote, using non-sexist language, and give the original author credit for the idea.
• Quote directly and add sic after the sexist part.
• Partially quote the material, rephrase the sexist part and name the source.
|Executive Order _____________|
|Joint Resolution No. 1, Series of 2010||Accessible Website Design Guidelines|
|NCC Memorandum Circular 2002-01||Guidelines on Creation of the Agency’s Official Website and Compliance to e-Commerce Law and Stage One of the UN-ASPA Stages of eGovernment|
|NCC Memorandum Circular 2003-01||Guidelines on Compliance to the e-Commerce Act (R.A. 8792) and Stage Two and Three of the UNASPA Five Stages of e-Government|
|Administrative Manual – CMS: Drupal||Addresses the activities that need to be done (e.g. managing users, managing content, monitoring the site, etc.)|
|Administrative Manual – CMS: Joomla!||Addresses the activities that need to be done (e.g. managing users, managing content, monitoring the site, etc.)|
|Administrative Order 39 (s. 2013)||Mandating Government Agencies to Migrate to the Government Web Hosting Service (GWHS) of the Department of Science and Technology-Information and Communications Technology Office (DOST-ICT Office)|
|Government Web Hosting Service (GWHS) Memorandum Circular of the Department of Science and Technology Information and Communications Technology Office (DOST-ICT Office)||Rules and Regulations on Migrating to the Government Web Hosting Service (GWHS) of the Department of Science and Technology-Information and Communications Technology Office (DOST-ICT Office)|
|1.1||June 9, 2013||More information were added from the original draft; Automated Table of Contents|
|1.2||August 28, 2013||
|1.3||September 26, 2013||Adopted new formatting|
|1.4||October 17, 2013||Incorporated the revisions based on the discussions during the October 14 plenary meeting|
|1.5||December 18, 2013||Revised the title of the document – from Government Website Template (GWT) General Guidelines to Government Website Template Design (GWTD) Guidelines|
|1.6||January 13, 2014||Incorporated the revisions based on the meeting with PAGASA, PCDSPO and ASTI re: Display of the Philippine Standard Time in the government websites; Revised some screenshots; Revised some measurement details; and added some sections|
iDrupal 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.
ii 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.
iv This is based from The User Experience Honeycomb by Peter Morville.
vThis is the opening page of a website.
xiii Accessed from http://unpan3.un.org/egovkb/egovernment_overview/webmeasure.htm
xiv Adapted from the presentation of Joe Torres for CICT’s Advance Online Workshop (June 19, 2010 in Cagayan de Oro City) based on a presentation on SEO by the Victoria County.
xv Accessed from “Gender-Fair Language: A Primer” compiled by Angela Tongson and edited by Thelma B. Kintanar of the University Center for Women’s Studies, University of the Philippines, Diliman, Quezon City. The content of this primer is adapted from “Guidelines for Nonsexist Use of Language in NCTE Publications” [Revised, 1985], in Women and Language in Transition, edited by Joyce Penfield, of State Univerity of New York Press, 1987.
FOR COMMENTS AND SUGGESTIONS, kindly post it here.
DOWNLOAD a copy.