turning a design into a website

Once you are given an html/css design, you need to choose a good strategy for breaking that up into its parts and sticking each part where it needs to go. This page describes each of the main components that make up the visual look of the web site and should direct you to where you will need to look to stitch the html/css from your design into that component.

You need to figure out which objekts (layouts, aggregates, menus) will be displaying which parts of that design and then stitch that part of the design into that objekt's template.

The site has a top and a bottom and then the content goes in the middle. This is true of all websites. You will have a primary layout that puts the top (with the logo) and the bottom (with the credits etc.) and includes the standard site menus.

The object that is being currently viewed will display itself in the middle. For the front page or for a section, those objekts will be aggregates that show many little blocks, pictures, links etc.

LAYOUTS

A website consists of a primary layout which holds the site's menus, specifies the template and the site-wide CSS. The Main layout probably has the main site menu and maybe links at the top or bottom to various things. eg. another top menu, links at the bottom to privacy policies, site maps etc. See layouts and templates for a discussion of menus and layouts.

You may have additional layouts for specific areas. eg. a photo gallery may use a layout that has no side menus. A blog may use its own layout with its own menus. The object that is being displayed is offered the chance to specify a custom layout.

FRONT PAGES

Most of the inside pages in the site will wish to use the whole inner body of the layout space to display their content. eg. an article will take up the whole inner body. The frontpage of the site probably wants to have boxes with different blocks of content. Make a dedicated frontpage object for that site and set it as the front page object by editing the Main Site Settings -- following the link on the Admin Links.

You may wish to try to build some object that will be very general with lots of settings that tries to solve the front page for every conceivable site and combination. It is a better idea (IMO) to write a front page object custom for your site. This then has simpler settings that the editors can understand, instead of lots and lots of parameters that they have to email you about constantly. Once you get used to writing classes within the architecture, its quite quick and easy to add a new one to solve specific problems. Writing classes that solve all problems for ever is much harder (and harder to maintain).

CSS

The main CSS should of course be useful for all pages on the site. Temporary campaigns and specific pages can include their own CSS individually, and should take care not to pollute the main CSS namespace (ie. don't start redeclaring 'input' to make your page have fat inputs, you will mess up the search form on the main page as well). Use CSS selectors like so:

#yourArea input {
width: 300px;
}

and enclose that page in a div id="yourArea"

heading levels

Individual articles/posts are always displayed with h3 headings, and h4 when they are in summary mode. The main site CSS should stylize those. If you wish a different display for h3 and h4 in different areas of the site or different parts of the page, you should use correct CSS selectors to recognize what the context is and stylize based on that.

By this I mean that you shouldn't allow the designers to make you hack up all the h3/h4 display templates because they want a different font size if its in the right column or in the center column.

h3 {
font-size: normal;
}
#rightcol h3 {
font-size: small;
}

and then wrap your whole right column in this in the template:

div id="rightcol"

Now all the h3 in the right col will use font size small, and the articles themvselves don't have to adapt their html to achieve this.

You should always try to keep designs from forcing you to rewrite the html in your templates whenever possible, but on the other hand it is quite easy to customize templates on a site by site basis, and you should take advantage of that to offer site customized displays and features for content that can benefit from that.

search forms

See TBO for a working example. The search form there is included in the main site layout directly and points to a Browser page where the results are shown. A dedicated search page should use a browser, and will thus show the search form and the results quite nicely.