Closed Bug 781030 Opened 13 years ago Closed 12 years ago

[One Mozilla] Style Guide implementation tracking bug

Categories

(www.mozilla.org :: Project Tracking, defect)

Product:
www.mozilla.org
Component:
Project Tracking
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: malexis, Unassigned)

References

(
URL
)

Details

(Whiteboard: [sp-2012-08-28] u=creative c=general)

Attachments

(1 file)

Feedback wireframe mockups
242.45 KB, application/pdf
Details
Ready to move into implementation. Dependency bugs for building out individual pages can be attached here. https://wiki.mozilla.org/OneMozilla/StyleGuide
Outstanding, thanks Mike. Steven, do you have that PSD from Sean yet?
Yup - I've got the template PSD. Implementations are imminent! Let me know when any particular page content is ready for implementation, in the mean time, we'll get the template setup.
Sean: Does the new background gradient/color/grain in the style guide mean that the "stone" and "sand" flavors of Sandstone will be replaced with this single new style, or will this just update the "sand" style, and leave "stone" as is? https://www.mozilla.org/b/en-US/sandstone/
This will replace the orangey "sand" background on .org to a more neutral tan. As for the grey "stone" option, I'll update a new one there too as we're axing the vertical lines.
For the left menu, should opening one section automatically close the other sections? I initially assumed so, but this could make it easy to loose the indication of the current page (by closing the current section in the menu). That said, the breadcrumbs may be sufficient.
I'd say as you're navigating it'd be fine to collapse them. Yes, the breadcrumb should work fine as backup. nice example - http://developer.android.com/design/style/iconography.html
Depends on: 781664
Do we still want to add a quick way to receive feedback about the style guide? If so, besides needing a little bit of visual design time, I'm not sure if the SurveyGizmo API is right for this until a developer takes a closer look. The benefit to using it is that the feedback would be consolidated nicely for us to read, but if we don't have time, we could send results to a collective email as well. http://www.surveygizmo.com/survey-software-features/survey-api/ http://developer.surveygizmo.com/ See attached PDF for a couple of ideas for how a feedback widget could look with minimal interruption to the page design. When implementing this we would want control over the style and not have to adopt what SurveyGizmo's front-end looks like.
Attached file Feedback wireframe mockups —
Excerpt pages are from a larger PDF. I looked into other feedback apps like Tender and ZenDesk, but those seem like overkill for something like this. Mozilla already has a SurveyGizmo account.
Quick administrative note: there's a related project to stand up an assets repository where all sorts of creative team files will be hosted for general access. The various links in the style guide for logo downloads, templates, etc, etc will all point to this new repository, so I've added a few new dependency bugs to make sure the projects are properly linked.
Holly, thanks for the ideas on the feedback mechanism. I agree that this would be a very useful thing for the guide (although I wouldn't make it a blocker for what we're trying to get done by MozCamp next month). The wireframes of the feedback input screens look good, but having it as a tab on the right side of the screen is a little more visually prominent than I would prefer. Any other options? Would the footer be a possibility?
John, If the tab on the right or bottom are too prominent, I think it's fine to put it in the footer. I initially thought that would be too buried, but it could work if we make sure it is set apart from Mozilla.org footer items in some way so people know it is style guide specific. If nobody notices it there, we can try something more prominent.
+1 to comment #11 then. And for the record, it's not that I don't want feedback on the guide but have learned through past experience that making it *too* easy to share thoughts (often fairly open-ended and not super constructive) actually can confuse matters, especially when we don't have a huge staff on hand to address it.
Working on implementation now - a few more questions: 1. The sand-colored buttons (mostly used for download links on the style guide pages) don't seem to be defined on the Sandstone Buttons & Icons page - should we have a button style used in the style guide that isn't also defined by the style guide? 2. Pages with the large loupe-overlayed images (like the Sandstone introduction page) - do they have any special interaction, or are they just a large image? I'm wondering specifically about hover effects, links to sub-sections, etc. 3. I could use some guidance on how pages map to the left menu. I'm not entire clear whether the section titles (IDENTITY, COMMUNICATIONS, etc.) have their own dedicated page. I'm building out a status-tracking spreadsheet and could use help filling out the details: https://docs.google.com/a/silverorange.com/spreadsheet/ccc?key=0Au9T8KeO2UcLdHdhY195OUo4VzBITWFLVDhYTU03bVE
Another round of questions/comments: 4. The download buttons on the Buttons & Icons page don't match exactly with the button styles implemented already on the site. It would be great if we could simplify all download buttons on the site to those three styles. However, I'm not sure which would work on http://www.mozilla.org/en-US/firefox/fx/#mobile 5. The smaller blue buttons on the Buttons & Icons page - should they replace the large blue buttons used in places like the form at the bottom of https://www.mozilla.org/ ? 6. Some of the headings in the style guide are italicized. We're not actually downloading the italicized variation of open-sans right now (we can, but it's another file to download). Is there some logic to which headings are italicized and which are not? Thanks.
Hey hey! some responses. 1. I think that's fine. We should perhaps add this style to the buttons as a "minimalist button" style for instances like this. almost a "clear" option. 2. Those loupes are simply a graphical representation of what's coming. I don't see a need to link them, so you can leave them. I'll ask Johnny when he's back about that. 3. section titles, when clicked, should open the menu and go to the first page of that section. There are no index pages for each section. 4. I'd like the buttons here to reflect what's in the wild, so yes. I'll add a large option without the logo so we have big + small option with and without the logos for both desktop and mobile. 5. the small buttons are more to show style, not size - they can expand based on use. We can add that to the text. 6. Since this is the style guide, we're not restricted to kb sizes so I'd say go ahead and use italics too. I just used it in a few places for emphasis.
(In reply to Sean Martell from comment #15) > 2. Those loupes are simply a graphical representation of what's coming. I > don't see a need to link them, so you can leave them. I'll ask Johnny when > he's back about that. It would be super cool, however, if there was some kind of magic that happened when the user hovers over those loupes. Maybe a slight grow or something?
Component: www.mozilla.org → General
Product: Websites → www.mozilla.org
Is there a PSD for the home page yet?
(In reply to Steven Garrity from comment #17) > Is there a PSD for the home page yet? Got it - thanks. Anthony brought up an important issue that I missed regarding the URL for the style guide today. The mozilla.org/style URL is already used for CSS styles on the PHP mozilla.org pages - so we have a conflict with the URL there. We didn't notice this because it's been built out at /styleguide/ instead.
/styleguide/ is ok, thanks.
Awesome work on this, thanks all. I ran through the guide and have called out some things that don't seem right to me. Steven, ping me on IRC and we can walk through these. Not all of them are launch blockers necessarily...the most critical are the non-functioning download buttons on the Firefox identity pages. Here's the list: http://www-dev.allizom.org/b/en-US/styleguide/websites/sandstone/tabzilla/ - let's make the 'documentation and code' button open up a new tab (right now it takes you directly to github and away from the style guide) http://www-dev.allizom.org/b/en-US/styleguide/websites/sandstone/typefaces/ - Sean, can you advise on a better link for Open Sans? Somewhere folks could download from? (this isn't a launch blocker though) http://www-dev.allizom.org/b/en-US/styleguide/websites/sandstone/colors/ - the 'download here' link takes you back to the Sandstone grids page...could we just directly initiate the download instead? http://www-dev.allizom.org/b/en-US/styleguide/websites/sandstone/buttons/# - the 'download PSD styles' button doesn't take you anywhere. Do we have assets for this yet? Also on this page, we show the button styles but there doesn't seem to be a link to download them. http://www-dev.allizom.org/b/en-US/styleguide/websites/sandstone/forms/ - how would someone download these forms and styles? http://www-dev.allizom.org/b/en-US/styleguide/websites/community/overview/ - could we have Tabzilla and Open Sans Light link to the tabzilla and font pages, respectively? http://www-dev.allizom.org/b/en-US/styleguide/identity/mozilla/branding/ - none of the download links work http://www-dev.allizom.org/b/en-US/styleguide/identity/mozilla/color/# - the color swatch link doesn't work http://www-dev.allizom.org/b/en-US/styleguide/identity/firefox/branding/ - none of the download links work http://www-dev.allizom.org/b/en-US/styleguide/identity/firefox/channels/ - none of the download links work http://www-dev.allizom.org/b/en-US/styleguide/identity/firefox/wordmarks/ - none of the download links work http://www-dev.allizom.org/b/en-US/styleguide/communications/typefaces/ - you should be able to download Open Sans from this page, or at least link to another site that has it for download. Also, as noted by Sean in IRC, the identity and communications sections should come before websites. Thanks!!
(In reply to John Slater from comment #20) > Here's the list: I've got this list address in https://github.com/mozilla/bedrock/pull/349 - comments inline: > http://www-dev.allizom.org/b/en-US/styleguide/websites/sandstone/tabzilla/ - > let's make the 'documentation and code' button open up a new tab (right now > it takes you directly to github and away from the style guide) Done. > http://www-dev.allizom.org/b/en-US/styleguide/websites/sandstone/colors/ - > the 'download here' link takes you back to the Sandstone grids page...could > we just directly initiate the download instead? Done. > http://www-dev.allizom.org/b/en-US/styleguide/websites/sandstone/buttons/# - > the 'download PSD styles' button doesn't take you anywhere. Do we have > assets for this yet? Also on this page, we show the button styles but there > doesn't seem to be a link to download them. Fixed the existing Download PSD Styles link for the icon styles - but we don't have a standalone HTML/CSS bundle for the other buttons (yet). > http://www-dev.allizom.org/b/en-US/styleguide/websites/sandstone/forms/ - > how would someone download these forms and styles? No download for this yet either - the Download HTML/CSS button has been removed for now. > http://www-dev.allizom.org/b/en-US/styleguide/websites/community/overview/ - > could we have Tabzilla and Open Sans Light link to the tabzilla and font > pages, respectively? Done. > http://www-dev.allizom.org/b/en-US/styleguide/identity/mozilla/branding/ - > none of the download links work > http://www-dev.allizom.org/b/en-US/styleguide/identity/mozilla/color/# - the > color swatch link doesn't work > http://www-dev.allizom.org/b/en-US/styleguide/identity/firefox/branding/ - > none of the download links work > http://www-dev.allizom.org/b/en-US/styleguide/identity/firefox/channels/ - > none of the download links work > http://www-dev.allizom.org/b/en-US/styleguide/identity/firefox/wordmarks/ - > none of the download links work All fixed. Be careful when you cut-and-paste, kids! > http://www-dev.allizom.org/b/en-US/styleguide/communications/typefaces/ - > you should be able to download Open Sans from this page, or at least link to > another site that has it for download. Fixed. > Also, as noted by Sean in IRC, the identity and communications sections > should come before websites. Done.
Commits pushed to master at https://github.com/mozilla/bedrock https://github.com/mozilla/bedrock/commit/27607818a35c687d337a42fb22a4750f5ad541a4 Merge pull request #341 from sgarrity/bug-781030-styleguide Bug 781030 styleguide https://github.com/mozilla/bedrock/commit/0e721baeb29954b1450f0423f3e8c83f22ee6d7f Merge pull request #346 from sgarrity/bug-781030-styleguide Bug 781030 styleguide https://github.com/mozilla/bedrock/commit/c35bc427d467773f3da42e575f778f3c08513208 Merge pull request #349 from sgarrity/bug-781030-styleguide Bug 781030 styleguide
We've got a new pull request ready with some additional pages: https://github.com/mozilla/bedrock/pull/363
Commits pushed to master at https://github.com/mozilla/bedrock https://github.com/mozilla/bedrock/commit/e94d46295758f25a55b5853f220dfbbe3c3c48a8 Add another round of pages to the style guide (Bug 781030) https://github.com/mozilla/bedrock/commit/e7f99e5e2753d1c7c30568e76533925dd0cf704f Merge pull request #363 from sgarrity/bug-781030-styleguideupdates Bug 781030 styleguideupdates
The latest round of pages have got into production. Updated navigation should come this week.
(In reply to Steven Garrity from comment #26) > The latest round of pages have got into production. Updated navigation > should come this week. Since we are using this bug for everything. I'll verify when the other updates are made
Thanks Steven. Can we move the Firefox Family section up above the Firefox Browser section though? That's intended to be the intro content. Also, do we have an estimated date on the navigation yet? I'm trying to plan when I announce this to the org, and would like to wait until that's in place. (also, I'll be on PTO from Wednesday-Friday but can send the email remotely if need be...I just need to know when)
Depends on: 792185
Updated with a more manageable open/closing left menu, available for preview on https://www-demo2.allizom.org/en-US/styleguide/
Thanks Steven. Just to catch everyone in the bug up on our IRC convo, we were debating the usefulness of the breadcrumbs given that there aren't actual landing pages for each of the section headers...it gets confusing. Possible alternate solution would be to play around with the CSS to indicate where you are using the left nav.
Based on some discussion on IRC, the demo2 server is updated with bold text to indicate the current section/page rather than the breadcrumbs: https://www-demo2.allizom.org/en-US/styleguide/
Thanks Steven. I like this solution - it definitely works for me (and for Sean as well...we reviewed it together). One last note from Sean, though (am quoting his IM here): "the main section you're in on the menu should be 100% white BG in the menu its not the same as in the PSD currently" Can you check in on that? Otherwise we're all set and ready to push.
Oops, one more thing in addition to the above...in the PSD there's a little reversed-out arrow on the right side of the menu to help indicate where you are. Can we add that as well? For example: http://mozilla.seanmartell.com/nothingtoseehere/index.php?directory=.&currentPic=2
Steven, I hear from Sean that you guys chatted about the remaining tweaks. Any time estimate of when they'll be ready? Would be great to know for planning purposes.
(In reply to John Slater from comment #34) > Steven, I hear from Sean that you guys chatted about the remaining tweaks. > Any time estimate of when they'll be ready? Would be great to know for > planning purposes. We had a lovely chat indeed. I plan to work on these updates tomorrow - should have something to show tomorrow - may require another round-trip of feedback though.
Excellent, thanks.
Depends on: 805400
Depends on: 805875
Component: General → Project Tracking
OS: Mac OS X → All
Hardware: x86 → All
All dependencies have been resolved.
URL: https://mozilla.org/design → http://www.mozilla.org/styleguide/
Status: NEW → RESOLVED
Closed: 12 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: