Hello,

Lately I changed the design of the api.kde.org website (part Frameworks only) [1].

To unify the other websites, I began to port the style of l10n [2].

I opened 2 review requests (that go together):
https://phabricator.kde.org/D1011
https://phabricator.kde.org/D1012

Could you please give me reviews on this? aacid and tosky helped me already a lot but think their style skills are not developed enough to say the final Yes or No and to lead me towards the good direction. So your input is very welcome!

The plan is to do the same for lxr.kde.org in the near future.

[1] http://api.kde.org/frameworks-api/frameworks5-apidocs/
[2] http://l10n.kde.org/ or http://i18n.kde.org/

Hi,
I'm a web developer too, how do I help or join the community?

Thanks

ochurlaud are you looking for feedback on the ui? or on the code?

If you are looking for feedback on the ui, could you maybe post some screens that show the differences?

fabianr wrote:ochurlaud are you looking for feedback on the ui? or on the code?

If you are looking for feedback on the ui, could you maybe post some screens that show the differences?

I'm looking for feedback on the UI.

The problem is that it renders pretty good on my small screen. But I want you to test it on different screens and so on...

You can still have a small hint from the difference by comparing http://api.kde.org/frameworks-api/frameworks5-apidocs/ with the i18n.kde.org (It's the same style). But I would really like you to test it on your own installations.

I don't think a lot of people have a local capacity installation, so let me provide some visual material

I have a resolution width of 1920px.
This one shows the plasma page from KDE's main site with the old "newlayout" named theme

This is also used on the l10n site. As you can see, a lot of screen space is wasted. And worse, at the l10n site there are tables which break the layout because they are too wide. Due to the amount of columns that is understandable. And 720px is really not that wide these days...

And this is the patch from ochurlaud

This uses a bit more screen space, but it has its drawbacks as well.
The menu sidebar wastes a lot of space without purpose. It does not look intentional. In the main content area there is too much text in one row. There is this golden rule which states that you should not use more than 15 words a line because it bores the user away. Here you can see twice as much in worst case.

My suggestion: use a max-width where you let the layout stop. Fluid is fine until a certain point only. Unless you offer a different layout for such screens (media queries to the rescue).

@neverendingo: Thank you for these constructive advice... It's exactly the kind I expected.

I'll come back when this will be done. (My computer is a 14'', so the space doesn't seem so wasted there.)

Some more questions:
Is the site supposed to work with a mobile browser / on a small (mobile) screen ? And if so, do you planing on a distinct mobile ui or do you want to have a responsive design?

For the desktop ui, you really should set a max width for the content. On larger monitors readability is getting bad, because of the line length. According to http://baymard.com/blog/line-length-readability the optimal line width is 50-60 characters, other artifices suggests up to 80 characters.
I would suggest a max-width on either body or #body_wrapper.

Ups didn't see neverendingo post. So I wrote pretty much the same

fabianr wrote:Ups didn't see neverendingo post. So I wrote pretty much the same

This have been done. I close the post