Scribd Logo
Upload

Welcome to Scribd!

  • Style Guide

    Uploaded by

    ieropa2
    36 views9 pages
    This document outlines coding standards, styles, and resources for a style guide. Section 1 details coding standards such as validation, accessibility, browser support, character encoding, and semantic markup. Section 2 describes various style elements like typography, colors, images, and classes. Section 3 lists resources including Photoshop files, markup guides, templates, and CSS files. The style guide provides guidelines for developing and maintaining a consistent site design.

    Original Description:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document outlines coding standards, styles, and resources for a style guide. Section 1 details coding standards such as validation, accessibility, browser support, character encoding, and semantic markup. Section 2 describes various style elements like typography, colors, images, and classes. Section 3 lists resources including Photoshop files, markup guides, templates, and CSS files. The style guide provides guidelines for developing and maintaining a consistent site design.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as doc, pdf, or txt
    36 views9 pages

    Style Guide

    Uploaded by

    ieropa2
    This document outlines coding standards, styles, and resources for a style guide. Section 1 details coding standards such as validation, accessibility, browser support, character encoding, and semantic markup. Section 2 describes various style elements like typography, colors, images, and classes. Section 3 lists resources including Photoshop files, markup guides, templates, and CSS files. The style guide provides guidelines for developing and maintaining a consistent site design.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as doc, pdf, or txt
    of 9

    Example Style Guide...................................................................

    1
    1.0 Coding Standards...............................................................2
    1.1 Validation........................................................................2
    1.2 DOCTYPE Declaration........................................................2
    1.3 Accessibility.....................................................................2
    1.4 Browser Support..............................................................2
    1.5 Character Set..................................................................3
    1.6 Title, Keywords and Descriptions........................................3
    1.7 Alternative Text for Images...............................................4
    1.8 Links..............................................................................4
    1.9 Meaningful HTML..............................................................5
    1.10 Abbreviations and Acronyms............................................5
    1.11 Tables...........................................................................6
    2.0 Styles...............................................................................6
    2.1 General Typography.........................................................6
    2.2 Colors.............................................................................6
    2.3 Inline Images..................................................................6
    2.4 Headline Styles................................................................6
    2.5 Link Styles......................................................................6
    2.6 Pull Quote/Testimonial Styles.............................................6
    2.7 error Class....................................................................7
    2.8 feedback Class..............................................................7
    2.9 news-story Class...........................................................7
    2.9 box Class......................................................................7
    3.0 Resources..........................................................................7
    3.1 Photoshop Files................................................................7
    3.2 Mark-up Guides..................................................................7
    3.3 XHTML Templates.............................................................8
    3.4 CSS Files...........................................................................8
    3.5 Useful Links.......................................................................8
    3.6 Useful Books......................................................................9

    Example Style Guide


    The 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
    lifespan 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 Standards


    This sections details the minimum coding standards required by the
    [Client] site.

    1.1 Validation
    This 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 browsers bookmarks
    folder
    Validate CSS Bookmarklet Drag to browsers bookmarks folder

    1.2 DOCTYPE Declaration


    In 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 Accessibility
    This site aims to meet Double-A accessibility conformance as outlined
    in WCAG 1.0 (Web Content Accessibility Guidelines 1.0).

    1.4 Browser Support


    The following table outlines browser support requirements for this site.
    Browser Family
    IE 6+
    Firefox 1.x
    Safari 2.x
    Opera 8.x
    IE 5.5
    Netscape 6
    IE5.x/Mac
    IE 5.0

    Support Level
    Target
    Target
    Target
    Supported
    Supported
    Supported
    Partially Supported
    Partially Supported

    Opera 5.0-7.x
    IE 4.0
    NN 4.0
    IE4.0/Mac

    Partially Supported
    Partially Supported
    Partially Supported
    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 Set


    All pages should use the Unicode UTF-8 character set.

    <meta http-equiv="Content-Type"
    content="text/html;charset=UTF-8">
    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
    Ampersand
    Left Double Quote
    Right Double Quote
    Less Than
    Greater Than
    en-dash
    em-dash
    Ellipsis

    Symbol
    &

    <
    >

    Code
    &amp;
    &ldquo;
    &rdquo;
    &lt;
    &gt;
    &endash;
    &emdash;
    &helip;

    Take special care when inputting content created in a word processor.

    1.6 Title, Keywords and Descriptions


    To 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" 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" />

    1.7 Alternative Text for Images


    Alternative 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 Links
    The 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 PDFs 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 HTML


    All 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 Acronyms


    Abbreviations 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 Tables
    Tables 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 Styles
    This document contains details of all the styles used on this site, how
    they are applied and how they are rendered.

    2.1 General Typography


    Blah, blah

    2.2 Colors
    Blah, blah

    2.3 Inline Images


    Blah, blah

    2.4 Headline Styles


    Blah, blah

    2.5 Link Styles


    Blah, blah

    2.6 Pull Quote/Testimonial Styles


    Blah, blah

    2.7 error Class


    Blah, blah

    2.8 feedback Class


    Blah, blah

    2.9 news-story Class


    Blah, blah

    2.9 box Class


    Blah, blah

    3.0 Resources
    This 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 Files


    Original Photoshop files.

    Home Page
    Login Page
    Listings Page
    Details Page
    Apply Page

    3.2 Mark-up Guides

    Images showing the general page layouts, naming conventions, sizes


    and colours

    Generic Markup Guide


    Colors and Sizes
    Homepage Markup Guide

    3.3 XHTML Templates


    All the pages on the site can be made up from these core XHTML/CSS
    templates.

    Home Page
    Login page
    Listings Page
    Details Page
    Apply Page
    Jobs By Email Page
    Employer A-Z

    3.4 CSS Files

    Basic - Basic typography for older browsers. This file imports the

    layout, general and forms file.


    Layout - The overall page layout. Won't need to touch this one

    unless the layout changes.


    General - Colours, typography, non structural layout. This is the

    file you're most likely to need to edit.


    Forms - Form layout and styling. Could break this up into

    separate page specific files if you wanted.


    Home - Stylesheet to control the homepage and override some of

    the more general styles


    Print - A basic print stylesheet.fdsf

    3.5 Useful Links

    List of useful XHTML/CSS links

    3.6 Useful Books

    Web ReDesign 2.0: Workflow that Works by Kelly Goto


    The Unusually Useful Web Book by June Cohen
    Defensive Design for the Web by 37 Signals
    Designing with Web Standards Jeffrey Zeldman
    The CSS Anthology Rachel Andrew
    Web Standard Solutions Dan Cederholm
    CSS Mastery: Advanced Web Standards Solutions Andy Budd
    DOM Scripting: Web Design with JavaScript and the Document
    Object Model - Jeremy Keith

    You might also like