MozTips -

Tips and Tricks for Mozilla

Welcome to the Beta version of the new design. What you see here is a proposed new design for MozTips. Please note: The links to subpages from this page currently do not work. Before I finalize this design template for the new site, I'd like your opinion on it: whether it works in your browser or not. I would particularly appreciate feedback on how this page looks in Internet Explorer 6, Internet Explorer for the Mac, and Konqueror (and other Linux-based non-Gecko browsers), since I do not have access to them. You can send your feedback to moztips [at] emailias.com. Thanks!

Beta version of new site design - Revision 3, August 27, 2002
Revision 3: Removed the Pure CSS menus, because the code was becoming way too complicated, with my having to have one page with different code for each browser. This time around, I am going to try Jewel's motto: What's simple is true. Also - the Tips page has been "ported" to the new design! Check it out . Revision 2: Improved color combinations to make them more "harmonious". (Can you see I have been trying out the insanely great new TopStyle Pro [which can edit XHTML as well as CSS] ? It is also one of the few editors which lets you use Netscape Gecko for an "internal preview" of your work! Now that I am sold, I only need to figure out how I will afford the $80 needed for TopStyle Pro.)

Revision 1: Improved display in IE, cleaned up a lot of the code.

This site has been tested in:

Netscape 7.0 Preview Release 1
Mozilla 1.0
Mozilla (pre) 1.1
Netscape 4.x
Opera 6
Opera 5
Internet Explorer 5.5
Lynx

I need your help in testing this site in:

Internet Explorer 6.0
Konqueror
iCAB
Internet Explorer for the Macintosh
Other old, or text-based browsers (Lynx, Netscape 3, Opera 3, and so on).

Highlights of the new design:

Faster loadin' / good lookin' (thanks to CSS based structure, design, and navigation menus)
Tip of the moment and other cool features
Overall "cleaner" looking design.
(Attempt at) improved color palette (more on that in the following paragraphs).

Lowlights of the new design:

The site does not appear as well in older browsers (such as Netscape 4.x), since the pages appear unstyled. This is due to the extensive use of CSS for the structure of the page (instead of a table based layout). The content will still be visible in old browsers - it just won't look that stylin'. I don't know what other alternative there is, if I end up going with this CSS design. Your feedback is welcome.
Some features - such as the tip of the moment - will not work in browsers which do not support the DOM (Document Object Model) well. This includes the new Opera 6. I am thinking of using work-arounds for this.
The "Pure CSS" menus currently only pop-out in recent Gecko-based browsers (Netscape 7 and Mozilla 1.0 +, not Netscape 6.2 or Mozilla 0.9.4). I have attempted to design workarounds for older Gecko and non-Gecko browsers, including Internet Explorer and Opera. I have not seen what the site looks like in Konqueror (or other niche browsers), so if you are able to test this site in such a browser (and something doesn't work right), do send me feedback.
For Internet Explorer users: revision 1 (August 19, 2002) should have fixed most of the issues I mentioned before. (I only tested the page on IE 5.5. Help on testing the page with IE 6 would be appreciated.)

Why do a redesign?:

CSS-structured layout (vs old table based one).The old site was created using a table based layout. While a table based layout looks great in old browsers (such as Netscape Navigator 4.x, Opera 5, and Internet Explorer 4 and 5) as well as newer ones (Mozilla 1.0, Netscape 6.x and 7 PR 1), it has some downsides too. Table based sites are usually larger than CSS-structured ones. (CSS-structured sites use Cascading Style Sheets to create a table-like structure, without using tables.)

I still do have some reservations about this CSS based layout: although old browsers such as Netscape 4.x will be able to display the site, it would not look attractive in a such a browser. This is because the site will appear "unstyled" in Netscape 4.x (and other old browsers). Another problem is with the use of CSS for navigation menus: Although the "top level" of the menus should be visible in most browsers, the "pop out" parts are currently only visible in Gecko based browsers (Mozilla/ Netscape). I have tried to mitigate this fact by showing the "pop out" part for a particular "top level" link as a flat list once the expand arrow button below the "top level" link has been clicked on.(In Opera all of the pop-out sublists are displayed as flat lists when the page has loaded. The expand arrow button does not work in Opera.) The expand arrow button is not clickable by most Gecko browsers. Still, I wish I had a better solution: if there were an easy way to create a navigation menu (without excessively complicated JavaScript) that worked in most browsers, I'd definitely consider it. One reason I spend time on Moztips is that I hope people who use Internet Explorer will come across this site, see how cool Mozilla is, and switch. If this site looks like trash in their browsers, then they might not want to hear what I am saying about how good Mozilla really is, because to them, it would look like this site were written in 1994.
Since this design is not final, I may be able to use some tricks to make this site look good in Internet Explorer too.
Simpler internal structure (for future automatic website generation) : I have been looking for a useful way to generate often-repeated navigation elements (such as navigation menus) automatically. Although I have not gotten to this part, I was thinking of creating pages in XML,offline, and then transforming them into XHTML before I upload them. This transformation should be easier to do with a simpler (CSS based) design. Another option would be to write a Python script to glue the different parts together.
Improved Usability: I think the old MozTips site was easy enough to use, but I did notice something from my visitor statistics: people seemed reluctant to click through to the different subsections of the site (such as "What is Mozilla" or "Where is Mozilla") - probably because they didn't know where that would take them - and if what was shown there would be interesting enough. That's why I think pop-out menus are such a neat idea: they give you a preview of what's in a subsection, without having to go there. Also - the color scheme is different: I don't know if the new design is better or worse - but your feedback would help in deciding that.

            About the technical aspects of (and sources for) this new

            design:

I used a lot of online resources for inspiration and raw material. Here are the sites which proved invaluable in creating this design.

The CSS layout for this site based on a template from the Blue Robot Layout Reservoir. :: Thanks to Blue Robot for making these excellent templates available.
I chose the color scheme for this site with the list of "browser safe" colors provided by Lynda.
The original "Pure CSS" navigation menus code was written by Eric Meyer, and provided by him to the public at his CSS/Edge site.
The alternate navigation menu code for older Gecko and non-Gecko code is based on work done by Peter-Paul Koch, and made freely available by him on his excellent JavaScript website.
Some ideas for tip of the moment code were taken from an article at computerhope.com and Peter Paul Koch's excellent JavaScript/DOM article .