cross posted to gentoo-dev and www-redesign mailing list.
First of all, thank you everyone for all the feedback. Your input is important and greatly appreciated.
I should have said that the last update was not complete as far as design was concerned. I was mainly looking for accessibility and rendering issues on as many browsers/OS’s as possible. I got that feedback and fixed the issues that came up. I also implemented the rest of the design so it should now be more visually appealing and better match Aarons reference design. I took into consideration all of the suggestions that were submitted and now ask for additional feedback to ensure that my changes didn’t introduce any additional rendering/accessibility bugs and that the design is acceptable to as many people as possible.
If there are no more outstanding issues reported I will submit this current layout for approval.
Questions to some of the answers and suggestions that were brought up:
The artwork is all part of the winning design. Any issues with the infinity symbol should have been addressed a year ago.
I am not the designer of this site. I am merely implementing it in the XSL backend. I am the only person working on this and I am the designated official developer, the project lead is Swift and his role is to offer advice, enforce design policy and generally oversee my actions and help me with internal gentoo policies and procedures. The project is actually owned by Infra and they (they == infra leads which is klieber and ramereth as far as I know), along with Swift, have the final say on everything. I welcome any and all patches that you are willing to submit. All submissions will be evaluated on a case by case basis.
Aarons reference design at www.aaronshi.com/gentoo/ is exactly that: A reference. In it’s current form it differs from his original submission which was the winning entry and should not be considered as anything else but a reference. I tried to stick to that design as much as possible but some things were simply not possible.
Aarons design uses a smaller default font, that is not acceptable from an accessibility POV. The main font is at 1em and all cursory fonts multipliers of 1em. The main font will remain at 1em which is the standard for the accessibility guidelines. If you don’t like the standard font size every single graphical browser offers a font zoom capability, use it.
Aarons use of a smaller font allows more information to appear on the page. This is an illusion of size. If you have your browser window set to 800×600 or smaller the jumpads disappear and the page has to be scrolled to see them no matter how big/small the font is. If you enlarge the font on Aarons reference to the standard 1em the jumppads disappear and the page must be scrolled anyway so this point is moot.
Purple background with yellow text is hideous. Not going to happen.
The “Locator” would require rewrites of not only the XSL but also the actual xml files and is outside the scope of this project. Touching any xml content file is strictly off limits, all existing xml should be backwards compatible with the new design. This point is not debatable. Use of a database would make this task easier while allowing backwards compatibility but it will have to wait for a future update to the site to be implemented.
I actually implemented a search that used google much like the example that was posted here. The search was discussed at length with the project lead and it was decided that using a third party search engine such as google was unacceptable. As Lance said, this will have to be coordinated with infra at a later date. Gentoo is a not-for-profit but, unfortunetly, it is the wrong kind of non-profit so Google will not sponsor us.
The contents of the uppermost menu are to sites that are outside the www.gentoo.org website. They will stay in this location. They are green to contrast with the purple background to ensure that colorblind and other visually impaired people can see it. Green is the compliment to purple so I am baffled that people think the combination is not attractive. In Aarons preview the light purple color of these links is not visible to color blind individuals thus it is unacceptable. This color will not change.
The grey menu should contain links that would be used in order of a new user and that highlight the main parts of the site. I did this quickly to have something there to look at. I didn’t notice any good suggestions to replace what is there. If you have suggestions please send them. The same goes for the wording in the purple boxes, if you don’t like what they say submit a suggestion for each. Suggestions of “I don’t like it you should change it” that don’t include a clearly worded replacement will be ignored. The donate box is here to stay until the search function is implemented.
Graphics should be implemented in the CSS as much as possible to aid future maintenance (the xsl templates are huge and not easy to maintain. The least amount of editing of these files as possible is one of the major goals). In text browsers that can handle graphics but don’t support CSS the upper left logo (which is a background image so it can be put in the css) will not appear but will leave space for the missing background image. I can’t figure out a way around this. If you have a suggestion I would appreciate it.
Horizontal scrolling of the entire page when a code listing is wider than the page only happens in IE. All other browsers understand the CSS scroll:auto tag and will only scroll the actual code listing. The same applies to inline images within the page contents. IE is broken but I did everything I could to make it behave the same as other browsers. This is one issue that IE is simply broken on and there is nothing I can do to fix that. Javascript fixes are available but the use of Javascript is strictly forbidden. Javascript is not debatable.
Redundant links to important pages such as the Handbook and Documention only serve to make them easier for a user to locate. They will remain for the time being unless someone can come up with a good reason to remove them other than “I don’t like it”.
The
tags in the Handbook navigation are contained within the handbook xsl template. Touching that file is outside my scope.
The redesign test site is not a full mirror. I added the security index page so we could see what it looks like.
The site is not XHTML it is HTML-4.01 Transitional and it passes the w3c validator. Manually overriding HTML-4.01 Transitional in the w3c validator is not required and any errors that it reports if you do this will not be addressed. If you can come up with a good technical reason why doing this would benefit anyone I will address it.
Navigation and useability studies are beyond my scope. These issues should have been addressed a year ago.
The left hand navigation column is dead. No amount of beating this dead horse will resurrect it. The jumppads will remain at the bottom and appear on all non-documentation pages so that those links are accessible as much as possible.
base href is not needed for this site to function properly. If you want to save the page locally you are free to do so and add the tag yourself for your local copy.
The CSS is only 12k. Why would shaving 4k off of it to make it 8k make a difference to anyone?
The site is dynamically generated with XSL/XML all the pages end in .xml. There are no plans to change it to .xhtml now or in the future.
The image on the about page is within the content xml file and not within the XSL template. Touching about.xml or any other xml content file is outside my scope.
GLEP 10 is outside my scope.
The jumppads have alt text. They always have. They pop up as tool tips on every browser I have tested. If they aren’t for you please submit your browser version and OS and I will look into it.
The blue text that represents code was darkened for accessibility issues. It will not change.
In Aarons preview the search box and the ads column are placed with a Position:absolute and has it’s size set. At resolutions below 800×600 this makes the ads overlap the content and the search box overlap the box to the left on every browser. When content is scarce the ads overlap the footer. This is not fixable given the current state of css support in the various browsers. After many many many long hours of research and experimentation I decided that we would have to resort to a table for the ads column and include the search (now donate) box within the div that contains the four purple boxes with a % width to fix this issue. I lowered the % width of the donate box and increased the others to bring it more inline with Aarons original design. It’s not perfect but it’s close enough.
Accessibilty guidelines say that all text links should be underlined. I made an exception for the grey menu bar for aesthetic purposes but will not make an exception for any other links.
gentoo.org and all domains owned by the Gentoo Foundation should render correctly in all browsers that are still in general use. IE5 on the mac is still a valid browser and will be supported as much as possible.
Summary and authors are important and should be prominently displayed before the actual content. On the current design they are on the right in a tiny column that wraps every two words. This is unacceptable. These items will stay at the top for now unless someone can come up with a place to put them that makes sense, looks good, allows the summary to be seen on top and not below the content (because a summary should be above the content otherwise why have a summary if you have to scroll past the content to see it?). The handbook is the only page that has a large list of authors and authors only appear on the first page so this should not be a problem.
Here is a list of items that have changed since my last post:
*menu code was changed from a floated block list to a simple inline div with non-breaking spaces. This should fix the IE5 on Mac issue.
*Background color for content was made light grey with black text for better visibility of the text. Bright monitors should no longer be a problem.
*background color of the ads was made darker to contrast with the content area. Decorative header was added.
*white space was collapsed as much as possible.
*all extraneous information and decorative news headers were removed from the front page to help readability and to bring focus to the information. This includes the cow image and text. Overwhelming amounts of information on the front page should no longer be a problem. This also brings the jumppads closer to the top so new users will be better able to spot them.
*table headers were centered and data cells left justified.
*table borders are now collapsed and only 1px thick. They are no longer ugly.
*removed the BOLD from the design credit in the footer. This wasn’t supposed to be BOLD in the first place, probably a mistake on my part.
*The purple boxes below the grey menu bar now only appear on the main index.
*news poster date and submitter color changed to match Aarons design
*added a filter that removes the author and date if they are missing or script generated.
*removed redundant doc title
*removed the donation button image and replaced it with a simple button.