Redesign of the www.rockbox.org front page

[mcuelenaere]

Update
Say good-bay to grey top with image based menu text and welcome blue with normal text.
Rss feed icons are now highlighted after mouse is over them.
Deleted menu on bottom bar.
Font sizes are in pixels.

@BdN3504: I'm most forget to mention it. Sorry and thanks for new images.

This is a really minor nitpick, but the height of .announcements should be a bit higher so those (1) (2) (3) (4) (5) buttons are displayed fully (232px seems to work); otherwise they look cutoff at the bottom.

[AlexP]

This is really looking nice now

[GodEater]

Okay, when can we put it live ?

(Bearing in mind I still think the wiki pages need to lose the blue bit at the bottom)

[macku]

Okay, when can we put it live ?

My proposition is to create temp ex. new.rockbox.org subdomain while implementing new layout with copy of current webroot folder.
btw: Who is responsible for the web page?

[GodEater]

* GodEater tugs at Zagor's sleeve

[AlexP]

The current website is in svn if you want it for content.  To make it live, do the replacement, then Zagor is the man to talk to as GodEator says

[macku]

OK, thanks for info. I will contact him soon.

[DancemasterGlenn]

Back to the topic of subversion... in the final version of the new page, the links at the bottom will be back, yes? The "last four weeks"/"twelve months"/"since 3.0"? I find I use those a lot. It might also be good to make the title in the subversion dropdown (on the top left after it rolls out) a clickable link to go to an expanded version of this list (similar to how it works now). This would be helpful since the proposed dropdown, while gorgeous, won't be leaving room to view many entries at a time. Actually, since this is the case, which behavior would be better?

1) method proposed above, similar to now: a certain number of changes are viewed in the dropdown, the title "subversion" can be clicked to go to a page of expanded subversion logs
2) a method could also be implemented for the dropdown that adds "back"/"next" buttons at the bottom, so the dropdown could display a fixed number of changes at a time, but could be navigated through easily as a subpage without having to expand any further

Hope either of those are helpful suggestions. 2 actually seems like it would be more elegant, since an extra page wouldn't be needed. If my wording was at all confusing, I can clarify better.

[j8048188]

when I click on the manufacturer's name, the picture stays on the last one chosen.  would it be possible to have the pic change to the first one on the new manufacturer's row?

It is possible but I don't think this is necessary. Why do load image player that you didn't chosen yet?

When you click on a manufacturer and not a player, you could load the manufacturer's logo.  I am not sure how licensing would be on this, though.

[linuxstb]

This style of site seems to have gained momentum, but I need to say that I don't like various aspects of it - overall I think it's trying to be too clever, and we should try to keep it simple.

Firstly, the drop-down menus at the top.  The current left menu on the site (which easily fits into all Rockbox sites - the main website, the wiki, the forums and the themes site) fits nicely on most screens, and gives users a list of all the main sections of the site without needing to click.

But this is a pet-hate of mine - websites are not desktop applications, so don't need a menu bar across the top...

Secondly, the list of targets.  I find that because the "menu" across the top of the page does things when I hover, I expect the target menus to do the same.  It feels very inconsistent for those two elements to behave so differently.

Also, the terms "iPod 1G", "iPod 2G" etc have proved in the past to be the cause of confusion - people commonly read "2G" to mean "2GB".  That's why the site currently avoids those abbreviations, and use the fuller "1st gen" etc terms.  "iPod Nano 1G" is especially confusing.

It also seems that we will soon run out of space as we support more and more targets from different manufacturers (or if we give the models we do support clearer names).

I also don't like the "noscript" version of that target list - a scrollbar in the middle of a page?

Please don't get me wrong, I'm not saying we should keep the existing layout - there are many good things about the proposal.  It just doesn't feel as usable as the existing site.

[Zagor]

This style of site seems to have gained momentum, but I need to say that I don't like various aspects of it - overall I think it's trying to be too clever, and we should try to keep it simple.

I agree with several of your points. But I think most of these issues can be adjusted and tested on the actual site rather than in these sketches.

My plan is to get it up and running, and then keep adjusting it. Commit early, commit often. :-)

[pixelma]

Some of my thoughts:

Pictures:

@BdN3504: Nice work. Could you try to add small black/dark grey glow to players?

Is the origin of the pictures known? I just think that licensing should be clear before using them.
Was the idea to either show the default WPS or maybe the Rockbox boot splash on the players (BdN3504's don't)? And the OndioFM picture should also use a different display "background" colour than the Recorder ones because stock Ondios don't have a backlight at all (which is why I used a darker colour in the player's SVG for the manual and small pictures on the download pages). Backlight modded Ondios can use EL foils as backlight which is usually blueish (as shown in the commonly used Archos picture which is probably even the basis of this work), and in a newer sim and on the OndioBacklight wiki.
I see a danger that someone visiting the page the first time could think that Rockbox is only for the player he or she finds there at first, so I'd prefer if it was either cycling automatically or start with nothing

Players list:
Clickable - I would find it nicer (because quicker) if it could react on mouse over, no clicks. As linuxstb said it would also be more consistent. That also has a downside though that you probably load more data (more pictures) than you would when only clicking on certain things.
Some of the items could be combined, I think (e.g. the Iaudio "L" models probably don't need an extra picture, as they are the same as the non-L ones with a bigger battery, hence only slightly thicker).
I agree with bluebrother about the animation stuff.

Top bar menu:
Blends with browser chrome OK, things changed since yesterday.
I don't understand the bottom menu (it's redundant, as Zagor said).

Wiki:
I had the same points as already mentioned - I don't think it needs the "blob" at the bottom and could use some blue to not break too much with the main page (see my suggestion).

All in all:
The proposals look nice at first glance but to me they are a bit too busy with the four coloured zones and strong cuts between them - and all the gradients, shadows, differently looking links and menus. Of course, zones can help navigation if they are used for different things and one can quickly recognise that, otherwise they can easily make a page fall apart. I admit it's hard to find the right balance between them and don't have another suggestion at the moment see attachment.

It's a pity that the layout is "optimised" for a certain window width. Unfortunately it's a general trend (and a pet-hate of mine) but I think it really shouldn't be necessary that you already have to scroll horizontally at a window width below 980 pixels. Fixing the layout for smaller width will leave too much empty space in larger windows, so it would be really really great if it was at least a bit nicer to different resolutions... I know it's not easy to make it look good and keep it flexible but it is possible, the wikipedia front page is a good example in my eyes.

To me the 3 columns paragraph crams too much into one place, somehow leading to my impression that it is too small for the info it bears (sorry can't put it any better at the moment). Maybe 2, a little wider, columns would be enough which could also be a bit more flexible?

I also had the same thought about dropdown menus as linuxstb...

P.S. Attached are 2 quick mockups I did yesterday how I'd imagine a bit calmer: get rid of a few gradients and don't divide so hard between the zones, maybe there could be one gradient between the menu bar and the rest but that would have taken more time I just didn't want to invest for the mock-up. Also to be seen, yesterday's suggestion of mine what to do with the menu bar - change places with the orange part. You can also see that the sponsors links didn't show up for me, using Adblock Plus, after you said it was fixed (taken from the "Todo done" link). The wiki mock-up - without the "blob" and with the same colour scheme as the main page and add a small part of the orange line at the top (probably not needed with the new blue bar - I really like it better that the items are now text not graphics anymore).

[j8048188]

here is a site for a perfectly proportioned width every time:

it also works with IE without turning on "quirk mode"

http://matthewjamestaylor.com/blog/holy-grail-liquid-layout-no-quirks-mode

EDIT: He says that you can use his code for free, so I hope licensing will not be an issue.

EDIT 2: here are some other code examples by him:

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-ems.htm

[macku]

I send all layout files to Zagor and he will start slowly implementing it.
Creating flexible layout is *really* hard and I don't have any good experience with it. But if someone want to do it contact me or better Zagor.

My idea about missing players images.
How about another "art request" topic to create them?
Here is a background and here you can check missing players. Put player on background and post image inside topic. Remember to add small glow to player. And write inside topic with player image you want create (in case someone also want do it).
And Toshiba X is now S model so it is *missing*

PS: Like GodEater wrote:

A web page design is not going to be 100% perfect for everyone

[BdN3504]

Is the origin of the pictures known? I just think that licensing should be clear before using them.
Was the idea to either show the default WPS or maybe the Rockbox boot splash on the players (BdN3504's don't)? And the OndioFM picture should also use a different display "background" colour than the Recorder ones because stock Ondios don't have a backlight at all (which is why I used a darker colour in the player's SVG for the manual and small pictures on the download pages)[...]

wrong screens for the ondio fm are used
as in this section of the manual then.

concerning the copyright, i already asked:

i don't know if it's ok to depict an actual picture of a rockboxed player copyrightwise[...]

and got this answer:

BdN3504: Depicting products on a web page is perfectly legal.

as for the different screens: i just looked at the pictures that have already been added and didn't see any consistency as to what was displayed. so i thought, i'd pick a screenshot from a random wps in the gallery, because the screens are easily accessible there and published under gpl. i tried to find screens in the manual, but i didn't come across them too easily so i went with a wps that pleased my eye from the gallery. if i think about it, it's probably best to take the default wps (meaning cabbie, not the ugly one), as that's what most people coming to the site to download rb will be seeing, when they first turn on their rockboxed device. i don't think showing the splash screen will give the users an impression of what their player actually looks after being rockboxed.