TODO

Provide contact (E-mail, Mailinglist, ... anything) for comments

Find bugs and ugly parts of the current design

Make breadcrumbs work on w.d.o. Adjust wml template to print parent dirs. If anyone with Perl skills know if/how to achieve this with wml/Perl please let me know. I guess the strategy would be to extract the title of each index.wml up to the root and display it as a list of links in the breadcrumbs.

Solve navbar scaling for mini font sizes.Solution it git

Extend and document style "templates".

Define workflow to update stylesheets on all sites

Make sure search boxes specify what is being searched. Ie. replace "Search" above with "Search Wiki"

Resolve side bars to avoid clashes with content/footer when sidebar is very long

Define how to treat the footer, consistency across sites is quite important for reoccurring elements. How should site specific links be formatted?

Refine packages.debian.org styles to make sure the information is clearly presented.

Complete the wiki theme. A better moinmoin theme is in progress I'm looking to remove the tools and settings from the sidebar. This space is better utilised for other things. Should MoinMoin 1.9.x be the target?

The red bar surrounding the blogger name on planet isn't received too well, we need a different way to distinct between the headlines within the entries and the blogger name.

FAQ

Could you remove the left margin and use the full width?

See this image for a comparison and note how the top lef corner becomes congested and the whole layout looks less organised.

The version of the debian logo used also looks better with significant white space beneath it. Since the logo forms an integrated part of the breadcrumbs (the text of the logo is the first crumb) its position is rather locked in by quite a few design decisions so that a change would unravel a significant part of the design. The left margin is also quite comfortable when scanning the text. For these reasons, and a few other I would much rather not remove the left margin. If someone has a very compelling argument I am of course willing to be convinced.

The smaller logo makes the header quite space-efficient and the wider left margin sites the logo on a column of white space that makes it prominent despite the small size. Also see other heavily branded commercial sites that despite commercial pressures keep their logo resonably small. Making debian pushier than say... Microsoft would feel uncomfortable

The font size is to large can you make it smaller please?

After much consideration the decision was made to respect the browser font settings. This makes the font user configurable and allows the site to work better on diffrent devices and personalities. The default font size in most browsers is 16pt which is rather large but actually very readable.

Comments

Please feel free to add your ideas, comments and bugs below.

My comments below do not intend to close down the discussion about these issues. They are just an attempt to explain the background of the decisions. -- Kalle

Many thanks for the work so far. It is really great that we will have a unified appearance for many of our web services. On the main website, I have two comments. The first is that with the increased space between lines, compared to the original design, the pages look a bit empty — although the decrease in content per page is not so high. The second is that on Iceweasel, the font that is picked by the new design looks thinner than the default one, and therefore less contrasted and slightly less comfortable to read. But I admit I only feel this when I switch back and forth between the two designs. -- CharlesPlessy

Thanks for your feedback. The reason the font may appear thinner is that it is slightly grey rather than full black. This is usually considered good practice as black on white becomes straining for the eyes after a while (although opinions differ on this point). The font itself can be changed in your browsers font settings. The line spacing makes for a lighter page and should aid scanning for information. Choosing a smaller font will make it denser. -- Kalle

Traditionally (and for good fonts) italic text is lighter than normal. This allow you to pick the italics out in a line without it disturbing the overall appearance. The curvy shapes are not the essence of italics neither is the slant. As the resolution of screens are not enough to do this I make the italics slightly grey to achieve the same effect. -- Kalle

h2 links not recoginzed as titles enough IMO

See below I believe this is due to your settings not allowing any difference in font size. If the font size and min-font size is almost the same headings will look the same as body text. -- Kalle

when using TOC on the right side, make it float to avoid wasting the toc width during all the page

I have tried to make this work. Unfortunately the variety of sites and requirements results in clashes and problems with sidebars, notifications etc. The result has always been a mess. In the end I valued consistency over specific solutions -- Kalle

TOC on the right side overlap with a (translator) note

maybe I misunderstand what you mean with toc. Perhaps you are referring to the sidebar as seen on the CD pages? The problem with the sidebar happens (as far as I understand) in the very specific circumstances of someone having changed their browser/system settings in such a way that the font size and the min-font size are only a few pixels apart. This is an inherently broken setting as it means there is essentially only one font size on the webpage, headings will become indistinguishable etc. To override this setting on the website would mean specifying fixed font size or fixed width layout, this removes user control from the website experince. -- Kalle

a little bit indentation for <li> would allow to see them fast

Lists are indented. Do mean more indentation or do we have a bug on our hands? -- Kalle

Architecture

Reusable Design Elements

The ambition is that classes id's and elements are re-usable and cover all required use-cases and formatting needs. If custom inline styles and page specific hacks are avoided the overall appearance of the site will be more coherent. For this to happen I guess I need to produce some serious documentation See KredesignManual for work in progress.

Files

debian.css

deb$(subdomain).css

changes to backend templates

The proposal works by having one global debian.css that should be the same for every subdomain and backend. Site specific tweaks and overrides are then added in a separate css file following the deb$(subdomain).css naming convention. The subdomains link to their css file which in turn includes the debian.css file via a @import line at the top of the css file.

use container as base for the reference in CSS( #something ---> header #something) to avoid conflict between header and footer with (generated) content(e.g size of h1 in headers and content)

Top Navigation

Logo

Navbar

Breadcrumbs

The above elements are designed to fit together quite tightly. The textual part of the logo forms the first breadcrumb therefore a slash should be the first item in the breadcrumbs before any actual link. This can be achieved with the css content tag if changes to the backend are difficult.

div.breadcrumb:before {
content: "/";
}

replace "breadcrumb" above with the tag your backend provides

Typography

Font Size

After much consideration the font size is left at the browser default and uses em's to vary font size around the default body text. This means that font size as set by the user in the browser settings is respected.

Tabular, listed or otherwise heavily structured data should where appropriate use the smaller 0.75em font size. This is particularly useful for information intensive sites such as gitweb or the debian cd vendor page.

The main change from the previous theme is the treatment of the title, the edit tools and the login. The new proposal presents the title as a h1 heading which means that the content below is pushed 45 pixels down. The login link is sited next to the subdomain flag and the edit tools just below the title.