MDN’s new design is in Beta

https://blog.mozilla.org/opendesign/mdns-new-design-beta/

by omnifischer • 9 years ago

106 83 9 years ago

blog.mozilla.org

bluedino• 9 years 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• 9 years ago

Do 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• 9 years ago

I'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!

teacup503• 9 years 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.

nxsynonym• 9 years ago

I 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• 9 years ago

The 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

jypepin2• 9 years ago

your image shows that almost half of the page content is under the fold.

myfonj• 9 years ago

Thanks for convenient comparison. Most significant differences from the first sight: - Reduced / removed breadcrumbs: not OK. - Inverse text/background: not OK in general. - Removed "last contributors": not necessary, IMO neat "community" perk. ~ Increased colour contrast: not necessary. ~ More aggressive headings and sidebar navigation: not necessary. + Preserved Dino: phew, I'd miss him. + Search (bar?) at the intuitive place: YAY, FINALLY!!1!

And unrelated, the new Mozilla logo: still cannot get used to it; seems like the calligraphic humble old one was vandalized by some 1337 H4X0RZ :|

mercurysmessage• 9 years ago

The only thing I'd like to see different there would be a slightly smaller font size on 'Syntax', seems a bit large. Other than that I like the new design.

pbreit• 9 years ago

I like the " reduction to the essentials". Not sure about the "high contrast".

jypepin2• 9 years ago

Those bold fonts and titles with black background are not working for me :\ Hopefully i'll get used to them.

tracker14• 9 years ago

I 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• 9 years ago

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

mintplant6• 9 years ago

The font is 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/ope...

grenoire• 9 years ago

That's a pretty neat use of ligatures!

dlbucci• 9 years ago

You know I saw that font last night near the top of google fonts and didn't realize it was short for Mozilla. I generally prefer sans-serif fonts, but I really like the Regular variant!

mrkrabo• 9 years ago

I disagree with you. Design 101 says: use the logo font only for the logo.

Aardwolf• 9 years ago

Happy 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• 9 years ago

I 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• 9 years 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/

In my opinion, it is the gold standard.

tajen• 9 years ago

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

tracker14• 9 years ago

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

greggman4• 9 years ago

That giant font works for Array.prototype.slice but what about CanvasRenderingContext2D.prototype.createRadialGradient or WebGL2RenderingContext.prototype.getActiveUniformBlockParameter?

MikusR4• 9 years ago

The WebGL2RenderingContext.getActiveUniformBlockParameter() fits https://pageshot.net/1pwSmFUZ4hnNcHlJ/developer.mozilla.org

greggman4• 9 years ago

that's inconsistent with the other Array docs. The correct function is WebGL2RenderingContext.prototype.getActiveUniformBlockParameter() if you're trying to be consistent

amelius• 9 years ago

Offtopic. Why are long lines on HN always clipped with a big margin on narrow screens such as on mobile?

emilfihlman2• 9 years ago

A bad update, actually decreases value because of having to scroll about constantly.

randomfool• 9 years ago

Unrelated 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 when the second result is so much better.

At least the ES6 Map has finally usurped the antiquated <map> as the top 'Map' result :)

mintplant6• 9 years ago

There's an official thread for feedback over on the Mozilla Discourse: 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.

vladdanilov4• 9 years ago

It 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 [2] http://ianstormtaylor.com/design-tip-never-use-black/ [3] https://ux.stackexchange.com/questions/23965/is-there-a-prob...

SEMW• 9 years 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"

vladdanilov4• 9 years ago

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

MikusR4• 9 years ago

Is putting adds in hacker news comments allowed? That practicaltypography link leads to http://practicaltypography.com/graylist.html, has no content and asks to pay for something.

Tomte• 9 years ago

Works for me.

I guess because I have been to the site before, Matthew has just an irrational disdain for HN readers.

So the poster probably didn't even know about this redirection.

0xffff2• 9 years ago

Wow. I wonder if that page actually has the intended overall effect. I've never seen this site before, but the actual content seems useful and (perhaps unsurprisingly) well presented. That said, hijacking me to another page to condescendingly nag me (and not even including a link back to the content I was originally linked to) really puts me off. I really think that the kind of people the author claims to want money from would be better reached by simply making it easy to donate.

ballenf• 9 years ago

You got me curious enough to check it out. Ad or not, that is one of most incredible sites I've seen with deep resources that are very valuable. I learned a lot in the 20 minutes there. The 'interstitial' is just that -- a plea for donations to support the writer and hosting for an ad-free (it's ad-free for everyone, not just donors), high-quality resource. I had to read the page 3 times before I picked up on the instruction to input the root URL into the address bar, instead of being linked there. Haven't looked at the code, but is he just looking at referrers and dynamically routing based on being on his "graylist"?

If I find myself there more, I'd be inclined to send him something.

As to its effects, I think he'd prefer to drive off any and every reader who is offended by the ask. They are just costing him bandwidth with zero chance of any return. Maybe they share it with someone who ends up donating, but people who actually donate are much more inclined to be good sources of referrals to other people who may donate.

As to whether it equates to posting a link to an ad or promotion, I really don't think it crosses the line. This isn't one of those informercial sites that lead you on for an eternity without ever providing anything of substance. Instead this is just an interstitial on steroids meant to drive off undesirable traffic. It's 1000 times better than annoying ads and/or anti-blocking measures, imo.

atopal• 9 years ago

Thanks for the feedback! So, one thing we are doing differently this time around is updating the site incrementally instead of a big bang redesign. In the case of the article pages that means limited changes in the first phase to get them to conform to the new brand identity. The number of characters per line is an issue though. As stated in the blog post, we'll address the article page layout in the next phase. Article pages are where MDN users spend most of their time, we want to make sure we get those right, so we are setting aside time to focus on just them.

rhizome2• 9 years ago

The post mentions updating the "design language" of the site, is there a description of that language anywhere?

ggreer3• 9 years ago

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…

I completely disagree with this. Consider the failure modes of erring in either direction:

- Too much contrast? Reduce screen brightness. (This has the beneficial side effect of increasing battery life on mobile devices.)

- Too little contrast? Uhh… squint more, or try to find software that lets you override the designer's intent.

Most people aren't using professional screens in low lighting, and not everyone has young eyes. Lower contrast can be a deal-breaker for these people. Even for those with perfect vision, low contrast can be incredibly annoying. It's so frustrating to view a screen in direct sunlight and be unable to see content because a designer didn't want to cause eye strain.

A side note: Amusingly, the first thing I did when looking at your second source (http://ianstormtaylor.com/design-tip-never-use-black/) was use my reader mode extension. I disliked the off-black sans-serif font.

mintplant6• 9 years ago

I would prefer if the background color were something other than pure white, though, or even better, if a night mode (light on dark) toggle were offered. Staring at large expanses of white is uncomfortable for my eyes.

SippinLean• 9 years ago

> Pure black on white has been discussed many times
I completely disagree with this

Pure black on white has been reccommended against for some time, typically you'd use dark grey on a pure white bg

Note: for low resolution screens, an overly strong contrast (full black and white) is not ideal either, as the text starts to flicker. Benchmark: #333 on #fff.

https://ia.net/topics/100e2r/

nemetroid• 9 years ago

110+ characters per line is hard to read and ugly [1].

It's not that straightforward. While shorter line lengths may be preferrable for reading bodies of text[1], API pages are rarely read top to bottom. Reducing the number of characters per line makes less content visible on screen, necessitating extra scrolling and slowing down visual searching.

[1] Though it's quite possible to cherry-pick citations for either side: https://www.researchgate.net/profile/Barbara_Chaparro/public... (PDF)

tonyhb• 9 years ago

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

microcolonel• 9 years ago

I 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• 9 years ago

Thank you Mozilla!

hajile• 9 years ago

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

MikusR4• 9 years ago

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

kuschku2• 9 years 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?

ggreer3• 9 years ago

I use a MacBook, a ThinkPad, and an iPhone.

pikzen2• 9 years ago

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

kuschku2• 9 years ago

And 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• 9 years 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

We detached this subthread from https://news.ycombinator.com/item?id=14746365 and marked it off-topic.

Animats• 9 years ago

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

mintplant6• 9 years ago

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

johansch• 9 years ago

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

MDN’s new design is in Beta

Related Stories