MozillaZine

XHTML/CSS Redesign of mozilla.org Home Page

Thursday October 2nd, 2003

MozPhile writes: "In an effort to publicize a new CSS design for mozilla.org, a new mozdev project has been created. Based on the current design, this new one features valid XHTML 1.1 and CSS 2, with semantic HTML. First a fully standards-compliant browser, now a fully standards-compliant website to top it off!" Note that mozilla.org has not made any official statement regarding the design or whether they plan to use it.


#1 wrong way around

by mlefevre

Thursday October 2nd, 2003 6:00 AM

Reply to this message

Er... this page seems totally broken in IE, goes wonky in Opera, and is completely screwed in Netscape 4.x.

If the only people that can get to Mozilla.org are Mozilla users, that rather inhibits the possibility of any new users.

#5 and another thing...

by mlefevre

Thursday October 2nd, 2003 6:53 AM

Reply to this message

In a newsgroup posting not too long ago about the website, one of the mozilla.org folks said that they would welcome help with the mozilla.org website, but specifically said that people should not try and work on the home page or anything site-wide. Also, while things don't have to be perfect, they've said that things need to look ok in Netscape 4 (i.e. not be totally unstyled).

I should have said "totally broken in IE6" - which tries and fails to treat it as XML. IE doesn't understand XHTML - the only way to get it to work is to use XHTML 1.0 and serve it as text/html, which it will then interpret as HTML 4-ish and work. Mozilla will also be interpreting this as HTML because of the content type, so there's no point at all in having it as XHTML - see <http://www.hixie.ch/advocacy/xhtml> for a discussion on this.

#39 Re: and another thing...

by james

Thursday October 2nd, 2003 11:39 PM

Reply to this message

You can also serve the document as text/xml and IE will render it (treating it as XML rather than tag soup).

#34 Re: wrong way around

by cdn

Thursday October 2nd, 2003 4:23 PM

Reply to this message

an attempt [using same css] at remedying, <http://mozillacss.mozdev.org/html401/>

since <http://mozillacss.mozdev.org/> is purely introductory (assuming it is readable)

note, I only manage the cvs, since MozPhile failed to do so

#2 Another take

by billmason <mozillazine@accessibleinter.net>

Thursday October 2nd, 2003 6:30 AM

Reply to this message

Already been there and done it, and holds up nicely in other browsers: <http://www.accessibleinte….net/portfolio/#exercises> <http://www.accessibleinter.net/portfolio/mozilla/>

#3 The view from IE6 - W3C's XHTML DTD invalid

by motobass

Thursday October 2nd, 2003 6:33 AM

Reply to this message

Cannot view XML input using style sheet. Please correct the error and then click the Refresh button, or try again later.

--------------------------------------------------------------------------------

Parameter entity must be defined before it is used. Error processing resource '<http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd>'. Line 85, Position 2

%xhtml-prefw-redecl.mod; -^

#4 Please DONT

by johann_p

Thursday October 2nd, 2003 6:44 AM

Reply to this message

The current design already is a mess, but using CSS-only layout makes it completely and utterly unusable with older browser. This is a site to invite users to use a new browser! You won't win them over by not supporting their old browser. Instead of forcign the use of CSS without good reason, the page and the rest of the site should be redesigned to be more helpful for users and make it easier to find current information.

The current main page is cluttered and makes it *harder* to find things (projects, documentation etc) than the old one. And it clashes with all the rest of the site that is still using the old design.

Adding links to the dozens and dozens of other helpful web sites about Mozilla, FB, TB etc. carrying FAQs, alternate builds, tips, and much more would also be a good idea.

#7 Re: Please DONT

by Fasse

Thursday October 2nd, 2003 8:13 AM

Reply to this message

You're right, they should make the main website more user-friendly. Also some links to help-sites are very useful for newbies. Some more screenshots and a short documentation about every main product.

#21 Re:Please DONT> css can be better for old browsers

by dadada <da@toadmail.com>

Thursday October 2nd, 2003 11:43 AM

Reply to this message

1st. I like the current home page much better than the older, block-style version. The page opens much more of the important resources available to various groups of visitors.

2nd. Many css-styled sites... zeldman.com, glazman's, too I think, for example, fit into older browsers, cell phones, lynx... much better due to the straight-forward markup that css frees for designers to code with. You just need to use a css style sheet hack or 2 to get a reasonably looking page in ie and n4.x, for example.

(hacks summary: <http://centricle.com/ref/css/filters/>)

#22 Re: Bookmarks and Tabs

by wilbertnl

Thursday October 2nd, 2003 12:18 PM

Reply to this message

So, does that mean that the website should be supporting the old Mosaic Browser? The Browser that Netscape tried to compete with? That were the old days, and today Mozilla is competing with IEx.

This is just the consequence of making progress and innovation.

#42 Simply look at the browser stats

by johann_p

Friday October 3rd, 2003 2:15 AM

Reply to this message

I think it is only reasonable to support at least those browsers that are still used by, say, one fourth of the number of people that use Mozilla. NS4.x is still among them, Mosaic probably not. But what is more important is that, whatever the browser, the page should show graceful degradation instead of getting completely messed up. Mozilla.org should also show how to create a page that is accessible to impaired people. I really do not get the fanatic obsession with CSS and validating HTML/XHTML. These things are there to solve problems, not introduce new ones, but they will introduce new ones if used wrongly.

#6 Can't believe it wasn't tested in IE6 :-)

by rkl

Thursday October 2nd, 2003 7:06 AM

Reply to this message

IE6 on Windows has something like 65% of the browser market and it's increasing every month (mainly taking share from IE5). For this guy not to test in IE6 at all before making this new proposed design public makes the design pretty well a non-starter. As others have pointed out, you can't even load the page in IE6, suggesting that it will probably have to be thrown away and started again.

It's crucial that mozilla.org loads in as many browsers as possible (yes, this includes IE4, NS4 and even lynx or w3m), degrading as gracefully as can be achieved, because it's browser users you're trying to persuade to switch to Mozilla product. If the site either won't load or looks awful/is unnavigable in any browsers with a 0.5% or more market share, then the design is a failure.

#8 XHTML 1.1 is not "text/html"

by bertilow

Thursday October 2nd, 2003 8:23 AM

Reply to this message

We're not supposed to serve XHTML 1.1 as "text/html", beause it isn't. It's XML, and the correct media types are "application/xhtml+xml" or "text/xml".

XHTML 1.1 can be used today, but then it's necessary to look at the Accept header of the calling browser, and serve out XHTML 1.1 as "application/xhtml+xml" to those that say they can handle it, and XHTML 1.0 as "text/html" to the rest. That means a lot of server side converting (it's not enough to just change the doctype declaration). Otherwise XHTML 1.0 (done according to the HTML compatibility guidelines) to all, or even HTML 4.01 to all, is the correct way to go.

#9 Re: XHTML 1.1 is not "text/html"

by sidesh0w

Thursday October 2nd, 2003 8:56 AM

Reply to this message

Actually, it's perfectly legit to send XHTML 1.1 as text/html; it's just not recommended:

<http://www.w3.org/TR/xhtml-media-types/#summary>

Check out this RFC for definitions of "SHOULD NOT" in the above table:

<http://www.rfc-editor.org/rfc/rfc2119.txt>

#10 Re: Re: XHTML 1.1 is not "text/html"

by billmason <mozillazine@accessibleinter.net>

Thursday October 2nd, 2003 9:07 AM

Reply to this message

"This phrase, or the phrase "NOT RECOMMENDED" mean that there may exist valid reasons in particular circumstances when the particular behavior is acceptable or even useful"

What is the valid reason or particular circumstance in this case then?

Or to put it another way, what are you getting from serving XHTML 1.1 to IE6 as text/html that you can not get from serving XHTML 1.0 as text/html (a practice which is permitted as a "MAY") instead?

There's no extenuating reason that requires XHTML 1.1 for this page. It's not valid to serve it as text/html.

#12 Exactly - but do change the pictures

by leafdigital

Thursday October 2nd, 2003 9:23 AM

Reply to this message

I agree, when it says SHOULD NOT that means you ought to have a good reason for doing it. In this case there is no good reason.

Note that, conversely, it is perfectly appropriate to send HTML 4.01 content.

My opinions:

Do not use XHTML 1.1. (At all, ever. That's a general rule. Just don't do it.) It offers no advantages and until browsers support correct MIME types, you are going to have to be breaking the SHOULD NOT and doing something stupid anyhow.

If you wish to use XHTML, use XHTML 1.0, ensure it follows the compatibility guidelines, and ensure it is served as application/xhtml+xml to all browsers that indicate they can accept that type. Serve as text/html only to browsers that don't indicate acceptance.

If you're not willing to go to that trouble then there is absolutely no reason not to write your content as HTML 4.01. Valid HTML 4.01 content now is no less valid, no less standard, and no less appropriate for people who support Web standards than any flavour of XHTML.

Changing the PNGs, however (responsible for most of that 100K saving) is worth doing. 160K is really unnecessarily big.

--sam

#31 Re: Exactly - but do change the pictures

by jgraham

Thursday October 2nd, 2003 3:38 PM

Reply to this message

> Do not use XHTML 1.1. (At all, ever. That's a general rule. Just don't do it.)

Well, that's a very general rule. What about times when you need to use application/xhtml+xml as the mime type for solid technical reasons? For example, try sending MathML over the wire as text/html and watch Mozilla choke on it. Coincidentally, this requires the html part of the content to be sent as XHTML 1.1 (at least, it does according to <http://www.w3.org/QA/2002…/valid-dtd-list.html#full> ) /In general/ sites should be written as html 4 unless they are prepared to put the effort in to make sure they are sending valid content. But if you are sure that your content is valid, then there is no reason not to send it as XHTML + correct mime type and, if you are using something that requires it, there's no reason not to use XHTML 1.1. Moreover, if you're clevel you can easilly send something as XHTML 1.1 to browsers that support it and dynamically change the content to be valid html 4 for browsers that don't support it - I believe <http://xiven.com/> does something similar using PHP - at the very least html 4 browsers don't get the xhtml shorttag form of empty elements i.e. the xhtml form has <img .... /> whilst the html form has <img ....>. If you've gone to all that trouble, dynamically switching the doctype also seems easy.

#41 1.1...

by leafdigital

Friday October 3rd, 2003 2:08 AM

Reply to this message

I don't have anything against sending XHTML content as application/xhtml, quite the reverse - go for it. Basically that comment is - don't use 1.1, use 1.0.

Also, I do agree that if you are willing to actually convert the content of the page into valid HTML 4 as well as changing the MIME type then fine, go ahead and send XHTML 1.1 if you like. I suppose that's the one exception to my 'ever', I just assumed that nobody would 'ever' go to that trouble.

But for all other cases where you're going to send XHTML content, for gods' sake use XHTML 1.0 because then you're allowed to send it text/html (but you should STILL send it as an XML mimetype to browsers that support it otherwise THERE IS NO POINT and you're just basically sending invalid HTML4).

As for MathML, apart from the fact that nobody really uses it (exaggeration, obviously a few people do, but the vast majority of people using XHTML 1.1 are doing it because they want to feel l33t and not because they need MathML), I'm not sure but can't you use MathML with XHTML 1.0? There may not be a doctype, but I was under the impression that DTDs were not required for XHTML. (As frankly this whole mess of needing a different doctype for each combination of features is a bit of a mess, when said features are already identified by namespaces...)

By the way, this may come across as insulting, but that's just because I find it more amusing to write that way. Of course I also do several of the wrong things I have just insulted :) I have a few XHTML sites (1.0 thankfully) that are always served text/html, because I tried and tried to set up an automatic change based on accept headers but Apache just wasn't having it. (I think I had it working on everything except for index files. Sigh.)

--sam

#11 Actually, the current design validates--sort of

by mikemarco

Thursday October 2nd, 2003 9:12 AM

Reply to this message

If you run the current mozilla.org homepage through the W3C validator (URL below), the page actually validates as HTML 4.01 Transitional, except that in order for the validator to even accept the page for validation, a character encoding must be explicitly defined with a tag such as this one (pretend those square brackets are actually angle brackets):

[meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"]

Really easy to add (just stick it in the head somewhere), and it shouldn't break compatibility with anything. Want to declare as Unicode instead? Replace "iso-8859-1" with "utf-8".

Just because something can be converted to XHTML+CSS, it doesn't mean it should be. In an ideal world, all our sites would separate presentation from content and would use well-structured semantic markup. (When I code my personal sites, I adhere to this ideal as much as possible.) However, one must be pragmatic when dealing with sites like mozilla.org, where older and more flaky browsers must be considered. Eventually, it'd be nice to phase out support for Netscape 4.x. My current personal sites are already phasing out support for older versions of IE (5.0 and below). But as long as these browsers are in circulation, we'll have to account for them. Sad, but true.

I agree, however, that the homepage could use some usability improvements. In its current state, it's far too cluttered. One idea: place the Mozilla Foundation information in the sidebar and the product download links in the main content area. (I find it funny that product information links--those in the main area below the Foundation/donation blurb, along with the screenshots--are far removed from their respective download links, currently in the sidebar.) After all, shouldn't Mozilla products be put front and center, where they belong?

And I'm still sending my XHTML as text/html. I blame IE 6.

Just my $0.02.

#13 Re: Actually, the current design validates--sort o

by mikemarco

Thursday October 2nd, 2003 9:34 AM

Reply to this message

#14 Re: Actually, the current design validates--sort o

by billmason <mozillazine@accessibleinter.net>

Thursday October 2nd, 2003 9:41 AM

Reply to this message

Fixing the character encoding on the home page is pending in bug 89885. <http://bugzilla.mozilla.org/show_bug.cgi?id=89885>

#15 It's a beautiful in design

by thornesa

Thursday October 2nd, 2003 9:44 AM

Reply to this message

All the browser compatibility issues aside, it's great to see this implemented so well. It does a geat job demonstrating a lot of the benefits of using XHTML and CSS 2, and separating style from content ... it can be done, and done while it streamlines maintanence, and shows how well the standards can work.

Yes, I acknowledge there are still significant compatibility issues. These have been debated before, example <http://www.webstandards.org/act/campaign/buc/> . I'll let others discuss those issues. I just want to give an atta-boy for the positives this demonstrates.

#38 Re: It's a beautiful in design

by tack

Thursday October 2nd, 2003 7:49 PM

Reply to this message

If you want to see beautiful examples of CSS and separating style from content, visit <http://www.csszengarden.com/> and sample the various styles. Now _that's_ a truly stunning example of CSS.

#16 It's a beautiful in design

by thornesa

Thursday October 2nd, 2003 9:52 AM

Reply to this message

All the browser compatibility issues aside, it's great to see this implemented so well. It does a geat job demonstrating a lot of the benefits of using XHTML and CSS 2, and separating style from content ... it can be done, and done while it streamlines maintanence, and shows how well the standards can work.

Yes, I acknowledge there are still significant compatibility issues. These have been debated before, example <http://www.webstandards.org/act/campaign/buc/> . I'll let others discuss those issues. I just want to give an atta-boy for the positives this demonstrates.

#18 Re: It's a beautiful in design

by sidesh0w

Thursday October 2nd, 2003 10:12 AM

Reply to this message

Well said -- I hope this excellent redesign works out the remaining kinks, and makes its way to the homepage.

#17 offer good reason to install mozilla

by jilles

Thursday October 2nd, 2003 10:05 AM

Reply to this message

Do browser detection based on the accept header (as suggested above) and deliver an ok looking html 4.01 page with a message saying that you know the page is not looking very nice and that this page will look waaaaaaaay better when they revisit with mozilla. Make sure that when they actually do, they are presented with a very cool page that is fully standards compliant and uses the latest CSS/javascript features (as far as supported by mozilla).

Of course this requires some kind of backend to generate the pages but isn't there one already?

#19 Re: offer good reason to install mozilla

by mlefevre

Thursday October 2nd, 2003 10:50 AM

Reply to this message

There's no back end - until a few days ago, the Mozilla web server was Netscape Enterprise and had no ability to do anything dynamic. Everything is static and pulled from a CVS store.

Now they've moved to Apache, that could change, but aside from fixing stuff like the character set (so that the current page will validate), I can't see that happening. There are other things more important than making the mozilla.org home page look "cool", like the fact that the structure of the site is a mess and all the other pages look crap.

#30 Re: offer good reason to install mozilla

by cdn

Thursday October 2nd, 2003 3:25 PM

Reply to this message

mozdev backend is php

as stated mozilla backend is up in the air

#20 bad to shrink the user's default font

by dbaron <dbaron@dbaron.org>

Thursday October 2nd, 2003 11:06 AM

Reply to this message

I have my default font set to the size it is for a reason -- because that's the size text that I like to read. Not 80% of that size.

#32 Re: bad to shrink the user's default font

by jgraham

Thursday October 2nd, 2003 3:52 PM

Reply to this message

As have I. Sadly the number of people that have done this is negligible and if you do try reducing default font sizes, text on lots of poorly designed sites becomes unreadable. So given that the 16px defacto default is too large for most people to read comfortably, and using a fixed pixel size prevents anyone using Internet Explorer from resizing the text, which creates an accessibility issue, designers have a problem. They can choose to cater for the vast majority of the population who don't even realise there is a default setting to be changed or they can cater for the tiny proportion of technically competent people who do know how to change font sizes. Now, potentially, this situation could be improved by introducing some sort of setup application into Firebird with a slider which allowed users to set text to be comfortable size when they first run the application. Then at least designers would be aware that not everyone has 16px fonts by default. However, doing so would be a usability issue in itself in that it would prevent people getting on with using the program (maybe you could run the setup program as the browser unpacked and installed itself?) and it would break many existing sites.

#23 With all the nice looking blogs out there...

by alcatraz52 <red.baron@rogers.com>

Thursday October 2nd, 2003 12:19 PM

Reply to this message

How come no one can come up with a good looking mozilla.org site? :(

Way. too. cluttered (not that I have any ideas, of course)

#24 Re: With all the nice looking blogs out there...

by WillyWonka

Thursday October 2nd, 2003 12:41 PM

Reply to this message

are you saying <http://www.mozilla.org/start/1.4/> doesn't look good? ;)

#25 Actually..

by alcatraz52 <red.baron@rogers.com>

Thursday October 2nd, 2003 2:00 PM

Reply to this message

I do like it!

But then it's the other extreme of mozilla.org's clutteredness ;)

#26 s

by alcatraz52 <red.baron@rogers.com>

Thursday October 2nd, 2003 2:09 PM

Reply to this message

Oh and I really like FB's product page! Simple and not cluttered.

There should be a link to the mozdev plugins FAQ though! (unless I'm missing it)

#27 Missing 'Not'

by AlexBishop <alex@mozillazine.org>

Thursday October 2nd, 2003 2:10 PM

Reply to this message

As part of a proud tradition of not only making typos, but making ones that completely change the meaning of the text, the final paragraph of this article said: "Note that mozilla.org has made any official statement regarding the design or whether they plan to use it." That should have been "Note that mozilla.org has not made any official statement regarding the design or whether they plan to use it." The mistake has now been corrected. Thanks to Alex Bischoff for informing us.

Alex

#28 Thanks, Alex!

by nguyen_alex

Thursday October 2nd, 2003 2:40 PM

Reply to this message

If he had not informed Alex Bishop, I would have gone off and thought that mozilla.org was irresponsible in its decisions, but thanks to Alex, my faith in mozilla.org is restored.

#29 Re: Thanks, Alex!

by AlexBishop <alex@mozillazine.org>

Thursday October 2nd, 2003 2:57 PM

Reply to this message

As nguyen_alex thanks Alex Bischoff for telling Alex Bishop about the mistake, I've got to wonder if this homogeny of names could prove to be some sort of weakness in the future.

Alex

#33 Its broken in Mozilla 1.4.1/Firebird 0.6.1+

by Caetck

Thursday October 2nd, 2003 4:22 PM

Reply to this message

Its very broken. I got this error on a yellow back ground. XML Parsing Error: mismatched tag. Expected: </img>. Location: <http://mozillacss.mozdev.org/> Line Number 241, Column 3:</a> --^

I look at the page source and it says it deiplays well in the browsers listed above. Whats up with the error msg.? Geck0 r0cks

#35 Re: Its broken in Mozilla 1.4.1/Firebird 0.6.1+

by cdn

Thursday October 2nd, 2003 4:28 PM

Reply to this message

teething problems, MozPhile missed the / on the creative commons img not the other one

#36 Hopefully the existing homepage will be ditched

by jgraham

Thursday October 2nd, 2003 4:30 PM

Reply to this message

I am under the impression that the shift in focus of the Mozilla project toward end users will lead to a restructured website sometime in the near future. Hopefully, this will also be accompanied by a redesign, not only of the front page, but of the entire site. The front page, at present, it a complete mess. It's cluttered, making it difficult to find useful information, it has an unhealthy mix of developer and end user specific content and it has *really* ugly code. If I had any say in the website design (you'll be glad to know that I don't), I would:

Subdomain all the developer stuff to dev.mozilla.org. Since developers want quick access to documentation, LXR, bugzilla, etc. it makes sense to provide an entire subdomain with exclusive developer only content. This could be linked in a single place from the front page - developers are probably competent enough to find a subdomained page, end users are not.

Resdeign the front page to be much simpler. It should be trivial to locate downloads, screenshots, product descriptions, etc. At the moment it's not. Moving developer links away will help a lot with this.

Create a HTML + CSS template for the site, and stick to it. Standards are necessary because of their practical value (lower bandwidth, easier to maintain and update, etc.) and because Internet Explorer is a better tag soup browser than Mozilla (it supports more tag-soup sites and always will because we'd need to break w3c compatibility to get IE compatibility). If mozilla.org themselves aren't prepared to use a standards complaint website because of some minor problems (it would display in a different way in NN4), why should anyone use Mozilla when it causes noticable compatibility problems on a huge number of websites? Moreover, the site should look *better* in mozilla than in other browsers. Which is not to say it should appear broken in IE, but that subtle use of some of the unique features of gecko would give a good first impression of the browser.

All subprojects should use the same template. At the moment, the website looks fragmented which reflects on people's perception of the project as a whole.

No links to bugzilla from any end user pages. At all. A surprising number of people are clueless enough to think having a 200,000 bug database reflects badly on the product. Other people just cause bugspam which leads to developer frustration. If there is any appreciable increase in the userbase, this problem will get worse. making bugzilla harder to find is a good first step. Simiarly, nightly builds wouldn't be mentioned on main pages.

#37 I agree

by runeskaug

Thursday October 2nd, 2003 4:55 PM

Reply to this message

Just my A$0.31

#40 web site redesign

by bartdecrem

Friday October 3rd, 2003 12:07 AM

Reply to this message

A web site redesign is currently under way. The new web site is slated to launch over the next few weeks and should address the useability and standards compliance issues with the current site.

#43 erm

by Hymagumba

Friday October 3rd, 2003 2:35 AM

Reply to this message

OK - I know this is something evil to say but think about what Mozilla is. It's Netscape 7.

Now one of our major targets is Netscape 4 so surely we should make it accessable to them aswell? Plain text looks crap. A browser sniffing redirect would be the best way to do this so the rest of the converties (IE people) could still see the site as IE handles most stuff.

#44 Re: erm

by corwin

Friday October 3rd, 2003 11:22 AM

Reply to this message

Netscape 4 is NOT one of our major targets, they represent less than 1% of the global internet popupaltion and if they haven't updated their computers it is almost certainly because they can't (486 class computers, cybercafés, universities, corporate intranets, macOS8computers...).

A plain text page IS accessible, it may be dull but it is accessible and that's what most modern sites offer to Netscape 4.

#45 mozilla.org was already redesigned in CSS 3 months

by corwin

Friday October 3rd, 2003 11:26 AM

Reply to this message

#46 Re: mozilla.org was already redesigned in CSS 3 mo

by mkelley

Tuesday October 7th, 2003 12:39 PM

Reply to this message

But it's not in XHTML, it is however valid html 4.01. Nothing wrong with that, just an observation.