[Strilanc]

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.)

[Xenoamorphous]

> 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.

[morpheuskafka]

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.

[forgotpwd16]

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.

[munk-a]

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.

[ricardobeat]

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.

[parksy]

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...)

[nusaru]

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.