Web application development guide
The following document is a style guide to assist in the production, implementation and continuing development of all Salford City Council websites and web applications. This document outlines the overall file structure, naming conventions, design and coding guidelines, styles and resources used in the construction of this site. To ensure design continuity and maintain the lifespan of sites, it is important that everybody involved in the development, maintenance and updating of sites read, understand and adhere to this guide.
Contents
1. Coding standards
This section details the minimum coding standards required by all Salford City 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:
DOCTYPE declaration
To correspond with the city council web templates, all code must be produced in web applications and sites must conform to XHTML 1.0 Transitional. Every page on the site must start 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">Browser support
The following table outlines browser support requirements for all developments.
| Browser Family | Support Level |
|---|---|
| IE 6+ | Target |
| Firefox 2+ | Target |
| Safari 2+ | Target |
| Opera 8+ | Target |
| 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 |
- 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
- Unsupported – Buggy and unsupported browsers
2. Template
Template files
Salford City Council templates are available for use in Visual Studio 2005, developed using ASP.NET 2.0. This solution can be used as base files for new internal and external .NET applications that require the SCC website template.
The template files are available upon request. Please use the contact details at the end of this page.
Template styles and images
The styles for the Salford City Council templates are located in the 'template/styles' folder as the following files: salford.css (main styles), ie5.css, ie6.css, ie7.css (browser specific styles). These files must not be removed or altered in any way.
All images needed for the templates are stored in the 'template/images' folder. Again, these images must not be removed or altered.
Content styles and images
Any application-specific content styles or images must be stored in separate folders, and not inside 'template'. Application-specific styles must not overwrite or alter styles in the 'templates/styles' folder.
An empty CSS file, named custom.css is located in the 'includes' folder for the sole purpose of adding extra style definitions to an application.
All styles must be stored in standalone CSS files, not included in the XHTML as inline style="" attributes.
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 no longer valid in XHTML 1.0 Transitional must not be used.
See Integrated Web Design: The Meaning of Semantics for further information.
Typography
All text must be displayed using the Arial font.
The following CSS classes can be applied to <p> or <span> tags to provide colour to text:
- class="blue"
- class="gold"
- class="green"
- class=""
- class="orange"
- class="purple"
- class="red"
- class="teal"
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 Salford City 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 emulate this facility by means of a JavaScript function.
Dispensation for wider-size applications may be given if there is justification due to the site content or functionality. See Interactive maps for an example.
3. Content
Branding
The branding of all websites and applications must be approved by Jeff Millington, Creative Services manager. The URL must be provided directly to Jeff, or through a member of the web team.
Grammar and text
All published information must comply with Salford City Council's grammar guidelines. This includes the use of sentence case for all text. For example, "Enter Your Address" is incorrect - "Enter your address" is correct.
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:
| Name | Symbol | Code |
|---|---|---|
| Ampersand | & | & |
| Left Double Quote | “ | “ |
| Right Double Quote | ” | ” |
| Less Than | < | < |
| Greater Than | > | > |
| en-dash | - | &endash; |
| em-dash | – | &emdash; |
| Ellipsis | … | &helip; |
Take special care when inputting content created in word processing software, especially when pasting content directly from Microsoft Word - invalid characters are often included in pasted content.
Title attribute, 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] - [Application name] - Salford City Council</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" />Headings
The page title must be placed in a <h2> tag at the start of the content area. This text must be the same page title as indicated in the <title> attribute, but without the application name and ' - Salford City Council' text.
Example code (excerpt):
<div id="content">
<a name="startcontent"></a>
<h2>Page title</h2>Subheadings
Any subheadings must be placed in a <h3> tag.
<h3>Subheading</h3>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 (null).
<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.htm">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.htm">Help (open new window)</a>You can provide additional, non-critical link information in the form of a tooltip 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. Remember that the title attribute will not be accessible by keyboard-only users as the title tooltip is only activated by hovering over the element with the mouse pointer.
<a href="news.htm" title="News archive">More news stories</a>Downloadable documents
Links to downloadable documents – such as Adobe PDF’s – must contain the document size, format and the fact that they are downloads rather than links to another page. All such links must be located in a boxed area at the absolute bottom content area of the page. Each link must be a list item <li> in an unordered list <ul>.
The following code must be used to display downloadable documents:
<div class="black_border pale_grey">
<h3>Downloadable documents</h3>
<ul>
<li><a href="minutes.pdf">Download minutes (Adobe PDF format, 25kb)</a></li>
<li><a href="structure.doc">Team structure (Microsoft Word format, 2.5mb)</a></li>
</ul>
<p>If you are unable to view documents of these types, our <a href="http://www.salford.gov.uk/online/howto/downloads.htm">downloads page</a> provides links to viewing software.</p>
</div>See our document download standards for guidance as to correct terminology to use.
Abbreviations and acronyms
Abbreviations and acronyms should be marked up and defined the first time they appear on each page.
<abbr title="United Kingdom">UK</abbr>
<acronym title="North Atlantic Treaty Organisation">NATO</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.
Forms
All forms must be appropriately marked up. This means enclosing relevant sections of the form in <fieldset>tags with appropriate <legend> tags to describe the function of the fieldset. It is best to make each item in the form clearly visible and with the label separated from the field.
Forms must not be marked up in tables as they are not tabular data.
All form fields must be explicitly associated with their labels. This requires an id being declared for each field, and using that id in the label tag.
Example form code:
<form method="post" action="submit.aspx">
<fieldset>
<legend>Fieldset description</legend>
<p><label for="fieldName1">Field description</label><br />
<input type="text" name="fieldName1" id="fieldName1" class="input largeField" /><br />
<span class="medium">Field guidance text here</span></p>
<p><input type="checkbox" name="fieldName2" id="fieldName2" /> <label for="fieldName2">Checkbox description</label></p>
<p><input type="radio" name="radioField" id="radioYes" /> <label for="radioYes">Yes</label><br />
<input type="radio" name="radioField" id="radioNo" /> <label for="radioNo">No</label><br />
<input type="radio" name="radioField" id="radioMaybe" /> <label for="radioMaybe">Maybe</label></p>
<p><input type="submit" value="Submit form" class="confirmButton" /></p>
</fieldset>
</form>Form field placement
- Text boxes (input type="text" or textarea) and select boxes should be placed after their associated <label> tags, separated by a line break <br />.
- Checkboxes and radio buttons should be placed before their associated <label> tags.
- All radio and checkbox selections must be separated by line breaks.
Form field-specific CSS styles
The following classes can be used to style form input fields:
- class="input"
Used to visually format text input boxes, select boxes, and textarea fields - class="input largeField"
Used to assign a large width to text input boxes, select boxes, and textarea fields. The width of the field will remain consistent despite any size attribute specified. e.g. use for address or textarea fields - class="input mediumField"
Used to assign a medium width to text input boxes, select boxes, and textarea fields. The width of the field will remain consistent despite any size attribute specified. e.g. use for name fields - class="input smallField"
Used to assign a small width to text input boxes, select boxes, and textarea fields. The width of the field will remain consistent despite any size attribute specified. e.g. use for postcode or telephone number fields - class="disabled [largeField/mediumField/smallField]"
Used to indicate that an input field cannot be typed into, usually because a function has not yet been completed, or unalterable information is inside it. Ensure the attribute disabled="disabled" is also applied to the field and the appropriate size class
Example input styles:
input:
input largeField:
input mediumField:
input smallField:
disabled:
The following classes can be used to style form buttons:
- class="confirmButton"
Used for submit or confirmation form buttons - class="cancelButton"
Used for form cancel or reset buttons - class="addButton"
Used for actions that add information (such as a new database record) - class="deleteButton"
Used for actions that delete information - class="searchButton"
Used for actions that search for information - class="button"
Used for any non-specific form buttons
Example button styles:
Do not attempt to style radio buttons or checkboxes.
Form field guidance
Do not use hidden methods of providing field guidance. Display guidance text on a new line underneath the form field. This guidance should explain requirements in advance of submitting the form, so users know the exact format of data to be entered. Examples include minimum or maximum length of passwords, or if certain characters are required.
Example code (excerpt):
<p><label for="fieldName1">Field description</label><br />
<input type="text" name="fieldName1" id="fieldName1" class="input largeField" /><br />
<span class="medium">Field guidance text here</span></p>Form validation
Forms may be validated using client-side JavaScript. Server-side validation must also take place in the event that JavaScript is disabled or disallowed in the user's browser software.
Validation controls which hard-code error messages in the HTML source but hidden using CSS, before the form has been submitted, must not be used. Error messages should only be displayed or added to the HTML source when the form has been submitted.
Error messages
Errors generated by submitting form content must be displayed in the following format, located above the first fieldset on the page. If the page contains substantial introduction text above the first fieldset, locate the error message above that but below the <h2> page title:
Your details cannot be submitted. The following fields must be completed:
- First name
- Address
- Postcode
Example error code:
<div class="error">
<p>Your details cannot be submitted. The following fields must be completed:</p>
<ul>
<li>First name</li>
<li>Address</li>
<li>Postcode</li>
</ul>
</div>Success message
To indicate that a form has successfully been submitted, an optional message can be displayed on the target page, above any page content but below the <h2> page title:
Thank you, your details have been updated
Example success code:
<div class="success">
<p>Thank you, your details have been updated</p>
</div>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:
- http://www.webaim.org/techniques/flash/
- http://www.adobe.com/accessibility/
- http://www.sitepoint.com/article/accessible-flash-parts-1-2
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.
6. Useful links
- XHTML reference
- Batch HTML Validator - validates up to 100 pages of a site
- Building ASP.NET 2.0 Web Sites Using Web Standards - tutorial from Microsoft
- A List Apart - web standards and design articles
- Vitamin - resource for web developers and designers
- Web Developer's Handbook - numerous web development and design resources
Who to contact
- Name
- Antony Golding
- Telephone
- 0161-793 2464
- antony.golding@salford.gov.uk
Email this page to a friend
Bookmark this page using:
Find out more about social bookmarking.
These sites allow you to store, tag and share links across the internet. You can share these links both with friends and people with similar interests. You can also access your links from any computer you happen to be using.
If you come across a page on our site that you find interesting and want to save for future reference or share it with other people, simply click on one of these links to add to your list.
All of these sites are free to use but do require you to register. Once you have registered you can begin bookmarking. Each of the sites works slightly differently so use the links below to find out which service best suits your needs.
Find out more about social bookmarking at Wikipedia.
