Closed Bug 930212 Opened 11 years ago Closed 11 years ago

add new pages & content to the FxOS section of the One Mozilla style guide

Categories

(www.mozilla.org :: Pages & Content, defect)

Product:
www.mozilla.org
Component:
Pages & Content
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: jslater, Assigned: stephen)

References

(
URL
)

Details

(Whiteboard: [kb=1158365] )

Attachments

(1 file)

styleguide-fxos-a_overview_03.jpg
1.72 MB, image/jpeg
Details 
Hey Steven. Following up from our email thread earlier, we would like to add several new pages to the FxOS section of the style guide (to be clear, these pages are for the branding/visual identity section, not the product design section).

I shared a folder with you on Box (please let me know how that worked) that has 4 PSDs and 7 JPEGs. There are a total of 7 pages that need to either be updated or created...when you look through specific PSDs I think it will be clear what to do, but if not please raise any questions you might have here.

In terms of process, we'd like to have these live by the end of November (or sooner, of course) and will need to do an additional round of review once they're staged (with the possibility of further tweaks at that point, although I wouldn't expect anything too major).

Thank you!
Oh, also, it's not related to the FxOS section but I'd like to batch it as part of the same set of updates - we have some new presentation files that will need to be added to http://www.mozilla.org/en-US/styleguide/communications/presentations/. 

I don't have the full set of files yet, but will add them here soon.
Whiteboard: [kb=1158365]
Hey Steven. Checking in...can you share a progress report on these pages?
(In reply to John Slater from comment #3)
> Hey Steven. Checking in...can you share a progress report on these pages?

Sure, we're just about done and will be doing a final review with the intention of sharing the pages for review tomorrow (Wednesday).
Awesome, thanks Steven. Looking forward to checking them out.
The new pages are ready for review here: https://www-demo1.allizom.org/en-US/styleguide/identity/firefoxos/overview/

Pull request for code review is here: https://github.com/mozilla/bedrock/pull/1397
Assignee: steven → stephen
OS: Mac OS X → All
Hardware: x86 → All
Awesome, thanks Steven! I would like to run this by Pete Scanlon, who is traveling this week, so it may take a few days for me to get the full feedback. Stay tuned for more.

Lee, please also take a look and let's coordinate on what we think.
Hey Steven. I was all set to provide some comments, but I went to take one more look at the URL in comment #6 and am getting a 500 internal server error. Anyone know what's up?
In the meantime, I'd like to request a few other changes while you're already under the hood. 

1. Copy update for "a note on the dino" from http://www.mozilla.org/en-US/styleguide/identity/mozilla/branding:

"The classic Mozilla dino head logo served as a symbol of the organization since our earliest days, but is now reserved for select uses and executions only. While you may still see it pop up on certain sites and campaigns, please use the Mozilla wordmark on all properties and materials instead."

2. Updating the presentations page (http://www.mozilla.org/en-US/styleguide/communications/presentations/) with new content. This one is more involved, but also long overdue, so will be great to get it fixed. Currently the page features a single template - the basic Sandstone theme - but we've since added two official Firefox OS templates that should be included as well.

Here's my suggested solution: remove the color options and layouts section from the current page, and instead show a row of three thumbnails (adding two more to the one that's there now). You can get the new templates from https://www.dropbox.com/sh/xgjn9as1qonv1ck/UYoxKryOSj (I'll make sure they're added to the assets repo and will post the links when they are).

To simplify the naming, the first one can be called Standard Sandstone, the next Firefox OS and the last Firefox OS (for developers). The two Firefox OS templates don't have HTML versions...only ppt and key for now.

Last thing - we now also have a Google docs version of the Sandstone template. Can you add a 4th button to that arrangement and point to https://docs.google.com/presentation/d/1SGYCP7KG4C6IInNme5Wny4Bz0iFiI7lg9enELxdKUvQ/edit#slide=id.p40?

Hope this makes sense...please ping me if you have questions.
(In reply to John Slater from comment #8)
> Hey Steven. I was all set to provide some comments, but I went to take one
> more look at the URL in comment #6 and am getting a 500 internal server
> error. Anyone know what's up?

I'm not sure what's wrong with the demo servers, but in the mean time, I've stuck these changes up on a temporary server. You can find there here for now: http://stage2.silverorange.com:8000/en-US/styleguide/identity/firefoxos/overview/
Perfect, thanks Steven. I haven't heard from Pete yet, but in the meantime here's the word from me, Lee & Matej:

Firefox OS Overview page
- we may explore an alternate treatment in place of the blue, capped, bold text...stay tuned.
- let's make "BOLD DYNAMIC HUMAN SIMPLE" be mixed-capped -> Bold, Dynamic, Human, Simple
- Matej: do you think we need the explanatory blurbs (under the section title) in the Principles & Tone sections? I'm not convinced we do.


Typography page
- in Typography basics: please check the line spacing in Subheads section to see if that formatting reflects our suggested line spacing
- the International subhead should be "International typography basics" (right now the T is uppercase).
- would like a make a change to the Don'ts section at the bottom. Instead of the example about not using Meta Black Roman, can you do a graphic (using Open Sans extrabold italics) that reads "PHONES ON SALE NOW" and have the detail copy read " Don't use the Extrabold capitalized italics treatment for off-brand headlines."

Firefox OS Usage
- "The role <br> of the fox"
- "Composing <br> with the fox"
John, updates are committed.

We are a little unsure how to handle the line-spacing in css. Should it say "90% or 72pt" instead of "90% at 72pt"?
(In reply to Stephen DesRoches from comment #12)
> John, updates are committed.
 
Thanks Stephen. Should I be looking at the allizom or silverorange site to see the updates?

> We are a little unsure how to handle the line-spacing in css. Should it say
> "90% or 72pt" instead of "90% at 72pt"?

'at' is correct - thanks.

Also, re: my earlier comment, my concern is that the extrabold italicized text in the Principles & Purpose sections on https://www-demo1.allizom.org/en-US/styleguide/identity/firefoxos/overview/ is breaking our own rule about only using that style for certain phrases. Let's try it in standard Open Sans light instead (still with the blue color though). I'll attach a mockup for reference.

Thanks!

    
    

    
  
(In reply to John Slater from comment #13)
> (In reply to Stephen DesRoches from comment #12)
> > We are a little unsure how to handle the line-spacing in css. Should it say
> > "90% or 72pt" instead of "90% at 72pt"?
> 'at' is correct - thanks.

John (and maybe Lee), Stephen and I (the other Steven) are a bit confused by the "% at pt". It appears that the line height of the 80pt headings is set in Photoshop to 72pt, which is 90% of 80. We both interpreted the "90% at 72pt" to mean "90% of what the line height would have been at 72pt". Maybe that's a more common phrasing that we weren't familiar with. In case it's not, though, you can consider us two dummies that failed a usability test with the style guidelines as they are written.

Also, the headings are specified in "pt" units, which are a fair bit larger if we were to implement them in the browser with the CSS "pt" unit. I presume we should be adjusting to match the visual sizes in the PSDs?

    
    

    
  
I always interpreted it as, "Line spacing = 90% of the font size" (which is what we have it set to in the example). 

The confusing part for me is that the suggested point size of 80pt does not cover every use of a headline. I guess the point of this  - and perhaps a better way to say of saying it is:

"Line spacing should be 90% of the font size."

    
    

    
  
+1 for that...thanks Lee.

    
    

    
  
Sorry, I missed this question, Steven. Yes, I think we could match the visual size of the mockups and still use the 80pt size value in the copy area. Also, thanks for the questions in Comment 15  - it's definitely notable that there was confusion for you and Stephen and we're better off for making it more clear.

 
> Also, the headings are specified in "pt" units, which are a fair bit larger
> if we were to implement them in the browser with the CSS "pt" unit. I
> presume we should be adjusting to match the visual sizes in the PSDs?

    
    

    
  
Hey Steven & Stephen. Do you have everything you need from us here? Just wanted to confirm that the ball is in your court.

One other note - can we add a button to download Open Sans to the typography section? (ex. http://www.mozilla.org/en-US/styleguide/communications/typefaces/) 

Also, I discussed this with Pete today and we have the green light to move forward.

    
    

    
  
(In reply to John Slater from comment #9)
> 2. Updating the presentations page
> (http://www.mozilla.org/en-US/styleguide/communications/presentations/) with
> new content. This one is more involved, but also long overdue, so will be
> great to get it fixed. Currently the page features a single template - the
> basic Sandstone theme - but we've since added two official Firefox OS
> templates that should be included as well...

John, I've filed Bug 944046 for the presentation-page changes from comment #9 so we don't have to block these other changes.

    
    

    
  
Just posted the files in the other bug. Do you need anything else from us? What happens next?

Thanks!

    
    

    
  
(In reply to John Slater from comment #21)
> Just posted the files in the other bug. Do you need anything else from us?
> What happens next?

These latest updates are up on https://www-demo1.allizom.org/en-US/styleguide/identity/firefoxos/typography/

Can we get a final approval from your end?

We're also waiting on a code review from someone on the webdev team, then we can push.

We'll address the new presentation templates over on the other bug. Thanks.

    
    

    
  
Looks great, thanks. One edit - please remove the "Co-sponsored wordmark placement" section at the bottom of the branding page. I'm nervous about including examples with non real-life partners.

Otherwise, this is good to go on my end.

Thanks!

    
    

    
  
(In reply to John Slater from comment #23)
> Looks great, thanks. One edit - please remove the "Co-sponsored wordmark
> placement" section at the bottom of the branding page. I'm nervous about
> including examples with non real-life partners.

Done. John, can you address craigcook's question over on the Pull Request: https://github.com/mozilla/bedrock/pull/1397#discussion_r7973419 ?

Now that those blue headings on https://www-demo1.allizom.org/en-US/styleguide/identity/firefoxos/overview/ are no longer the bold/italic, they do indeed look like links. Should they stay this blue color, or just fall back to the default grey?

    
    

    
  
We're in master! You can see it on https://www-dev.allizom.org/en-US/styleguide/identity/firefoxos/overview/

We'll be in production with the next push. Might have happened today, but it's USA-Turkey-Day, so that might slow things down.
Status: NEW → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED

    
    

    
  
Looks great - thanks all!

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: