Questions and comments on website redesign
hello,
first sorry for my bad English.
I have read in the German "Linux Magazin" that there are a plan to
"modernize"/redesign the websites of the Debian project. They talked of
the design that can also be found in in the kiwi[1]. Because there was
no address or any other way to contact the people behind this redesign i
made some comments into this wiki page. but there was no reaction on it
so i have searched for a contact. I hope this ML is the right place for
this.
Sorry if what i ask was allready discussed. I have not found it. Maybe
links to the mails and pages that have the answers should be collected
in the wiki.
I found [2] is this still the way the web page is generated? I have also
read something of gettext(po) in this MLs topics. This is a very hackish
way, because wml have no idea of multi language and don't separate
markup(design) and data. So if this is true, i think before making a new
design it should be change to a template system for the page generation.
WML also mix the processing in the data/content and markup mix.
What is with the wiki? Is there planed to run a normal web page and the
wiki in parallel or will the static content moved to the wiki? In this
case a redesign is useless.
Now to KallesDesign.
Please at a contact to Kalle or give any other way to get contact to the
designers.
-Add a on-page navigation to the design.
-Add jump marks before lists of links.
-Make the mark-up more semantic(e.g. Use class names like important,
filename, programm and not bold, hidden, …).
-Before define the explicit design make a reset of the CSS attributes to
the elements(borders, colors, fonts, … for the elements and then
explicit CSS by reference to class and id). There are a lot of already
useable css reset style sheets.
-the top level of mark-up should look like:
<html>
<head>…</head>
<body>
<div id=”header”>...</div>
<div id=”content”>...</div>
<div id=”menu”>...</div>
<div id=”footer”>...</div>
</body></html>
and in the CSS use the header, content, menu and footer as starting
point of the reference(e.g. .header h1 …). This way the definitions
avoid conflicts of the content.
-Provide a CSS file for printing(replace or remove background colors and
images with e.g. borders, give the links URL <a
href=”debian.org”>debian</a> → debian(debian.org)
http://davidwalsh.name/optimize-your-links-for-print-using-css-show-url
, display: none for not useable parts in the printing, …)
-There are more and more 16:9 displays. Give them a other layout(menu to
the side and not on top)? But how to detect a wide screen display? Maybe
make the wide-screen the default?
-Avoid text in images that must be translated.(e.g. use image as
background of an elements with the text)
Some hints for general mark-up.
-Give all headers, tables and lists a id, so they can be direct accessed
per URL.
-Don't use deprecated elements and attributes.
-on the main page(debian.org) you have markup like <strong><a
...>...</...></strong> --><a class=”important”>...</a> and then use CSS
to style.
-avoid <br>. Use the correct mark-up(e.g. <ul>, <ol>, <p>, …). If you
don't like the bullets then change it or hide them with CSS.
-this long list of languages can be avoided. Use a form with select
<select name=”lang”><option value=”de”>Deutsch</option><option
value=”da”>dansk</option>...</select>. Use JavaScript(window.lokation,
the value of the changed selection and regex) to generate the right URL
and catch the other UAs with the web server(redirection).
[1] http://wiki.debian.org/KallesDesign
[2] http://www.debian.org/devel/website/desc
Reply to: