Gentoo Archives: www-redesign

From: Curtis Napier <curtis119@g.o>
To: www-redesign@l.g.o
Subject: Re: [www-redesign] a couple of comments
Date: Mon, 12 Dec 2005 02:35:54
In Reply to: [www-redesign] a couple of comments by Aaron Shi
Aaron Shi wrote:
> Wow, took a quick peek and everything looks much nicer. > > A couple of things (here it goes): > > --1-- > >>When I saw the e-mail icon next to the print icon, my first >>thought was that it was a "send-a-link" button, since that's >>pretty common on news sites. Having it represent a mailto: >>link instead might be potentially confusing. Anybody else think that? > > > It is misleading and counter intuitive. The original reference was for > "send-a-link," but to do that it requires javascript and hence that's > probably why it was changed to a static mailto: link. >
A little picture of a mail envelope represents a send-a-link? If so many people think so then I'll just remove it. To me it's pretty intuitive that it means "send a mail" and since it's a gentoo page I assume it's sending a mail to someone at gentoo. Since the current gentoo website doesn't have that link and since it wasn't Aarons orginal intention for it to be a mailto link *and* because so may people have mentioned it I will just remove it. Fixed in CVS.
> --2-- > >>There are a few other minor changes as well. Link colors have >>been made more consistant: purple on white for content areas >>and white on purple in the menu bar. All links turn green on >>:hover. These color combinations pass the color-blind test, >>look really good and are consistant. > > > The green was intended for on the dark purple background on the top bar or > bolded text headings. It is not intended for unbold non-heading text on > white background or on light purple background (especially hard to see, e.g. > hover ad links on the ad bar). Also, the ad images have dotted underlines > under them, they shouldn't. >
I tried to take your repeated advice to be "consistant" and apply it to the links. We have purple on white links, white on purple links. I think we can both agree that is good(?) Having a hover color is important for several reasons. Let me explain the full logic of why I choose the colors for the links, hopefully you will agree. 1. hover color is the standard for links and the green is one of the official theme colors. Using it for ALL links is "consistant". 2. we are using dotted underlines instead of solid ones. This confuses a lot of people who think they are <acronym>'s instead of <a href>'s so having a different color on hover is more consistant with a normal <a href>'s behaviour. 3. the light purple on the dark purple is invisible to color-blind people (this one is very very important) 4. the inconsistancy of links was the number 1 thing people had negative feedback on. This current link color theme has gotten thumbs up from everyone I have talked to about it. Especially color-blind people. The hover color is a great visual que that it is an <a href> and not an <acronym> since <acronym>'s don't have a hover color by default (the dotted line changing to a solid one helps too but isn't enough). The green is the normal green that is used for a lot of little things around the site so I used it since it's "consistant". It looks good on the white and on the purple. I agree it may be a *little* hard to read on the light purple background but it's a hover color and you only see that color if the mouse is over the word anyway. It's kind of hard to read with the mouse covering the word anyhow so what's the difference?
> --3-- > >>The top level menu (main, planet, forums, etc...) had an >>issue. The green arrow designates which site you are on. If >>you are on then PLANET would be first in >>line with the green arrow. I spaced the first word out more >>to make it more obvious. The link colors were changed to >>white with green hover to be consistant with the site-wide >>color scheme and also to pass the color blind test. > > > Hmm...we shouldn't changed the menu order on the users. It creates > confusion and slows down the workflow because they'd have to double-check > the position of the links before clicking due to them changing. How about, > current site = white link, other sites = dimmer (i.e. light purple). Also > the green arrow doesn't vertically align with the text as in the reference, > not sure why merely changing colors would also change the positioning. The > font looks a tad different, maybe that's why.
I agree, we shouldn't change the order of the links. What about if the green arrow simply moves to whatever domain you are on and add a little padding around it to make it stand out without actually changing the location of the menu item? This would be consistant with the idea of "this is where you are" and still satisfy the color-blind problem of the light purple link color. When those links were still light purple I had several color-blind people ask me "what is that little green arrow doing floating in the middle of the top bar?" They *literally* could not see the light purple links. I don't see an issue with the arrow lining up. It seems to be pretty consistant for me on every browser, except for IE which moves it up 1 pixel for some reason I can't seem to figure out. It's not that big of a deal and I would say it's an acceptable bug (?)
> > --4-- > >>I like this version much better. It's all coming together, and >>I give my thumbs up for a release of this as soon as the minor >>bugs are worked out. (Not like it matters, but as an average gentoo >>user, I applaud you, and everyone else!) > > >>Yes, let's see this before X-Mas 2005! It would be a nice X-mas >>present to the community! > > > I'd strong advise against releasing an unpolished product and patching up > known-bugs later (i.e. pull a Microsoft). Since this is a major event, > there will undoubtly be additional coverage and it would not look good if we > launched it at sub par quality (Gentoo critics would totally capitalize on > it). >
I do agree that we shouldn't put up a sub-standard piece of work *however*, if everyone involved is OK with it and has the time why not? I would like to see it by at least the New Year. If that isn't possible then so be it but this project was started over a year and a half ago, is it ever going to end? </chomping at the bit> ;-)
> --5-- > >>Chapters are the green and a larger font size and sections >>are dark purple and a little smaller. It looks good at the >>moment and (more or >>less) matches the reference design. > > > Looks good, my only concern with this and the other color changes is where > the colors came from. Are they part of the color scheme? The dark purple > sub headings, while the text is of higher contrast (is it necessary?), it > over shadows the green heading (even though the green heading is larger), > this is because the apparent brightness is inconsistent. The purple in the > reference looks more balanced. The headings (green, purple, and doc heading > at top in the light purple box) could be a little bigger as our default text > is bigger. >
Sorry, I had the wrong color-code for the purple header. I also increased the font size for the green header to make it more prominent.
> --6-- > On the front page, there's a light purple space below between the content > area and the footer bar. To the right of the line where it says "#103610 - > yaboot-static claims incorrectly that /proc/device-tree broken is in the > 2.6.12 kernel series", the ad bar is shifted by 1 pixel to the right (this > is barely noticeable but very odd). >
I didn't notice the body overflowing under the content area there (I use moz and opera and only test with IE every once in a while). The light purple bar under the content area is an IE only bug and I fixed it. Ad bar being shifted by 1 pixel? I don't see that in any of the browsers. Can you take a screenshot?
> --7-- > The front page looks over crowded, I think this is mostly a spacing issue > (or lack of). Giving the purple bar headings a padding and putting more > space between each news item may help a little temporarily. The "More News" > link needs to be more prominent, right now it just looks like part of the > last news item. >
The spacing issue is because you are apparently using IE to view it. Spacing is not an issue on any other browser. I have added a padding to the <td>'s of that table to accomodate IE, this increases the already existing padding on non-IE browsers though and I'm not sure it looks good. I increased the padding of the header as you suggested but it looks horrible. The reference design doesn't have a padding either and I like the look of it much better. Look at it now with the increased padding between news items and see what you think. Also try using firefox or opera and see the difference between them and IE.
> --etc.-- > The table borders might look better in a purple (right now it appears black > or very dark gray).
Grey at the moment. Which of the purples? Give me a color code.
> > The XML buttons have dotted underlines, within a sentence it looks okay, but > on its own it looks strange (the underline sticks right to the bottom of it, > essentially same problem as ad images). This is probably a line height > issue. > > The ad column's purple doesn't quite match the light gray portion on the > footer which connects to it. The purple looks nice too, I can probably > change the footer graphic later to match the purple. >
We are replacing the normal text-decoration:underline of <a href>'s with a border:dotted. This makes the line become a "border" instead of a normal "text-decoration" and so the border is "below" the text line instead of "part of" the text line. I had to increase the line height for the entire content area to 1.3em to make the spacing consistant with what a text-decoration would give us and to remove the overlapping of the border with the line below it. It's easy to get rid of the text-decoration on images that are a link with a simple "a img {text-decoration:none}" but it is more complicated to get rid of a border on an <a href> that contains an img. I would have to add a new class to the css and a filter in the xsl that would tag every image with that class in order to get rid of the border. This is overly complicated to do. If anyone knows of a simple way to do it that doesn't involve adding a new class to every single image contained within an <a href> let me know. Instead I added vertical-align:text-bottom to "a img" in the css. This doesn't get rid of the dotted border but it does move the border right up to the edge of the image. This isn't a perfect fix but it's better than nothing. What does everyone think of the way it looks now?
> > > Overall good work Curtis, this is coming together nicely! The progress has > been huge in the last couple of weeks. >
Thanks! :-) -- www-redesign@g.o mailing list


Subject Author
[www-redesign] headers, lists and more news Curtis Napier <curtis119@g.o>
RE: [www-redesign] a couple of comments Aaron Shi <aaron@××××××××.com>