MDN/Development/Redesign/NewDesignV1

Here is the link to v1. of the proposed design:

• Proposed MDN Design - new

Comments

Please enter feedback here. Specifically, any issues with l10n, readability, etc.

• Is this the "app center" that dbuchner talks about? Markg (talk) 11:51, 14 August 2013 (PDT)
• I think it looks very nice in general. But I can't tell how good a lot of it is because it does not use actual content from MDN so that I can compare it to something real. For example, I can't tell what the gray box at the top of the center column of text is supposed to be. Is this gray box meant to call out a quick summary of the page? If so it should have some content that would show it or explain it ("This gray box holds a summary of what is on this page." etc.) Are the quick links supposed to relate to what is in the center column of this page, or are they going to be general for the whole site? The ones that are there don't make any sense to me and so I can't tell how effective having "quick links" might be. If they related to some real content in the center column it would be easier for me to evaluate the design. What is a "navigation pattern"? I haven't heard this term. I like having the review checkboxes at the top of the page.
• How will some of the wider MDN tables look in this design? Like on this page: App permissions
• This is completely superficial, but can we have the Mozilla "dragon" logo (like in the bottom left of this page) in the corner? I see the MDN title has "For placement only" beside it, does that mean the dragon might make a reappearance?
• Which of the headings and links are to be reviewed, and which are placeholders? Right now the links under "MDN Community" have nothing to do with MDN community, but maybe they weren't intended to. Maybe the "MDN Community" heading is a placeholder too. Jswisher (talk) 13:52, 5 September 2013 (PDT)

Comment from Jeremie, 16 August 2013

Here a few things that I think needs improvement:

landing Page

• The blue header is very nice but a bit wider. It take a lot of space therefor the fold come very quickly and the page show off very few useful content. Maybe with a larger title it does not feel that way, but this header could be soften a little by shrink the space available before and after the main title ("Apps")
• Aside point, the white paragraph at the bottom of the header is not properly align with the grey column on the left. There again, it could be possible to shrink the blue space below the paragraph to soften the header a bit more.
• The editing tools are completely hidden and barely undiscoverable. I guess it's on purpose on that kind of page, however I suggest to switch the background color and the font color of that button. That way they remain unadvertised but slightly more discoverable (remind that those button should be display to login users only).
• I'm missing a few things:
  • How the login zone looks like (and where it is positioned)?
  • On the column on the left, how the items on white background looks like when they are open? (for example, how the inner white arrows of the items on the grey background is handled?)
  • About l10N: How does the page looks when an item (title, links, button) has its text displayed on 2 lines?

Content Page

• The all grey and blue approach make everything very flat. It's pretty hard to figure how it will behave with real content. Currently I think there isn't enough contrast between the main content and the aside contents making all of this a bit blurry.
• The titles ("Navigation patterns")
  • How does it looks when displayed on two lines?
  • IMO, The arrows navigation pattern looks very odd on a wiki. I have difficulty to see how we will be able to define what is next/previous page.
• The right column ("quicklinks"):
  • The right align is very bad, it makes difficult to read and counter intuitive for users. It also add some unnecessary complexity for rtl languages vs ltr languages. It also behaves/looks very weirdly when the review box is visible.
  • The down arrows on the right of some items suggest it is possible to open it. Is it possible to see an open item?
  • The "hide quicklink" button is out of the design grid. Why haven't it align to the "In this article" on the left? It will make things more balanced and allow to shrink the height of the title in order to display useful content faster.
  • The position of the review box does not feel right, what is as to do with "quicklinks"?
  • Why the review box does not have a validation button? (note that assuming javascript for form validation is a bad practice in web design)
• The left column
  • Would it be possible to see the TOC with some 4 level headings (we currently allow that on MDN)
  • It would be better to flip tags and attachement links, as tags can be a long list of expression where attachement is just a single line link.
  • How very long tags are handled? (meaning, tags that are wider than the column width)
  • How tags are displayed when they are on more than one line?
  • The way the left column is folded is very odd because it breaks the layout (the first paragraph of the content jump under the "In this article" box). Maybe hiding it on the left rather than on top would be better.
• The main content
  • What is the purpose of the first grey box? We have a bunch of content starting with a heading, how is it handled?
  • Would it be possible to constrain the width of the content when one or both aside columns are hidden? Accessibility principle define with WCAG state that a text content width should be constrain in a way text lines are 80 characters long at worst.

Both

• Is the design responsive? (basically, how it behaves when shrinked or expended in width?) I would love to see this design declined for 1024px, 1200px and 1600px wide screens (and it would be very nice to have a 768px and 480px wide version as well). In today web design, this need to be seriously thought. Note that if design break points are thought based on the content rather than on screen size, it will make potential l10n issues less problematic.
• There is no footer, is it on purpose?
• The search box is really narrow which means that when typing more than two words, the user will not see his full search query (and it will be worst with languages with large words or expression such as German).

Comments from Will

• agreed that it would be easier to comment on with real content.

• the articles look very nice, easy to read, clean layout. But how will I fit pages like this (https://developer.mozilla.org/en-US/docs/Tools/Debugger) in such a narrow column? I've implemented a max-width of 100% on images so they don't bleed through like that. - DW

• I'm worried that the "landing page" pages aren't very content-rich. I want a devtools landing page to include a screenshot of the devtools and a short overview of what's in there and what it's all for. To me the most useful bit of the sample page is the stuff under "Topics" but that only starts 2/3 of the way down the page and I probably have to scroll to see it. Sub-parts of this:
  • I think the blue band is too tall.
  • I'm not very comfortable with "Top Articles" for a couple of reasons: they are often not maintained, and you don't know what I'm doing, so you're unlikely to be able to make good guesses about what I'm looking for
  • I'd move "MDN Community" to the bottom.
  • I think it's deeply strange to have a heading called "Documentation" alongside "Tools for Developers" and "Technology Reference". It's all documentation, isn't it?

Notes

• The set of arrows around the title are intended to be used for navigating between multi-page articles or sets of articles & won't be used on everything...