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)
  • NOTE (ali): yes, this encompassed the App Center
• 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.
  • NOTE (ali): we are starting beta testing, so you can see the design applied to the actual pages. see the Beta Test page for info on how to participate.
• How will some of the wider MDN tables look in this design? Like on this page: App permissions
  • NOTE (ali): we are starting beta testing, so you can see the design applied to the actual pages. see the Beta Test page for info on how to participate.
• 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?
  • NOTE (ali): Stay tuned, it might happen :-)
• 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)
  • NOTE (ali): Yes, they are placeholders. We need you to provide the correct content.

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")
  • NOTE (ali): We will likely adjust the height when we have real content to work with.
• 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).
  • NOTE (ali): I asked David to take a look at this
• 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?
  • NOTE (ali): good points! When we get the content migrated into hte new design we'll take a look at all od these and adjust as needed.

Content Page

NOTE (ali): Let's revist some of these when we can look with real content (for example, not sure we are going to use the side-to-side arrows, which are meant for articles you read in sequence). I've given this feedback to the design team & David as well.

• 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.
  • NOTE (ali): Yes, it is responsive.
• There is no footer, is it on purpose?
  • NOTE (ali): yes. It will be added, we need to decide on the content. Need feedback on what belongs there.
• 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).
  • NOTE (ali): We need to fix that. Sent to design/David...

Comments from Will

• agreed that it would be easier to comment on with real content.
  • NOTE (ali): we now can beta test 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
  • NOTE (ali): we'll have to adjust the design as needed as we find pages like this.
• 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?
  • NOTE (ali): I think the landing page content is mostly suggestions - the content owners can adjust. We should all chat about what is and isn't adjustable on these pages. Also, see note in Jeremie's comments about the "blue band"

Moar stuff, to take or leave, using this page: https://developer.mozilla.org/en-US/docs/Tools as an example, in the new redesign. Sorry if these are just because it's old content, but I figure it doesn't hurt to mention stuff:

• there's a lot of vertical margin between header and breadcrumbs, breadcrumbs and title, title and content. Too much IMHO.
• would it be possible to have the top-level topics (Projects,Tools,Learn,Demos) and search bar at the very top, alongside "wbamberg|sign out" and the Mozilla tab? Maybe they wouldn't fit. But it looks odd having them (especially the top-level topics) on the next row, and the top row looks kind of sparse.
• there's a noticeable lag when you leave the search box before it contracts, during which the top-level topics aren't accessible. Might that get annoying?
• I think the space just right of the article text, at the top, is too valuable for tags and attachments. I don't care about these things. Why not have a link in the footer "About this article" or something, where I can see this stuff if I need to?
• the image is 800px, but the column is too narrow for it. I don't think I can realistically make the image smaller and have it still be usable, so the column needs to be wider.
• personally, I'm not a big fan of the grey box at the top of the content, but I guess this is optional(?)
• there's a lot of footer - about 2/3 of my screen. I don't see a footer in the mockups, but I'd suggest having a coloured band like the one at the top for a footer, containing the list of authors, maybe last modified date, and a link to "About this document" where we could put attachment and tagging information.

• tables of contents need to be more compact and scannable: this: https://developer.mozilla.org/en-US/docs/Tools/Debugger is hard to scan. Maybe less space between the entires, and indentation for the level (and even maybe bold/normal differentiation, like https://addons.mozilla.org/en-US/developers/docs/sdk/latest/modules/sdk/panel.html). I would like tables of contentses to stretch horizontally (up to a point) so that longer titles don't wrap so often. Wrapping makes the ToC much harder to scan, and avoiding wrapping means making titles ridiculously terse.

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