\n"; ?> Proposed mozilla.org with Semantic Markup and a CSS Layout

Proposed mozilla.org with Semantic Markup and a CSS Layout

Despite the fact that Mozilla is a browser based on observing standards, its website hasn't ever validated. Furthermore, it never used semantic html. While the new design by Ben Goodger is more pleasing to the eye than the former one, it still fails to use correct structure and it fails to eliminate the nested table design. As a result, I have created a purely CSS layout for mozilla.org using the current design. It validates in XHTML 1.1 and CSS 2.

Because the design is finished, the purpose of this project is more for publicizing rather than coding, although some help is still greatly appreciated (read below).

The Proposed mozilla.org Design and Files

Please take a look at the proposed design. Also, please take a look at the W3C validator's results as well. A list of all files and comments on them are included in the table below:

File Comments
index.html Together both files were 32kb. Now they are 25kb.
styles.css
bugIconGoto.gif Unmodified
bugIconNewBug.gif Unmodified
bugIconQuery.gif Unmodified
bugIconNewBug.gif Unmodified
downloadIconCamino.png Instead of using PNG-24 (4.9kb), conversion to PNG-8 (1.2kb) makes it shrink in size.
downloadIconFirebird.gif Unmodified
downloadIconMozilla.gif Unmodified
downloadIconThunderbird.gif Unmodified
header.gif Unmodified
productIconBugzilla.png Instead of using PNG-24 (19.1kb), conversion to PNG-8 (6.8kb) makes it shrink in size.
productIconCamino.png Instead of using PNG-24 (5.6kb), conversion to PNG-8 (1.5kb) makes it shrink in size.
productIconFirebird.png Instead of using PNG-24 (37.1kb), conversion to PNG-8 (8.4kb) makes it shrink in size.
productIconMozilla.png Instead of using PNG-24 (55.4kb), conversion to PNG-8 (12.7kb) makes it shrink in size.

Overall, mozilla.org and its frontpage files were shrunk from 165kb to 66kb. At a whopping 100kb savings, that translates to mozilla.org downloading 20 seconds faster on dial-up. Also, the index.html file is easier to edit and oversee. All this plus structured markup and a CSS layout.

Browser Compatibility Issues with the Proposed Design

Like all things, this design is not perfect (or rather, the browsers that display it :). A few known (but truly minor) discrepancies do exist in some browsers. All browsers are tested on WinME.

Mozilla 1.4 and Firebird 0.6

No problems, everything is displayed as expected.

Opera 7.11

Internet Explorer 5.5

Other browsers to test

Valid CSS! Valid XHTML 1.1! Restrictions: Attribution, Non-Commerical, Sharealike