Read this post carefully, it contains a lot of information

The design project gives the designers more freedom then the content project. But this is not a theme contest, the challenge of the complete design of the full xoops.org website is too big for such a method. Instead, this is a community collaboration, where we first work our the requirements, and then start designing This will mean we'll have alternatives of course, several designers showing their options, and we'll put these to a vote. The result is what we make it

TASK: Give your thoughts on what the requirements of the XOOPS site should be, from a design perspective. Fixed width or full width? Image rich? Full CSS and sematic markup? XHTML 1.0 transitional or strict?

Equally important for the user experience is the way the wqebsite looks and handles. This part deal with designand is done in the theme subproject. The theme should allow the content structure to come to its full potential, and make the whole user experience a truly inspiring one. The website should show the power of XOOPS and sell the system to everyone who visits the site (well, almost everyone ).

This isn't just about a theme (meaning a theme.html and a css file), but concerns the complete look and feel of the website. Themes, templates, buttons, styles, everything. This makes it a big task. There will not be a contest where the XOOPS designers compete for the best theme and the community votes on which is best. No, this will be a community collaboration project, meaning that everyone who wants to take up a task is free to do so, and others are free to improve upon the results. This means that it should be clear who does what and when something can be expected. To make all this managable, we'll have a to-do list where people can add tasks and assign tasks to themselves. To make sure everyone is working on the same thing, we'll start with a wireframe design and a short list of requirements.

The design requirements
The whole site needs to be state-of-the-art, and that includes full standards compliance. This is:
- XHTML 1.0 transitional (if possible: strict)
- CSS 1.0 and 2.0
- Accessible (using accesskeys for main navigation for example)

This shouldn't be too hard, when we pool the designer resources There are a few other requirements tho:
- Semantic markup: by using the full power of CSS and XHTML, we can achieve *real* separation between content and design. This means no more:

but


The CSS is vitally important in this case. The theme.html should be universal: the changes should be in the css files (like csszengarden).

This also means that the designers must contemplate the necessary variations in presentation of the content, to get a truly united and complete look and feel thoughout the whole website. Also, the variations for each portal apply, of course: news on the product portal should be presented the same way but in a different variation (color scheme perhaps, or use of images) as the community portal.

The website should be focussed on usability, meaning easy to read, easy to look at, easy to navigate. It should also look professional, inspiring trust in the users. It should fit with the logo, of course.

This probably isn't the end of the requirements, but for the framework this is enough.

The design wireframe
The wireframe images are a first proposal on how to fit all the different elements into a page. They show the purpose of the elements, without giving any design orders. Designers have the freedom to show their ideas and discuss them. If decision needs to be made, those who participate will be consulted.

The design wireframe shows 6 types of navigation:
Start (logo and main portal nav): this is to start on any site, with these you also retrun to the startpage of a website.
Browse: Lists the sections that are available, on all pages. This provides quick access to a section homepage.
Browse this section: This is the context-aware navigation providing navigation only available in a specific section (like submit news or archives)
Promote: these parts are to promote the system or the service the section offers, but also to promote other parts of the website.
Identify: shows the user quickly where he or she is within the website.
Related content: shows quick and easy access to other content that is related to the current content.

Herko

I must say that I am not that fond of the different widths of the content blocks/footer block on the one hand and the full width page header on the other. That means on browsers with a higher screen resolution, they will see a T-shaped site.

It would not be my first choice, so I hope the freedom of design will be used many times .

Quote:

Also, after looking at the wireframe I'm inclined to agree with wtravel. IMHO, full-width with min-width defined (and the MSIE javascript trick I mentioned to you) would be better.

Best Regards,

James

Two questions, Herko:
- why xhtml 1.0 and NOT xhtml 1.1?
- you want us to make a theme, this is fine. But for which version? I mean, here you use 2.0.x, the latest version is 2.2.x .. AND skalpa is working on another new version. Since there are small (maybe not that small) changes from a 2.0.x theme to a 2.2.x theme it could be helpful if you give us some more techies hints.

banned,

XHTML 1.1's modularity features prevent it from being backward compatible with XHTML 1.0 and HTML. This means that the whole output architecture of the XOOPS site needs to be redefined and remade. From scratch, without any previous experience. XHTML 1.0 is the standard I think we should use.

As for version: We'll make the theme for XOOPS 2.0. This gives the 2.x development time to continue, fleshen out, stabalise, etc. We'll use the currently running system: XOOPS 2.0.13.2 to start with.

How do others look at the fixed vs full/dynamic width discussion? I'll see what I can dig up too

Herko

Ok, you explain which versions of XOOPS and XHTML you want for the new XOOPS official website's theme.
Another question, about your fireframe (see your attachment) is: Are you sure about that 3 colums style?
I say this because you can easily find in various part of the web (opensourcecms.com -> XOOPS section, if you want an example) that 'This tool feels like JAPHPNC (Just Another PHPNuke Clone)... Nothing that terribly innovative'. I don't want to be offensive - I use this 'tool' - but a 3 (classic nuke) column style like the odiern one can't change this point of view, in my opinion.
What do you think about an innovative 2+1 colum style?
Here an example of what I meanhttp://oswd.org/design/preview/id/2346
Of course this need some improvements (css, colours to match the new fancy logo, various - permodule - enhancements, etcetera), but I like to have the real *content* as the first visible thing in a website.
Third navigation column can be use as a 'static' search + main menù + user menù/login column when in the second one you can put module extra navigation/things.

banned,

Another thing that popped into my mind is why we should not use 3 different wireframes. One for each portal....

I can imagine the product portal requires less columns than the community portal and the development portal would perhaps rather work with a 2+1 layout?

In my opinion the look and feel of the 3 sites should be about the same, so that a visitor will recognize it is one and the same with a little twist in color and layout.

Any ideas on this?

I think it would be better to hold a theme contest, let the community come up with inovative solutions then the core team can select the top 3 or 5 and have those submitted to a vote

This is just my opinion but I think it would be the best way of doing it.
1- It directly involves the community.
2- Diferent designs and ideias would emerge.
3- It's a more open process that has proven sucessfull for other open source projects.

....my 2 cents....

Quote:
I'm not going for a classic 3 column style, if that is what you mean. It's just a proposal. But I think we have to consider the amount of content that we want to display on the site, without it being a library of navigation. I mean, look at the current site. It's a mess! But we get a lot of requests to put *more* information on the site, not *less*
That doesn't mean 3 colums style, of course. I made the wireframe (although I like fireframe a lot better!) to start the discussion, which it obviously has done The design itself isn't the standard 3 column style (contant pages have only 2 colums), but if we can make a *portal* with all the information we want and need to display in a *logical* way, I would much rather have a surprising and inspiring design then a classic one

Quote:
Here we have to be very careful. Just look at the very popular blog designs, there are some amazingly good ones out there. But, they serve a different kind of content. Look at portals like news sites, download sites, big portals like yahoo and download.com (an excellent design example, that last one!)... We're not a blog.

But again, if you can make an innovating design that inspires, I'm all for it

Herko

Quote:
Each site should be a recognisable part of the whole 'family'. It should be a Holy Trinity. If that can be achieved with 3 different designs, why not?

Quote:
The sameness should not come from a general look and feel. It should use a differnt color scheme, different positioning, imagry, but content should be displayed the same way all over.

Like that KuraFire website. Different look each time, but still the same. If we can add a more playful and dynamic positioning to it, that would be great

Herko