Differences between revisions 41 and 42
Revision 41 as of 2010-10-28 03:46:20
Size: 6269
Editor: PaulWise
Comment: wiki.d.o too
Revision 42 as of 2010-10-28 14:42:09
Size: 6289
Editor: RhondaDVine
Comment:
Deletions are marked like this. Additions are marked like this.
Line 83: Line 83:
|| wiki.debian.org || WiP || http://wiki.debian.org/ || || Login, settings, change theme to debwiki || || wiki.debian.org || WiP || http://wiki.debian.org/ || || Login, settings, change theme to debwiki. see comments below ||

Debian website redesign proposal

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

TODO

  • 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?

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.

  • Could you make the logo bigger it's to small!

    • 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.

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.

Design

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.

Sites in progess moving to kallesdesign

Site / Subdomain

Status

preview

by

Comment

dsa.debian.org

done

http://dsa.debian.org/

zobel

Regular Rebuild

git.debian.org

WiP

http://git.deb.at/

Rhonda

No regular updates

lists.debian.org

WiP

http://lists.deb.at/

zobel

No regular updates, needs bigger code-rewrite

planet.debian.org

WiP

http://planet.deb.at/

zobel

Regular Cronjob

www.debian.org

WiP

http://www.deb.at/

Rhonda

No regular updates

wiki.debian.org

WiP

http://wiki.debian.org/

Login, settings, change theme to debwiki. see comments below

Developments

Wiki Theme

I'm looking at a new MoinMoin (wiki) theme that solves a few issues I had with the previous proposal. you can test it locally following these instructions.

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.