Debian website redesign proposal openlogo-50.png

A resource for documenting, developing and discussing the design proposal.

TODO

FAQ

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

Some ideas/comments -- ?SimonPaillard

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

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.

Design

General

Top Navigation

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.

Sites in progess moving to kallesdesign

Site / Subdomain

Status

by

Comment

http://bugs.debian.org/

WiP

dapal

Preview at http://bugs.deb.at/

http://dsa.debian.org/

done

zobel

http://ftp-master.debian.org/

WiP

MadameZou

no test site, needs only dak integration (and I won't touch dak with a ten foot pole, thankyouverymuch! if you want to work on it, contact me)

http://git.debian.org/

done

Rhonda

http://keyring.debian.org/

done

noodles

bigger layout issues

http://lists.debian.org/

done

zobel

needs bigger code-rewrite for archives themself

http://nm.debian.org/

WiP

Myon

no testsite yet

http://packages.debian.org/index

done

Rhonda

http://planet.debian.org/

done

zobel

http://search.debian.org/

done

zobel

footer missing

http://www.debian.org/

done

Rhonda

http://db.debian.org/

done

zobel

http://www.emdebian.org/

done

zumbi

http://wiki.debian.org/

done

pabs

userlinks are badly placed

http://mentors.debian.net/

done

daemonkeeper

Actual webdesign by "bst"

Ikiwiki theme

WiP

Kalle

mostly there probably bugs in some of the features though.screenshot, zip archive and git, minimal css only version debminiki.zip, git dir

http://svn.debian.org/

WiP

Kalle

screenshot, zip archive and git

http://qa.debian.org/

done

Myon

http://debtags.debian.net

done

EnricoZini

reusable deblayout django app available

http://deb.li

done

BerndZeimetz

might be usable for other flask apps after a bit of cleanup

Developments

Wiki Theme

You can test the new wiki theme by logging in and changing the theme to debwiki in your settings. The page title will currently not show but this will be resolved shortly.

The new theme looks like this debwiki_100906_small.png

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.