This thread is for feedback about the beta redesign on MDN. Post here if you have feedback that is qualitative or subjective, rather than something that is probably a bug. If it’s a bug, please file a bug and put “beta” in the summary field.
Is it accessible to view? What is the URL?
You can sign up beta testing by adjusting your MDN user profile. https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Be_a_beta_tester
Note that article links to this thread. I may stand corrected, but my understanding is that once you activate that option in your MDN profile, you will then be served the beta version of MDN.
It might sound a little sleuth like, in relation to identifying exactly what you are seeing that may have changed? But I’ve taken to mean new changes are either welcomed, or flagged as an issue. So rather than great discussions over the colour change of button, perhaps, the dialogue becomes more about things that don’t work as expected. Much like using Firefox Nightly!
TBH, I expected a save-disabled beta URL (as is often the practice) eg:
Just a note that the beta is not live yet, we expect it to go live on June 22nd, and feedback is very welcome
Seems like it’s up and running!
Yeah, here’s the blog post that announces it: https://blog.mozilla.org/opendesign/mdns-new-design-beta/
I think it is a good idea to put example in the beginning, it is often what beginners are looking for but I know that I’m sometimes looking for the Syntax and the example are quite big. Maybe, it will be better to put the simplest example in the beginning, to avoid having to scroll to far down for the syntax. And a beginner is more likely to look for a simple example. For example, in the array reduce reference, the example shown in the beginning could be replace by the “Sum all the values of an array” example.
In some cases, it is difficult to read the titles with the black background, like the array map reference. (Using map generically)
The font size is a little to big in my opinion, I prefer to zoom out to 90%.
Overall, it’s a nice redesign of the best documentation website.
Thanks for the feedback Ffloriel, I think those are important points. Re the size of the examples: agreed. Florian’s original code example was short and easy to understand, the current code is neither. I think we’ll have to establish guidelines for examples and enforce them, since they are now the most prominent part of the page.
Re the hard to read headlines: Do you mean because they are alternating between highlighted and not highlighted within the same headline?
100% agree. I’ve reverted the example to Florian’s original. The (undocumented) guideline is that the example at the top should aim to be 10 lines long, and illustrate simple usage. It’s also, I believe, the intention to avoid ES6 features in examples unless we are explicitly illustrating ES6 syntax: https://groups.google.com/forum/#!topic/mozilla.dev.mdc/ssw4AeqJKQY.
We can have more complex examples lower down the page.
It’s definitely hard to read those titles with code tags.
Actually, for me the inverted h3 titles looks more higher level than the h2 titles.
I don’t quite understand this part. Do you maybe have an example?
Will, that’s another reason I’m looking forward to having more code on Github: proper reviews for these changes.
Yup, I wanted to react to @Ffloriel’s feedback
yeah, makes sense. I think that’s a bug.
Too much black
The old blue was really nice.
Thanks for helping us find bugs everyone, we’re removing the black and white headings (hopefully tomorrow) until we find a better solution for creating them. The font has had a lot of problems
I already found a bug and reported it.
The new design seems a bit rushed. Margins and paddings are off all over the place. MDN is usually pretty flawless but the new design is off everywhere.
Headers are off from content. Divs with backgrounds are padded weirdly.
Seems like it’s a rush job to rebrand, needs a lot more work and feedback.
This is not something you want:
And this under construction sign is just akin for the 90s (it’s blurry on a high resolution)