MozillaWiki

MDN/Development/Redesign/NewDesignV1: Difference between revisions

Page Discussion

MDN/Development/Redesign/NewDesignV1 (view source)

Revision as of 19:00, 10 September 2013

1,747 bytes added ,  10 September 2013
→‎Comments
 
Line 8: Line 8:


* Is this the "app center" that dbuchner talks about? [[User:Markg|Markg]] ([[User talk:Markg|talk]]) 11:51, 14 August 2013 (PDT)
* Is this the "app center" that dbuchner talks about? [[User:Markg|Markg]] ([[User talk: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.
* 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 [https://wiki.mozilla.org/index.php?title=MDN/Development/Redesign/BetaTest 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: [https://developer.mozilla.org/en-US/docs/Web/Apps/App_permissions App permissions]
* How will some of the wider MDN tables look in this design? Like on this page: [https://developer.mozilla.org/en-US/docs/Web/Apps/App_permissions App permissions]
**NOTE (ali): we are starting beta testing, so you can see the design applied to the actual pages. see the [https://wiki.mozilla.org/index.php?title=MDN/Development/Redesign/BetaTest 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?
*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. [[User:Jswisher|Jswisher]] ([[User talk:Jswisher|talk]]) 13:52, 5 September 2013 (PDT)  
* 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. [[User:Jswisher|Jswisher]] ([[User talk:Jswisher|talk]]) 13:52, 5 September 2013 (PDT)  
**NOTE (ali): Yes, they are placeholders. We need you to provide the correct content.


=== Comment from [[User:Jeremie|Jeremie]], 16 August 2013 ===
=== Comment from [[User:Jeremie|Jeremie]], 16 August 2013 ===
Line 20: Line 25:


* 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")
* 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.
* 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).
* 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:
* I'm missing a few things:
** How the login zone looks like (and where it is positioned)?
** 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?)
** 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?
** 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 ====
==== 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 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.
Line 52: Line 61:


* 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.
* 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?
* 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).
* 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===
===Comments from Will===
* agreed that it would be easier to comment on with real content.
* 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''
* 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'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 think the blue band is too tall.
Line 65: Line 77:
** I'd move "MDN Community" to the bottom.
** 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?
** 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:
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.
* there's a lot of vertical margin between header and breadcrumbs, breadcrumbs and title, title and content. Too much IMHO.
Aspivak
canmove, Confirmed users
842

edits

Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/705891"