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.
[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...
Upshot is that Firefox would upgrade, but forget my profile every time. That took months to sort out. Chrome simply won't update at all. Neither will Jetbrains tools, Docker desktop, you name it.
You can try to make everyone upgrade to the latest browser all you want, you're still going to have people running old versions. If you're running a free website, you are at your liberty to ignore those people. But somewhere between 5 and 7 figures a year there's a cutoff where you're going to do backward compatibility because the customer says so.
https://support.mozilla.org/en-US/kb/firefox-esr-release-cyc...
* Randomly remove features from MDN
* See which ones people complain about most
* Reintroduce these as part of the new paid subscription
* Profit!
This is the chant of people who've set about forcing regressions on others. Usually it would just be more honest to say, "we don't care about what you want."
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.)
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.
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.
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...)
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" ?
The people behind the redesign do so for career, resume & portfolio reasons - they are very unlikely to ever use MDN themselves so they don't care and don't see the problem. You can't rely on user feedback because there's a very high risk users will tell you everything is fine and there's no need for you to mess with anything.
But as far as I can tell all they've done is put a tick there if any version of the browser supports the feature.
That means I could have learned the same information from the old table just by looking at whether the cell had anything in it, with no version numbers "in my head" at all. So I'm feeling patronised rather than helped.
If they'd done a bit more work and made the ticks indicate something like "available in the oldest supported version of the browser" (which is a recent version for Firefox and Chrome but not for Safari), that might have justified what they wrote.
But.. THAT'S WHY I'M LOOKING AT THE FRACKING CHART!
I wouldn't be surprised if you told me that this was done with colorblind people in mind, I've seen many designers blur the line between accessibility and aspects of their design preferences they tell themselves are about accessibility.
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.
They decide to use the error color as primary color. So you can't even know it is a error icon/section now without read the text.
Overall the new design does feel more slick, I think it has potential. But I wish they had focused more on readability/usefulness over "cuteness".
This site doesn't need to be "fun" — they've successfully created a useful tool. They should be proud of that, and keep building in that direction.
Sometime around since 2010, most of the design changes seem to be going backwards and I'm starting to hate people change anything as nothing is improved practically.
It's like all changes are done via personal taste instead of through design philosophy for the many.
Like everyone else said, why do we now have to click on every browser name to see if it's supported on 99% people or it's supported on a browser released yesterday?
sub headings have a larger font weight than the section titles themselves.
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.
It's not all red. They've color-coded each page by whether it's about HTML (red), CSS (blue), Javascript (orange), HTTP (green), or Web APIs (purple). The Web Technology section is also blue for some reason.
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?
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.
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.
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.
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...
Again though, you bring up very good points. With Microsoft and Apple specifically EXPLICITLY throwing in the towel on maintaining documentation for this stuff and pointing people to MDN it boggles the mind how MDN needs money for hosting and subscriptions to fund special content.
Can't say for others, but Google has web.dev whose implied purpose is to be the sole source of truth for the web (even if a lot of it Chrome-only)
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'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.
It does, indeed. It does also remind me of GitLab and their quest for finding the best navigation [1]. It was every few versions that the nav kept changing... from horizontal to vertical to fly out to top/side, etc. Looked like bikeshedding on the outside as it seemed to be easier to iterate over the design of the product rather than the actual product. Ultimately what their UX team settled on has been pretty stable for a while.
[1] https://about.gitlab.com/blog/2019/07/31/navigation-state-of...
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")
But redesign for "modernisation" sounds like doing it for the sake of it, unless people would benefit somehow from improved UX. Modernisation alone does not tell this however, I would expect slick awesome buttons, but some ugly, but important buttons gone.
(Yes, I walk every day, but this doesn't mean that I would welcome feet as a subscription service with the poor damned to crawling.)
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)
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...
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...
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.
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.
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.
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 '.
The servers certainly should be free. AWS, google cloud, Azure should be hosting MDN for free as part of their commitment they laid forth to support MDN.
Vague promises are one thing, donating enough to support full time employees at MDN is completely different.
Even if the servers are free, they’ll have other costs.
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
Disabling JS fixes most of those annoyances, but I'll have to enable it for some documentation examples.
It’s hard not to feel pessimistic about this one.
If they want to launch a paid newsletter/tutorials site with the same name, it doesn't really affect me much
Really? I just wanna google for what I need and find it. I guess I'm not representative?
space in the new design
for my taste.
Sadly par for the course with modern web design.
In case they are reading this, here's what I liked and what I think can be approved upon:
LIKED:
- Besides the interactive examples, it looks like you stuck to using standard web fonts instead of loading some bullspit Typekit or Google Font Loader thing. Thumbs up!
- Thanks for dark mode!
- Overall the design is minimalistic. Thanks for not trying to impress everyone with "modern" design or l33t JavaScript skillz.
- Thanks for keeping MDN alive!
THINGS THAT CAN BE IMPROVED:
- The branding is less distinctive than it was before. It's definitely not bad, but the bold monospace "MDN" was more distinctive and made me feel like I wasn't on some rando site. (In fact, that logo still is visible at the footer of the page.)
- I'm not the biggest fan of the 3-column layout. Again, it's not bad, but I think I could totally do without the right-hand column and give the main content more horizontal space. Remember that your site is for developers, and I think most developers are fairly pragmatic about how much content they want to see on-screen at a time.
- The left-hand column is a bit weird. I'm not sure how much of a benefit the scrollbar provides and it also seems to jump when you get to the bottom of the page, which is distracting.
- As others have mentioned, the compatibility table seems nerfed. Definitely don't get rid of it, but I think making it more useful would have gotten more people a positive view of the new page design. If that feature provided a little more info so that I only resorted to caniuse.com 1/3 of the time as opposed to 2/3 of the time, that'd be a good win.
- Remove the hover effects for the top menu items in favor of revealing details on hover/click. Hover is the devil even on desktop; I hate it when I casually drag my cursor from the URL bar down to the page and suddenly some page element appears and covers up what I'm trying to look at.
It looks like max-width of the main content is hardcoded to 1440px so everything (sidebars included) has to squeeze into that. As a result there are huge white bars of emptiness on either side, but a lot of vertical scrolling.
Otherwise though I am indifferent to the style changed. It's kinda lost its character and looks really bland but I can live with that.
[0]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
Correction: it only stays dark for me because my initial visit used dark mode. If your initial visit uses light mode, it will stay light even if you later choose dark mode.
Red and black (darkmode) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bo...
Blue and black (darkmode) https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Cont...
Both pages are under the "References" section.
The same as category on nav bar. And why the design behind that... I don't know, this is just an observation.
.recent-contributions .request-title { font-size: 1em; line-height: 1.4; }
* Code samples that were free of soft line wrapping now have lots of it, because the code blocks are narrower, and the wrapped lines are misindented and confusing.
* The line-height (2x the font height) is too large; this makes it hard to pick out paragraphs, because the whitespace between lines in a paragraph is too close to the whitespace between paragraphs, headings, etc.
* Using red as a link-color is bad
I do like the sticky table of contents and the inclusion of a dark mode, though.
... Why? I don't use MDN often, mostly just as reference material. I have enjoyed their documentation before, it's always been short and to the point with a few examples and it felt very complete. With this the first article I click on raises an odd question which I feel is either too much detail for reference or too little details for experts.
https://html.spec.whatwg.org/multipage/interactive-elements....
For now, one has no way to tell whether a given code snippet in MDN is licensed under CC0 or MIT.
the landing page is mostly useless to me, I need an extra click to get to reference and guides. It's like a status page used for home page, the search can be on the top-right corner of each reference|guide page instead. Yes just go directly to reference|guide, why not?
on reference and guide pages, I hope there is a left and right arrow at both sides of each content page so I don't need scroll all the way down to the bottom then click on that small prev and next button to turn pages.
MDN is not mdn.mozilla.org, nor www.mdn.org.
MDN is developer.mozilla.org, of course.
Good luck
And maybe it always did in some way.