This page sets out how the design is intended to work.
Contents
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
Typical content page (Note that the tool panel on the right had side is deprecated for non-tool sites) |
Typical top level index page |
Header
The Debian logo should function as a global home button, always bringing you back to the w.d.o homepage.
- The red "domain flag" should specify the site, Lists, Packages etc.
Site login and user information should be located to the left of the domain flag. See the wiki for an example.
Breadcrumbs should always start with the subdomain. The "Debian" text of the logo lines up with the breadcrumbs and form the first crumb. The trail thus leads back to w.d.o.
- The top menu can be sub domain specific and tailored to each site.
- Search should be located top right.
Content Area
Links can be horisontally located as the first element of the content area just below the breadcrumbs. This arrangement is not dissimilar to tabs and the links should be carefully and selectively chosen. This list can replace the sidebar as seen on the /CD pages
- Each page should then start with a reasonably short H1 title.
A Table Of Contents should be included if the page is long. This .toc class list should link only to elements on the same page.
- Structure the content carefully using headings lists etc.
Top Level Pages
- When the information requires it a two column layout can be used. This is particularly useful for index pages that contain mostly short snippets of information and links to other pages.
Special styles
- The stylesheet provides a number of highlight types warnings, notes, tips. These should be used sparingly and often only one per page.
Starting a new site or applying the design to an existing site
Templates
See debtemplates for work in process templates
Copy the most recent debian.css from www.debian.org/debian.css
Create a new empty css file following the naming convention deb$subdomain.css
Add an @import url("debian.css"); line to your new css file
Link to the deb$subdomain.css stylesheet in your html markup.
- Proceed to add a the minimum amount of tweaks and corrections to the new css file. If this file grows to large you are likely doing it wrong. Keep in mind that consistency across sites is important and even small customizations, perhaps even more so small ones, bring back the noise and inconsistencies of the old websites. You might feel strongly about that space of that colour but taking a wider view breaking the whole probably isn't worth it. Try to copy existing styles to your new elements, or even better rename your elements.
If required change your backend templates to follow the structure of www.debian.org