10 ms·
MDN’s new design is in Beta
- bluedino 9y ago>> For MDN that means bold typography that highlights the structure of the page, more contrast, and a reduction to the essentials. And less actual content, forcing you to scroll or zoom out.
- XaspR8d 9y agoDo you know that this is the case? I agree that some brand's attempts at minimalism center around removing features, but MDN's example page doesn't appear to have major dimensional changes or any obvious content absences. Plus, improving typography and cohesiveness of design language can aid speed of navigation, when done carefully. That said, I did think MDN's current design was both usable and modern, so it wasn't high up on the list of sites I was hoping for a refactor of...
- latortuga 9y agoI'm pretty tired of having to zoom way in on every website I visit just to get text to a readable size. I think the size on these pages looks and reads great. I can count on one hand the number of times I've arrived at a website and had to zoom out because the text was too large. Even Hacker News I have permanently zoomed to 125% and sometimes find it to be too small. Bravo Mozilla, looks great!
- teacup50 9y ago> Even Hacker News I have permanently zoomed to 125% and sometimes find it to be too small. This is an issue of eyesight, a ridiculously high DPI without corresponding scaling, or both.
- kibwen 9y agoNo, the grandparent comment resonates with me. I have good eyesight (when last tested, four years ago, it was better than 20:20) and use monitors with standard DPI on standard resolutions, and yet it suddenly strikes me that never in my life have I had to zoom out on a web page, and yet I frequently zoom in (including on Hacker News). Standard font sizes really are too small.
- dictum 9y agoI don't zoom in most websites these days[0] HN, Google, DDG and Wikipedia (the mobile version is nicer) are the ones I can't use without setting to 125%. [0] An upside of the mobile first trend? EDIT: Eh, scratch that. Just noticed Github (125%) and Twitter (110%) are also on the list ¯\_(ツ)_/¯
- tracker1 9y agoNot sure how much is age... I notice that reading my phone is often harder than desktop. I usually have a set of reading or computer glasses with me, but don't need them except for things that are close. Stuff on the phone always seems a bit small. Maybe there should be an effort to consult designers over 40 on some of these web sites/apps.
- dictum 9y agoFor Hacker News specifically: Verdana at 13px (12px for body text) was a fine choice at 72 dpi. HN didn't exist in the 1990s, but its design principles are from that era. The look itself is a nice throwback, but the type size follows a technical constraint that no longer makes sense (it only made sense when CSS was nonexistent or very limited).
- tracker1 9y agoI really wish HN would change to at least PX for the spacing... similarly for margin space.
- nxsynonym 9y agoI think the difference is negligible. It's not as if MDN is serving up single page resources as it currently stands. Is scrolling really the big of a barrier for information? It seems like a fair trade off to me. They're current design tends to blend together for my eye when scanning and is difficult to "jump" to the sections I'm looking for.
- endemic 9y agoThe layout in the screenshot looks pretty similar to what's already there... just the header branding and a few fonts are different. Comparison: http://imgur.com/a/81cYg http://imgur.com/a/81cYg
- jypepin 9y agoyour image shows that almost half of the page content is under the fold.
- matt4077 9y agoTheir image shows that the information density is basically unchanged. That was the point they were trying to make, as a refutation to the grandparent's complaint: "And less actual content, forcing you to scroll or zoom out."
- emilfihlman 9y agoIndeed. This is a stupid update.
- debaserab2 9y agoSo what? Is scrolling really that big of a deal? The increased font size and more pronounced page hierarchy make it easier for me to grok the page structure at a glance and navigate to the section I need (since I'm probably not reading the entire page front to bottom if I'm at an MDN link). Why does all information need to be above the fold? It's not like I can interpret everything on the page in the 1000ms necessary it would take me to scroll.
- teacup50 9y ago> So what? Is scrolling really that big of a deal? Yes.
- debaserab2 9y agoHow?
- pbreit 9y agoI like the " reduction to the essentials". Not sure about the "high contrast".
- jypepin 9y agoThose bold fonts and titles with black background are not working for me :\ Hopefully i'll get used to them.
- tracker1 9y agoI don't mind the fonts nearly as much as the size seems about 150% of the size it should be for the title and about 130% on the syntax... should reduce them down a little.
- majewsky 9y agoI like how they're using the logo font for the headlines. As someone who already knows the new logo, this helps me connect MDN to the Mozilla brand more intuitively. However, I'm just as concerned about the huge font sizes and high font weight as the majority here. It really distracts from the actual content.
- mintplant 9y agoThe font is Zilla Slab: https://fonts.google.com/specimen/Zilla+Slab https://fonts.google.com/specimen/Zilla+Slab In the "highlight bold" variant, if you type out "mozilla" it becomes the new wordmark: https://ffp4g1ylyit3jdyti1hqcvtb-wpengine.netdna-ssl.com/opendesign/files/2017/07/Logo_Animation.gif https://ffp4g1ylyit3jdyti1hqcvtb-wpengine.netdna-ssl.com/ope...
- mrkrabo 9y agoI disagree with you. Design 101 says: use the logo font only for the logo.
- Aardwolf 9y agoHappy to see the new design looks similar to the old design, not an experimental new UI that removes half the information or puts everything behind things you need to expand or similar! I always favor MDN over w3schools results when searching for a javascript, HTML, DOM or CSS property :)
- Semaphor 9y agoI love mdn. The old design was great and the new looks even better. There is no documentation I've ever seen that's better it clearer.
- scriptkiddy 9y ago> There is no documentation I've ever seen that's better it clearer. You should check out Django's documentation: https://docs.djangoproject.com/en/1.11/ https://docs.djangoproject.com/en/1.11/ In my opinion, it is the gold standard.
- tajen 9y agow3schools has a special DNS entry to prevent access, for me and my interns. Now that I say that, I feel like those bigcorps which prevent access to Facebook.
- tracker1 9y agoWanted to say the same... It's in a similar vein to how long expertsexchange remained in search results after stackoverflow sites took hold. I usually try to click the MDN links in search results without clicking the w3schools links on accident. Though lately, caniuse, node.green and similar seem to be my bigger searches. It's hard to keep up with some of the cross supported JS features. MDN helps a lot with syntax/usage, and it's way better than any alternatives I've seen as a pure JS resource. I do wish they'd expand the browser versions supported beyond just which browsers are supported a bit more though, then they'd be my first for almost everything.
- greggman 9y agoThat giant font works for Array.prototype.slice but what about CanvasRenderingContext2D.prototype.createRadialGradient or WebGL2RenderingContext.prototype.getActiveUniformBlockParameter?
- MikusR 9y agoThe WebGL2RenderingContext.getActiveUniformBlockParameter() fits https://pageshot.net/1pwSmFUZ4hnNcHlJ/developer.mozilla.org https://pageshot.net/1pwSmFUZ4hnNcHlJ/developer.mozilla.org
- greggman 9y agothat's inconsistent with the other Array docs. The correct function is WebGL2RenderingContext.prototype.getActiveUniformBlockParameter() if you're trying to be consistent
- carussell 9y agoArray.prototype.slice is specced out by the JS standard. getActiveUniformBlockParameter is part of the DOM. The DOM is specced in terms of interfaces—the only thing that the DOM guarantees is that when you're interacting with an object that satisfies the interface, it will have a getActiveUniformBlockParameter method. WebGL2RenderingContext.prototype.getActiveUniformBlockParameter is a JS-ism and isn't essential to the implementation of the spec.
- greggman 9y agowhat? it's required that setting WebGL2RenderingContext.prototype.getActiveUniformBlockParameter to some other function work. You set it before object creation. Objects created indirectly get the new functionality through their prototype. This is true for all DOM objects. maybe I don't understand your distinction
- carussell 9y ago
- emilfihlman 9y agoA bad update, actually decreases value because of having to scroll about constantly.
- randomfool 9y agoUnrelated to the design, it irks me to no end that MDN's top search result for 'Array' is https://developer.mozilla.org/en-US/docs/Glossary/array https://developer.mozilla.org/en-US/docs/Glossary/array when the second result is so much better. At least the ES6 Map has finally usurped the antiquated <map> as the top 'Map' result :)
- mintplant 9y agoThere's an official thread for feedback over on the Mozilla Discourse: https://discourse.mozilla-community.org/t/beta-redesign-feedback/16544/21 https://discourse.mozilla-community.org/t/beta-redesign-feed... I've posted the link to this thread over there along with a couple main points from the comments here so far, but if you really want to make sure your input is heard, you might want to hop on over there to give it. You can log in with a GitHub or Google account if you don't feel like signing up with your email.
- vladdanilov 9y agoIt may be new but it is not a well-thought design. 110+ characters per line is hard to read and ugly [1]. Pure black on white has been discussed many times. While it satisfies min contrast requirements, it feels unnatural, and again, hard to read, causing eye strain [2][3]. Although this is not an issue on screens with automatic brightness adjustment, they are sadly not everywhere and it is wiser to target an average screen considering Mozilla auditory. [1] http://practicaltypography.com/line-length.html http://practicaltypography.com/line-length.html [2] http://ianstormtaylor.com/design-tip-never-use-black/ http://ianstormtaylor.com/design-tip-never-use-black/ [3] https://ux.stackexchange.com/questions/23965/is-there-a-problem-with-using-black-text-on-white-backgrounds https://ux.stackexchange.com/questions/23965/is-there-a-prob...
- SEMW 9y ago> It may be new but it is not a well-thought design. 110+ characters per line is hard to read and ugly Er, not sure if you're looking at the before and after screenshots the wrong way round? The new design appears to reduce the number of characters per line from ~100 to ~80 (by increasing the body font size). Compare first line of Array#slice in the old design: "The slice() method returns a shallow copy of a portion of an array into a new array object selected" vs the new: "The slice() method returns a shallow copy of a portion of an array into a new array"
- vladdanilov 9y agoI was checking the blog page which has adopted the new design. MDN pages are already responsive but the line length goes far beyond that figure in some sections. The screenshot is at reduced window size.
- mintplant 9y agoblog.mozilla.org isn't using the same design as the new MDN. This is how it looks on a large (3840x2160, HiDPI) screen: https://pageshot.net/0WLEGQSCHoxb4T7P/developer.mozilla.org https://pageshot.net/0WLEGQSCHoxb4T7P/developer.mozilla.org
- tonyhb 9y agoThe bold headline steals attention away from the copy; it makes it much harder to focus on the actual content. IMO they could try making the bold header a lighter shade to stop stealing focus. I much prefer the older one for readability.
- deleted 9y ago[deleted]
- microcolonel 9y agoI wish they would stop and reverse Mozilla Open Design. In my opinion it has made all of their design worse and uglier and probably cost them money. MDN looked and felt great to browse before, now the headline is absurdly misproportioned and in the wrong place (not in the text column).
- cosinetau 9y agoThank you Mozilla!
- hajile 9y agoThat logo in the upper left needs some padding love. It looks like someone just found out about CSS background-color. A few pixels of padding would go a long way.
- MikusR 9y agoWhile this new design looks good for documentation, it's also used on Firefox homepage where it makes it look like one of those domain squatter sites.
- kuschku 9y ago> - Too much contrast? Reduce screen brightness. (This has the beneficial side effect of increasing battery life on mobile devices.) So, I have to make the rest of my UI unreadable, just because you prefer to use a cheap chinese 20$ screen which can’t even handle sRGB?
- ggreer 9y agoI use a MacBook, a ThinkPad, and an iPhone.
- pikzen 9y agoWhat a genius idea, design only for people with expensive screens, make software only people with a dual Xeon and a GTX1080 can run, and be sure to make the minimum resolution 2560*1900. You're sure to make friends. Welcome to reality, most people use cheap $20 chinese screens.
- kuschku 9y agoAnd so the solution is to create content for people on 320x480 pixel screens with no contrast? No. We should try and create the content in the best possible formats, with the highest available standards, and then the user agent, acting on behalf of the user, should scale that to the user’s current system, increasing or decreasing the contrast.
- dang 9y ago> So, I have to [...] just because you Please edit this sort of acerbic swipe out of your comments here. It breaks HN's civility rule. https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html We detached this subthread from https://news.ycombinator.com/item?id=14746365 https://news.ycombinator.com/item?id=14746365 and marked it off-topic.
- deleted 9y ago[deleted]
- Animats 9y agoThat's not the problem with MDN. MDN's big problem has been a confusion of out-of-date versions of documentation. It doesn't help that they've tried hard to get developers to use Mozilla technologies, from Jetpack to Firefox OS, which were then abandoned. Firefox's drop to 15% market share has a big effect on developers. I've watched my add-on usage drop in lockstep with Firefox's market decline.
- deleted 9y ago[deleted]
- mintplant 9y agoThis is addressed in the previous post in the series [0], linked at the top of this one. MDN is refocusing on exclusively providing solid, up-to-date web documentation, and all the old, obsolete, and Mozilla-internal stuff will be trimmed away or moved elsewhere. [0] https://blog.mozilla.org/opendesign/future-mdn-focus-web-docs/ https://blog.mozilla.org/opendesign/future-mdn-focus-web-doc...
- johansch 9y agoThere is such a thing as a too big font. I think it happens when you feel like you physically have to move back from the screen to comfortably read the text.