Introducing the new MDN website

This week, Mozilla unveiled the newly redesigned Mozilla Developer Network, the latest incarnation of MDC. The website has evolved over the years and we recently decided to change the name from Mozilla Developer Center to the Mozilla Developer Network (MDN) to better reflect the developer segments that make up our community and provide a better platform for engaging developers in the Mozilla mission and our plans for pushing the open Web forward. In this blog post, we’ll walk you through some of the new features and content, in addition to some of the things you can expect in the months to come.

Our Mission
Upon first glance, the most obvious change is that the website has undergone a radical overhaul: from top to bottom, the entire MDN looks different. Even the tagline underneath the title is new: the Mozilla Developer Network is “a comprehensive, usable, and accurate resource for everyone developing for the Open Web.”

The idea behind the tagline is perhaps the biggest change we’ve made to the MDN: we wanted to create a place where all web developers – not just people who develop using Mozilla technologies – can find the resources they need to make the Internet at-large a better place. This fundamental premise drove many of the design decisions incorporated into the new MDN.

The New Home Page
One of our main goals for this redesign was to streamline and simplify the process of finding information. Because the MDN home page is the first page most people will see when they visit the MDN, we wanted to make sure a diverse set of users could access as much information as possible without cluttering the page.

Throughout the page, there are several opportunities for the user to sign up for an MDN account; if you already have an MDC/Deki account there’s no need to sign up again. If you’re new to MDN, you can easily register to join our community. Members will be able to log in to both the Developer Forums and the Docs Wiki.

The page also features a promo box with revolving panes highlighting important open Web technologies and tools. The goal of the promo box is to direct developers to the pages about technologies that are most likely to be pertinent to their work, which helps reduce the number of steps it takes to reach a desired article. There are a lot of things happening at Mozilla that developers will care about, so this is where we hope to provide every visitor a chance to learn more about those topics.

Moreover, the main content of the page will be available through a tabbed interface that will allow users to click through to whichever section in which they are interested. We currently have Docs and News but have plans to add Tools and Events as well. There are plans for the sidebar as well, but for now we have provided a live Twitter feed so that users can get a feel for what various Mozilla communities are talking about and sharing. We will eventually add trending topics based on activity from around the MDN, streams for conversations in the forums, and the latest web technology demos and experiments.

Site Architecture
The new MDN header contains a search bar and click-through access to various sections through the primary navigation. The MDN’s content has been separated into four main categories, each of which has its own navigation item: Web, Mobile, Add-ons, and Applications. This segmentation of the navigation allows us to organize content into non-overlapping buckets, which should more precisely direct developers to the content they need. Then we have the universal Docs – which takes users to a landing page leading to various articles and content from the Docs Wiki – and Community – which takes users to the Developer Forums for now – navigation items. Since those two areas are applicable to all developer segments, we kept them separate in the navigation layout.

Each content page has a similar format: we feature a few popular articles for each category, some Mozilla-supplied tools, related news and updates, and a feed with relevant tweets. At the bottom of each page, there will eventually be popular forum topics and community comments. (Only the Add-ons page has this content right now). If you don’t find what you’re looking for on the landing page for any given category, there are links in each section of the page that take you to more options and pages. Despite the design overhaul, all of the information from the previous MDC remains intact, so there’s no need to worry about losing important articles. It’s all there and works exactly the same way as before.

Also, any information that can be accessed via the Docs landing page can also be accessed from other pages on the MDN, but we wanted to provide an alternative way of presenting the information: we highlight some important web development topics, in addition to important topics from the other categories. There are also fun features like Doc of the Day and Most Active Docs, in case you’re interested in what everyone else is looking at.

Growing the Community
The final navigation item in the header is for Community and perhaps the most important addition to the new MDN: Developer Forums. In the previous version of the MDN, although there was plenty of documentation to be found, we didn’t provide developers much of an opportunity to talk, discuss, and ask questions. We felt that, in our goal to make the MDN a central hub for web developers, forums comprised an important feature to incorporate into the new version.

Right now, there are five broad topics for discussion: Open Web, Mozilla Platform, MDN Community, Mozilla Add-ons, and Mozilla Labs. These domains should be able to cover much of the wide gamut of available discussion topics, but if not, we can always add new ones. Because the forums are new, they are still in the experimental stage; if you have any feedback for us, just use the feedback link at the bottom of the page. Feel free to start new threads and ask questions about anything, especially if it’s about documentation or the open web in general.

We’d love for you to try out the new forums! Again, if you have an account for MDC/Deki, you can use that to log in; if not, you can use the link in the upper-right corner to become an MDN member.

Submitting Feedback
At the bottom of every page, there’s a link to submit feedback on the new MDN pages. Whether there’s something wrong or there’s something you’d like to see (or whether you’d just like to say hello!), just hit that link and let us know what’s on your mind. We’ll do what we can to integrate your ideas to make the Mozilla Developer Network a better place for all developers.

Next Steps
Though we have made quite a few changes to the Mozilla Developer Network, they certainly are not the last. As the MDN continues to expand, we have decided to create a next-generation Docs platform that the Mozilla web development team will be building on Django, similar to the one being implemented for the new SUMO site. Planning is already underway, and we hope to migrate documentation over sometime in 2011.

Once we’ve converted all the content over, we plan to improve the way you find information via the search bar. So far, we have been devising ways to improve the tagging system and make sure that localized versions of articles are released as soon as possible. In addition, with the help of article rating and commenting systems, we can help make sure that the most relevant and accurate results are mentioned at the top of each search query. And finally, we are building a system that allows community experts in particular fields to regulate editing and writing of articles in their domains.

We’re also looking to expand the Community tab. Though we expect the forums to remain the centerpiece of that section of the site, we hope to also bring you news, updates, and other community-sourced content.

We hope that this has helped you get acquainted with the new Mozilla Developer Network. As always, we are amenable to your feedback and ideas, as we are as eager as you are to make the MDN an even better place for web developers to write, read, and discuss important Web topics. We look forward to hearing from you, and we hope you like the new MDN.

Thanks!
– Jay & Brian (+ the MDN team)

About Jay Patel

I strive to make the web better by making sure those that develop and drive it are happy campers.

More articles by Jay Patel…

About Brian Louie

I'm a computer science student at Stanford, and for the summer of 2010, I'm an intern at Mozilla working on developer engagement.

More articles by Brian Louie…


11 comments

  1. Ryan

    Well done guys & gals. You have done a stella job the MDC was already a fantastic goto resource for myself and MDN will surely be the definitive guide to everything open.

    August 28th, 2010 at 00:42

  2. Jonathan Protzenko

    Cannot add any comment on uservoice. Clicking next does nothing with beta4. At least that’s consistent with the previous MDC iteration: it doesn’t work.

    /content/body/div[1]/div[1]/ol/li[1]/pre/@function, reference to undefined name ‘syntax’: line 1, column 1 (click for details)
    /content/body/div[1]/div[1]/ol/li[2]/pre/@function, reference to undefined name ‘syntax’: line 1, column 1 (click for details)

    (on https://developer.mozilla.org/en/JavaScript/Guide/Predefined_Core_Objects#Array_Object, first page I tried)

    What about making sure the site works once and for all instead of doing a whole load of PR about the rebranding? This will not move attention away from the core failures, and this feels very close to shooting yourself in the foot to me.

    August 28th, 2010 at 01:44

    1. Jay

      This is just the first step towards fixing the many issues we have had with the docs wiki. There are a lot of known problems that we have tried to solve with a simple front-end change to the site… and more fixes and improvements will follow.

      We appreciate your patience and feedback.

      September 3rd, 2010 at 13:55

      1. Jonathan

        > Docs are going to be updated with new theme soon… and we are working on a better docs wiki platform that we hope to launch next year.

        Great! Can’t wait to see that happen =)

        September 3rd, 2010 at 13:57

    2. Tyler Breisacher

      I’ve found that sometimes, editing the page and making a trivial change (like adding/removing a bit of whitespace) makes that error go away.

      January 10th, 2011 at 17:39

  3. Stephen Donner

    Awesome; glad to see it finally live.

    Shouldn’t we change the links in this point from staging -> prod, though?

    August 29th, 2010 at 15:45

  4. Dane Foster

    Why is it still HTTPS instead of HTTP? I ask because the performance of MDC has never been great and I’m relatively confident that SSL adds overhead that contributes to its sluggishness.

    August 30th, 2010 at 07:45

  5. Alexandre Leduc

    I hope my criticism will sound constructive:

    The banner part at the top takes way too much vertical space. IMO, even without the DEVMO area, it’s too big. I shouldn’t have to scroll down to get to the main site navigation link and content.

    Another issue I have with it is that most of the reference documention is still in the old MDC format so it makes the branding and site design inconsistent / half baked.

    August 31st, 2010 at 12:15

    1. Jay

      Agree. Banner is big… but will soon go away for members that are signed in. For visitors, we are going to make it smaller. :-)

      Docs are going to be updated with new theme soon… and we are working on a better docs wiki platform that we hope to launch next year.

      September 3rd, 2010 at 13:54

  6. Robert Kaiser

    Is it just me or is DNS for developer.mozilla.org flaky since rough the time when that has been switched? I often get a “host could not be found” message in my browser for that domain recently. :(

    September 1st, 2010 at 07:23

  7. kirankumarraju

    MDC was already a fantastic goto resource for myself and i felt good at this.

    February 8th, 2011 at 02:55

Comments are closed for this article.