7 ms·

MDN Redesign

279 points by Vilkku 5y ago

ramesh31 5y ago
Not sure how to feel about this. On the one hand, the information does seem more accessible. On the other, all the personality of MDN has been completely wiped out and it feels like an autogenerated github page. Sadly par for the course with modern web design.
- ajb257 5y ago
  As much as personality is fun, it's clear and simple - first and foremost it's a reference work?
  - ramesh31 5y ago
    Sure, that's the logical programmer mindset. But the web used to be fun, and that makes me sad.
move-on-by 5y ago
> 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.
- Flankk 5y ago
  Hey Mozilla, just writing to thank you for your excellent documentation. The only real problem I have is how free it is. Is there any way I can send you money every month in perpetuity. Thanks.
- seumars 5y ago
  If anything it's the least harmful way of generating a profit. Better than restricting parts of the site. Besides, a subscription service like this is something employers will most likely be paying for, not developers – unless you're a freelancer, in which case it still would count as a business expense.
- Macha 5y ago
  Mozilla's given me a lot of reasons to be skeptical of much of their last few years but I think this is relatively safe. I don't think they can mess this one up. Web Docs, the bit most people here care about is open source and has many contributions from MS/Google also, so they can't really paywall it or make it too expensive or they'd just go back to hosting that content themselves on msdn or web.dev If they want to launch a paid newsletter/tutorials site with the same name, it doesn't really affect me much
seumars 5y ago
Love the update. The color-coded pages are also very useful. Though I wish they had an option to hide deprecated methods and properties, or at least put them in a different group.
- Vinnl 5y ago
  What do you mean by color-coded pages? That sounds useful, but I don't see anything about it?
pdenton 5y ago
I'll just use zeal from now on and never update it. It was fine earlier today, but now it's awful. There was nothing wrong with the old design.
apocalyptic0n3 5y ago
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.
- ivanche 5y ago
  I’m almost sure this was done for accessibility reasons. For some people, red and green are the same color.
  - apocalyptic0n3 5y ago
    That actually makes sense. There's no reason they couldn't have done a check mark/giant X along with the version number, though.
  - dogleash 5y ago
    As a person with red-green colorblindness, I doubt it. The previous version was fine as had an impossible to miss shape-based indication (the X across the cell). 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.
- seanpkent 5y ago
  Not being able to see browser version numbers at a glance in the Compatibility Chart really reduces the usefulness. I know I can click on a box to see which version a feature was added, but for certain APIs like MediaRecorder (https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder https://developer.mozilla.org/en-US/docs/Web/API/MediaRecord...) this is a lot of clicking! There are subtleties like `pause` being implemented in Safari 14.1 where the rest of the API was implemented in 14.0 I've been bitten by this.
- mjw1007 5y ago
steve_adams_86 5y ago
I believe I commented on hacker news that I’d pay $5 for something like this (rather than the proposed $10+). I guess I should follow through, haha. Edit: https://news.ycombinator.com/item?id=27307059 https://news.ycombinator.com/item?id=27307059
jrochkind1 5y ago
> 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?
ent101 5y ago
This looks way better than before! Font sizes and layout have improved a lot.
moritzruth 5y ago
I really like it.
politelemon 5y ago
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-to-leave-unchanged/90622 https://discourse.mozilla.org/t/mdn-new-logo-poll-add-option...
ourmandave 5y ago
Has the look and feel of Microsoft docs (docs.microsoft.com), which isn't a complaint. And maybe it always did in some way.
- seumars 5y ago
  Yea it's the slightly too thin headings on slightly too grey background.
jayelbe 5y ago
Where'd the dinosaur go? :'(
StanAngeloff 5y ago
> 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.
- ulimn 5y ago
  > 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")
- lloydatkinson 5y ago
  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.
  - mariusor 5y ago
    You seem to be implying that MDN is no longer the best resource for reading documentation about web technologies. Outside of reading the W3C RFCs, is there something better out there?
    - irrational 5y ago
      W3schools has greatly improved over the years and is often better for a quick lookup.
      - Sateeshm 5y ago
Starlevel001 5y ago
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.
dimitrisnl 5y ago
Oh my, it looks ... bad and hard to read. Any way to spin off the previous UI?
- na_other 5y ago
  Dash / Zeal haven't been updated yet so the previous UI should be present there. I currently have the previous UI in Dash.
codeptualize 5y ago
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.
andrewgioia 5y ago
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.
Vanderson 5y ago
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.
JSdev1 5y ago
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" ?
- JSdev1 5y ago
  Ok I added styles that I am using for the site, I included Before and After screenshots, see link https://github.com/mdn/yari/issues/5389 https://github.com/mdn/yari/issues/5389
- CA0DA 5y ago
  can you share your custom styles?
  - JSdev1 5y ago
    I'm still working on it. There is a large amount of things to fix. This is the #1 source of web dev information, and from what I can tell they completely screwed it up with this "design update"
- seumars 5y ago
  Also interested in the custom styles. Although I like the redesign, it's all over the place typographically – 300 only for h1, 400 for h2 with a slight increase in letter spacing (?!) – but can't be bothered to apply a fix myself.
- Nextgrid 5y ago
  > 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.
andrew_ 5y ago
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?
- brimble 5y ago
  This one really hurts scanability, which was exceptionally good with the old design. I don't care what they do to the stuff around the content, but this redesign has made the content itself harder to use, which makes it a bad redesign, considering how content-focused the site is.
  - andrew_ 5y ago
    I don't understand how a company like Mozilla doesn't have the UX talent to call this out immediately when the redesign was proposed. This seems more like a change for the sake of change thing we see out of Google.
adrianthedev 5y ago
Oh darn! This is going to take a while to get used to...
romellem 5y ago
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.
- throwanem 5y ago
  I'm somewhat favorably surprised they kept the version history stuff at all instead of pointing to caniuse.com, which specializes in it.
  - wiredearp 5y ago
    They once wrote a note over on https://hacks.mozilla.org/2019/09/caniuse-and-mdn-compat-data-collaboration/ https://hacks.mozilla.org/2019/09/caniuse-and-mdn-compat-dat... about why and how they differ.
  - yencabulator 5y ago
    Also, caniuse.com's way of displaying the browser versions is much more helpful. It also communicates which browser versions are current, what's coming up in the next version, and so on.
- mjw1007 5y ago
  The relevant feedback issue appears to be this one: https://github.com/mdn/MDN-feedback/issues/20 https://github.com/mdn/MDN-feedback/issues/20
- jrochkind1 5y ago
  Uh oh. That's one of the main things I go to MDN for. I agree.
- fgeiger 5y ago
  I fully agree that the browser compatibility information used to be better. That shortened compatibility table is next to useless right now. It even shows a checkmark for features that are only going to be supported by a future (!) version of a browser. For instance, the dialog element [1] is only going to be supported in the upcoming Firefox 98 but already shows a checkmark. [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#browser_compatibility https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...
999900000999 5y ago
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 '.
- irrational 5y ago
  A few years ago Google, Microsoft, Apple, etc. sent out a press release saying they were abandoning their own documentation efforts and were going to support MDN going forward, which they now considered to be the official documentation of the web. 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.
  - 999900000999 5y ago
    Without seeing their balance sheet we can’t know what their costs are. 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.
    - irrational 5y ago
      Yes, but we are talking about a who’s who of the largest tech companies in the world, each of which has their own cloud service systems. One of them could host the content and the others could each pay for a full time person and it would be a few magnitudes less than my paying a single penny towards it a year.
      - 999900000999 5y ago
        I would love for that to be the case, but at the same time Mozilla is notorious with money mismanagement. I wouldn't hold my breath here for any big company to step up and feel more Mozilla's coffers. That said, I'm open to buying some merch. As in I'll pay $50 for a sweatshirt
html5web 5y ago
The new site has readability issues, devs you can use the css to fix the font size and line height issues. .homepage .article-tile p { font-size: 1em; line-height: 1.4; } .recent-contributions .request-title { font-size: 1em; line-height: 1.4; }
irrational 5y ago
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-google-w3c-samsung-together-create-cross-browser-documentation-mdn/ https://blog.mozilla.org/en/mozilla/mozilla-brings-microsoft... https://www.zdnet.com/article/developers-rejoice-microsoft-google-mozilla-are-putting-all-their-web-api-docs-in-one-place/ https://www.zdnet.com/article/developers-rejoice-microsoft-g... https://opencollective.com/open-web-docs/updates/introducing-open-web-docs https://opencollective.com/open-web-docs/updates/introducing...
- deleted 5y ago
  [deleted]
- downrightmike 5y ago
  We're long past that way of thinking. At all those companies, they are optimizing for operations not building goodwill. Honestly, this is probably more up openshift's direction right now.
- dmitriid 5y ago
  > Why are Google, MicroSoft, Amazon, Apple, etc. not hosting MDN for free on their cloud platforms 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)
- randomsilence 5y ago
  Does anyone of them see the web as their future platform? Each one of them apart from Amazon has at least one competing technology.
- Rapzid 5y ago
  Yeah if you dig up the HN conversations on these announcements people have discussed this at length. 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.
canyonero 5y ago
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)
throwawayninja 5y ago
> Warning: The tabindex attribute must not be used on the <dialog> element. ... 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.
- rezonant 5y ago
  The spec itself says the same thing with basically no additional detail. I don't exactly see why this is the case but I suppose it does interact with focus as is and tabindex would conflict with that? https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element https://html.spec.whatwg.org/multipage/interactive-elements....
Strilanc 5y ago
Comparing the old version: https://web.archive.org/web/20210302090607/https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog https://web.archive.org/web/20210302090607/https://developer... to the new version: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog 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.)
- forgotpwd16 5y ago
  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.
- ricardobeat 5y ago
  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.
- morpheuskafka 5y ago
  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.
- Xenoamorphous 5y ago
synergy20 5y ago
two feedbacks: 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.
steren 5y ago
Wow, it's fast. I searched something, and as soon as I selected one of the quick result, the page displayed!
andrewthebold 5y ago
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.
Eduard 5y ago
Is there a way to select the old design? There is too much space in the new design for my taste. Update: https://github.com/mdn/yari/issues/5364 https://github.com/mdn/yari/issues/5364
- seumars 5y ago
  Almost definitely not. But holy cow that codebase is a mess.
maxloh 5y ago
They didn't solve the code license issue[0] a year after the transaction completed. For now, one has no way to tell whether a given code snippet in MDN is licensed under CC0 or MIT. [0]: https://github.com/mdn/content/discussions/5901 https://github.com/mdn/content/discussions/5901
jerrygoyal 5y ago
what HN thinks about that custom scrollbar design?
- JSdev1 5y ago
  Bad, I'd prefer native scrollbar, but only option for now is I added extra styling to improve
puyoxyz 5y ago
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?
benfrain 5y ago
Where has the ability to press the ‘/‘ key for instant search gone?????
- forgotpwd16 5y ago
  Related, Firefox has that functionality for any page.
ravenstine 5y ago
Of all the sort of needless website redesigns I've seen, this one is actually pretty decent. Having gone through this sort of thing a few times myself, I want to give kudos to those who worked on this. 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.
- JSdev1 5y ago
  Agree 3 column layout is no good, that 3rd column should go back to being above the 2nd column as before, I added custom CSS to fix that
- ravenstine 5y ago
  BTW, I meant "click/tap", not "hover/click".
agumonkey 5y ago
To me it's a yes. I never used mdn super deep, but on a first microsecond feel, I felt "nice", which is rare with redesigns these days. Good luck
gaius_baltar 5y ago
Hell Mozilla, I feed so sad every time one of that awesome Godzilla-like monsters with communist-inspired imagery is replaced by a generic bland corporate-friendly logo. :(
mrpotato 5y ago
I was looking around to get a feel for the changes when I noticed that the colour scheme is different on some pages, I'm not sure why? Red and black (darkmode) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body 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/Content_categories https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Cont... Both pages are under the "References" section.
- mmis1000 5y ago
  That is base on category. HTML is red, CSS is Blue, js is orange and so on. The same as category on nav bar. And why the design behind that... I don't know, this is just an observation.
LKNSI 5y ago
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.
- LKNSI 5y ago
  even subtle things like header font weights for section titles - is gone too. sub headings have a larger font weight than the section titles themselves.
- mmis1000 5y ago
  I think the worst offender is the html section. 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.
  - LKNSI 5y ago
    You're right! I just saw that. So now you have to remember the contextual meaning of the color when switching between areas of the site.
  - kipple 5y ago
    Agreed, this "primary color based on language" is a cute idea, but awful to actually consume. JavaScript (my most visited) is a low-contrast orange (especially when wrapped with inline-code styling). 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.
- LKNSI 5y ago
  https://imgur.com/a/8r3SXaa https://imgur.com/a/8r3SXaa
enw 5y ago
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.
- brimble 5y ago
  The old version looked more like it was from 2003 than this—but in a good way. It wasn't afraid of making things visually distinct. This one's the modern "consistency over usability" style that's currently in fashion.
smusamashah 5y ago
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.
butz 5y ago
I feel that new website loads much faster that old one, especially navigating between pages. Nice. One annoying thing is that top bar probably is added a bit later, so all content jumps after load.
idoubtit 5y ago
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.
deleted 5y ago
[deleted]
moretti 5y ago
It looked okay until I scrolled down to the browser compatibility table and had to tilt my head to read the vertical text
tooker 5y ago
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.
- lolinder 5y ago
  > Also, why is everything error-toned? Red is a danger color and invokes negative emotion almost universally. Red MDN!? Really? 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.
  - JSdev1 5y ago
    Why would they do that, what's the point beyond confusion? The whole thing is bad
  - vhakulinen 5y ago
    Oh, thats why the colors change. It actually hurts my eyes when jumping from link to link. So far, the purple is the worst (makes it hard to read).
rosmax_1337 5y ago
Nope, I don't like it. Is there any way to get the old version back?
sheriffderek 5y ago
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...
- deleted 5y ago
  [deleted]
- sheriffderek 5y ago
  When viewing the docs in Dash (paid app) - the styles are the old way. Fingers crossed it stays that way.
CSSer 5y ago
I found a bug. If you visit a page with a REPL, the REPL will always use the dark mode style on a subsequent visit regardless of the saved theme value in localStorage. To see this in action visit this page[0], toggle the theme to light (or dark and back again), and then do a refresh. When you toggle the theme to light, the REPL will update accordingly, but this doesn't persist after the refresh. Anyone know who I should tell about this? [0]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map 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.
layer8 5y ago
When will Mozilla ever stop wasting their (and their users) time and money on redesigns? (Sorry, had to get that out.)
ahelwer 5y ago
Is there a way to collapse the table of contents sidebar like in the old version? I read documentation pages like this on a vertical monitor (which is usually great!), and the sidebar on the new site takes up a full third of horizontal space.
- ahelwer 5y ago
  Opened a bug: https://github.com/mdn/yari/issues/5421 https://github.com/mdn/yari/issues/5421
megous 5y ago
Maybe it's time to finally completely switch to embedded...
mattlondon 5y ago
Change is always hard, but this design is way too narrow on desktop where I suspect most users are reading it. The main content is taking up perhaps 25% of available width of a fairly ordinary 27in monitor. 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.
quesera 5y ago
Astonishingly, this article contains 32 non-title mentions of MDN, but not a single link to MDN. What a silly oversight. MDN is not mdn.mozilla.org, nor www.mdn.org. MDN is developer.mozilla.org, of course.
XCSme 5y ago
Not a huge fan of it, before everything was well delimited and had nice contrast cues, now everything feels mushy and hard to skim through. Also, using different primary colors for each category is really confusing.
adrianthedev 5y ago
Gotta say. I'm not a big fan of the new design. Now it looks like every other half-done website. I miss the old headline font. It was so legible.
jimrandomh 5y ago
I don't like it. I dislike it badly enough that the first time I ran into it, I was moved to find this thread and leave a complaint here. Main things: * 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.

279 points by Vilkku 5y ago

Not sure how to feel about this. On the one hand, the information does seem more accessible. On the other, all the personality of MDN has been completely wiped out and it feels like an autogenerated github page. Sadly par for the course with modern web design.

ajb257 5y ago
As much as personality is fun, it's clear and simple - first and foremost it's a reference work?
- ramesh31 5y ago
  Sure, that's the logical programmer mindset. But the web used to be fun, and that makes me sad.

move-on-by 5y ago

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

Flankk 5y ago
Hey Mozilla, just writing to thank you for your excellent documentation. The only real problem I have is how free it is. Is there any way I can send you money every month in perpetuity. Thanks.
seumars 5y ago
If anything it's the least harmful way of generating a profit. Better than restricting parts of the site. Besides, a subscription service like this is something employers will most likely be paying for, not developers – unless you're a freelancer, in which case it still would count as a business expense.
Macha 5y ago
Mozilla's given me a lot of reasons to be skeptical of much of their last few years but I think this is relatively safe. I don't think they can mess this one up. Web Docs, the bit most people here care about is open source and has many contributions from MS/Google also, so they can't really paywall it or make it too expensive or they'd just go back to hosting that content themselves on msdn or web.dev If they want to launch a paid newsletter/tutorials site with the same name, it doesn't really affect me much

seumars 5y ago

Love the update. The color-coded pages are also very useful. Though I wish they had an option to hide deprecated methods and properties, or at least put them in a different group.

Vinnl 5y ago
What do you mean by color-coded pages? That sounds useful, but I don't see anything about it?

pdenton 5y ago

I'll just use zeal from now on and never update it. It was fine earlier today, but now it's awful. There was nothing wrong with the old design.

apocalyptic0n3 5y ago

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.

ivanche 5y ago
I’m almost sure this was done for accessibility reasons. For some people, red and green are the same color.
- apocalyptic0n3 5y ago
  That actually makes sense. There's no reason they couldn't have done a check mark/giant X along with the version number, though.
- dogleash 5y ago
  As a person with red-green colorblindness, I doubt it. The previous version was fine as had an impossible to miss shape-based indication (the X across the cell). 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.
seanpkent 5y ago
Not being able to see browser version numbers at a glance in the Compatibility Chart really reduces the usefulness. I know I can click on a box to see which version a feature was added, but for certain APIs like MediaRecorder (https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder https://developer.mozilla.org/en-US/docs/Web/API/MediaRecord...) this is a lot of clicking! There are subtleties like `pause` being implemented in Safari 14.1 where the rest of the API was implemented in 14.0 I've been bitten by this.
mjw1007 5y ago

steve_adams_86 5y ago

I believe I commented on hacker news that I’d pay $5 for something like this (rather than the proposed $10+). I guess I should follow through, haha. Edit: https://news.ycombinator.com/item?id=27307059 https://news.ycombinator.com/item?id=27307059

jrochkind1 5y ago

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

ent101 5y ago

This looks way better than before! Font sizes and layout have improved a lot.

moritzruth 5y ago

I really like it.

politelemon 5y ago

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-to-leave-unchanged/90622 https://discourse.mozilla.org/t/mdn-new-logo-poll-add-option...

ourmandave 5y ago

Has the look and feel of Microsoft docs (docs.microsoft.com), which isn't a complaint. And maybe it always did in some way.

seumars 5y ago
Yea it's the slightly too thin headings on slightly too grey background.

jayelbe 5y ago

Where'd the dinosaur go? :'(

StanAngeloff 5y ago

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

ulimn 5y ago
> 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")
lloydatkinson 5y ago
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.
- mariusor 5y ago
  You seem to be implying that MDN is no longer the best resource for reading documentation about web technologies. Outside of reading the W3C RFCs, is there something better out there?
  - irrational 5y ago
    W3schools has greatly improved over the years and is often better for a quick lookup.
    - Sateeshm 5y ago

Starlevel001 5y ago

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.

dimitrisnl 5y ago

Oh my, it looks ... bad and hard to read. Any way to spin off the previous UI?

na_other 5y ago
Dash / Zeal haven't been updated yet so the previous UI should be present there. I currently have the previous UI in Dash.

codeptualize 5y ago

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.

andrewgioia 5y ago

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.

Vanderson 5y ago

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.

JSdev1 5y ago

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" ?

JSdev1 5y ago
Ok I added styles that I am using for the site, I included Before and After screenshots, see link https://github.com/mdn/yari/issues/5389 https://github.com/mdn/yari/issues/5389
CA0DA 5y ago
can you share your custom styles?
- JSdev1 5y ago
  I'm still working on it. There is a large amount of things to fix. This is the #1 source of web dev information, and from what I can tell they completely screwed it up with this "design update"
seumars 5y ago
Also interested in the custom styles. Although I like the redesign, it's all over the place typographically – 300 only for h1, 400 for h2 with a slight increase in letter spacing (?!) – but can't be bothered to apply a fix myself.
Nextgrid 5y ago
> 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.

andrew_ 5y ago

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?

brimble 5y ago
This one really hurts scanability, which was exceptionally good with the old design. I don't care what they do to the stuff around the content, but this redesign has made the content itself harder to use, which makes it a bad redesign, considering how content-focused the site is.
- andrew_ 5y ago
  I don't understand how a company like Mozilla doesn't have the UX talent to call this out immediately when the redesign was proposed. This seems more like a change for the sake of change thing we see out of Google.

adrianthedev 5y ago

Oh darn! This is going to take a while to get used to...

romellem 5y ago

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.

throwanem 5y ago
I'm somewhat favorably surprised they kept the version history stuff at all instead of pointing to caniuse.com, which specializes in it.
- wiredearp 5y ago
  They once wrote a note over on https://hacks.mozilla.org/2019/09/caniuse-and-mdn-compat-data-collaboration/ https://hacks.mozilla.org/2019/09/caniuse-and-mdn-compat-dat... about why and how they differ.
- yencabulator 5y ago
  Also, caniuse.com's way of displaying the browser versions is much more helpful. It also communicates which browser versions are current, what's coming up in the next version, and so on.
mjw1007 5y ago
The relevant feedback issue appears to be this one: https://github.com/mdn/MDN-feedback/issues/20 https://github.com/mdn/MDN-feedback/issues/20
jrochkind1 5y ago
Uh oh. That's one of the main things I go to MDN for. I agree.
fgeiger 5y ago
I fully agree that the browser compatibility information used to be better. That shortened compatibility table is next to useless right now. It even shows a checkmark for features that are only going to be supported by a future (!) version of a browser. For instance, the dialog element [1] is only going to be supported in the upcoming Firefox 98 but already shows a checkmark. [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#browser_compatibility https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...

999900000999 5y ago

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

irrational 5y ago
A few years ago Google, Microsoft, Apple, etc. sent out a press release saying they were abandoning their own documentation efforts and were going to support MDN going forward, which they now considered to be the official documentation of the web. 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.
- 999900000999 5y ago
  Without seeing their balance sheet we can’t know what their costs are. 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.
  - irrational 5y ago
    Yes, but we are talking about a who’s who of the largest tech companies in the world, each of which has their own cloud service systems. One of them could host the content and the others could each pay for a full time person and it would be a few magnitudes less than my paying a single penny towards it a year.
    - 999900000999 5y ago
      I would love for that to be the case, but at the same time Mozilla is notorious with money mismanagement. I wouldn't hold my breath here for any big company to step up and feel more Mozilla's coffers. That said, I'm open to buying some merch. As in I'll pay $50 for a sweatshirt

html5web 5y ago

The new site has readability issues, devs you can use the css to fix the font size and line height issues. .homepage .article-tile p { font-size: 1em; line-height: 1.4; } .recent-contributions .request-title { font-size: 1em; line-height: 1.4; }

irrational 5y ago

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-google-w3c-samsung-together-create-cross-browser-documentation-mdn/ https://blog.mozilla.org/en/mozilla/mozilla-brings-microsoft... https://www.zdnet.com/article/developers-rejoice-microsoft-google-mozilla-are-putting-all-their-web-api-docs-in-one-place/ https://www.zdnet.com/article/developers-rejoice-microsoft-g... https://opencollective.com/open-web-docs/updates/introducing-open-web-docs https://opencollective.com/open-web-docs/updates/introducing...

deleted 5y ago
[deleted]
downrightmike 5y ago
We're long past that way of thinking. At all those companies, they are optimizing for operations not building goodwill. Honestly, this is probably more up openshift's direction right now.
dmitriid 5y ago
> Why are Google, MicroSoft, Amazon, Apple, etc. not hosting MDN for free on their cloud platforms 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)
randomsilence 5y ago
Does anyone of them see the web as their future platform? Each one of them apart from Amazon has at least one competing technology.
Rapzid 5y ago
Yeah if you dig up the HN conversations on these announcements people have discussed this at length. 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.

canyonero 5y ago

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)

throwawayninja 5y ago

> Warning: The tabindex attribute must not be used on the <dialog> element. ... 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.

rezonant 5y ago
The spec itself says the same thing with basically no additional detail. I don't exactly see why this is the case but I suppose it does interact with focus as is and tabindex would conflict with that? https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element https://html.spec.whatwg.org/multipage/interactive-elements....

Strilanc 5y ago

Comparing the old version: https://web.archive.org/web/20210302090607/https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog https://web.archive.org/web/20210302090607/https://developer... to the new version: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog 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.)

forgotpwd16 5y ago
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.
ricardobeat 5y ago
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.
morpheuskafka 5y ago
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.
Xenoamorphous 5y ago

synergy20 5y ago

two feedbacks: 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.

steren 5y ago

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

andrewthebold 5y ago

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.

Eduard 5y ago

Is there a way to select the old design? There is too much space in the new design for my taste. Update: https://github.com/mdn/yari/issues/5364 https://github.com/mdn/yari/issues/5364

seumars 5y ago
Almost definitely not. But holy cow that codebase is a mess.

maxloh 5y ago

They didn't solve the code license issue[0] a year after the transaction completed. For now, one has no way to tell whether a given code snippet in MDN is licensed under CC0 or MIT. [0]: https://github.com/mdn/content/discussions/5901 https://github.com/mdn/content/discussions/5901

jerrygoyal 5y ago

what HN thinks about that custom scrollbar design?

JSdev1 5y ago
Bad, I'd prefer native scrollbar, but only option for now is I added extra styling to improve

puyoxyz 5y ago

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?

benfrain 5y ago

Where has the ability to press the ‘/‘ key for instant search gone?????

forgotpwd16 5y ago
Related, Firefox has that functionality for any page.

ravenstine 5y ago

Of all the sort of needless website redesigns I've seen, this one is actually pretty decent. Having gone through this sort of thing a few times myself, I want to give kudos to those who worked on this. 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.

JSdev1 5y ago
Agree 3 column layout is no good, that 3rd column should go back to being above the 2nd column as before, I added custom CSS to fix that
ravenstine 5y ago
BTW, I meant "click/tap", not "hover/click".

agumonkey 5y ago

To me it's a yes. I never used mdn super deep, but on a first microsecond feel, I felt "nice", which is rare with redesigns these days. Good luck

gaius_baltar 5y ago

Hell Mozilla, I feed so sad every time one of that awesome Godzilla-like monsters with communist-inspired imagery is replaced by a generic bland corporate-friendly logo. :(

mrpotato 5y ago

I was looking around to get a feel for the changes when I noticed that the colour scheme is different on some pages, I'm not sure why? Red and black (darkmode) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body 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/Content_categories https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Cont... Both pages are under the "References" section.

mmis1000 5y ago
That is base on category. HTML is red, CSS is Blue, js is orange and so on. The same as category on nav bar. And why the design behind that... I don't know, this is just an observation.

LKNSI 5y ago

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.

LKNSI 5y ago
even subtle things like header font weights for section titles - is gone too. sub headings have a larger font weight than the section titles themselves.
mmis1000 5y ago
I think the worst offender is the html section. 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.
- LKNSI 5y ago
  You're right! I just saw that. So now you have to remember the contextual meaning of the color when switching between areas of the site.
- kipple 5y ago
  Agreed, this "primary color based on language" is a cute idea, but awful to actually consume. JavaScript (my most visited) is a low-contrast orange (especially when wrapped with inline-code styling). 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.
LKNSI 5y ago
https://imgur.com/a/8r3SXaa https://imgur.com/a/8r3SXaa

enw 5y ago

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.

brimble 5y ago
The old version looked more like it was from 2003 than this—but in a good way. It wasn't afraid of making things visually distinct. This one's the modern "consistency over usability" style that's currently in fashion.

smusamashah 5y ago

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.

butz 5y ago

I feel that new website loads much faster that old one, especially navigating between pages. Nice. One annoying thing is that top bar probably is added a bit later, so all content jumps after load.

idoubtit 5y ago

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.

deleted 5y ago

[deleted]

moretti 5y ago

It looked okay until I scrolled down to the browser compatibility table and had to tilt my head to read the vertical text

tooker 5y ago

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.

lolinder 5y ago
> Also, why is everything error-toned? Red is a danger color and invokes negative emotion almost universally. Red MDN!? Really? 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.
- JSdev1 5y ago
  Why would they do that, what's the point beyond confusion? The whole thing is bad
- vhakulinen 5y ago
  Oh, thats why the colors change. It actually hurts my eyes when jumping from link to link. So far, the purple is the worst (makes it hard to read).

rosmax_1337 5y ago

Nope, I don't like it. Is there any way to get the old version back?

sheriffderek 5y ago

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

deleted 5y ago
[deleted]
sheriffderek 5y ago
When viewing the docs in Dash (paid app) - the styles are the old way. Fingers crossed it stays that way.

CSSer 5y ago

I found a bug. If you visit a page with a REPL, the REPL will always use the dark mode style on a subsequent visit regardless of the saved theme value in localStorage. To see this in action visit this page[0], toggle the theme to light (or dark and back again), and then do a refresh. When you toggle the theme to light, the REPL will update accordingly, but this doesn't persist after the refresh. Anyone know who I should tell about this? [0]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map 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.

layer8 5y ago

When will Mozilla ever stop wasting their (and their users) time and money on redesigns? (Sorry, had to get that out.)

ahelwer 5y ago

Is there a way to collapse the table of contents sidebar like in the old version? I read documentation pages like this on a vertical monitor (which is usually great!), and the sidebar on the new site takes up a full third of horizontal space.

ahelwer 5y ago
Opened a bug: https://github.com/mdn/yari/issues/5421 https://github.com/mdn/yari/issues/5421

megous 5y ago

Maybe it's time to finally completely switch to embedded...

mattlondon 5y ago

Change is always hard, but this design is way too narrow on desktop where I suspect most users are reading it. The main content is taking up perhaps 25% of available width of a fairly ordinary 27in monitor. 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.

quesera 5y ago

Astonishingly, this article contains 32 non-title mentions of MDN, but not a single link to MDN. What a silly oversight. MDN is not mdn.mozilla.org, nor www.mdn.org. MDN is developer.mozilla.org, of course.

XCSme 5y ago

Not a huge fan of it, before everything was well delimited and had nice contrast cues, now everything feels mushy and hard to skim through. Also, using different primary colors for each category is really confusing.

adrianthedev 5y ago

Gotta say. I'm not a big fan of the new design. Now it looks like every other half-done website. I miss the old headline font. It was so legible.

jimrandomh 5y ago

I don't like it. I dislike it badly enough that the first time I ran into it, I was moved to find this thread and leave a complaint here. Main things: * 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.