There’s some feedback being posted to the Hacker News thread about the blog post: https://news.ycombinator.com/item?id=14744919
Most common complement: looks clean and doesn’t skew uncomfortably far away from the previous design of MDN.
Most common concern: page titles may be too large, want to make sure a good amount of content is visible without having to scroll.
It looks good. Some minor suggestions:
The animation on the dropdowns makes the UI appear sluggish. It might not be noticeable to an average user, but even microsecond delays can be frustrating for fast users, because it makes it look like slow processing is making the UI go out of sync with user actions. Also, the menu dropdown timing is not aligned with the hover change under the mouse. I think that UI animation is not a good idea in general, unless it clarifies something that would not otherwise be clear. In this case, it makes things a bit more confusing.
Edit: playing around with the dropdowns makes me feel like I’m seeing double. The new dropdown appears before the old one fades away. It will probably be even more frustrating for users on slow devices. I would show/hide the dropdowns immediately, with no animation or delays, just like the hover effect directly under the mouse.
High contrast (along with yellow stripes) says “danger”. Since many people who land on the site are probably dealing with anxiety (bugs), it might be better to have the design fade into the background more.
Maybe try a dark gray for the text rather than black. The white text on a black background requires squinting. A blue (like #21527E from the header) might work.
I’d really appreciate it if a night mode (light on dark) toggle were available. Staring at large expanses of white is less comfortable for my eyes.
New design is disappointment.
Black background is harsh for eyes, it’s really harder to focus on text with so much contrast.
P.S. It reminds me special colour scheme for vision disabled in Windows - it’s awful unless you specially need it.
My, those are some large headers. I feel like the <h1> could be taken down a full 1 rem and still be effective; when it’s this large I feel like I’m looking at something made for the seeing-impaired. The other heading elements should also be made smaller.
I also agree with some of the comments above that the stark white/black scheme is rather harsh on the eyes. Especially with such bold, square heading fonts and visual elements adding a little color and less contrast might be nice.
Thanks for the feedback everyone. We’ve already incorporated some of it and we’re going to make some more incremental changes over the next few weeks. The headers in particular will be adjusted in the next round, the contrast is already reduced.
Having been part of a number of re-branding efforts I understand how goals drive the design and don’t mean to make my feedback to simple or harsh however: This is too hard on my eyes and is uncomfortable to look at. As others have stated the design is so bold it distracts from the content.
My suggestions would be
mute/soften the design so the content stands out
make the background less bright
Can have the avatar of contributors back? It can drive us to translate and improve the page, please~~
Lower the font size
sitting on a 4k screen and the font-size is enourmous
This is what i see:
This is what i wanted:
Looks good, although maybe a bit large for documentation - but hey, that’s what zoom is there for. The biggest issue though is the breadcrumb - why on earth have you replaced our old helpful breadcrumb with back links? I often used that breadcrumb as a way to help my exploration in finding new and interesting things!
This
is far better than this
Yeah, I agree with you, may we keep the breadcrumb like before, it is easier to move to other interesting article
I don’t like the new design, because I’m coming to MDN to read the content. Now on 27 inch screen i can usually max 2 paragraphs and a huge header that takes the entire screen.
Noticed a lot of people complaining about the font size. Instead of trying to find a size that works for everyone, could you implement a fluid layout?
I’d like to be able to decrease my font size, and get longer line-lengths, rather than just zooming out. This is particularly helpful for wide code examples.
Poking around in the css, you could do this by removing the following constraint:
.center {
max-width: 87.4375em;
}Ugh. I feel like it’s shouting at me and have already adjusted my zoom to 80%. Even with that, there is too much white space.
I actually use this site extensively as I am still learning in some areas of development, but I’m already thinking that I will find a different resource that doesn’t hurt my eyes or my head.
I find it curious that similar feedback prior to go live on this same topic was ignored completely. As a project manager, that is highly disappointing.
It would be weird for me to tell to front-end designers behind such a big developer oriented site that the flat/square design is a major usability downgrade. So I assume you are aware of the long disabilities list and the common opinion of it being ugly and unwelcome.
So my question is, why did MDN make such a decision?
I mean, if the company that forcibly pushed the trend (Microsoft) or other large companies that followed the trend would have any success with it, I would understand (in some degree) your sacrifice of usability in order to look “trendy”. But all I read in the forums/support/feedback pages is them causing disappointments and trying to stop leaving users and degrading reputation…
Please satisfy my curiosity. How does MDN expect to win on this losing formula?
Seems like you need more black padding below the bottom of the white letters (‘Terminology’ in the image). If you need to conserve vertical space, you could remove some black from above the white text.
The high-contrast design is awfully harsh on the eyes. In particular, the white-on-black highlight headings are not only hard to read themselves, but they’re so loud in the sea of white surrounding them that they almost drown out the regular text in their surroundings. It’s difficult to pick out the dark-colored links, too. It’s actively hard to read.
consider changing main{background:#fff;} to #fafafa or similar
