Hackney Council Web Development Toolkit

This web page will assist in the production and development of London Borough of Hackney Council websites, web pages and web applications. It consists of two sections: Web Page Templates where you can download templates for integration with your web application, and the Style Guide to help you develop web pages that are compliant with this website.

To ensure design continuity and maintain the life span of sites, it is important that everybody involved in the development, maintenance and updating of sites read, understand and adhere to this guide.

Downloadable Web Page Templates

There are two types of web page templates that can be downloaded for web applications use, with left-handside navigation or with no navigation :

1. With left navigation
This template contains the left hand website navigation.
View application template (opens in new window)
Download application template (opens in new window)

2. Without left navigation
This template does not contain the left hand website navigation bar - this is aimed at web applications that need to use the entire width of the web page.

View application template (opens in new window)
Download application template (opens in new window)

Web page content can be placed between the "begin main content area" and "end main content area" comments within the HTML of the templates.

Template styles and images

The stylesheet files and images used by the London Borough of Hackney Council templates are hosted on our web servers and references to them are in the template files - you do not need to download any separate stylesheets or images.

Style Guide

1. Coding standards

This section details the minimum coding standards required by all London Borough of Hackney Council websites and web applications.

Accessibility

All sites must meet Priority 2 (level AA) accessibility conformance as outlined in the Web Content Accessibility Guidelines 1.0. As many of the Priority 3 (level AAA) guidelines as possible should be met.

All sites must be compliant with the requirements of the Disability Discrimination Act.

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

All new and existing pages must validate using the official validation tools:

Browser support

The following table outlines browser support requirements for all developments.

Browser familyIncludesSupport level
Win IE newer versionsIE10 / IE9 / IE8Target
Older IEIE7Supported
Google Chrome
Chrome 30 / Chrome 29 / Chrome 28 / Chrome 27Target
FirefoxFirefox 24 / 23 / 22 / 21 / 20 / 19 / 18 / 17Target
Mac SafariSafari 6 / Safari 5 / Safari 4Target
OperaOpera 12 / Opera 11 / Opera MiniPartially supported
  • Target – Most popular browsers at present. Everything must work as intended
  • Supported – Old but popular browser. All content and functionality must work with minimal degradation.
  • Partially supported – Old and buggy browsers. Not supported but not officially unsupported. Content and functionality must work. Degradation must be graceful and should not obscure content.

Typography

All text must be displayed using the Arial (PC) or Helvetica (Apple Mac) fonts.

Meaningful XHTML

All pages should be coded using meaningful rather than presentational XHTML. Meaningful elements include, but are not limited to, the following:

  • h1, h2, p, etc
  • ul, ol and dl
  • strong and em
  • blockquote and cite
  • abbr, acronym, code
  • fieldset, legend and label
  • caption, thead, tbody and tfoot

Deprecated elements and attributes must be avoided.

See Integrated Web Design: The Meaning of Semantics for further information.

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. The London Borough of Hackney Council template expands between 744px and 990px in standards-compliant browsers such as Opera, Firefox, Internet Explorer 7 and Safari. IE 6 and below will retain a 744px wide appearance to fit the 800x600px requirement.


3. Content

Branding

The branding of all websites and applications must be approved by Michael Kirkland, Web Content Manager. The URL must be provided directly to Michael, or through a member of the web team.

Character set

All pages should use the ISO8859-1 Western character set, specified in the <head> of the document.

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />

All special characters should be marked up using the correct named entity or Unicode equivalent in order for the page to display correctly across browsers and to validate. In particular, use the following codes for common special characters:

Character codes
Name Symbol Code
Ampersand & &amp;
Left Double Quote &ldquo;
Right Double Quote &rdquo;
Less Than < &lt;
Greater Than > &gt;
en-dash - &endash;
em-dash &emdash;
Ellipsis &helip;

Take special care when inputting content created in a word processor, especially when pasting content directly from Microsoft Word - invalid characters are often included in pasted content.

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, avoiding marketing hyperbole. 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" />

Alternative text for images

Alternative text is required for every img element on the site. Alternative text must provide an adequate description of the content or function of the image.

<img src="/img/xxxx.gif" alt="Add image description text here" />

If the image is purely decorative, the alt attribute should be left empty.

<img src="/img/pretty.gif" alt="" />

Decorative images that provide no content to a page should be included as CSS background images if possible.

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.php">More news stories</a>

Links that open in a new window should be avoided. However if there is a good usability reason for doing so (i.e.providing contextual help), the link text must inform the user.

<a href="help.php">Help (open new window)</a>

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>

You can provide additional, non-critical link information in the form of a tool-tip 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 system.

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

Abbreviations and acronyms

Abbreviations and acronyms should be marked up and defined the first time they appear on each page.

<abbr title="UK">United Kingdom</abbr>
<acronym title="NATO">North Atlantic Treaty Organisation</acronym>

Data tables

Tables are reserved for tabular data only and must not be used for page layout. Data tables should be marked up using appropriate, meaningful elements such as; <th>, <td>, <thead>, <tbody> and <tfoot> and appropriate, meaningful attributes such as summary, id and headers.

When multiple page data is provided using a table, such as through an ASP.NET datagrid, appropriate descriptive text must be assigned to the paging facility.

  • Do not use '<' or '>' symbols to navigate the pages. Proper text such as 'Previous page' or 'Next page' is more user-friendly and accessible.
  • Clearly indicate the number of pages available, and the current page the visitor is viewing. Example: 'Page 2 of 4'.
  • Ensure paging mechanisms are not controlled purely through JavaScript.

4. Functionality

JavaScript

JavaScript usage is allowed, but should be used only for enhancements, not major functionality. If functionality is performed using client-side JavaScript, the same function must be replicated at server-side. This will ensure no functionality is lost whether JavaScript is enabled or disabled.

Do not use "javascript:" pseudo links. These will not function if JavaScript is disabled.

All JavaScript must be stored in standalone files, not included in the XHTML as inline attributes.


5. Browser plug-ins

Adobe Flash

'Accessible' Adobe Flash files are allowed. These require specific functions and features to be enabled when creating the Flash content.

Any Flash content that can not be made accessible (for example, streaming video content) must have a descriptive,textual version alternative (i.e. a transcript of the video content and audio).

Tutorials about Flash accessibility are available online:

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.


Who to contact

Name Andrew Charles
Telephone 020 8356 2110
Email andrew.charles@hackney.gov.uk



Back to top