WSA Winner
Friday September 3rd, 2004
Ever since WSA started back in February I've been trying to find a well designed site that uses an elastic layout, i.e. a site where the content expands or shrinks relative to the text size (think of the way the zoom tool functions in an application). I always thought the first elastic design awarded here would be some obscure design blog or experimental layout depository, so imagine my surprise when I pull up the newly redesigned mozilla site to find out that it nicely scales according to the text size. At least in Firefox and Opera. IE doesn't understand min-width and max-width and therefore turns the elastic design into a fluid one.
The two main rules:
body {
min-width: 610px;
margin: 20px;
}
#container {
max-width: 70em;
margin: 0 auto;
}
More facts:
- The markup is not xhtml for once, just good ol' html 4.
- Both the style sheets and the markup are well organised and follows one of the best coding guides I've seen.
- The navigation doesn't display correctly in Opera (6 and 7.20).
The new mozilla.org feels very professional with a clear IA, good accessibility and a stylish surface. The site has been developed by a team from silverorange.
Reviewed by Johan Edlund
#1
Saw this the other day in IE/os9 and the layout/nav breaks completely. But the dynamic size works really great in standard browsers, a nice feature even though I feel that it might be overrated. Personally, I dont like when layouts "jumps" too much when I resize the text.
Posted by David :: September 3rd, 2004 at 05:34 PM
#2
Does it matter if the navigation is funky in Opera 6 or 7.2? How does it look in Pheonix 0.3? Or Netscape 6.1?
I think if it works in the latest version of a browser, then that's all that should be expected. We code to standards, not to browser versions.
(It works perfectly in Opera 7.5)
Posted by david g :: September 3rd, 2004 at 06:00 PM
#3
I don't think Dave Shea had anything to do with this incarnation, he was just responsible for the perfectly serviceable last design. This one is pretty awesome though, should do the release of Firefox 1.0 nicely.
Posted by quis :: September 3rd, 2004 at 09:53 PM
#4
You should check out http://www.gic.nl/, the site of a Dutch newspaper. It doesn't just scale, I would rather call it "zooming".
Posted by Robbert Broersma :: September 3rd, 2004 at 10:56 PM
#5
".. one of the best coding guides I've seen."
It's highly outdated, though:
(There are still a lot of layout tables on mozilla.org, so we can't just color all tables indiscriminately.)
Mozilla 1.7 Beta is out!
Posted by Faruk Ates :: September 3rd, 2004 at 11:13 PM
#6
David,
I think one point I didn't discuss in the post is how the trends in css design has changed over the years: two years ago you'd be blamed for seriously endangering the very purpose of web standards by using a fixed width layout; fluid was all the craze. Nowadays almost noone uses a fluid/elastic design so therefore I find it refreshing to see that a large site like mozilla.org has taken that route.
david g,
Normally I would agree with you, but in this case one of the main purposes for mozilla.org would be to convince people to ditch their current browser in favor of a Mozilla browser.
quis,
The text has been updated.
Posted by Johan Edlund :: September 4th, 2004 at 10:12 AM
#7
Nothing really to do with the site per se but I do wonder, given the marketing efforts, why the Firefox logo isn't more prominent?
Posted by John :: September 5th, 2004 at 11:49 AM
#8
It would be so funny if that last comment was made by John Hicks.
Posted by Cameron Adams :: September 5th, 2004 at 01:07 PM
#9
Robbert, great link (zooming) here other "zooming page" http://www.gestoriagarcia.net, all the site is tableless.
Posted by Cesar Garcia :: September 6th, 2004 at 12:32 PM
#10
Whoever coded mozilla.org really likes definition lists. IMO it's semantically incorrect.
Posted by Luke Shingles :: September 6th, 2004 at 03:26 PM
#11
Cameron: Unfortunatley it was not Jon Hicks
Posted by John :: September 6th, 2004 at 11:08 PM
#12
I don't know, I think the site is very clean and professional, but I still think Mozilla suffers from lacking a real image, and it's identity/marketing takes the toll. I think the site looks nice, and while it's cool to see how they accomplished elastic, I don't find it visually enticing. If their trying to compete with Microsoft -- while they may have their code significantly better, even Microsofts home page has a better unified image and marketing technique (even if it does break in Safari). I think it's really time for them to hire out a high-end design firm, one with firm roots in corporate marketing for large name clients like AT&T, ComEd, Apple, etc. -- the average consumer isn't going to see this site as anything special, or visually fun. I see it as more of a trend look for the current state of the web, than a unique selling identity. That's not to be taken as hard criticism, but it's just a designers thought, and other average users I've seen say the same.
Posted by Brady J. Frey :: September 14th, 2004 at 07:32 PM
Comments on: Mozilla