Change is hard, naturally there will be some inherent backlash, but one thing I think is a step backwards is the Browser Compatibility table at the bottom. Previously, it had the browser version inline for the cell, now it is just a check mark. To see what version, you need to click on the cell to expand some "more info" section at the bottom.

Knowing if a feature was very recently supported or has been supported for a while is useful; now I'll need to drill down to see the information, and comparing that info across the browsers will be more difficult.

Comparing the old version:

https://web.archive.org/web/20210302090607/https://developer...

to the new version:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...

I notice that they:

- Reduced horizontal space allocated to content

- Reduced contrast (eg. code blocks have lighter gray background, compatibility table is no longer color coded)

- Increased the amount of things that don't render if you disable javascript

I'd reverse all three of those if I could.

On the good side they added a dark mode (which I don't care about but lots of people love dark mode), and they seem to have avoided the common aesthetics-over-effectiveness pitfall of adding tons of vertical whitespace.

(As an aside, I find it weird that they mention the home page in the article. In fact it's the first thing they mention. I would expect the home page to be effectively irrelevant? I only ever land on MDN via google searches and direct links to articles via stackoverflow answers. It's random-access reference material. How would someone end up on the homepage? Maybe they have analytics justifying that.)

What's up with the huge amount of whitespace? This is supposed to be an information dense website, most of the screen is empty white. Not liking this, who designs this stuff? How to revert back, or I just need to add custom styles?

Update: I added custom styles to remove 95% of the extra margins, padding, spacing, line-height, updated h1/h2/h3/h4 header styling, code highlight styling, and it looks 10 times better, I can actually read the information. Unfortunately I still prefer the previous version

Question: Why do these important sites never get actual user feedback before forcing out a major update as a big "surprise" ?

I actually dislike the change to the Compatibility Chart. The checkmark serves the same purpose as green vs red boxes did (and is frankly less readable at a glance, not more) and being able to quickly see relative times features were added at a glance made it easy to evaluate whether to use a feature or not. Guess I'll have to revert to using Can I Use? for this again. I had mostly replaced that with MDN.

I hate it, but that is just utterly subjective. I haven't had the time to formulate and ask myself why yet (just saw it 10 minutes ago), but I just feel hatred towards the new design. Could possibly change.

The reduction of colors used that gave me visual hints feels like it's giving me less cognitive offloading - and I have to feel the new structure of the page. Maybe my hatred is just because of new(tm) - but yeah, others have given better reasons for their distaste, and more directed feedback.

I use MDN heavily every day and this is really depressing. When I first landed on a fresh page today I thought I'd clicked on the wrong link and got some low-rent MDN knockoff by accident. It instantly looked cheap and jarring on a squint test.

Also, why is everything error-toned? Red is a danger color and invokes negative emotion almost universally. Red MDN!? Really?

I'm a browser extension developer and I'm strongly considering burning a week to write an extension to fix this.

Too much white that's made too many of the visual cues I'd use to navigate blend in with the rest of the page. In the past, I could immediately scroll to polyfills, browser compat charts, etc without having to pay attention while scrolling because those sections were so distinct. I've missed them three times already today and had to start over, scrolling slowly. For me, this update decreases usability.

If anyone from MDN is reading these replies, could you make the old stylesheets open so that we can use extensions like Stylus to put things back?

I really dislike this (and I tend to love great design and obsess over UX and small details): reduced legibility (small and thin fonts, lower contrast in e.g. inline code, alert boxes all blend in), and reduced information (compatibility table is near useless, missing details in specifications).

Overall this seems like straight out of 2003. The inconsistent border contrasts and weird burgundy red accent only strengthens the feeling of student side project and lack of taste (red does not convey trust).

Also that logo is ugly. It looks frail and awkwardly narrow without being harmonious (see e.g. the tiny gap between /|).

Edit: I just realized every category has a different accent color (compare e.g. HTML and CSS sections). What an absurd joke from Mozilla.

I thought I was on a different website for a moment haha.

First impression is good though! Looks clean.

One minor annoyance: The sidebar scroll behaves weird. I'm also not a huge fan of the big in your face custom scrollbars. I usually have them hidden, and the custom ones do not respect that, but that's preference.

Dark mode is absolutely great!

Much respect for taking on a big redesign like this. Especially considering the target audience, that takes guts haha.

I tried it out for a bit and I think it's generally pleasant.

Some thoughts:

- The cleanliness and whitespace make it feel like information's been lost compared to the previous version. Probably just psychological and I'll get used to it.

- I wish the header search button was a search bar instead. While it looks cleaner, I actually had a moment where I thought they removed search completely. My preference would be to have a large, highly visible search bar in the header. Increasing the click/tap area would help as well, as I misclicked on the dark mode toggle.

Does nobody remember these announcements from the past 5 years? Why would MDN need a subscription service? Why are Google, MicroSoft, Amazon, Apple, etc. not hosting MDN for free on their cloud platforms? Heck, why are they not fighting over the privilege to host it and put a big “Hosted on Azure” link at the bottom of every page? Why are these multi billion dollar companies not funding MDN when they claim in press releases to be sponsors? Funding MDN would be less than pocket change to any of these companies, much less all of them that claim to be sponsors.

https://blog.mozilla.org/en/mozilla/mozilla-brings-microsoft...

https://www.zdnet.com/article/developers-rejoice-microsoft-g...

https://opencollective.com/open-web-docs/updates/introducing...

> In mid-2021 we started to think about modernizing MDN’s design [..] with an emphasis on improved navigability and a universal look and feel across all our pages. > > A new logo, chosen by our community [..] We worked closely with branding specialist Luc Doucedame

Wait, this sounds like redesign for redesign's sake?

> Coming soon: MDN Plus [..] In the coming months, we’ll be expanding MDN to include a premium subscription service based on the feedback we received from web developers > Support MDN and make it your own. For just $5 a month.

Ah, this makes sense now. It looks like MDN is trying to rebrand and reposition itself as a subscription service going forward.

I remain optimistic, it's been a great resource over the years.

I'll miss the old MDN and never had any issues browsing the docs there. The content is what matters at the end of the day, and kudos to the team for the redesign. I do have a couple of complaints though.

1. Font weight (especially with headings) feels far too thin. 2. Seems like there are some color contrast issues when running in dark mode (my system theme)

Is there anything positive about this?

How will setting all of the type close and closer to the same size, removing any any contrast for visual hierarchy, adding muddy zeros, removing any unique character, removing any syntax highlighting differentiation, removing any visual anchors, removing underlines on inline code with links, having nothing to visually reign in rags, adding more space around just - everything, smaller button areas, and a hidden search bar... help anyone? But there's dark mode.

I know that we're going to be weirded out by any* changes... because we look at this daily - but all of these changes are exactly what the books say to "not do." I'm just totally blown away at what has happened here. I'm sorry to anyone who was on the team at this time. I mean, I'm sure you mean well. And I know that most of the docs team was let go recently. But this thing feels white labeled. Didn't they show it to anyone as they were building it? This is about "changing it" - instead of improving it. Well, it's changed! But - now it's worse. I'm pretty sure that's an objective truth. If not, please explain it to me. I'm happy to evolve. Are the jump-to links new? I like jumping to examples...

I liked the old logo because it had the iconic Mozilla in it.

The new one looks sterile, lifeless and has no character to it. I think the community didn't choose well.

There was also no option to keep the current logo: https://discourse.mozilla.org/t/mdn-new-logo-poll-add-option...

Finally! A way to directly support MDN and the great things Mozilla does. I remember emailing them over a year ago about their broken previous $5 subscription and getting 0 response back which was perfectly Mozilla.

I'm not optimistic at all about a subscription service for "web developers who want to customize their MDN experience" as an actual value add, as this seems negligible, but I am overall as 1. it's a step in the right direction for new ways to monetize Mozilla and 2. it sounds like they're listening to feedback and willing to iterate on it.

I hate it. It is way less readable than previous one. It feels like another good thing bitten by "modern designers" who favour minimalism over usability.

Old design has more contrast, headings, links, warnings e.g. all distinct elements have a distinct visual style. Now, every element on the page looks same or as much similar as possible. They couldn't find anything better to do.

MDN is the single most useful and impactful site in my webdev/design career. Above all things, I want this site to stick around and exist.

Some comments seem to be critical of any change. And while I don't like some of the visual changes, overall I think it's going in the right direction.

Most importantly, I want MDN to stay online and whatever they need to do (within reason of course) to keep it free, open, searchable and existing, I am on board with.

What is this ?

Why advertise a service without any details about what it actually is ?

On one hand 5$ is a nominal monthly amount to support MDN. But seriously, just ask for money. I'd be more inclined to help if they just wrote a post saying ' servers ain't free, give us money before this turns into w3schools '.

When the content is static, adding so much JS and CSS weaken the website for no good reason. There will be more bugs and annoyances after this redesign.

Now, scrolling MDN is sluggish with Vivaldi (YMMV). This is so annoying that I had to disable JS on MDN. I hope they'll fix this, but the amount of CSS and JS is probably too high to fix performance regressions.

From my browser console:

    [Violation] 'scroll' handler took 561ms
    [Violation] Forced reflow while executing JavaScript took 565ms

With Firefox, the scrolling is generally quicker, though irregularly. But jumping to the top of the page leaves some elements of the page completely white for half a second.

Disabling JS fixes most of those annoyances, but I'll have to enable it for some documentation examples.

> In the coming months, we’ll be expanding MDN to include a premium subscription service based on the feedback we received from web developers who want to customize their MDN experience. Stay tuned for more information on MDN Plus.

It’s hard not to feel pessimistic about this one.

I saw these comments and thought people were being grumpy about change for no reason, as usual. Then I opened MDN and... yeah no. Any way to get the old design back?

Wow, it's fast. I searched something, and as soon as I selected one of the quick result, the page displayed!

Looking at the MD source files is enlightening. Every markdown documentation system eventually approaches an underspecced, less powerful, and domain-specific version of reStructuredText/Sphinx.

> Last year we surveyed users and asked them what they wanted out of their MDN experience… The overall theme we saw was that users wanted to be able to organize MDN’s vast library in a way that worked for them.

Really? I just wanna google for what I need and find it. I guess I'm not representative?

> Reduced contrast (eg. code blocks have lighter gray background

Not an expert but this doesn’t seem like a bad thing to me as the contrast of the text with the background within the code blocks is increased, which I’d expect to be a good thing from an accessibility standpoint as I’d say it’s more important than code block contrast vs non-code blocks.

It used to have a very unique custom look and now it looks a lot like a standard readthedocs type documentation for other projects. The reduced contrast of code blocks in particular is a step back.

Was going to say it looks okay but seeing a side-by-side comparison to the previous version cannot but think it's a downgrade.

Personally, I really miss the menu background contrast - if something is a floating sidebar please give it a modestly different background content so that it looks like the box-o-stuff it acts like.

The reduced contrast is not great, but I find the more compact layout pleasing.

The old one is very busy with color, borders and backgrounds occupying that white space, this is more in line with what you expect a reference book should look like, and will not tire you out after looking at it for hours.

I generally agree on all those points, there's a bunch of things I could critique, like shrinking the search bar behind an icon, or things I like such as the more concise breadcrumbs which make the hierarchy a bit clearer.

But overall I guess after thinking about what I did and didn't like about the design, nothing really stood out as a showstopper for me. I like the old design a lot more, but MDN has always been a reference and I dip into dozens of different references every week, getting used to design differences is par for the course. As long as they don't mess with the overall content hierarchy which is great as-is I'm not too impacted.

So my takeaway was if they invest the same energy into the content hierarchy on a page, I think that would add some value. Keep what they have, don't overstuff it, but just making it easier to see "you are here" and "here be dragons". Like on that example you linked there's a "warning" about tabindex that doesn't explain why you should never add one to a dialog - seems obvious to experienced frontend developers but it would leave juniors and people who might benefit most from such a warning scratching their heads or developing a cargo-cult mentality to certain things. I can envisage a content sweep of their warning / gotcha boxes would add more value than a design refresh.

Also generally since their content is constantly expanding, something that makes it easier to get your bearings in the existing content, adding more context cues etc, and quicker navigation between adjacent paradigms or some "maybe you meant this" suggestions that would be neat. I think that's what they were going for by elevating the "related content" on the left - but that's just showing a list of stuff on the same level as the current item. Why would I care about <summary> on a <dialog> page? If you use their search for "proxy" you might end up on a page talking about web proxies, or javascript proxy objects - disambiguation would be awesome for people who are trying to get their bearings.

(then again I usually just hit back, go to my google results, and pick the next page if it's not what I was looking for...)

Thank you, I wasn't certain if they added the right-hand sidebar with this redesign. I remember consciously thinking that MDN was better than other sites because it lacked said sidebar.

I worked on a site that was redesigned every few years. As soon as one redesign finished another one would start. We, the development team, didn’t understand why the business people kept redesigning the site. We finally found out when we were chatting with one of the business people who was leaving for a new position. She admitted to us that the purpose of redesigning was 1. They could point to it as work they were doing to justify their jobs to higher ups, 2. Allowed them to expense meals and travel while meeting with design consultants and doing field research to see how to meet the needs of our users, 3. Allowed them to avoid the harder business work that they should have been working on instead of fun redesign work.

Improved navigability sounds useful.

I've often gotten lost at MDN when trying to learn some topic that is new to me. I see on the sidebar of the pages covering aspects of that topic more on the same topic, and within the page links to other related things. I'll have followed some sequence of links through the directed graphs that the pages and links form, and then remember that somewhere on an earlier page there was a link to part of the topic I haven't yet read and then flail around in my history trying to find where I saw that link.

I'd like such sites to have available predefined sequences through the site designed to teach you particular topics. Have context sensitive next and previous and contents links on the page for moving back and forth in the sequence. Context sensitive so that if a page occurs in more than one sequence people get the appropriate navigation for the sequence they are on.

> Wait, this sounds like redesign for redesign's sake?

Is it "redesign for redesign's sake" if even your quoted text states the reasons behind it? ("improved navigability and a universal look and feel across all our pages")

I mean, dark mode alone is somewhat a redesign for redesign's sake that is nevertheless bound to please many of MDN's audience.

An outrageously good resource really, I use it almost every day! Very happy to pay for it.

I imagine it's to try make it seem like MDN is still viable - Mozilla fired a good amount of their staff including allegedly most of the docs team.