MDN Web Docs
MDN has a new frontend! 🎉 #822
Replies: 2 comments 3 replies
|
I was reading the documentation when I saw the update notification. To be honest, I feel that the new sidebar’s font color and scrollbar don’t look quite right. The sidebar and the main content have lost their visual distinction, which may reduce users’ attention to the main content. I preferred the previous sidebar. Also, I find it strange that there’s no longer any spacing between the main content and the sidebar. (This is just my personal opinion :W ) before: |
|
The visual density of the newly released design is now so high that it's too hard read. It's straining my eyes and is literally headache-inducing. Every time my eyes finish reading a line and return to the left to start the next line below, my eyes are having to dart around:
We need more space between the main content and the sidebars to fix the left-right problem, and we need a larger line height for those fonts to fix the up-down problem. I made this change in 2 minutes and I could read the page again: :root {
/* Original values are commented out */
/* --layout-sidebar-gap: 2rem; */
--layout-sidebar-gap: 5rem;
/* --font-line-content: 1.75; */
--font-line-content: 1.85;
/* --font-line-normal: 1.5; */
--font-line-normal: 1.65;
}Before:
After:
Also worth pointing out is that increasing the spacing fixes accessibility issues like I'm sure more than 2 mins of messing around will end up with a better final result but an initial tweak away from the current values should occur as a matter of urgency since it's going to affect so many readers and push them away from the site (or will cause them to use a reader view which is going to miss out on the interactive examples and browser support tables). |
|
@spartanatreyu, yes, thank you for sharing your CSS adjustments. I hope the MDN team can consider making these changes official |
|
Hi folks, thanks for your feedback and sharing the CSS adjustments. This is very helpful, and I'll take this to the team! 🙌 |
|
Not sure I'd call it a bug, but pages with wide tables are miserable to read, and the content window remains narrow even when setting zoom to a lower level so it's unreadable without deleting elements and messing around with the page css. Pictures: 80% Zoom: 80% Zoom with CSS Adjustments: Even after the whole table is still too wide for the window, but whatever. Also, as an aside, alternating colors in the punctuation table aren't working optimally. |
Uh oh!
There was an error while loading. Please reload this page.
Hey everyone! We’ve just rolled out a completely rebuilt frontend for MDN Web Docs — redesigned and reengineered from the ground up. This is a big step forward in our platform architecture, and we’re excited to finally share it with you!
✨ What’s new:
💬 We want your feedback!
This launch is just the beginning. We’re still actively iterating — and we’d love to hear from you:
MDN is built by developers, for developers, and your input helps us make it even better.
Here’s to the next chapter for MDN — and the next 20 years of web documentation! 🧡
Read the full blog post 👇
https://developer.mozilla.org/en-US/blog/launching-new-front-end/
All reactions