Guide to developing HTML for the Grouptree CMS

Overview

Although the Grouptree CMS is designed to be very flexible there are some methods of developing HTML for websites that will ensure implementation, content management and future maintenance goes as smoothly as possible.

Intended audience

HTML developers that are cutting HTML for sites. Implementers that are integrating the HTML into the CMS. 

Prerequisites

A good understanding of HTML and CSS.

Overall methodology

The Grouptree CMS is optimised for use with DIV and CSS based layouts. Navigation content and layout should be controlled by the CSS. When CSS is disabled the page should display in a logical order for accessibility applications such as text readers. This methodology also ensures that changes are easier to implement and affect the site globally.

Ideally classes should not be applied to the HTML dynamically using javascript 'on document ready' however use of DHTML for interactive elements is acceptable.

Dynamic content considerations

The HTML that is designed may look great with a fixed amount of content. Don't forget that the users of the CMS will be adding varying amounts of content into your templates. Templates should be tested with small and large amounts of content. Titles and navigation should be tested with long and short strings.

This is particularly important in:

• Any navigation element or list
• Limited width or height content boxes or content areas

• Grids or lists
• Titles
• Breadcrumbs or paths

Navigation

Navigation scenarios and paths need to be carefully considered and tested with extremely long page titles in order to see any wrapping issues that may occur.

Typically navigation areas should be executed using unordered lists and in the case of hierarchical navigation nested unordered lists. Visual differences in selected or highlighted items in the navigation should be performed by classes or a unique ID on the selected elements. Rollovers should also be achieved using classes or Ids rather than DHTML.

Paragraphs and Headings

• Avoid applying widths to paragraphs and headings
• Dont collapse paragraphs - either leave them as default or set your own. Do net set them to 0.

Paths to resources

Assets such as images, documents, scripts and css should be relative and proceeded with the '/' which denotes the root of the site, for example <img src="/images/myimage.gif" />". Ideally you should not use ../../ to move up directories to assets. This includes references from other files such as XML and Flash applications.

Styling editable areas

Styling the editable areas of a site is a sensitive issue. In an ideal implementation the user should not have to consider which classes to apply to an element. They should be able to achieve what they need using Header tags (<h1>,<h2> and so on) tags and paras (<p>). This also enforces consistency throughout the site.

Other details

• Avoid using classes or ID's on the body tag; target the outer most wrapper instead.
• Avoid widths on inline elements, instead use block elements to constrain inline elements. This improves the editing experience.
• Avoid using classes or ID's within the content areas (editable by user)
• Please validate all HTML to the Transitional XHTML Standard.

SIFR

If SIFR is to be used please use it sparingly. It affects page load time and often causes pages to jump around as they load. Ensure that the HTML will work well without the SIFR and try to make sure the HTML uses the same amount of vertical and/or horizontal page as the rendered SIFR, this will prevent the page jumping around like crazy as it loads, which at best is ugly and at worst ruins usability of the site.