Translation(s): English

(!) Discussion


This page sets out how the design is intended to work.

Overriding Ideas

The website has been designed to respect your settings. Font size and column width is determined by the user. This flexibility has limitations and the website will degrade at settings that are beyond the norm. The important thing is that it degrades gracefully without losing functionality and legibility.

Visually the layout avoids closed boxes, the whitespace of the page is allowed to flow in and around elements. Hopefully this results in a page that feels light and open. Exceptions to this open rule can be found in the banner of the homepage and the warnings, tips and other messages that need to stand out. These have been designed as closed boxes.

Screen sizes and proportions vary greatly from small portrait oriented phone screens to huge, wide desktop screens. This variety is a challenge that can never be adequately met, but by respecting user settings and avoiding fixed width layout the user have more scope that usual to control their experience.

Two main types of sites have been identified. Information Sites and Tools, these two types have different requirements, for the former the simplest possible layout is preferred well structured text laid out in one wide or two equal columns is recommended. For the latter sites more specific layouts are required and a control panel like approach might be suitable. For sites that present a lot of data much of the text can be set to a relatively smaller size.

Things to consider

When approaching a web design problem do not consider it in isolation. Ask yourself if a similar problem has been dealt with elsewhere in the website and copy that approach in detail. If it hasn't been done seriously consider if it really should be done. Consistency is very important, specific solutions are to be avoided at all cost.

Adding things to pages should be done carefully and follow the logic of the rest of the page. Remember that when you add information to a page you do that at the cost of the existing information. A new link makes all other links "weaker". If the information doesn't quite fit take a step back and consider how, within the context of the entire website, the information can be added.

Layout Diagram

do-layout.png

Typical content page (Note that the tool panel on the right had side is deprecated for non-tool sites)

do-layout-columns.png

Typical top level index page

Content Area

Top Level Pages

Special styles

Starting a new site or applying the design to an existing site

Templates

See debtemplates for work in process templates