The designer is responsible for the look and feel of your site.The visual design is the first thing a visitor is aware of, so visual design can be a major determinant of whether a visitor stays with the site, or not.

In this section we consider the designer to be concerned only with how the site and its assorted interfaces (as provided by extensions) will look. The equally important issue of how the site all hangs together, and whether it is easy to use is the responsibility of the engineer, though the two roles need to work closely together, and the overall process of ensuring that the site both looks good and functions well may be subsumed in a single process termed "design".

Design in TYPO3 is based on (X)HTML templates, which are managed by one of a number of templating mechanisms. It does not involve directly connecting pages to a database by writing PHP code, as is often found in PHP scripts such as osCommerce.

Provided a design can be implemented as (X)HTML, it can be used as the basis of the page design on your site, and this leaves you and your designer with considerable freedom.

From a management point of view this means that if you are not in a position to pay a designer to produce a custom design, or if you want to use a quick fix on a temporary basis, you can make use of one of the many thousands of designs which are available on the web, either at low cost, or free of charge, and then, if necessary, pay for better design as and when your budget allows for it.

Virtually any design with any sort of navigation can be implemented for TYPO3. You can have as many templates as pages, and therefore a different  if you really want to.

However:

• The design does need to be achievable in (X)HTML/CSS.
• Not all designs are optimal or even suitable for a CMS.
• Design does not stop at a simple page layout: many front-end extensions have their own interfaces, generated through their own templates, and provision is needed both for these to be integrated into the overall design concept, and to have the right look and feel, so the designer should have such elements included in their brief.
• If the design has to reflect a corporate identity, it is important (if possible) to start the definition of that identity from the point-of view that it needs to be expressible as (X)HTML.
• There are quite good reasons why most web page designs follow a few basic layouts, so have a good reason to depart from one of those
• Keeping it simple is usually a good plan.

Designers and Engineers

It is important to manage the dialogue between the designers and the engineers carefully. Engineers frequently have a better grasp of what is workable than designers, particularly those who are only going to present you with graphics files.

Be particularly aware that while TYPO3 gives you the ability to add and subtract pages and sections from a site, too restrictive a design will break if you do this - there needs to be space for things which may change to expand into.

TYPO3 has a number of different templating systems, the easiest of which to work with is templavoila.

Templavoila takes a normal, fully designed, HTML page, and lets the engineer define which parts of the page should be replaced with variable content, and which should remain fixed. Some parts of the page can be replaced with dynamic content such as log-in boxes and menus which appear on all pages, and some can be replaced by variable content elements such as text and graphics which are inserted individually into each page.

Many designers prefer to implement their designs directly as (X)HTML/CSS, using their own preferred design tools.

Others prefer to design using only graphics applications such as Photoshop, in which case your engineers will need to realise the designs as (X)HTML.

As a manager, therefore, you have the choice of approving graphics which show full page layouts, and/or fully working (X)HTML/CSS pages, complete with dummy content. The pages are then used directly to generate the templates, leaving much less room for error.

Another feature of templavoila is that it stores the instructions for the variable pieces separately from the (X)HTML layout. You can then map the same parts to different (X)HTML files, and the result will be that the design of the defined parts of the site will change immediately.

It is usually good practice to have (minimally) templates which have 3, 2 and 1 columns (or content areas), since some elements of your site will probably ideally take up all the available width, while others will look best with a full menu one one side and one or two additional columns.