Website and web application
design guidelines
Revised July 2008
A responsive County Council providing excellent and efficient local services
1
If you require further help or assistance, please contact the North Yorkshire
County Council Web Team on 01609 536413, or email
[email protected].
Contents
1
2
2.1
2.2
2.3
2.4
2.5
2.6
3
3.1
3.2
3.3
3.4
4
Brand identity
Our logo
Introduction
Logo corporate colours
Sizing and spacing
Appropriate application
Inappropriate application
Other logos
Branding
Internally developed web applications
Shortcut URLs
Microsites
Sub branded websites
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 [email protected].
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
Blue
Black
White
Symbolising the pastoral nature and beauty of our County
Reflecting the aspirational nature of our organisation
Used to underline our efficiency and strength
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
Top navigation
Accessibility features
Logo and banner elements
Breadcrumb trail
Search
Page title
Main navigation
User definable content area
Single promos
Group promos
Useful downloads section
Web links section
Contacts section
Footer section
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/egovernment/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 inhouse 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
IE 6+
Firefox 1+
Safari 2+
Opera 8+
IE 5.5
IE 5.x/Mac
IE 5.0
Netscape 6+
Opera 5.0-7.x
IE 4.0
NN 4.0
IE4.0/Mac
•
•
•
Support Level
Supported
Supported
Supported
Supported
Partially Supported
Partially Supported
Partially Supported
Partially Supported
Partially Supported
Unsupported
Unsupported
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