RE: [www-redesign] a couple of comments

["Aaron Shi" <aaron@aaronshi.com>]

> 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@gentoo.org] 
> Sent: Sunday, December 11, 2005 6:36 PM
> To: www-redesign@lists.gentoo.org
> 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@gentoo.org mailing list
> 
> 
> 

-- 
www-redesign@gentoo.org mailing list