• home
• about us
• find a programme
• publications
• events
• research
• managing your school
• online collaboration
• NCSL in your region

• succession planning
• ECM leadership direct
• leadership library

• help
• contact us

Technical design

2.1 HTML specification

Technical design area	Requirement
Format	Websites should be designed in HTML. Use of Flash should be limited to learning applications within a website (eg for evaluation tools, quizzes etc) rather than for design/decorative purposes.
Minimum page size	Websites must work at a minimum screen size of 800x600 pixels. Page sizes exceeding 600 pixels high may scroll vertically. No pages may scroll horizontally at this resolution.
Page weight	Home page and landing pages must not exceed 60K including all graphics and style sheets.
HTML standard	XHTML Strict 1.0
Browser compliance	All current browsers (IE, Mozilla Firefox, Mozilla Netscape, Opera, Safari). All platforms (Windows, Linux, Mac). HTML must be standards compliant and serviceable in all browsers that meet that standard.
CSS	Style sheets must separate position, colour and style data into separate CSS files. Pages must be printable (using CSS) and viewable without CSS. Panels must be ordered for logical display of information in text mode. See also Section 2.2 - CSS.
Javascript	Javascript is allowed. Fallback functionality must be provided for no Javascript browsing.
Positioning	Pages must be positioned to the left of the visible window to prevent continuous redraws when windows are resized by dragging bottom left corner.
Accessibility	Accessibility to Web Accessibility Initiative (WAI) level AA is required as well as good practice for issues such as font size and line length. See also Section 2.3 - Accessibility.
Tables	No tables should be used for positioning or layout. Tables are allowed for data grid displays and other applications where formatting by style sheets is not appropriate (eg page volume or redraw time would be excessive).
Content markup	Best practice logical/semantic use of markup (eg headers, paragraphs, emphases, quotes, captions, ordered and unordered lists) should be used where appropriate to the content and flow of content. The correct page hierarchy must be used when formatting pages (eg <h1> should be followed by <h2> and not <h3>). Use other structural markup appropriately (eg use HTML lists and CSS rather than inserting images as bullets).
Hyperlinks	Links to websites must open in the same window. Links to media files (eg PDF) should launch in a new window.

2.2 CSS

CSS should govern the following aspects:

• General: text style, face and weight, relative size, bullet style, enhancements etc
• Semantic based
• Display: colours, borders, shading, background graphics etc
• Positioning: page location information

See also Section 3.5.3 - Style sheets.

2.3 Accessibility

Accessibility must be to a minimum of Web Accessibility Initiative (WAI) level AA. Some specific requirements are highlighted below:

• Use correct semantic use of HTML - the correct page hierarchy must be used when formatting pages (eg <h1> should be followed by <h2> and not <h3>).
• Use other structural markup appropriately.
• Do not use deprecated or proprietary HTML (eg <b> (use <strong>), <i> (use <em>), <font>, <iframe> etc).
• Links must make sense out of context and accurately describe where they are linking to (eg don't use "more" and "click here" as links).
• Don't use graphics to replace headings (<h1>to <h6>).
• Use <abbr>and <acronym> to describe abbreviations and acronyms within text content.
• Don't have live links to the current page.
• There must be sufficient contrast between background and foreground colours for easy reading of text. See Juicy Studio contrast checker and Visicheck colour blindness checker for further information.
• Text size must be defined in the style sheet and must be resizeable.
• Javascript and Flash can be used sparingly for illustrative or interactive material. Text only alternatives must be supplied for those unable to access this content.
• Alternative formats (eg transcripts) must be provided for video/audio content. See also Section 2.4 - Media.
• Provide suitable ALT text for images.

See the NCSL accessibility statement for further information.

2.4 Media

Media type	Requirements
PDF files	PDF files should be saved with the open options (under document properties) set with magnification of 'fit in window'. Please embed thumbnails and in open options set initial view to 'display thumbnails and page'. When linking to PDF files on a website, please follow the format below: document title (xkb, y pages)
Word and other file formats	Always use PDF in preference to Word, PowerPoint and other proprietary formats wherever possible. Where the use of Office formats are required, please link to documents using the appropriate format below: document title (xkb, y pages) document title (xkb, y slides)
Logos, video, Flash etc	Original media files relating to the site (eg logos, Flash .fla files, original video material) should be supplied to NCSL in addition to published web content, in order that NCSL can maintain the site after handover. Preferred format for video content is Flash video. Flash-based content should include flash-player detection code in each instance that requires Flash. The possible need to download the Flash plug-in should be clearly communicated to users. Users without the Flash 6/7 plug in should be guided through the download process in concise and intuitive way. Original Flash files are to be delivered in FLA format by the supplier, with their embedded content (eg bitmaps) in their original formats.

2.5 Metadata

As a minimum, the following metadata elements should be included on each web page in the format indicated below:

• eGMS: <meta name="eGMS.disposal.review" content="yyyy-mm-dd"/>
• Title: <title>Document name - Sub directory - Directory - Website - NCSL</title>
• Description: <meta name="description" content="Descriptive text." />
• Keywords: <meta name="Keywords" content="descriptive, keywords, comma, separated" />

NCSL will supply the relevant information for each page.

2.6 Naming conventions

• Images and ALT tags should be named descriptively. Care should be taken not to cause offence to individuals by naming images or ALT tags with inappropriate descriptions.
• File and folder names should be lower case. Permissible characters for naming are a-z, 0-9 and hyphen (-). File names should not contain spaces.
• PDF files should be named with the title of the document separated by hyphens (eg ncsl-website-guide-for-designers.pdf).
• Document titles should be named consistently and follow the form:
  • Page name - section name - website name
  • Page name should reflect the document h1.
• NCSL house style is to use minimal capitalisation, especially in headings. Please see the NCSL editorial style guide for more information.
• Be aware of ad-blocking software which can block part or all of a web page.
• Do not name files or folders 'ads', 'advert' or 'banner' as ad-blocking technology may block these files.
  

• help
• 0845 609 0009
• enquiries@ncsl.org.uk
• contact us