1

Website and web application design guidelines Revised July 2008

A responsive County Council providing excellent and efficient local services

If you require further help or assistance, please contact the North Yorkshire County Council Web Team on 01609 536413, or email webteam@northyorks.gov.uk.

Contents 1 Brand identity 2 Our logo 2.1 Introduction 2.2 Logo corporate colours 2.3 Sizing and spacing 2.4 Appropriate application 2.5 Inappropriate application 2.6 Other logos 3 Branding 3.1 Internally developed web applications 3.2 Shortcut URLs 3.3 Microsites 3.4 Sub branded websites 4 Technical standards and guidance

2

1. Brand identity Introduction www.northyorks.gov.uk is the primary electronic source of information about North Yorkshire County Council. All information about the services that we provide should be contained within this website, and the web team can provide advice and guidance on how to do this. If there is a need to use external support to develop your electronic information, these guidelines should help you do that. This document provides a set of e-templates which reflect and support North Yorkshire County Council’s (NYCC) brand identity and ensure that the design and style of the NYCC website and subsites is maintained. As new content, sections and websites are added it is important that these are developed correctly and consistently to maintain the overall look and feel of the site and to ensure easy navigation and accessibility. These guidelines will ensure that NYCC continues to be presented as a highly professional organisation. This document has been prepared as an introduction to the NYCC website and sets out the necessary rules and guidelines for developing website projects. The document contains instructions for the use of all graphical elements, which include images, fonts and navigation. This document should be used in conjunction with the corporate identity guidance. Technical guidance and accessibility information can be found towards the end of this document. If you have any further queries please contact the Web Team on 01609 536413, or email webteam@northyorks.gov.uk.

3

2. Our logo 2.1 Introduction The NYCC logo is the primary element by which the County Council is principally identified, and the symbol by which we are known. It is vital that we always present the logo in a consistent and professional manner. Rules concerning the application of the logo for the website are covered within this document. If you require guidelines regarding the application of the logo for print purposes please refer to our Corporate Identity and Graphics Operating Manual on the website or contact the Communications Business Unit.

2.2 Logo corporate colours There are just four primary colours used to make up the County Council’s logo and which prevail throughout its corporate identity. Green Symbolising the pastoral nature and beauty of our County Blue Reflecting the aspirational nature of our organisation Black Used to underline our efficiency and strength White Providing a clean ground for everything we do You can set a variety of colours within HTML documents, for example background colours, link colours, the font colour etc. To do all of these you need to know the Hexadecimal value of the colour. The Hexadecimal and RGB values for the corporate logo are shown below. (Figure 1) These colours must be adhered to.

4

Figure 1

Hex value: 00539F R: 0 G: 83 B: 159

Hex Value: 009A66 R: 0 G: 154 B: 102

Hex value: 000000 R: 0 G: 0 B: 0

Hex value: FFFFFF R: 255 G: 255 B: 255

2.3 Sizing and spacing To maintain a clear reproduction, when shown in a web browser, the corporate logo should not appear smaller than 185 pixels wide. (Figure 2) Figure 2

185 pixels To ensure the prominence of the logo, a ‘breathing space’ should be used around the logo of a minimum of 25 pixels. (Figure 3). Figure 3 25 pixels 25 pixels – 25 pixels 25 pixels

5

The logo should never be misshapen or stretched. It must always appear in its original properties. A downloadable version of the logo is available from the website or by contacting the Web Team.

2.4 Appropriate application

• When working within a web browser, the colours / images you choose must compliment the logo and work alongside the browser window.

• The full colour corporate logo should always be used.

• The full colour logo should be placed on a white background to

maximise clarity on the screen, or alternatively, a reversed logo on a colour that offers sufficient contrast is also an option. (Figure 4)

Figure 4

2.5 Inappropriate application Avoid placing the logo onto a busy background. Ensure there is sufficient contrast between the logo and the background colour.

6

2.6 Other logos Partnership logos can be incorporated into the banners and design of new pages and where there is a branding need. Ordinarily however, inclusion of other logos will only be considered where there is a partnership arrangement. Individual logos are not allowed, as prescribed in the Corporate Identity and Graphics Operating Manual.

7

3 Branding 3.1 Internally developed web applications The North Yorkshire County Council website has been developed with a strong visual identity. Any web applications that are developed should integrate as seamlessly as possible with the design of the corporate website so that the user can navigate the site easily, and identify with the Council. The corporate website is designed to stretch to fit resolutions up to 1600 x 1200 pixels, and expands as per the images below.

800 x 600 resolution (Minimum)

1024 x 768 resolution (Optimum)

8

1280 x 1024 resolution

The website also uses specific fonts and sizes to ensure a high level of accessibility. All font sizes and faces of internal applications should be at least the equivalent of 12pt Arial. Web pages are essentially built out of several “blocks”. These are, not exhaustively, as follows: Top Banner (Green Swoosh), expanding up to 1600 x 1200. Smaller resolution.

Greater resolution, left hand of header expands accordingly.

Footer, expanding up to 1600 x 1200.

Navigation

9

The navigation is colour co-ordinated, and each section when clicked leads to a colour co-ordinated subsection.

Content area The content area contains dynamically generated and user-input text. The introductory text, which contains the initial sentence/paragraph, is emboldened blue. The introductory text is used by search engines as a description of the page. The subsequent text is plain Arial size 12, with the exception of links and heading 1 and 2’s.

10

Other page content Useful downloads, weblinks and contacts are dynamically generated and grouped under these headings. There is a Print this page and Top of page link to aid the user in using the website.

11

Single promos These appear at the right of the page, and are a method of signposting users around the website. The title is a heading 1, with the image and text underneath being a link to the related page. Decisions on the use of these are made by the Web Team. Typical uses include promoting underused pages and pages that are part of a current campaign.

Grouped promos These appear in the centre of the page, usually to promote eforms, though increasingly to signpost users around the website. Decisions on the use of these are by the Web Team. Typical uses include signposting customers to consultations and online forms.

12

Breadcrumb trail and search This appears at the top of each page, below the banner, and helps users to locate where they are on the website and to find information by entering keywords.

These blocks all come together to form a complete page, structured for example like this.

13

Page title

User definable content area

Group promos

Useful downloads section

Web links section

Contacts section

Single promos

Main navigation

Search

Footer section

Logo and banner elements

Breadcrumb trail

Accessibility featuresTop navigation

14

3.2 Shortcut URLs Shortcut URL’s can be set up within articles allowing customers to jump straight to a page without having to type a lengthy URL. For example, www.northyorks.gov.uk/education is easier to give out on literature or over the telephone than http://www.northyorks.gov.uk/index.aspx?articleid=2939 . A facility exists within the content management system for these to be set up on each article, or alternatively, the Web Team can set these up for you.

3.3 Microsites A microsite is a separately promoted website. A microsite website is designed to meet separate objectives and has a separate web address as its homepage. This is in contrast to a sub-branded site which has the same address. Requests for microsites will be considered in context of the ‘guidelines for UK local government websites’. "It will not help users find the information or services they need if authorities generate a number of sites, all with different names, each one relating to a different initiative or department. The more names an authority invents for its websites, the less its sites will be trusted by citizens and indeed less confident that the information they are obtaining is genuinely from a local government organisation." (e-Government Unit. Top 10 Guidelines for UK local government websites, Cabinet Office, http://archive.cabinetoffice.gov.uk/e-government/resources/localgovt-framework/section1.asp). Developments that warrant their own web address and branding have to meet the following criteria:

• The microsite targets people/organisations/partnerships outside North Yorkshire County Council’s core target audience of residents, businesses and visitors.

• A business case exists as evidence of sustainability e.g. budget for continued development, marketing and officer support to maintain content integrity.

• A link to North Yorkshire County Council website must be included (http://www.northyorks.gov.uk/).

• Microsites should, as a rule, have a limited lifespan and in such instances, a plan should be in place to decommission the site once budget or support is no longer available.

All proposed microsites must be discussed and approved by the Corporate Web Steering Group before any project is initiated.

15

3.4 Sub branded websites It is important to note the differences between a “microsite” and a “sub branded” site. “Microsites” are completely separate from the County Council’s website, and have a completely different look and feel and a separate address / URL. “Sub branded” websites can be thought of like the BBC’s website; all areas conform to the BBC’s brand identity, however each area has subtle differences to make it stand out as being separate to the rest, although in reality it still sits within the structure of the BBC’s website. This document touches on “sub branded” sites and the possibilities that are available. Within the content management system (CMS), we now have the ability to customise pages and content to create a sub brand within the confines of the County Council website. We also have a tool that allows websites built in-house or externally to be displayed within the web pages of the CMS. This can include databases and eforms. The top banner “swoosh” can be changed in colour. In addition to this, we can then customise promos and include images on the page to generate a feeling of a distinct identity within the confines of the County Council website. Examples of what can be achieved are demonstrated on the following pages. They demonstrate that with little effort, a strong sub brand can be created. The benefit of using the facilities present in the CMS also include:

• Information can be updated by Council officers who have received the standard CMS Inputter/approver training from the Web Team.

• There is no fear of budget running out and then being left with a website that cannot be updated and becomes out of date due to lack of support.

• There is no reliance on an external third party to update content, who often charge for this privilege.

• There is no “cost” attached, provided a brand / identity / idea exists in the first instance.

It should be noted that the examples given on the following pages have not been agreed in any way; they are simply based on possible future projects and illustrate the kind of flexibility we now have with iCM and the short lead time required to implement these.

16

Default website style The website by default has a standard style. An example of a standard page is below, so that you can contrast this with the “sub branded” images on subsequent pages.

17

Example one This example uses the “jigsaw” identity of the Children’s Information Service to incorporate their site into the CMS. The green area of the “swoosh” has been changed to blue, and consistent sub brand applied to the banner, single and group promos and page content.

18

Example two This example uses the Connexions identity to incorporate their site into the CMS now that they are part of North Yorkshire County Council’s Children and Young People’s Service. The green area of the “swoosh” has been changed to purple, and consistent sub brand applied to the banner, single and group promos and page content.

19

4. Web application design – technical guidance It is important for North Yorkshire County Council (NYCC) to be well known and instantly recognisable both internally and externally. All successful brands have a unique ‘visual’, a language which communicates the organisations core values at every point of contact. People engage with NYCC in many different ways, so a consistent application of our visual identity has a very important role to play in how we are perceived in the work we do. Our objective is to project a professional and dynamic image by creating a visual language for all our applications, helping to set us apart. As part of this, it is important to:

• Keep navigation consistent throughout the site. Users should always be able to return easily to the homepage and to other major navigation points in the site.

• Divide the information into clearly defined sections. • Ensure that all images include an <ALT> tag and height and width information • Use Cascading Style Sheets to create the layout and style of the site. The

"font" tag should no longer be used. • Links should be created using text that makes sense when read out of

context. For example, avoid "click here". • Always check your work using a validator such as the W3C Markup Validation

Service. • Create pages using XHTML.

Functionality:

Internet: All NYCC Internet web pages - including web-based applications - should work across all platforms. Specifically, they must function in Internet Explorer 5.x and later, Netscape 5.x and later, and text browsers. They also must function in PC, Macintosh, and Linux platforms.

Web-Based Applications: Applications and website working under the NYCC brand must follow all of the rules and style standards in this document.

a. Web-based applications should include a mail-to link or post a telephone number that users can use to ask questions and report problems.

b. Web-based applications must include standard metadata on the front page of the application. (Contact the web team for advice on meta data)

Branding

The branding of all websites and applications must be approved by Wendy Pain – Web Services Manager. For more information on branding please use the corporate identity and graphics operating manual.

20

Accessibility

All sites must meet Priority 2 (level AA) accessibility conformance as outlined in the Web Content Accessibility Guidelines 1.0. All sites must be compliant with the requirements of the Disability Discrimination Act.

Java applets

The "must meet" Priority 1 accessibility requirements state:

Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page. Checkpoint 6.3, Web Content Accessibility Guidelines 1.0

Additionally, see Java Accessibility by Sun Microsystems.

Validation

Sites must be created using fully valid XHTML code, designed to the XHTML, and CSS2.1 specifications as laid down by the World Wide Web Consortium (W3C).

Web projects must use valid Cascading Style Sheets (CSS) to control typography, colour, and other layout elements. Style Sheets must be linked in a way that accommodates the capabilities of new and old browsers.

XHTML

The World Wide Web Consortium (www.w3.org) currently recommends using XHTML. This hybrid language looks and works much like HTML but is based on XML. NYCC favour XHTML 1.0 Transitional, as it works well in both old and new browsers.

Open with the proper DOCTYPE & Namespace

XHTML documents must begin with tags that tell the browser how to interpret them. All web pages must begin with the following DOCTYPE declaration:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

The XHTML 1.0 Transitional DOCTYPE must be followed by this XHTML namespace declaration:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Tags in Lower Case

All XHTML tags and attributes must be in lower case. For example, instead of <TABLE> you must write <table>.

21

Quote All Attribute Values

The values of all XHTML tag attributes must have double-quotes around them. For example, instead of width=75% you must write width="75%".

Close All Tags

All XHTML tags must be closed, including "empty" tags.

Title, keywords and descriptions

To encourage ease of navigation and good search engine ranking, all pages should contain a title, description and keywords.

Page title should be simple, descriptive and distinct. For consistency, all titles should be in the format:

<title>[Page title] - [Site name]</title>

Page descriptions should describe the content and purpose of the page in 1-3 short sentences.

<meta name="description" content="Page summary goes here." />

Page keywords are used to add synonyms and additional meaning to a page. Keywords should not be used to add irrelevant or unrelated words to a page.

<meta name="keywords" content="word 1, word 2, word n" />

Use Alt with Images

Image tags must include the alt attribute as in <img src="xx.gif" alt="xx">

Links

The text within links should be unique and describe the destination of the link. Links saying “Click here” or “More” must not be used.

<a href="news.asp">More news stories</a>

Links that open in a new window should be avoided. However if there is a good usability reason for doing, the link text must inform the user.

Links to downloadable documents – such as Adobe PDF’s – should contain the document size, format and the fact that they are downloads rather than links to another page.

<a href="minutes.pdf">Download minutes, Adobe PDF format (25kb)</a>

22

You can provide additional, non-critical link by adding a title attribute. Do not, however, duplicate the link text as a title attribute as both sets of text may be read back by a suitably configured screen reader.

<a href="news.asp" title="News Archive">More News Stories</a>

Other Recommended Practices

Avoid direct formatting in the XHTML using tags like <b> or <i> or <font>. Use CSS instead.

Avoid deprecated tags like <center>.

Be careful when copying text from a Word document into an XHTML document as some characters don't conform to UTF-8.

Browser support

The following table outlines browser support requirements for all developments.

Browser support Browser Family Support Level IE 6+ Supported Firefox 1+ Supported Safari 2+ Supported Opera 8+ Supported IE 5.5 Partially Supported IE 5.x/Mac Partially Supported IE 5.0 Partially Supported Netscape 6+ Partially Supported Opera 5.0-7.x Partially Supported IE 4.0 Unsupported NN 4.0 Unsupported IE4.0/Mac Unsupported

• Supported – Most popular browsers at present. Everything must work as intended.

• Partially supported – Not supported but not officially unsupported. Content and functionality must work.

• Unsupported – Advice current users to upgrade.

Screen resolution

All pages should be viewable at 800 pixel x 600 pixel resolution. Page widths should expand if higher screen resolutions are being used. CSS can be used to control this facility.

Dispensation for wider-size applications may be given if there is justification due to the site content or functionality.

23

24