Differences between revisions 71 and 72
Revision 71 as of 2013-04-22 16:31:52
Size: 12355
Comment: no more test site for ftp-master new design
Revision 72 as of 2013-10-22 00:12:44
Size: 12463
Editor: BerndZeimetz
Comment: deb.li in KallesDesign
Deletions are marked like this. Additions are marked like this.
Line 141: Line 141:
|| http://deb.li || done || BerndZeimetz || might be usable for other flask apps after a bit of cleanup ||

Debian website redesign proposal openlogo-50.png

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

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.

      This was brougth up again on 612575.

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

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

Some ideas/comments -- ?SimonPaillard

  • http://www.deb.at/social_contract italic at the end of the page is/looks grey, that is strange not to use black color.

    • 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

  • http://www.debian.org/partners/ has no longer any style (vs http://web.archive.org/web/20080822055416/http://www.debian.org/partners/ )

    • Could you clarify please

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

  • DebianWebdesign: Describes design ideas and recommendations

  • Template: Template files to use for new sites (work in progress)

General

  • on-page navigation(like TOC in wiki pages; accessibility)
  • add jump marks before Link lists(accessibility)
  • make the HTML more semantic
  • redefine/reset the elements style in a mostly relative way(e.g. em for font size)
  • provide CSS for printing (hide/remove form fields and interaktive elements, default font-sie to 10 or 12 pt, remove backgroundcolor, remove/replace bic pictures, ...)
  • use on-page-sction container(header, main(content), footer)
  • 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.

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.