Mar 112009

Right now, when you go to the Mozilla Developer Center web site, you’re presented with a page full of acronyms, technologies, and miscellaneous stuff that makes it very difficult to find what you want, even if you know what you want in the first place.

This is a problem we’ve been aware of for some time, but that hasn’t kept us from making it worse by periodically adding even more obscure technologies to the list shown there.

It’s time, at last, to clean this mess up and redo our front page.

I’ve got a proposed design for the main page, which you can see by clicking here.

As you can see by looking at that, we basically replace the entire table of contents with four links.  These links will take the reader to a topic page that provides additional links for a given subject.  For example, clicking the “Developing Mozilla” link will take you to a page that offers links to articles on QA, localization, embedding, XUL, building, XPCOM, SpideMonkey, interfaces, and so forth.

Clicking the “Extending Firefox” would take you to coverage of XUL, JavaScript, themes, extension and plugin development, and the like.

Obviously some of the individual articles will overlap between these topic areas, but this reduction in the number of links off the main page will help us guide readers to the content they want.

The “Web development” section will be an area we’ll need to work on.  It’s always been a goal of MDC to offer top-notch documentation for developing on the open web, from HTML to CSS to AJAX and all the latest open web technologies.  Much of that content is as yet unwritten.  I hope that we can start making serious headway there in the post-Firefox 3.5 documentation timeframe.

Please feel free to comment on my thoughts here.  I’m excited to finally have time to think about and work on this, and hope to start making these changes soon.

 Posted by at 6:48 PM

  20 Responses to “Redesigning MDC’s main page”

  1. The page seems very Firefox-centric, but as subdomain should also welcome developers for other applications (i.e. Thunderbird add-on developers). Maybe it can be modified?

  2. This is sooo awesome. This is exactly what I’ve ben thinking we need and it will make the documentation so much easier to find. Hopefully the plan is to have those four subpages similarly set up (without the firefox heading part), so that we can just drill down to the specific areas of interest?

  3. Archaeopteryx: I’ve made a couple of tweaks there. The Firefox news at the top is pretty much cloned from the current site. We can of course feature news about Thunderbird, except that nobody has done a “Thunderbird 3 for developers” page yet, so there’s not a lot of point.

    Neil: Yes, the idea is that the subpages would then have a series of subject areas with further links to more specific articles, so for example, the “Developing Mozilla” subpage would have links to subpages such as “Getting the code,” “Building Mozilla,” the XPCOM documentation, and so forth.

  4. The current top page isn’t very good, but I think there’s some value to be had in having a top-level index of the specific technical areas. Otherwise you have to drill down multiple levels to find anything, and it’s hard to see what’s actually contained within the site.

    Maybe preserving some of this in a sidebar (or a quick-reference type page?) would be a good idea.

  5. I kind of agree with Justin. I think the biggest audience for MDC should be Web and extension developers, so I’d like to see Web-facing and XUL-facing technologies still listed on the main page (and they overlap a lot of course). So from the current main page I’d keep AJAX, CSS, DOM, HTML, Javascript, SVG, XBL, XML, XUL, Toolkit API, XULRunner and XPCOM. (I’d drop RSS because we don’t really have any content there, XForms because we don’t support it except through an extension, XML Web services ditto, XPath and XSLT because they’re little used, and NSS because it’s not Web or XUL-facing.)

  6. Let me mock up both a quick reference sidebar and a second “Quick Reference” page, both just quick lists of technologies, and see how those look and how folks react to them.

  7. What do you have in mind for the “Web Development” and “Developing Mozilla” pages? For example, if I’m looking for documentation on the DOM where should I go? The current pages are very article-centric, I think there should also be links to reference material.

  8. Benoit: Web Development would include links to HTML, CSS, SVG, DOM, JavaScript, and the like.

    Developing Mozilla would point to material about the DOM, JavaScript, build documentation, XPCOM, XUL, etc.

    There can and will be overlap. The goal is to guide people to the right content for their needs, rather than to strictly categorize the content.

  9. The new main page still contains insecure content :-(

  10. Insecure content? I presume you mean the RSS feeds that are being pulled in using http instead of https. I’m aware of the problem, it’s something I’ll work on at some point, but it involves making changes to some code I’ve not had time to worry about yet.

  11. My largest use of MDC is for Mozilla-specific documentation–I would expect that XUL references and some XPCOM APIs should be reachable immediately. Your current design shoehorns everything into a separate “Supported Technologies” page, which is very easy to miss.

    I’m hesitant to suggest that HTML, CSS, DOM, and SVG be included on the front page, as I suspect most people get reference information on those elements from other sites. Since Mozilla has some specific extensions to ECMAScript, I would say that JavaScript reference page should probably also be easily reachable from the main page.

  12. Moving more stuff onto the main page sounds attractive, but defeats the point behind this redesign, which is to streamline things for people who don’t already know what they’re looking for. By having a separage “expert mode” page like the supported technologies page, we can have something of a “best of both worlds” scenario. At least, that’s the idea.

    My assumption is that if your primary interest is in Mozilla-specific documentation, you would probably bookmark the “Developing Mozilla” page (which exists currently but does not contain anything even remotely resembling the content I envision for its updated form).

    Perhaps I should mock up that page as well, so folks that are concerned about discoverability of specific articles can see what I have in mind.

  13. I like it! I have some comments, though:

    1. The tag soup current home page does have its place, probably as an “acronym reference” or something like it. The sidebar idea is good as well, especially if people are navigating often from one to the next. We don’t actually know (I wish we could measure this) how people are using MDC – we can only guess at this point.

    2. I would love for us to surface some of the community-oriented things but I don’t know if it’s possible with deki yet. For example, showing the last three edits or the top 10 contributors on the home page.

    3. I like one thing that Wikipedia does – an “article of the day.” Would be good to start something like that for especially good content once a week or something on web-tech.

  14. blizzard —

    1. See as the proposed new “alphabet soup” type of page.

    2. Yes, that’s stuff we can do, we just need to put the code together. It’s on my list of things to do very soon.

    3. Yes, that’s something we can do as well.

  15. you’re presented with a page full of acronyms, technologies, and miscellaneous stuff that makes it very difficult to find what you want, even if you know what you want in the first place

    In my experience, quite the opposite. It’s quite ordinary catalog organized by topic, I think I never had a problem to find something.

    The only problem I had was (is) that XUL has very weak community (especially at answering forum questions) support but that’s different story, I guess…

  16. And I hadn’t even realised that you pull in RSS feeds on the main page…

    Anyway, just try changing all your and related links to https:// – it might just work :-)

  17. Unfortunately, that didn’t help. Something in the ajax RSS plugin is putting an http URL into the page.

  18. Is there any statistics as to how people use MDC at the moment?

    I personally think this is a step backwards. I have a feeling that what you’re actually doing is making many pages that are visited the most often (i.e. the JavaScript reference, for example) more difficult to find by adding a new level of hierarchy and requiring more clicks to find them. Separating things out so they’re one level deeper isn’t going to make for a more pleasant user experience. I also disagree with the notion that it “makes it very difficult to find what you want, even if you know what you want in the first place.” I disagree. I think there’s two parallel distinct uses for the MDC: tutorial-like content and reference content, and people who what reference content will already know the acronyms.

    That said, I do think there are major problems with MDC as it is now, even if I think the front page is fine. Typical tasks are too tedious due to the poorly thought-out hierarchy of pages and poorly thought-out design which uses too much space unnecessarily and as such causes unnecessary scrolling and makes links too difficult to find. As a typical example, try and find “getElementById” from the front page. Now, assuming you know exactly where it is, it takes 5 clicks: DOM->Gecko DOM Reference->DOM Document Reference->document.getElementById. But titles like “DOM Document Reference” is non-obvious. An index view would be much more enlightening.

  19. As someone just pointed out to me today, the MDC home page is now showing up as 100% secure – thanks for doing your bit!

  20. …i usually don’t post lots of comments on blogs but i must admire the job u guys at mozilla did! Great work on the homepage, satisfied(but still not great) on the technologies (the navigation i mean) part and mainly on documentation side!

    Great job overall!


This site uses Akismet to reduce spam. Learn how your comment data is processed.