Design Conventions

FIXME

Introduction

Conventions are informal rules that have been adopted over time, and have become embedded in visual culture.
Conventions make the designer's job easier, meaning we don't have to invent solutions for common problems, and letting us concentrate on specifics.
One of the key skills for designing effectively is appreciating current conventions, and applying them for maximum benefit.

Creation of design concept

The whole concept should be one single .psd file
All layers must be grouped together and all groups must be named as the general layout element that they represent (for example: Body, Header, etc.). The group names should be capitalized.
Most of the elements should be vector-based (shape layers) in order to simplify modifications.
Using adjustment layers is recommended, instead of image/adjustments.
It is necessary to name each layer with the name of the element that represents.
Text should be preserved in vector for faster live editing. Exceptions are when irreversible modifications need to be done like perspective modifications. The original text layer before the modifications should be one position below in the stacking order, but hidden.
Vector files, such as AI, PDF or EPS (logos or illustrations) must be imported as smart objects.
When layers occur that are not to be used in the final design they must be grouped in layer group called Archive and put at the bottom of the stacking order.
When importing images as smart objects they must be duplicated. All editing must be done on the duplicated image and not on the original smart object, which is usually hidden.
Different guide lines must be used during the concept work of the design and the process of slicing.
If possible margins of 5 px should be left between the main elements of the page - navigation, main content, side bars and etc. This simplifies the slicing process.
Bitmap images should be .jpg, .gif or .png format with the appropriate optimization for the chosen format.
It is a good practice to make a backup files of the main concept layout file.

Slicing - HTML and CSS coding

The name of the slices must be lowercase and words should be separated with underscores for legibility.
HTML comments must be written to mark the start and the end of the different sections of the page (Body, Header, Footer, etc.)
In the beginning of the CSS file universal and general rules should be defined - these will affect the html document, the body, and the images as a whole.
In-line styles should be avoided.
CSS comments should be used in the CSS file to mark the different rules for the corresponding sections in the HTML document.
It is a good practice to have different class selectors for the hyperlink colors. Class rules should be declared for hyperlinks that share common visual representation.
CSS rules for hyperlinks must be declared at the end of the CSS document.
The CSS file must be attached to the html document with an <link rel=“stylesheet”> tag in the body of the <head> tag.
For a better structuring of the entire web site during the working process “Manage site” option in Dreamweaver should be used.
Nesting of tables should be no more than four sub levels (5 in rare cases). Avoid using colspan and rowspan.
If possible declare content CSS rules in the beginning of the stylesheet document for the following textual elements: p, h1, h2, h3, ul, ol, li.
All links and sources should be site root relative: / , images , /css , js, flash, docs

Project folder structure

The public files of the website should not be in a public or user folder. They should be positioned in the site root folder /

  / - site root folder

  /images/ - for all images (in case there are many images with specific type
             you can nest them in separate folder, for example /images/buttons/)

  /css/ - for all CSS files

  /js/ - for all JavaScript files

  /flash/ - for all SWF files

  /docs/ - for all .pdf or .doc files

  /admin/ - for the admin area

  /prototype/ - for a prototype of a system

General project files/templates structure

  header.html
  navigation.html
  header_menu.html
  footer.html

To embed flash SWF files use SWFObject library: http://blog.deconcept.com/swfobject/
Spacer gifs should never be used. Image maps should be avoided unless necessary.
Doctype declaration should be:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

All elements and attributes must be lowercase.

Example:

  <div class="footer"></div>

Do not use CSS Positioning unless it is contracted with the client.
Perfect validation for standards compliance is not required unless it is contracted.
All nested elements should be indented with one tab per level.
Use tabs, not spaces, for indentation. The tab size should be 2 characters for easy legibility.

Example:

  <table cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td></td>
    </tr>
  </table>

Epilogue

Please follow the standards above. Consider these reasons:

Designers and coders can go into any code and figure out what's going on
New people can get up to speed quickly
People new to XHTML are spared the need to develop a personal style and defend it to the death
People make fewer mistakes in consistent environments

If you find that you are wondering how to write a certain piece of code, and the correct style is not described here, or is not clear, please contact the author/maintainer so that the needed amendment can be made.

And the final point is that the standard is not written in stone. If in a certain situation it makes all the sense in the world not to follow the standard, then do what is best for the project.