proposal for kdevelop.org new website design

[Sam S.]

On Sat, May 1, 2010 at 1:05 PM, Niko Sams <niko.sams at gmail.com> wrote:
> I uploaded a first WIP version here:
> http://preview3.vivid-planet.com/

Hey, it pretty much works... :-)

Of course, we're quite done yet.

After a little testing (with Firefox 3.6 and Konqueror 4.4), I
encountered the following bugs & issues (yes, I admit, some of them
are attributable to myself):

1) The header and footer bars don't extend to the full page width in
case the page is wider than the physical browser viewport width. This
is a problem when viewing pages with wide content such as large tables
(e.g. the "Website translation" page) on small screen resolutions.
Maybe the only way to fix this is to use a float-based approach
instead of a position:absolute based one for the column layout?

2) The footer bar does not stay at the bottom of the browser's page
area if the document content takes up too little vertical space (e.g.
look at the "Screenshots" page or another short page and maximize your
browser window). It's possible to make this work (I've seen it on
other web sites), but I don't know how exactly.

3) The left edge of the "quick access" boxes (right column) on the
front page does is not properly aligned with the left edge of the
search bar. In order to do so, you need to give those boxes a few
pixels of right margin, as seen in the mockup.

4) The top links ('Download', 'Screenshots', 'Features') seem to
"float out" of the header bar when increasing the font size using the
browser's font zoom. The problem is that they are anchored relative to
the top edge instead of the bottom edge of the header bar.

5) In Konqueror, the search bar has lots of incorrect bottom padding,
and the center and right column of the front page as well as the
"important content" boxes on the front page are not positioned
correctly vertically. (Maybe Konqueror doesn't like negative margins
or something?)

6) Using empty <img/> elements in the HTML markup for the category
icons was not such a good idea after all: Konqueror insists on drawing
a "broken image" border and emblem on each one. The fix is easy: just
replace them with <div></div> or <span></span> in the HTML, the CSS
doesn't care what kind of element it is.

7) A number of margins/paddings (e.g. around the content of the
left/right boxes) as well as text sizes (e.g. the text in the "what is
KDevelop" box and the "News" section on the front page) seem to be
slightly off the mark.
Maybe some of that were changes you made deliberately, but I suspect
at least some of it might be due to old CSS still floating around in
the CSS file and interfering with the new one. May I suggest radically
removing *all* CSS which is not part of the new design from that file?
That would also make it easier for me (and other people) to provide
further patches/suggestions.

Can you (Niko) take a look at those?
As soon as I have a working local test environment, I'll start helping
out with actual CSS code again.

Btw, I've also uploaded a proper version of the "small screenshot"
image to be shown on the front page, as well as an augmented version
of the title banner/logo image which you can use until we have a
proper one. (What is the status on that, anyways?)

Cheers,

Sam