Skip to main content
Welcome guest. | Register | Login | Post

front page redesign

12 replies [Last post]
a thing's picture
Joined: 2005-12-20

The unordered list on the front page is kind of messy. I think it should be something like the Switch to Linux index. The graphics would be Tux, a Windows logo with a red circle with a line through it, and an arrow pointing from Tux to Windows. I'd do the graphics right now but I'm not sure how the backgrounds were done on the Switch to Linux index.

Bjwebb's picture
Joined: 2007-03-01
Yes, great idea. People

Yes, great idea. People always understand things easier with pictures - like they say, a pciture says a thousand words.

ariadacapo's picture
Joined: 2006-07-13
Yes good idea. I was

Yes good idea. I was waiting to finish with the Switch to Linux page to improve the homepage.
I also want to put some round corners and a shade behind the main "box" of the site, both extremely small and almost unnoticeable.

I emailed you the source files of the StL page - sorry for being late on this. Please make sure the pictures are not too aggressive on the eye - there is very little (hugely important) text on the homepage and it's important the attention is not "stolen" by the graphics.

I'd personally avoid Tux. Can we not use the penguin head from the StL page?

guyjohnston's picture
Joined: 2007-03-05

Yep, I agree that avoiding Tux is a good idea.

ariadacapo's picture
Joined: 2006-07-13
refreshing the GGL style

Right. I have worked the last few days on this refresh and have come to something that works.
As planned, the changes are small enough that most people wouldn't notice. All I wanted was a slightly more "classy" look on the same recipe.

- Shade
- Round corners
- Very very slightly darker background for main box (almost not visible consciously)
- New unordered list on homepage, with pictures
- Slightly improved homepage graphic
- Smaller translation tabs, non-active tabs are lighter
- Links in footer aren't underlined anymore.

- Lots of new files added (8 small pictures for shade, IE-specific stylesheet, 3 additional pics for homepage)
- Some code must be added to each page
- Pages are longer (esp. visible on homepage)
- Order of translations tabs is inversed (because they can't be floated) so all sites have to be upgraded at once

- Nice look (so I hope) without being intrusive
- Small weight (1.7kB graphics one-time download, + 500B each page)
- Still looks like original site if images can't be loaded
- Quite semantic (shade works with CSS)

Known bugs
- Translation tabs don't scale too well when font size is increased
- Bottom round corners appear out of place when font size is varied under IE
- Updated graphic (the "suspended windows") has wrong background color and could be re-shaped slightly

I consider this to be a late draft. It works almost fine and I still need to tune it (validate a few things, clear up CSS files, etc), but it won't change much now. On the temporary directory, only the main page and the Linux page work.
I could only test it under Firefox2.0/Ubuntu and IE6/Wine/Ubuntu. I expect to be able to use IE6/WinXP and IE7/WinXP towards the end of the week.

Any bug you can find, any remark you may have, is appreciated. Cheers!


ariadacapo's picture
Joined: 2006-07-13
Another go is

Another go is ready.

- new small picture for "switch to linux" link, minor style changes
- round corners inside the page, with non-valid -moz-border-radius CSS argument
- Slightly improved top banner (see "Linux" page)
- Mostly solved IE display issues, though still not perfect at high font sizes
- cleaned-up and validated HTML & CSS

I consider this to be quite good and if all goes well with other browsers I will apply the changes to the sites very soon.

Gustavo's picture
Joined: 2006-09-11
What about this

What about this ?

- Applications img resized to 183x185.
- Modified home.css and index.htm

ariadacapo's picture
Joined: 2006-07-13
It looks very good and

It looks very good and makes much more sense.

After days and days of trying and re-working the HTML and CSS, I cannot find a satisfactory way to position the translation tabs. It always works somewhere but not all GNU/Linux Fx2 + Win Fx2 + Win Fx1.5 + Win IE6 + Win IE7.
I had an idea for a different design with tabs separated from the body, which should not give me such positioning problems.
I expect the new layout to be good for release towards the end of this week. I'll post "betas" online as I make progress.


ariadacapo's picture
Joined: 2006-07-13
third try...

Here we go:
(only the "Linux" page is online)

- Tabs now "suspended from above", this should work much better on all browsers I hope.
- Layout changed according to Gustavo's input (much better)
- Removed footer entirely on homepage. Less clutter now.
- Improved main menu's look and feel (try hovering)

The code for the tabs is certainly less elegant than before but at least it should work without problem everywhere. It works under Ff2 and IE6 under GNU/Linux for me; I hope to test it tomorrow under Win Ff2, Win Ff1.5 and Win IE6.

You can help by visiting the page, changing the browser width, changing character size, and emailing a printscreen of any quirky behavior you find.


Gustavo's picture
Joined: 2006-09-11
It has a bug under

It had a bug under konqueror, which I managed to fix by adding this to the main css:

.accessibility a {
		display: none;


ariadacapo's picture
Joined: 2006-07-13

Thanks for that, much better than my poor hack.

Beta 4:


- CSS improved thanks to Gustavo, bug fixed in Konqueror
- IE7-specific CSS added

Everything now works with most browsers under GNU/Linux: Firefox 2, Konqueror, Wine/IE6, Wine/IE7.
All I'm waiting for is a chance to try it on a Windows computer. If it works fine I'm porting the modifications straight away. Any help is appreciated - simply pop in with any Windows computer you can find and take a screenshot if something looks strange.


ariadacapo's picture
Joined: 2006-07-13
The new look is online!
libervisco's picture
Joined: 2006-05-04
Subtle but awesome! Great

Subtle but awesome! Great work guys. Smiling

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.