Mozilla.org Redesigns
Congratulations to Steven Garrity and the entire team at silverorange for their work on the newly redesigned mozilla.org. I think it's a big step forward from the last one, which always felt a little half-finished to me. But then again, that design was a big step forward from the old-old one.
The one GUI nit-picky issue I posted to the feedback topic forums was about the click-targets of the buttons in the nav bar.
If you hover over the right sides of the buttons, they become unclickable, however the hover still changes the colour of the button. Here's a screenshot:
Full click-targets are better.
But as Steven notes, they're still updating and tweaking things.
The other issue I have is with the Mozilla Blogs column on the main page. I haven't read much about Planet Mozilla, but I question why blog posts from it's feed are listed on the front page of mozilla.org. Since some of the Mozilla blogs listed in the feed don't always talk about Mozilla on their blogs, I'm not sure how much value it adds to have links to a dork's post about his new iMac on the front page. I still think it's a valuable resource, but for the front page, it would probably be more useful if it had an editor, like the links featured in The Mozilla Blogging Project on mozillaZine.org.
Comments
Sounds like bug 257379:
http://bugzilla.mozilla.org/show_bug.cgi?id=257379
:)
Hi there, I'm the one who designed those tabs for the Mozilla website. You make a good point 'pinder' and I'll try to explain why it currently is like it is.
You'll see I'm using what's been termed the Sliding Doors technique for making rounded tabs and which was first publically introduced by Doug Bowman. It's a handy way to use CSS to place two background images into a tab without extraneous markup.
As it's used here, one image goes into the link tag and one background goes into the list-item tag of the unordered list. Pretty sweet. However, one ends up with the area of the background image in the list-item as unclickable because the link can't overlap it. I'm using the minimum width possible which is the radius of the rounded corner. I also put the linked portion on the left (it's possible to do it either way) so that the unlickable portion is on the right where it's less likely to impede people. I think this is a minor improvement on Sliding Doors II that Doug posted at A List Apart (see link below).
I also decided to use a :hover effect on the list-item as opposed to the link, so I can change the color of both the link and the list-item at once. Some javascript would mean I could do it on the link instead, but I wanted to keep it clean and, in a way, it's nice that it shows an immediate advantage to Mozilla browsers' standards-compliance over IE when IE people install Firefox for the first time. But... that means that in the sliver on the right does initiate the hover effect, but remains unclickable which might be a little confusing.
As you can see, I was weighing several trade-offs. If anyone knows of a simple way to improve the use of Sliding Doors here, please let me know. That is, if you can avoid extra mark-up in the HTML and avoid a heavy-handed CSS solution and without javascript and allow it to work decently in most browsers.
Link to Sliding Doors: http://www.alistapart.com/articles/slidingdoors/
Link to Sliding Doors II Example: http://www.alistapart.com/d/slidingdoors2/v1/ex10a.html
Link to Who is Doug Bowman: http://www.stopdesign.com/about/
PS: Expect at least indication of the current parent tab in the nearish future.
Post a Comment
This discussion has been closed.