Example Style GuideThe following document is a style guide to assist in the production, implementation and continuing development of the [Client] website. 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 this site, it is important that everybody involved in the development, maintenance and updating of this site read, understand and adhere to these guidelines.
1.0 Coding StandardsThis sections details the minimum coding standards required by the [Client] site.
1.1 ValidationThis site is designed to the
XHTML 1.0 Strict and
CSS2.1 specifications as laid down by the
WC3(World Wide Web Consortium). All new and existing pages must aim to validate against these specifications.
- XHTML Validator
- CSS Validator
- Validate XHTML Bookmarklet – Drag to browser’s bookmarks folder
- Validate CSS Bookmarklet – Drag to browser’s bookmarks folder
1.2 DOCTYPE DeclarationIn order to conform to XHTML 1.0 Strict, every (X)HTML page on the site must start with the following DOCTYPE declaration.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">1.3 AccessibilityThis site aims to meet
Double-A accessibility conformance as outlined in
WCAG 1.0 (Web Content Accessibility Guidelines 1.0).
1.4 Browser SupportThe following table outlines browser support requirements for this site.
| Browser Family | Support Level |
| IE 6+ | Target |
| Firefox 1.x | Target |
| Safari 2.x | Target |
| Opera 8.x | Supported |
| IE 5.5 | Supported |
| Netscape 6 | Supported |
| IE5.x/Mac | Partially Supported |
| IE 5.0 | Partially Supported |
| Opera 5.0-7.x | Partially Supported |
| IE 4.0 | Partially Supported |
| NN 4.0 | Partially Supported |
| 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. Advice current users to upgrade.
1.5 Character SetAll pages should use the Unicode UTF-8 character set.
<meta http-equiv="Content-Type" c>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.
1.6 Title, Keywords and DescriptionsTo encourage ease of navigation and good search engine ranking, all pages should contain a title, description and keywords. These content elements should be created by the content editor and not left to the developer.
Page title should be simple, descriptive and distinct, avoiding marketing hyperbole. For consistency, all titles should be in the format:
<title>[Client] – [Section]:[Page]</title>Page descriptions should describe the content and purpose of the page in 1-3 short sentences.
<meta name="Description" c />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" c /> 1.7 Alternative Text for ImagesAlternative text is required for every image element on the site. Alt text must provide an adequate description of the content or function of the image. Alternative text is content and
must be created by the content editor. It
must not be left for the web developer to decide.
<img src="/img/xxxx.gif"
alt="Add image description text here." width="xx" height="xx" />If the image is purely decorative, the alt text can be left blank.
<img src="/img/pretty.gif"
alt="" width="xx" height="xx" />1.8 LinksThe text within links should be unique and describe the destination of the link. Links saying “Click Here” or “More” should be avoided.
<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 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 the Minutes in PDF format (25KB)</a>You can provide additional, non-critical link information in the form of a tool-tip by adding a title attribute.
<a href="news.php" title="News Archive">More News Stories</a>1.9 Meaningful HTMLAll pages should be coded using meaningful rather than presentational XHTML. Meaningful elements include, but are not limited to, the following:
- h1, h2 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 should be avoided.
1.10 Abbreviations and AcronymsAbbreviations and acronyms should be marked up and defined the first time they appear on each page.
<abbr title="UK">United Kingdom</abr><acronym title="NATO">North Atlantic Treaty Organisation</ acronym >1.11 TablesTables are reserved for data and should 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.
2.0 StylesThis document contains details of all the styles used on this site, how they are applied and how they are rendered.
2.1 General Typography[add your styles here]
2.2 Colors[add your styles here]
2.3 Inline Images[add your styles here]
2.4 Headline Styles[add your styles here]
2.5 Link Styles[add your styles here]
2.6 Pull Quote/Testimonial Styles[add your styles here]
2.7 “error” Class[add your styles here]
2.8 “feedback” Class[add your styles here]
2.9 “news-story” Class[add your styles here]
2.9 “box” Class[add your styles here]
3.0 ResourcesThis document contains useful resources for the site such as links and descriptions of all the XHTML and CSS files used, links to Photoshop templates and further coding resources.
3.1 Photoshop FilesOriginal Photoshop files.
- [url=file:///SkillSwap/site/images/homepage1.jpg]Home Page[/url]
- [url=file:///SkillSwap/site/images/login.jpg]Login Page[/url]
- [url=file:///SkillSwap/site/images/listing.jpg]Listings Page[/url]
- [url=file:///SkillSwap/site/images/details1.jpg]Details Page[/url]
- [url=file:///SkillSwap/site/images/apply.jpg]Apply Page[/url]
3.2 Mark-up GuidesImages showing the general page layouts, naming conventions, sizes and colours
- [url=file:///SkillSwap/site/images/structure.jpg]Generic Markup Guide[/url]
- [url=file:///SkillSwap/site/images/properties.jpg]Colors and Sizes[/url]
- [url=file:///SkillSwap/site/images/structure-home.jpg]Homepage Markup Guide[/url]
3.3 XHTML TemplatesAll the pages on the site can be made up from these core XHTML/CSS templates.
- [url=file://localhost/Users/andybudd/Documents/Business%20Development/Portfolio/Templates/home.html]Home Page[/url]
- [url=file://localhost/Users/andybudd/Documents/Business%20Development/Portfolio/Templates/login.html]Login page[/url]
- [url=file://localhost/Users/andybudd/Documents/Business%20Development/Portfolio/Templates/listing.html]Listings Page[/url]
- [url=file://localhost/Users/andybudd/Documents/Business%20Development/Portfolio/Templates/detail.html]Details Page[/url]
- [url=file://localhost/Users/andybudd/Documents/Business%20Development/Portfolio/Templates/apply.html]Apply Page[/url]
- [url=file://localhost/Users/andybudd/Documents/Business%20Development/Portfolio/Templates/jobsbyemail.html]Jobs By Email Page[/url]
- [url=file://localhost/Users/andybudd/Documents/Business%20Development/Portfolio/Templates/a-z.html]Employer A-Z[/url]
3.4 CSS Files
- [url=file://localhost/Users/andybudd/Documents/Business%20Development/Portfolio/Templates/css/basic.css]Basic[/url] - Basic typography for older browsers. This file imports the layout, general and forms file.
- [url=file://localhost/Users/andybudd/Documents/Business%20Development/Portfolio/Templates/css/layout.css]Layout[/url] - The overall page layout. Won't need to touch this one unless the layout changes.
- [url=file://localhost/Users/andybudd/Documents/Business%20Development/Portfolio/Templates/css/general.css]General[/url] - Colours, typography, non structural layout. This is the file you're most likely to need to edit.
- [url=file://localhost/Users/andybudd/Documents/Business%20Development/Portfolio/Templates/css/forms.css]Forms[/url] - Form layout and styling. Could break this up into separate page specific files if you wanted.
- [url=file://localhost/Users/andybudd/Documents/Business%20Development/Portfolio/Templates/css/home.css]Home[/url] - Stylesheet to control the homepage and override some of the more general styles
- [url=file://localhost/Users/andybudd/Documents/Business%20Development/Portfolio/Templates/css/print.css]Print[/url] - A basic print stylesheet.fdsf
3.5 Useful LinksList of useful XHTML/CSS links
3.6 Useful Books
![SiS001! Board - [第一会所 关闭注册]](images/green001/logo.png){kind=logo}
