New site design features

The site is about to let the users propose new designs that can provide different presentation and usability features.

How much of the site design the users will be able to control? That depends on the demand from the users, as well the viability of giving all the control to change what the users wish.

If you would like to change aspects of the site presentation and usability features, what aspects would you like to change?

Please try to be clear, objective, and realistic. For instance, do not ask to remove the site advertising, as it is necessary to keep the site financially viable.

Also read first the site FAQ - Frequently Asked Questions - to understand why certain site features are the way they are.

phpclasses.org/faq/

Thanks in advance for all the suggestions.

I think the best solution possible would be to recode the underlying html to be compliant code. With compliant HTML in place (even 4.01!), authors could create their own css style sheets to control the design.

As an example, take a look at http://csszengarden.com/ , and click a few of the links on the right. There is *one* html file, and all of the different looks and designs there are done with just css and image files. You don't even have to host them - people can use their own. Take a look at http://userstyles.org/ for examples of user created style sheets that anyone can use. There is even an "all black" version of phpclasses there: http://userstyles.org/styles/5385 (!).

With html valid code, your site will be accessible, will get better search engine crawling, and be more friendly to users.

Authors could even come up with mobile-compatible designs so you could browse phpclasses from a sidekick or iPhone.

Any good house building depends on a strong foundation. Start with html compliant code, and let css do the rest! (It could even save you bandwidth instead of costing you extra!)

Thanks Patrick.

Trying to fix any validation issues is a good start and it will not take much.

My intention is to let users redefine the HTML of header and footer sections inside the body section using some templates of their own. Given that, any HTML that may have not been valid will no longer be a problem.

What may be a problem is the inner HTML of all the types of site pages. Most of that HTML is generated by programming. So, certain presentation aspects are controlled by programming variables, like for instance the colors used in listings or colors used when the use drags the mouse over them.

What I need to have a good idea is what kind of control Web designers would like to have to change those pages inner HTML?

Maybe I can expose the HTML templates used to control the presentation of the different types of programming controls that generate different parts of those pages. But that is a lot of programming controls and a lot of templates.

So, I need to have a good idea of what you guys would like to control, especially things that is not just a matter of changing of CSS style definitions, like for instance the position of navigation menu (i.e. horizontal, left, right, etc..). What do you think?

"Most of that HTML is generated by programming. So, certain presentation aspects are controlled by programming variables, like for instance the colors used in listings or colors used when the use drags the mouse over them."

I can understand "some" presentation aspects being controlled by code, like whether to use a 2 or 4 column table based on the total number of search results or whether or not to display pagination links if there's more than one page BUT a:hover and table background colors ARE NOT SOMETHING THAT SHOULD BE DEFINED IN THE SERVER SIDE CODE. SIMPLE CSS can handle those things just fine. The only thing you might need to put in the code regarding color is class names (ie: even/odd for alternating table rows)

I've taken this forum page and stripped out 90% of the markup that I felt wasn't necessary.

pastie.org/248079

Old: 24,815 characters 439 lines
New: 14,151 characters 339 lines (lots of comments)

Your tables make my head asplode.... and your use of [tt] tag... and lack of closing [/a] and tons of unnecessary attributes on every kind of tag.

Sorry, maybe I was not very clear. Let me explain.

This site was started in 1999. Then CSS is not consistently supported by all browsers. Therefore, most presentation details were not defined in CSS, but rather in application variables that were used to generate the pages.

Some components are responsible for generating HTML common purposes like listing tables or forms. Changing those components is easy and it will not take much time.

However, a great part of the site code still uses application variables to specific presentation aspects. Refactoring that code is possible but it will take much time. It was not done before because of the time it takes.

Despite I will refactor that code soon or later, I would rather focus in giving people that want to propose a new sites design a means to design and try new presentation templates with layout possibilities that are beyond the current CSS standards, like for instance arbitrary page element positioning.

What I meant before is that I need to know as much anticipation as possible, what aspects of the site design people would like to control besides things that can be done tweaking a CSS stylesheet. That is the kind of feedback that I would like to hear now.

Other than that, rest assured that moving presentation details to a CSS stylesheet will be done as time permits. Actually that was started before, but mostly for new presentation components like the tabbed navigation bars.

Here are the sections of the site that I either use or see and most important

Site home page
users personal home page
user profile management options
contribute (step by step wizard)
user's classes
class rating page
Browsing all classes (by category or author)
recently added/updated classes
top 10 charts
newsletter archives
help/faq
(omitted forums since I dont really use them)

I think if you started with a good overall visual concept of what the site could look like in the future you'd get a very solid color scheme and page header/footer as a starting place.

Next step after that would be to spend time designing the content areas itself and just give us something by default that looks "not bad" and is made with minimal, fast loading markup.

From there the CSS-savvy users can start having their fun and the people who want to do more....actually I'm a bit confused by what you said about that. You're going to let people upload their own code to modify functionality? Or are you just going to give them a lot of options?

Personally the only thing I desire is more attractive/easier to navigate default appearances on pages with very clean, lightweight markup. From there I can restyle if I wanted and even inject some behaviour with greasemonkey for things like making tables sortable or something. From there, if someones new style or greasemonkey script becomes very popular among users it would make sense to officially adopt the style and implement some of the new behaviour natively and add new features to complement the new behaviour.

A great redesign that I saw recently was the new deviantart.com You should get an account there and check it out. I and other people spent months trying to find ways to give ourselves the most useful features that paying members had. We tried everything. My attempts involved greasemonkey, curl, dapper, yahoo pipes, simplexml, domdocument, reverse-engineering swf files and lots of trial and error just to see thumbnails of the newest images added to the portfolios of artists I had on my Watch List. And the ability to group by artist, sort by title, artist, date, etc in ascending/descending order... It was a lot of work. They launched the new version recently and it had ALL THOSE FEATURES and LOTS MORE and everything was more user-friendly than any of the hacked around stuff I had been working on.

Could you give an example of a "layout possibilities that are beyond the current CSS standards"

Ok, I have taken some time to fix most, if not all, HTML validation issues.

When I said that people may want to have a certain layout that is beyhond the CSS possibilities, I mean that just switching the CSS definitions will not be enough.

For instance, some people want to switch the order of the sections of the packages pages. Last time I checked CSS 2.1, unless I am missing some less obvious possibilities, there seemed to be no way switch order of sections just tweaking the definition of CSS styles. Maybe it can be done with CSS 3, but we cannot relay on that.

Anyway, since HTML needs to be changed to achieve arbitrary layouts, my intention is to provide means to edit the HTML templates of certain site page sections, like headers, footers and maybe something else.

Thin, now, that the HTML validity issues are mostly fixed, what else do you need me to change to try you stuff with Greasemonkey or what else you want to use?

I suppose you want me to change some structures into <div> and <span> with specific ID values, right? Just let me know what do you have in mind?

Well, what I had in mind was
#1 Making the site load as fast as possible. Trust me, cutting down all the table related tags will help a bit to lighten your page load. As well as make styling and scripting easier for people who might want to enhance something using javascript or css userstyles.

#2 Redesign the default look/feel of the site to be... not so unattractive and easier to navigate. I think you should consider hiring or at least requesting help from a professional web UI designer. Who knows, they might be able to help you generate more advertisement revenue by placing the right advert types in just the right spot to increase their effectiveness.


infinite.mirrors.phpclasses.org/bro ...
did you mean this page?
You could show that page to any designer and ask for suggesions to improve it and probably anything they suggest would be a great improvement in both usability and aesthetics.

And when you say "switch order" do you mean to rearrange alphabetically, ascending/descending, by most packages in a category...etc? If that's what you mean then yes you'd have to implement such features in your server side code and present the means for users to make use of those options. But I don't see the benefit of allowing people to upload custom html and code. It would be nice to have a customizable content & easy access links system. But I don't see that requiring the user to upload custom code. I see it more like how I can personalize my page on news.google.com or igoogle http://www.google.com/ig

On igoogle I have pretty good flexibility over what content I want and how I want it arranged and then I can add my own css to tweak the visual style of the site's design. But most importantly, the default appearance and content already looks and works good.

To compare your site to another large site lets loo at moddb http://www.moddb.com/
I'm honestly not a fan of this layout but I think it's better than what you have at the moment.

Unlike phpclasses home page where I get lots of links and a few 1 sentence descriptions, on moddb I don't have to click to see the latest articles or latest downloads. I immediately get interesting content. But on phpclasses I have to click and wait before I can see the latest book reviews or the most recent job posts or the most downloaded classes.

Let's imagine moddb is actually phpclasses. How can we fit phpclasses into this kind of layout.
Latest articles becomes your latest book reviews
Poll becomes an upcoming php user group meeting calendar
Forum Discussion is the most recent forum posts (not much of a change)
Popular Mods becomes Popular Classes
Popular Games becomes most recent job posts
Latest Downloads becomes most recently added/updated classes


See where I'm going with this. Having a more attractive and immediately useful page layout is a nice thing for your visitors.

Their top navigation is a lot clearer, less cluttered, more "clickable" than your top navigation. (and imagine the rocket is shaped like an elephant!)

Without any help from the moddb team I could re-skin the visual style of this page if I wanted to. I could even see myself doing some ajax for changing the "continue reading"/"more downloads" links at the bottom of the 2 larger areas into page numbers that dynamically update the content area instead of taking me to another page. But that particular feature would be easier if the moddb people did it themselves on their end.

moddb.com/downloads?sort=id-asc
again, I don't really like this layout that much but I think this is a decent alternative to http://infinite.mirrors.phpclasses.org/browse/class/91.html
But when you really think about it, both of those links are very very similar in terms of how and what they present. It's just that the moddb one is more pleasing to look at.

Because they have a default appearance that is good enough and provides decent functionality it's easier for me to imagine how I'd like to modify it with my own css for my own visual pleasure and I can happily use their search form (it's pretty fast!) until some day I may realize a limitation of their search feature that I could request they add.

"my intention is to provide means to edit the HTML templates of certain site page sections, like headers, footers and maybe something else. like headers, footers "
If the default html is clean & flexible enough I can change the visuals of the header/footer if I wanted something more visually pleasing to my eye. But for added functionality and usability I'd probably want to add some special links, for that you'd only really need to build some sort of editable navigation system for us instead of storing thousands and thousands of users custom html files.

There seems to be a few misunderstandings here. Let me clarify.


The PHPClasses site is not going to change the default look and feel without the approval of the majority of the users. That is why there will be a contest.

If I intended to change the default look and feel myself or pay for somebody else to do it, there would not be much point in doing the contest. I would still have the problem of not having guarantee that the look and feel change would please more users than it would displease.

The idea of the contest is to give the users the power to propose a redesign and/or decide which redesign proposal pleases them better.

This way, instead of paying somebody to do it, the site will pay a money prize to the winner, apart from other symbolic prizes.


The tables in the site HTML are not causing any slowdown to the page loading. What causes slowdown is mostly Javascript that is fetched from remote servers of ad server companies like TribalFusion, Google AdSense, etc..

The site actually serves the pages quite fast because it uses HTTP compression. It reduces page load 5 times over uncompressed pages. It uses highly optimized caching. YSlow gives it the grade B when loading a page without advertising. Actually it would get grade A if we could afford paying a CDN (Content Delivery Network) which is something so expensive that very few sites can afford.

Unfortunately the site cannot do without of advertising. That is part of the reason of why users should consider upgrading to a premium subscription. Among other benefits, you access the site without advertising. It is way much faster. If you doubt it, you may want to try the site as a premium site subscriber:

phpclasses.org/premium/trial/


When I mentioned rearranging the order of package pages, I was talking about pages like this:

phpclasses.org/browse/package/1.htm ...

This is the kind of page that gets most accesses. Most users land in pages like this when they arrive in the site because that is mostly where search engines send them to.

That kind of page has many types of sections. Some sections seem more relevant to some users than others. Some users would prefer seeing the pages in a different order.


When I mentioned customizing the page templates, I was not talking about PHP code that generates the page HTML, but rather the HTML that formats the page output. That would allow designers to fine tune the control over the site pages layout in conjunction with their own CSS definitions.


The site has many types of pages. Allowing to redesign the layout of all possible pages is not quite viable. Therefore I will focus on templates that affect more the presentation of most viewed pages.

Common page headers and footers are the most obvious candidates to allow the users to customize their templates. Still there is the issue of page elements generated by programming components based on dynamic parameters. Designers will have limited control over these.

For instance, every page has a navigation menu made of tabs. Having a navigation menu is fine, but some designers probably prefer to have it on the side, rather than on the top.

Having high-level options to switch that is probably more user friendly that making the designers to configure many small templates and CSS styles, unless those options do not provide what they would like. Maybe a drag and drop interface is what most users appreciate more to control presentation options.

That is one question. What each designer would like to control about page elements that are generated by programming components? That is the question that started this thread.

There are other common types of elements generated by programming, like form headers and footers, and tabular listings of all kinds.

Other than that, some users may want to customize the site home page to show widgets of their preference like in iGoogle, My Yahoo, etc.. But still there must be a default home page layout, and also a default package pages layout, and so on.

Having a drag and drop user interface to customize such pages is what I mentioned before. That would be easier to enforce certain page elements that must be present in specific positions, like for instance advertising.

So for now what I intend to do is to work on the site templates editor application. Initially it will allow editing page header and footer templates, as well general CSS definitions.

Then I can move on to provide an editor to control the presentation of certain types of pages, like the home page, package pages and may be other important pages that I am not sure which would be.

Anyway, the question is, would this level of control be sufficient to allow designers to propose a new design for the site? If this is not yet it, what else you would like to control?