Gentoo Archives: www-redesign

From: Aaron Shi <aaron@××××××××.com>
To: www-redesign@l.g.o
Subject: RE: [www-redesign] a couple of comments
Date: Mon, 12 Dec 2005 08:28:49
Message-Id: 003301c5fef6$d76e7f00$6402a8c0@vega
In Reply to: Re: [www-redesign] a couple of comments by Curtis Napier
> 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.
Let's try that. I've got a few other ideas in mind, but don't have time to make a proto right now. If your idea works, we'll just go with it for now. In any case, it'll be better than changing link orders.
> 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.
Yup, they look great now. I noticed that the table headers seem to be a different purple (darker), don't know if it's intentional, but it's ok with me.
> 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?
Screenshot: http://www.aaronshi.com/gentoo/problems/onepixel.png (also pointed out the adbar/footer bg difference). The shift is actually large on some other pages (just discovered after uploading that sshot), e.g. on http://wwwredesign.gentoo.org/doc/en/handbook/handbook-x86.xml?part=1&chap=3 it's off by at least 5. I think it's important that it looks good in IE, since this is more than 85% of the market share on the net. While Gentoo is Linux specific (where IE is the minority), I think from a marketing perspective a lot of new/potential future users might still be on IE/Windows. E.g. 100% of Gentoo users I know on campus went from Windows --> [some flavour of Linux they didn't like (while retaining Windows as main OS)] or directly to --> Gentoo (but still using Windows). The pre-Gentoo OS has a great probability of being Windows, whose user has a good probability of using IE. Those who visit from their workplace, i.e. potential future enterprise/business users are likely to be using Windows/IE as well since most businesses use Windows as their main platform and for easy maintainence rollouts they'd probably only use IE which gets updated along with Windows. Aaron
> -----Original Message----- > From: Curtis Napier [mailto:curtis119@g.o] > Sent: Sunday, December 11, 2005 6:36 PM > To: www-redesign@l.g.o > Subject: Re: [www-redesign] a couple of comments > > 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 > >>planet.gentoo.org 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 > > >
-- www-redesign@g.o mailing list