Oct 272010

The MDN Doc Center (as the documentation part of the Mozilla Developer Network will be known going forward) is getting ready to receive a new look, which will help it match better with the rest of the MDN web site.

We’ve put a few iterations into the design, trying to maximize the amount of your browser window will contain the actual documentation you want to read, while still making the required user interface options available. I think the design team has done a good job here, and I’d like to share the look with you now.

A mockup of what MDC documentation pages will look like.

Key features of note here:

  • The header area at the top of the page is now vertically much smaller than it is currently (and vastly smaller than the rest of the MDN site). This maximizes screen real estate on modern widescreen displays — especially on netbooks.
  • The breadcrumbs bar has been moved more obviously up into the header, and is smaller than it currently is, making room for our increasingly hierarchical site layout.
  • The tags area at the bottom of the page is much prettier than in the current site, and should present a nicer interface for editing the tags than we have currently.
  • The drop-down menus for accessing page and site features have been moved into the main header area, alongside the breadcrumbs, again reducing the amount of space the header area takes up.

There are still some iterations to be done on nailing down final details, but the scripting work has largely been done for the first draft, and we hope to have a version of this skin staged on a test version of MDC soon, so people can give it a try and offer feedback. I’ll be sure to blog further as we close in on that!

 Posted by at 2:03 PM

  7 Responses to “Introducing the future look of MDC”

  1. Looks reasonable at a glance, although practical experience will really say how well it works. But do netbooks really have modern widescreen displays? :-P

  2. Well… no, I was just throwing that mention of netbooks and their tiny vertical screen space in there. :)

  3. I think hiding the Edit button in a dropdown will make it even less obvious that one can contribute to the docs easily. IMO instead of hiding it, we should make it open a How to contribute type of page.

  4. Yeah, that’s one of the iterations I mentioned. I’ve asked them to put the edit button out where it’s visible again. I expect to see a revision with that soon.

  5. I like the new design. Although it’s still a lorem ipsum example, it would be nice to see how the content will be displayed. Code examples, list of properties, attributes, methods, browser support, etc.

  6. Nice layout! The header and breadcrumb and the footer are all an advance on current devmo.

    The font for the sections and buttons is an interesting mix, the ALL CAPS makes them heavyweight but the narrow font makes them hard to read so they recede, like all the credits on a movie poster. The font is fantastic in “DOC CENTER”, so maybe consistency wins.

    I don’t think the purple search text field adds anything and it separates it from the [SEARCH] button; I’d go for standard white search box with grayed out “Search MDN” placeholder text. Putting it and the button inside a Mozilla red background might work better, sort of like mozilla.org’s search (I’m not crazy about the “pasted-on” appearance of mozilla.org’s search panel).

    In the breadcrumb, why is JavaScript Reference in blue?

    The text “within” current MDC pages feels like a reference book with the serif font headers and ruled lines; a big downside is you wind up in a mess of ruled lines, often at the bottom. The mockup doesn’t show the difference between h2 and h3 headings so it’s hard to tell how a real page will feel, but it seems the typography in the new design will be more flow of text and less reference-like. Meanwhile the new design is paper-like, actually drawing a white page on top of that off-white background. I don’t think drawing a page background adds anything: it wastes space (remember people are going to have a resized MDC open while working in a main window) and part-way through a long page all you see are gray bars on the sides of the window. And the page metaphor doesn’t work when the h1 title of the page sits outside it on the offwhite background. The only other item on that offwhite background is the “Last modified ” at the end, and again when you’ve scrolled the page down and you see gray on three sides with just that text it’ll look strange and wasteful. I prefer current MDC and mozilla.org full-width white with no background, and possibly keep a serif h1 (maybe even in Mozilla red like mozilla.org) for the heading at the top of the page.

    It’s hard to redesign but it’s worthwhile. Cheers.

  7. Anthony & everyone:

    We’ll get a chance to try out the skin on a staging site, with the actual MDC content, before we deploy it. IT is working on getting the staging environment set up today, so hopefully we’ll be able to try it out in action within the next few days.

    I just this morning received an iteration of the skin mockups with a big edit button at the top, BTW.


    We looked at it without the white box, and in fact a few people were in favor of it, but we finally decided that it made the article content blend into the rest of the page too much. Having the box there makes the real content pop, and helps the other stuff fade into the background. It also IMHO makes it feel much more like you’re reading a book, which frankly makes me a little happy. That said, if it doesn’t feel right when we’re using it for real content, it’s an easy change to make.

    I think “JavaScript Reference” is blue there to show what the link looks like when pointed at.