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 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.
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. Advise current users to upgrade.
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 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.
All styles must be stored in standalone CSS files, not included in the XHTML as inline style="" attributes.
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 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 retain a 744px wide appearance to fit the 800x600px requirement.
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.
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 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>See our document download web standards for guidance as to correct terminology to use.
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.
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" /></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.
- "Yes/no" radio fields can be displayed next to each other on the same line, but more than two radio or checkbox options 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 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 - 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 - 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
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="button"
Used for any non-specific form buttons
Do not attempt to style radio buttons or checkboxes.
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.
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
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.
