81–90 of 159 posts
> 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 subscr…
what HN thinks about that custom scrollbar design?
I actually dislike the change to the Compatibility Chart. The checkmark serves the same purpose as green vs red boxes did (and is frankly less readable at a glance, not more) and being able to quickly see relative times features were added at a glance made it easy to evaluate whether to use a feature or not. Guess I'll have to revert to using Can I Use? for this again. I had mostly replaced that with MDN.
I’m almost sure this was done for accessibility reasons. For some people, red and green are the same color.
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.
Comparing the old version: https://web.archive.org/web/20210302090607/https://developer... to the new version: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di... I notice that they: - Reduced horizontal space allocated to content - Reduced contrast (eg. code blocks have lighter gray background, compatibility table is no longer color coded) - Increased the amount of things that don't render if you disable…
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.
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.
Good luck
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.