Common look and feel for South African government websites

1. Introduction

South African government websites must have a consistent identity. The use of uniform branding, navigation items, and a common approach to the layout of elements within a page will establish a cohesive user interface. This will help users identify any page of any government website as part of the South African government, providing a unified and accessible experience across websites.

These guidelines are relevant for national government departments. Provincial government departments should develop their own corporate branding guidelines, aligning them with the standards set for national departments.

In addition to a cohesive identity, these guidelines emphasise accessibility, usability, and mobile responsiveness as essential components of a "common look and feel," ensuring an inclusive experience for all users.

2. Design of the banner area

Banners must be designed as stipulated below and should appear consistently across all website pages.

2.1 National Coat of Arms and departmental logo unit

The following guidelines are determined by the Corporate Identity and Branding Guidelines that determines the use of the national Coat of Arms.

The Coat of Arms and departmental logo unit must be incorporated into the banner as follows:

Follow Section 3.3 of the Coat of Arms Corporate Identity and Branding Guidelines. http://www.gcis.gov.za/sites/default/files/docs/resourcecentre/guidelines/corpid/3_3.pdf
Display the Coat of Arms and departmental logo at the top left corner of each page, set against a white background.
Ensure a clear space around the Coat of Arms and departmental logo.

The Coat of Arms should only appear once on the page, and its colours must follow Section 3.4 of the Implementation of the Coat of Arms Corporate Identity Guidelines.

2.2 South African flag

The South African flag should appear at the top right corner of each page:

Display the flag flat, against a white background, avoiding any waving or cut-out effects.

2.3 Departmental branding

Departments are free to add their own branding in the middle of the banner area. The width of the departmental logo will determine the width of this space.

To keep banners open and clean, this area may remain clear or display minimalistic imagery. Additional branding, such as department slogans, can be placed below the banner area.

gcis banner

2.4 Responsive design

Ensure that banner components adapt for smaller screens, such as by aligning elements vertically or resizing them to fit smaller displays without losing image quality or layout consistency.

3. Display of navigation items

To provide a seamless user experience, government websites must display consistent navigation items.

3.1 Navigation

Display the navigation items below the banner, i.e. the Menu button or the main navigation categories e.g. About Us, Resource Centre, Newsroom, Tenders, Jobs, Programmes (if relevant), and Services (if relevant). A simple search box should appear on the right side of this area.

The search box should include optimisations, such as autocomplete and filters, to help users locate content efficiently.

3.2 Mobile-friendly navigation

For mobile users, incorporate collapsible menus or "hamburger" icons. Ensure key links like "Contact Us" and "Hotline" are styled as prominent call-to-action buttons to increase accessibility and usability.

3.3 Accessible links and text

Use a high-contrast colour scheme for navigation items to improve readability for visually impaired users.

3.4 New content notifications

The homepage should display a list of new information, with a brief summary to inform users about recent updates.

3.5 Department-specific navigation

Departments may include navigation items relevant to their functions (e.g., Courts for the Department of Justice) in the main navigation bar or the footer.

3.6 Right side of the homepage

Display departmental helplines, call centre, emergency numbers, the Presidential hotline, and a link to the hotline page on www.gov.za on the right side of the homepage.

3.7 Footer elements

The footer should include the following:

Main navigation (About Us, Resource Centre, Newsroom, Tenders, Jobs, Programmes, Services).
Links to About the Website, Terms and Conditions, Site Map, Feedback, and the Access to Information page.
Link to the www.gov.za website
Contact details, department address, and a link to directions.
A copyright statement in the format: Copyright ©[current year] [Name of Department], e.g., Copyright ©2024 Government Communication and Information System.

Add icons next to links (e.g., phone icons for contact information) to enhance accessibility. Separate the footer from other content with a line or box.

4. Colours used on the website

Departments should distinguish themselves using the primary colours in the national Coat of Arms: orange, brown, black, or green, along with white.

4.1 Consistent colour use

Use the same colour scheme across all pages. Ensure text has a contrast ratio of at least 4.5:1 against the background to meet WCAG standards, improving readability for all users.

5. Domain name syntax

Government websites must follow a consistent domain naming convention:

The domain should always be `.gov.za`, with the format `www.departmentname.gov.za` or `www.abbreviation.gov.za` for simplicity and recognition e.g. www.gcis.gov.za or www.transport.gov.za.
For sub-sites, use the structure `[main domain name]/subsite name` (e.g. www.dws.gov.za/DSO/).

URLs of the deeper level pages should be short, memorable, keyword-rich, lowercase, and should avoid punctuation. Use hyphens rather than underscores to improve readability.

6. SEO-friendly URLs

SEO-friendly URLs are website URLs designed to be easily read and understood by both humans and search engines. They are structured in a way that clearly describes the page's content, improves usability, and can enhance search engine rankings.

Example:

7. Page titiles

Use HTML title tags to display concise, meaningful page titles that help users and search engines understand the content. Include department names or acronyms in title tags including '[Descriptive Page Name] - [Department Name]'.