build Firefox brand toolkit

VERIFIED FIXED

Status

www.mozilla.org
General
VERIFIED FIXED
7 years ago
6 years ago

People

(Reporter: John Slater, Assigned: sgarrity)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: r=94232,94501,94561,94646,94743,94757,94763,94848,94908,94912,94917,94945,95062,95063,95101,95238,95406,95407,95453,95461,95500,95501 b=trunk, URL)

Attachments

(4 attachments)

(Reporter)

Description

7 years ago
Overview: One of Engagement's high level Q3 goals is to create "Brand tools fully deployed into the hands of Mozillians worldwide to focus and strengthen our voice and presence". To meet this goal, we're preparing a comprehensive toolkit that will offer style guides, file downloads, positioning details and other info to help Mozillians as they communicate about Firefox. The desired way of communicating this is through a microsite of roughly 15 pages.


Project Scope: Visual design (almost done), front-end web development, basic QA, implementation into current mozilla.com (soon to be mozilla.org) framework.

Dependencies: None

Assumptions: Needs to be complete by end of Q3. Ideal due date would be in time for mid-September all-hands, as we're planning a session then to discuss this.

Deliverables: PSDs ready by Friday, 8/12.
(Reporter)

Updated

7 years ago
Assignee: malexis → nobody
Group: mozilla-corporation-confidential
Component: Webdev → www.mozilla.com
Product: mozilla.org → Websites
QA Contact: webdev → www-mozilla-com
(Reporter)

Comment 1

7 years ago
Hi Steven. Here are the files for the phase 1 of the Firefox brand toolkit we talked about...they should be all ready to go:

http://mozilla.seanmartell.com/engagement/brand/toolkit/toolkit.psd
mozilla.seanmartell.com/engagement/brand/toolkit/ToolkitText.doc
mozilla.seanmartell.com/engagement/brand/toolkit/CopyRulesJuly27.pdf

The main open issue at this point is where these pages should live...would love to chat with you about that a bit on Monday, as I have a few different ideas.

Our target launch date for this is 9/9 (or sooner), so once you've had a chance to review let me know what you're thinking and we can work with Laura to slot this into the appropriate release.
Assignee: nobody → steven
Summary: Firefox brand toolkit → build Firefox brand toolkit

Comment 2

7 years ago
I'm going over the copy one more time this morning to make sure there are no typos or other errors. I'll let you know as soon as it's updated.

Comment 3

7 years ago
Created attachment 551461 [details]
Updated toolkit copy deck

Updated. It'll eventually also be updated in the link, but for now, please use this doc. Thanks.
(Reporter)

Comment 4

7 years ago
Hey Steven, re: URL I'm thinking this site should live at brand.mozilla.org/firefox. Eventually we'll have other parallel sites to this one but given that is the first it probably makes sense to have brand.mozilla.org redirect to the /firefox pages for now.

Sound good? Is the 9/9 due date from comment #1 doable for you guys? (That would include time with QA and IT as well.)
cc'ing Corey. Are there any IT dependencies if this lives on the subdomain brand.mozilla.org/firefox? Since these are all static pages (I think), we should try to find a hosting solution that doesn't involve any heavy lifting from IT.
(Reporter)

Comment 6

7 years ago
Re: comment #5, per a separate email thread we've decided to change course from what I proposed in comment #4. 

The new plan would be to host this at www.mozilla.org/firefox/toolkit (long term we'll probably want to create some sort of centralized brand page that references this and all the other toolkits, but that's definitely not a pressing issue for now).

Hopefully that minimizes the heavy lifting for IT as well as some of the other issues previously discussed around WebDev resourcing, bugzilla process, etc, etc.
(Assignee)

Comment 7

7 years ago
Will the brand toolkit pages be localized?
(Reporter)

Comment 8

7 years ago
(In reply to Steven Garrity from comment #7)
> Will the brand toolkit pages be localized?

Not necessarily immediately, but we'd definitely like this to be localizable.
(Reporter)

Comment 9

7 years ago
Slight update: per some offline conversations, let's put this site at www.mozilla.org/firefox/brand instead of /toolkit.

Updated

7 years ago
Whiteboard: r=94232 b=trunk
(Reporter)

Comment 10

7 years ago
Per an offline conversation with Sean, we'll be handing off the following final bits next Wednesday:

- Gear page image/guidelines
- Downloads page contents
- Additional navigational element to connect to the rest of the site

Silverorange folks, let us know if that works for you. Thanks!
(Assignee)

Comment 11

7 years ago
Sounds good. We'll keep working on the rest of the site in the meantime.

Updated

7 years ago
Whiteboard: r=94232 b=trunk → r=94232,94501 b=trunk
(Assignee)

Updated

7 years ago
Whiteboard: r=94232,94501 b=trunk → r=94232,94501,94561 b=trunk

Comment 12

7 years ago
Sorry for the delay here. Hoping to have the rest of the assets/layouts attached here tomorrow.
(Reporter)

Comment 13

7 years ago
Steven or Stephen, do you have an estimate on when this will be on trunk and ready to review (assuming you get the assets from Sean tomorrow)?
(Assignee)

Comment 14

7 years ago
We're almost caught up with what we've got so far. I hope to have this ready for review with the remaining content by the end of the week. We'll check in tomorrow with a more concrete updated.

Comment 15

7 years ago
Here is an example of the download page:
http://cl.ly/3K2J3K2s1z052o3i0L0Z/o

Most of that you can leech from http://www.mozilla.org/en-US/press/media/logos/ and remix it.  

Notes: 
- I just hacked a screen of the gallery in from that media page, but if the "download" and blue links for each could use the MuseoSans/Calluna mix from the Website Assets bottom section, that'd be awesome.
- the ZIPs for the assets section should have the CSS and required assets for the uni tab, buttons, and bg image from the site. Is that something you could haul out into seperate .css files and package into ZIPs?
- the 4 bottom fonts will all link to their download pages on fontsquirrel.com. I'll post the list of links here soon.  The request buttons should email us to request the font based on usage on a mozilla site as we need to follow our usage agreement with FontShop.
(Assignee)

Comment 16

7 years ago
(In reply to Sean Martell from comment #15)
> - the ZIPs for the assets section should have the CSS and required assets
> for the uni tab, buttons, and bg image from the site. Is that something you
> could haul out into seperate .css files and package into ZIPs?
Yup - will take a bit of extra time to get that CSS isolated and cleaned up (though will be nice to have for reference).

> - the 4 bottom fonts will all link to their download pages on
> fontsquirrel.com. I'll post the list of links here soon.  The request
> buttons should email us to request the font based on usage on a mozilla site
> as we need to follow our usage agreement with FontShop.
Is a mailto: link with a pre-filled Subject line sufficient for this? If so, what email address should we use?
(Reporter)

Comment 17

7 years ago
(In reply to Steven Garrity from comment #16)
> Is a mailto: link with a pre-filled Subject line sufficient for this? If so,
> what email address should we use?

Yep! Subject line can be "font request", email address can be creative@mozilla.com.

Updated

7 years ago
Whiteboard: r=94232,94501,94561 b=trunk → r=94232,94501,94561,94646 b=trunk

Updated

7 years ago
Whiteboard: r=94232,94501,94561,94646 b=trunk → r=94232,94501,94561,94646,94743 b=trunk
(Assignee)

Comment 18

7 years ago
Ok, the brand toolkit is *mostly* ready for review

A few caveats:

* It is a large download - we're doing all tabs as one page. We could split the top-level tabs up into separate pages so all images would be downloaded on the first load, but the current switching experience is smoother. Also, I figure this site is targeted at a small(ish) subset of visitors and the extra load time shouldn't be too much problem. It is mostly images, so the page should display while the image load in the background.

* Direct links to sub-tabs are not working - javascript fix for this is coming.

* Download links and .zip file contents are done done. These still need doin'.

* The Download page needs a bit of layout/alignment cleanup - still to come.

* The download links on pages like the CHANNEL LOGOS, are those intended to just link directly to the PNG file, like we do on the Downloads page?

The rest of the content can be reviewed while we work on these remaining issues.
Whiteboard: r=94232,94501,94561,94646,94743 b=trunk → r=94232,94501,94561,94646,94743,94757 b=trunk
(Reporter)

Comment 19

7 years ago
Awesome, thanks. What's the URL we should be reviewing?
(Assignee)

Comment 20

7 years ago
(In reply to John Slater from comment #19)
> Awesome, thanks. What's the URL we should be reviewing?

http://www-trunk.stage.mozilla.com/en-US/firefox/brand/
(Assignee)

Updated

7 years ago
Whiteboard: r=94232,94501,94561,94646,94743,94757 b=trunk → r=94232,94501,94561,94646,94743,94757,94763 b=trunk

Comment 21

7 years ago
I'm putting this in 3.10 because it doesn't have a milestone yet, but this seems almost ready to go, and I know we're probably wanting this live before the all-hands next week. That said, feel free push at any time we're ready (before 3.10 is fine).
Target Milestone: --- → 3.10
(Reporter)

Comment 22

7 years ago
Thanks guys...it's so great to see this coming together! Really appreciate all the work this took.

I do have a few nits, and I know we owe you some more stuff. First, the nits:
- the brand video in the platform section isn't playing
- could you create an in-page anchor link that would take people directly to the "what to look for" part of the identity page? I have a feeling we'll be referencing that a lot.
- per the copy next to the feature tabs in the illustrations section, shouldn't those expand on rollover like they do in regular usage? (or, maybe we should revise the copy if that's too much extra work)
- should be able to enlarge the web ecosystem graphic on the domain strategy page (or embed the live map?)
- copy tab should default to tone, not l10n
- can we tweak the downloads page so the buttons line up? (examples: second row under 'logos', first row under 'wordmarks')

Also, it still looks like we need the following from Sean:
- additional navigational element (link in the upper left?) to connect this back to the rest of the site
- button on the gear page
- partner lockups

Sean, do you have a timing estimate on that? The first two are blockers, but the partner one could probably wait until a later release if need be.

Thanks!
(Assignee)

Comment 23

7 years ago
(In reply to John Slater from comment #22)you some more stuff. First, the nits:
> - the brand video in the platform section isn't playing
Fixed.

> - could you create an in-page anchor link that would take people directly to
> the "what to look for" part of the identity page? I have a feeling we'll be
> referencing that a lot.
This is a bit tricky. We're already using anchors to link to particular panels/tabs on this site.

> - per the copy next to the feature tabs in the illustrations section,
> shouldn't those expand on rollover like they do in regular usage? (or, maybe
> we should revise the copy if that's too much extra work)
Done.

> - should be able to enlarge the web ecosystem graphic on the domain strategy
> page (or embed the live map?)
Not sure about this - live map is large (and not entirely up-to-date) - maybe keep what we have as a thumbnail and link to the full map?

> - copy tab should default to tone, not l10n
They should all be defaulting to the first sub-tab. However, there is a bug in the JS when it comes to linking directly to or reloading on particular sub-tabs. A fix is coming.

> - can we tweak the downloads page so the buttons line up? (examples: second
> row under 'logos', first row under 'wordmarks')
Done.
Whiteboard: r=94232,94501,94561,94646,94743,94757,94763 b=trunk → r=94232,94501,94561,94646,94743,94757,94763,94848 b=trunk
(Reporter)

Comment 24

7 years ago
Fantastic, thanks! Don't worry about the anchor link...I can always type a few extra words to direct people's attention there if needed.

I believe Matej has some text-related feedback coming, but I do think we're getting close. Raymond, will you be able to give this a quick QA pass?

Sean, let us know about those other elements.
+1 to what John said in comment 22. It's really exciting to see this coming together and it's looking great! I did find some typos and things missing, though. Sorry this is so nitpicky (and long). Please let me know if anything isn't clear:


• Platform — Web should be capitalized in the Position statement: "...and shape the future of the Web for the public good."

• Platform — Non-profit should have a hyphen in the Pillars section (pillar 1.)

• Platform — there should be spaces on either side of the em dashes in the following sentence under Manifesto: "Where others may value the bottom line, we value — well — values."

• Platform — and again here: "We're not beholden to stake, share or power holders — we answer to no one but you."

• Platform — in the Manifesto, Web should be capitalized in the following sentence: "We believe that the Web is more cared for than owned." (Is there any way to make sure it's capitalized throughout?)

• Platform — and again in the Manifesto: "...we can continue to innovate for the benefit of the individual and the betterment of the Web, so that it always..."

• Platform — there's a weird space in the word "all" in the second last line of the Manifesto

• Identity — Logo — there are a number of typos in the line under Guidelines below the image showing the logo safe zones. Should be: The minimum clear space, or "safe zone," is equal to x where x is twice the width of the tittle (dot) on the i in the watermark.

• Identity — Wordmarks — "Mozilla Universal website tab" should link to Style Assets in the Website section

• Artwork — Illustrations — The "Request Character" button is missing below the second paragraph under Our Characters

• Artwork — Gear — we made a late change to the copy. The second paragraph now ends after the second line, so it should just read: "If you’d like some fresh gear for a party or other event, use the request button below. We’ll always be more than happy to help you out."

• Artwork — Gear — the "Request Gear" button is missing

• Website — Domain Strategy — this is more of a question, but should the example URLs be links, since they don't point to anything? Right now some are and some aren't. Best to be consistent, one way or another.

• Website — Domain Strategy — at the very bottom of the page, "David Boswell" should be a link to his email (subject: Domain Strategy question)

• Copy — please change the L10N link at the top between TONE and RULES to LOCALIZATION

• Copy — Tone — remove the period from the sub-head: "Mozilla is People"

• Copy — Tone — in the copy, "Firefox Brand Platform" should link to Platform section of the toolkit

• Copy — Tone — in the copy, "copy rules" should link to Rules section of the toolkit

• Copy — Tone — in the copy, "localization section" should link to Localization section of the toolkit

• Copy — Tone — the last two lines of the copy should be italicized and in a smaller point size, as per the mockups

• Copy — Localization — change title to "L10n Guide" (lowercase n in L10n)

• Copy — Localization — please make the word "lions" in the intro link to http://en.wikipedia.org/wiki/Lions

• Copy — Localization — another question: does l10n@mozilla.org currently exist? We should get that set up, if not. And if so, who gets it? Should it be me?

• Copy — Rules — in the intro, please make "AP style" link to http://www.apstylebook.com/

• Copy — Rules — in the intro, please remove "Refer to copy rules doc"

• Copy — Rules — the "gear" entry isn't formatted correctly (right now it's tacked on to the end of "free")

• Copy — Rules — the "numbers" entry isn't formatted correctly (right now it's tacked on to the end of "non-profit")

• Copy — Rules — ditto for "people" (tacked on to "open")

• Copy — Rules — ditto for "product numbers" (tacked on to "plurals")

• Copy — Rules — in the Punctuation section, please change "commas" entry to "we do not use serial commas (also called Oxford commas) in Mozilla communications"

• Downloads — should be em dashes in the intro: "Bookmark this page and use it as your one stop shop — though always free, of course — for logos, wordmarks, fonts and other bits of downloadable Mozilla awesomeness."
Target Milestone: 3.10 → ---
(Reporter)

Comment 26

7 years ago
Thanks, Eagle Eye Matej!

Sean, please do share your estimate for those other elements...we're going to debut this at the all-hands next week (version on the staging server is fine if need be), and I'd like to have those details figured out if at all possible.

Comment 27

7 years ago
I'll make a toggle today. The gear button isn't an asset needed from me - that is just added in code same as the rest of them.


Some additional comments:

 - should we hide the partner lockups section or leave it in that state to show at allhands? I plan on finalizing the lockups next week with gregory/kev.
 - "Identity > Channel Logos" and "Artwork > Gear" both have allcaps for their page titles. should match the other titles.
 - for all the Meta titles, could we try a letter-spacing at -1px or -0.8px to kern it in a bit? seems a bit wide by default.
 - for the download page, I had thought we were going to keep text links (same as current media page) as we'll be adding the EPS files as well: http://cl.ly/3K2J3K2s1z052o3i0L0Z/o  (I only had buttons for the fonts)

Comment 28

7 years ago
Also, the font I used in the menu buttons and the buttons throughout was Museo Sans. not sure it is the same on the build. Not that big a concern, but if it is a quick fix, I'd like it as Museo.  Thanks!

Comment 29

7 years ago
Sorry, I'm being picky now. :|

Is it possible to leave the mouseover state of the menu buttons as solid white as seen here: http://mozilla.seanmartell.com/engagement/brand/toolkit/ It looks as if some blue inner glow has been added. The non-hover edges are fine (they aren't there at the above link). 

Also, the subtle animation fade-ins - could we keep them? It won't show in some browsers, but that is fine. It'll show in ours! :)

Again, sorry for being picky. I'm just keen on the lil subtle transitions. :)
(In reply to Steven Garrity from comment #18)
> * The download links on pages like the CHANNEL LOGOS, are those intended to
> just link directly to the PNG file, like we do on the Downloads page?

I don't think this has been answered yet. AFAIK, those are supposed to link to the Downloads page so people can see everything in one place. Sean, John, is that still what we're doing with those?
(Assignee)

Comment 31

7 years ago
(In reply to Matej Novak [:matej] from comment #25)
> • Platform — in the Manifesto, Web should be capitalized in the following
> sentence: "We believe that the Web is more cared for than owned." (Is there
> any way to make sure it's capitalized throughout?)
Yeah, got all instances of "web". 

> • Identity — Logo — there are a number of typos in the line under Guidelines
> below the image showing the logo safe zones. Should be: The minimum clear
> space, or "safe zone," is equal to x where x is twice the width of the
> tittle (dot) on the i in the watermark.
Learned a new word (tittle).

> • Identity — Wordmarks — "Mozilla Universal website tab" should link to
> Style Assets in the Website section
This link is added, but it will only work pending a javascript fix we have coming for linking to nested tabs.

> • Website — Domain Strategy — this is more of a question, but should the
> example URLs be links, since they don't point to anything? Right now some
> are and some aren't. Best to be consistent, one way or another.
I've updated the text so any real domains are linked, but the example false domains are not (they were 404s anyhow). I wondered about giving the example domains another text style, but that just might make them look clickable again.

> • Copy — Localization — another question: does l10n@mozilla.org currently
> exist? We should get that set up, if not. And if so, who gets it? Should it
> be me?
Good question - I don't know. Anyone? I can only find references to l10n-drivers@mozilla.org

More fixes for the remaining comments coming up next.
Whiteboard: r=94232,94501,94561,94646,94743,94757,94763,94848 b=trunk → r=94232,94501,94561,94646,94743,94757,94763,94848,94908 b=trunk
(Assignee)

Comment 32

7 years ago
(In reply to Sean Martell from comment #27)
>  - should we hide the partner lockups section or leave it in that state to
> show at allhands? I plan on finalizing the lockups next week with
> gregory/kev.
Let me know - these are easy to keep or hide.

>  - "Identity > Channel Logos" and "Artwork > Gear" both have allcaps for
> their page titles. should match the other titles.
Fixed.

>  - for all the Meta titles, could we try a letter-spacing at -1px or -0.8px
> to kern it in a bit? seems a bit wide by default.
Yeah, I've added some negative letter-spacing now. It helps a bit. I wondered if the MetaNormal webfont has the proper information.

>  - for the download page, I had thought we were going to keep text links
> (same as current media page) as we'll be adding the EPS files as well:
> http://cl.ly/3K2J3K2s1z052o3i0L0Z/o  (I only had buttons for the fonts)
Ah, right. How about we switch back to the text links when the EPS files are available. Do you have these EPS files for us?

(In reply to Sean Martell from comment #28)
> Also, the font I used in the menu buttons and the buttons throughout was
> Museo Sans. not sure it is the same on the build. Not that big a concern,
> but if it is a quick fix, I'd like it as Museo.  Thanks!
Fixed.


(In reply to Sean Martell from comment #29)
> Sorry, I'm being picky now. :|
Don't apologize for attention to detail!

> Is it possible to leave the mouseover state of the menu buttons as solid
> white as seen here: http://mozilla.seanmartell.com/engagement/brand/toolkit/
> It looks as if some blue inner glow has been added. The non-hover edges are
> fine (they aren't there at the above link). 
Fixed - these got copied from somewhere else on the site.
 
> Also, the subtle animation fade-ins - could we keep them? It won't show in
> some browsers, but that is fine. It'll show in ours! :)
I thought we did keep these? Are you not seeing them, or are we not talking about the same thing (transitions to/from hover/active states on the menu buttons)?
Whiteboard: r=94232,94501,94561,94646,94743,94757,94763,94848,94908 b=trunk → r=94232,94501,94561,94646,94743,94757,94763,94848,94908,94912 b=trunk
(Assignee)

Comment 33

7 years ago
Created attachment 559477 [details]
screenshot of download buttons from mozilla.org/firefox

Except for the remaining pieces to come from Sean, I think the only remaining is the actual downloads for the universal tab, buttons, and backgrounds.

I'm working up sample HTML pages with the CSS/images to provide as a zip file for these. However, the download buttons shown in the image vary from the actual download buttons we have on the website.

Compare this image: http://www-trunk.stage.mozilla.com/img/covehead/firefox/brand-toolkit/style-button.png
To the image attached here (a screenshot of our actual buttons). I presume we should match the actual buttons we have?
(Assignee)

Updated

7 years ago
Whiteboard: r=94232,94501,94561,94646,94743,94757,94763,94848,94908,94912 b=trunk → r=94232,94501,94561,94646,94743,94757,94763,94848,94908,94912,94917 b=trunk
(Assignee)

Comment 34

7 years ago
Created attachment 559483 [details]
Sample sub-tabs screenshot

One of my astute co-workers pointed out that on pages with only two sub-tabs (GEAR/ILLUSTRATIONS under ARTWORK, for example), it's not visually clear which is the selected sub-tab. The selected tab text is grey, and the un-selected tab is the link-color blue. However, this can make the blue link look visually highlighted.

Sean, any suggestions for a way to more clearly visually denote the current sub-tab?
(Reporter)

Comment 35

7 years ago
Quick thoughts on the above:
- l10n-drivers@mozilla.org is their primary email alias as far as I know, so let's use that...can always change after the launch if need be.
- let's hide the partner section for now, but plan on adding it to an upcoming release for sure.
- we're not adding eps files of the logos for now.
- re: comment #33, my download buttons actually do look like http://www-trunk.stage.mozilla.com/img/covehead/firefox/brand-toolkit/style-button.png. Is this a Mac vs Linux thing?

Sean, can you weigh in with the other answers (to comment #34 for example) and an estimate for the remaining assets?

Silverorange guys - thank you very much!!
(In r94945]) Update the pager class to work with nested pagers as used on the branding toolkit. Refs Bug #673533

You can now refresh the page without losing your spot, and use the back/forward buttons without breaking things. Huzzah!
Whiteboard: r=94232,94501,94561,94646,94743,94757,94763,94848,94908,94912,94917 b=trunk → r=94232,94501,94561,94646,94743,94757,94763,94848,94908,94912,94917,94945 b=trunk
(Assignee)

Comment 37

7 years ago
Added the downloads. For now, on the IDENTITY > WORDMARKS panel download links are linking to one main large PNG even when there are multiple variations. We can update these when we have a better style for multiple download links (see Bug 686890).

The only remaining issue that I'm aware of is in-line links to other second-level panels are not working (there are a few in the text on the COPY panel). A javascript fix for this is coming.
Whiteboard: r=94232,94501,94561,94646,94743,94757,94763,94848,94908,94912,94917,94945 b=trunk → r=94232,94501,94561,94646,94743,94757,94763,94848,94908,94912,94917,94945,95062 b=trunk
(Assignee)

Updated

7 years ago
Whiteboard: r=94232,94501,94561,94646,94743,94757,94763,94848,94908,94912,94917,94945,95062 b=trunk → r=94232,94501,94561,94646,94743,94757,94763,94848,94908,94912,94917,94945,95062,95063 b=trunk
(Reporter)

Comment 38

7 years ago
Thanks guys! Steven, what are the remaining blockers?
(Assignee)

Comment 39

7 years ago
(In reply to John Slater from comment #38)
> Thanks guys! Steven, what are the remaining blockers?

I'll do another review myself, but the only issue I'm aware of is in-line links to second-tier panels not working.

It's probably worth doing another final content review while we work on that last fix.

Comment 40

7 years ago
(In reply to Steven Garrity from comment #39)
> (In reply to John Slater from comment #38)
> > Thanks guys! Steven, what are the remaining blockers?
> 
> I'll do another review myself, but the only issue I'm aware of is in-line
> links to second-tier panels not working.
> 
> It's probably worth doing another final content review while we work on that
> last fix.

Would it be possible to add unique page titles?

Here's a list:

http://www-trunk.stage.mozilla.com/en-US/firefox/brand/ - Firefox Web Browser - Brand Toolkit  --> Firefox Web Browser - Firefox Brand Toolkit

http://www-trunk.stage.mozilla.com/en-US/firefox/brand/#platform - Firefox Web Browser - Brand Toolkit  change to  --> Firefox Web Browser - Firefox Brand Platform

www-trunk.stage.mozilla.com/en-US/firefox/brand/#identity/logos - Firefox Web Browser - Brand Toolkit  change to --> Firefox Web Browser - Firefox Logos, Wordmarks, Typefaces & Gear

http://www-trunk.stage.mozilla.com/en-US/firefox/brand/#website/style-assets -  Firefox Web Browser - Brand Toolkit  change to --> Firefox Web Browser - Firefox Website Style Assets, Universal Tab & Domain Strategy

http://www-trunk.stage.mozilla.com/en-US/firefox/brand/#copy/tone - Firefox Web Browser - Brand Toolkit  change to --> Firefox Web Browser - Firefox Editorial Style Guide, Localization & Rules

http://www-trunk.stage.mozilla.com/en-US/firefox/brand/#downloads - Firefox Web Browser - Brand Toolkit  change to --> Firefox Web Browser - Download Firefox Logos, Typefaces, Wordmarks & Website Assets

Also, it would be super awesome to add alt-text to the individual logos, wordmarks, and typefaces on http://www-trunk.stage.mozilla.com/en-US/firefox/brand/#downloadshttp://www-trunk.stage.mozilla.com/en-US/firefox/brand/#downloads
(Reporter)

Comment 41

7 years ago
+1 for the SEO improvements in comment #40...it would be a big win if we could get people to pull their logos from here rather than the various incorrect sources around the web.
(Assignee)

Updated

7 years ago
Whiteboard: r=94232,94501,94561,94646,94743,94757,94763,94848,94908,94912,94917,94945,95062,95063 b=trunk → r=94232,94501,94561,94646,94743,94757,94763,94848,94908,94912,94917,94945,95062,95063,95101 b=trunk
(Assignee)

Comment 42

7 years ago
(In reply to mcbmoz from comment #40)
> Also, it would be super awesome to add alt-text to the individual logos,
> wordmarks, and typefaces [...]

I think we've got appropriate alt tags on all of the images already.

(In reply to John Slater from comment #41)
> +1 for the SEO improvements in comment #40...it would be a big win if we
> could get people to pull their logos from here rather than the various
> incorrect sources around the web.

Good point. The current site is all one single HTML page and transitions between the sub-pages are handled via Javascript. As far as Google or a non-Javascript visitor is concerned, this entire site is one page - this isn't 'broken', as all of the content is still visible/accessible, but it's certainly not ideal.

There are two ways we can fix this:
1. Break the site up into individual HTML pages. This isn't particularly difficult (just a bit of HTML grunt work), but has the side-effect of losing the nice smooth instant transitions between pages. On the bright side, the intitial page load would be much smaller/faster.
2. Crazy-awesome-super-HTML5+PHP+JS-magic to keep the simple unique URLs, work well in older browsers, non-JS, and google-indexer, but still maintain a nice smooth experience for more modern browsers. We're researching this now - the big initial question is, who much work is involved. When we have a better idea of that, we'll report back.
(Reporter)

Comment 43

7 years ago
For what it's worth, the only page we absolutely *need* to search optimize for is the downloads one. The others are all nice-to-haves, but that one is key. So, maybe that makes it easier to find a solution if you only have to do it for one page? For example, I could live with a less awesome transition into that page if it means awesome SEO on it.

Comment 44

7 years ago
(In reply to John Slater from comment #43)
> For what it's worth, the only page we absolutely *need* to search optimize
> for is the downloads one. The others are all nice-to-haves, but that one is
> key. So, maybe that makes it easier to find a solution if you only have to
> do it for one page? For example, I could live with a less awesome transition
> into that page if it means awesome SEO on it.

I'd go for option #1 or #2 - splitting pages out for unique keyword targeting and backlinking.

SEO for items like the editorial style guide is really important, namely when it comes to capturing multiple line items in search results. But, also for the backlinking juice that each individual unit might garner over time from various sources (e.g. Copyblogger linking to Mozilla's style guide, and so forth).

Lastly, I'd make it ridiculously easy for anyone to link directly to a specific section/page, which might be less easy with the current transitions (as awesome as they are).
(In reply to Steven Garrity from comment #34)
> Created attachment 559483 [details]
> Sample sub-tabs screenshot
> 
> One of my astute co-workers pointed out that on pages with only two sub-tabs
> (GEAR/ILLUSTRATIONS under ARTWORK, for example), it's not visually clear
> which is the selected sub-tab. The selected tab text is grey, and the
> un-selected tab is the link-color blue. However, this can make the blue link
> look visually highlighted.
> 
> Sean, any suggestions for a way to more clearly visually denote the current
> sub-tab?

Apologies if this got sorted out already, but since I didn't see an answer in the comments, I wanted to make sure we didn't forget about it. I definitely agree that it isn't totally clear. Sean, any thoughts?
(Reporter)

Comment 46

7 years ago
Steven, let us know what you think about the SEO stuff above. It *is* important, but not an immediate blocker for launch...if it's going to take a lot longer to do I'd rather push the toolkit live and then fix in a future update.
(Assignee)

Comment 47

7 years ago
We've got a nice HTML5 history API / AJAX loading solution coming that will allow Google-friendly URLs. In the mean time, though, we've got the brand toolkit working with each panel as it's own page. I think we're ready for QA.
Keywords: qawanted
Whiteboard: r=94232,94501,94561,94646,94743,94757,94763,94848,94908,94912,94917,94945,95062,95063,95101 b=trunk → r=94232,94501,94561,94646,94743,94757,94763,94848,94908,94912,94917,94945,95062,95063,95101,95238 b=trunk
(Reporter)

Comment 48

7 years ago
Thanks Steven.

Raymond, what's your estimate on QA timing? Would like to push this next week to fulfill a Q3 goal.
(In reply to John Slater from comment #48)
> Thanks Steven.
> 
> Raymond, what's your estimate on QA timing? Would like to push this next
> week to fulfill a Q3 goal.

http://www-dev.allizom.org/en-US/firefox/brand/ is a 404, so where does this live for us to test?
(Reporter)

Comment 50

7 years ago
Hmm, that link was definitely working fine earlier. Steven, can you help?
Depends on: 688904
QA is currently blocked by bug 688904.
(Assignee)

Comment 52

7 years ago
I somehow lost track of this bugmail - IT has the stage site back up and running (Bug 689550) and I have a few missing files in the toolkit fixed. Should be all set for QA now - sorry for the confusion/delay.
Status: NEW → RESOLVED
Last Resolved: 7 years ago
Resolution: --- → FIXED
Whiteboard: r=94232,94501,94561,94646,94743,94757,94763,94848,94908,94912,94917,94945,95062,95063,95101,95238 b=trunk → r=94232,94501,94561,94646,94743,94757,94763,94848,94908,94912,94917,94945,95062,95063,95101,95238,95406,95407 b=trunk
I noticed that http://www-dev.allizom.org/en-US/firefox/brand/platform/ doesn't have " - Brand Toolkit - " in the middle of its <title> tag, as do the other pages.
(Reporter)

Comment 54

7 years ago
General timing question...can we get this pushed live sometime this week?

I just noticed it's still missing a "back to the site" nav element like we've been discussing. Steven, could you guys take a crack at that?
(Assignee)

Comment 55

7 years ago
(In reply to Stephen Donner [:stephend] from comment #53)
> I noticed that http://www-dev.allizom.org/en-US/firefox/brand/platform/
> doesn't have " - Brand Toolkit - " in the middle of its <title> tag, as do
> the other pages.

We weren't quite sure what do to with the page titles. Chrissie's list didn't quite match with the list of pages. Here's what we've got, Chrissie, can you confirm?

Firefox Web Browser - Brand Toolkit
/firefox/brand/

Firefox Web Browser - Firefox Brand Platform
/firefox/brand/platform/

Firefox Web Browser - Brand Toolkit - Firefox Logos
/firefox/brand/identity/

Firefox Web Browser - Brand Toolkit - Channel Logos
/firefox/brand/identity/channel-logos/

Firefox Web Browser - Brand Toolkit - Wordmarks
/firefox/brand/identity/wordmarks/

Firefox Web Browser - Brand Toolkit - Typefaces
/firefox/brand/identity/typefaces/

Firefox Web Browser - Brand Toolkit - Illustrations
/firefox/brand/artwork/

Firefox Web Browser - Brand Toolkit - Gear
/firefox/brand/artwork/gear/

Firefox Web Browser - Brand Toolkit - Website Style Assets
/firefox/brand/website/

Firefox Web Browser - Brand Toolkit - Domain Strategy
/firefox/brand/website/domain-strategy/

Firefox Web Browser - Brand Toolkit - Tone
/firefox/brand/copy/

Firefox Web Browser - Brand Toolkit - Localization
/firefox/brand/copy/l10n/

Firefox Web Browser - Brand Toolkit - Copy Rules
/firefox/brand/copy/rules/

Firefox Web Browser - Brand Toolkit - Logo, Font, and Asset Downloads
/firefox/brand/downloads/

Comment 56

7 years ago
The items I notice that need some page title love:

Firefox Web Browser - Brand Platform: Positioning, Pillars, Voice & Manifesto
http://www-dev.allizom.org/en-US/firefox/brand/platform/

Firefox Web Browser - Brand Toolkit - Typefaces: Meta Font & Open Fonts
http://www-dev.allizom.org/en-US/firefox/brand/identity/typefaces/

Firefox Web Browser - Brand Toolkit - Gear: Shirts, hats, bags, stickers . . .
http://www-dev.allizom.org/en-US/firefox/brand/artwork/gear/

Firefox Web Browser - Brand Toolkit - Tone: Our Written Voice
http://www-dev.allizom.org/en-US/firefox/brand/copy/
(Assignee)

Comment 57

7 years ago
Created attachment 562812 [details]
Back link mockup options

(In reply to John Slater from comment #54)
> General timing question...can we get this pushed live sometime this week?
Presuming QA doesn't turn up any real surprises, I would think so, yes.

> I just noticed it's still missing a "back to the site" nav element like
> we've been discussing. Steven, could you guys take a crack at that?
Sure, I've attached a preview with four variations for your review:

A. Small text-link, left-aligned
B. Small text-link, right-aligned
C. Firefox logo/wordmark
D. Full mozilla.org/firefox header

I'm open to suggestions on the wording for the text in A./B.

I don't think D. works well - to much going on in the header - included the mockup anyhow, for the sake of comparison.

I think C. is my preference, but I don't really mind A., B., or C.

Comment 58

7 years ago
I thought I had posted the link layout. Odd. I had it mocked up a few weeks ago!

I was thinking breadcrumb with the little house as seen here: http://cl.ly/3I042O042K1B412F0H0i

Not sure about the text, I'll leave that up to matej.
(Assignee)

Comment 59

7 years ago
(In reply to mcbmoz from comment #56)
> The items I notice that need some page title love:
These pages titles have been updated.
Whiteboard: r=94232,94501,94561,94646,94743,94757,94763,94848,94908,94912,94917,94945,95062,95063,95101,95238,95406,95407 b=trunk → r=94232,94501,94561,94646,94743,94757,94763,94848,94908,94912,94917,94945,95062,95063,95101,95238,95406,95407,95453 b=trunk
I don't mind saying either "return to" or "back to," but it might be strange if someone doesn't get to the toolkit from mozilla.org/firefox

Maybe it should just say "Go to mozilla.org/firefox"
(Assignee)

Comment 61

7 years ago
Added a "Go to mozilla.org/firefox" link based on Sean's mockup - I ommited the << character though, as it looks like too many elements in that area. Feedback is welcome.
Whiteboard: r=94232,94501,94561,94646,94743,94757,94763,94848,94908,94912,94917,94945,95062,95063,95101,95238,95406,95407,95453 b=trunk → r=94232,94501,94561,94646,94743,94757,94763,94848,94908,94912,94917,94945,95062,95063,95101,95238,95406,95407,95453,95461 b=trunk
(Reporter)

Comment 62

7 years ago
Solution looks great to me - thanks guys. Should it be in Georgia though? 

Btw, I'd like to push this live on Thursday if possible.
(Reporter)

Updated

7 years ago
Blocks: 689783
(Assignee)

Comment 63

7 years ago
(In reply to John Slater from comment #62)
> Solution looks great to me - thanks guys. Should it be in Georgia though? 
I was following Sean's mockup, but I think Georgia works well to. I've changed it to Georgia in trunk - I'll let Sean hunt you down if he disagrees.

Also fixed some internal links on the Copy page.
Whiteboard: r=94232,94501,94561,94646,94743,94757,94763,94848,94908,94912,94917,94945,95062,95063,95101,95238,95406,95407,95453,95461 b=trunk → r=94232,94501,94561,94646,94743,94757,94763,94848,94908,94912,94917,94945,95062,95063,95101,95238,95406,95407,95453,95461,95500,95501 b=trunk

Comment 64

7 years ago
I think the Mueso Sans looks nice. Don't think it needs to... follow the toolkit here. :)
(Reporter)

Comment 65

7 years ago
I like the Georgia, personally.

Raymond, are we on track to push tomorrow?
(In reply to John Slater from comment #65)
> I like the Georgia, personally.
> 
> Raymond, are we on track to push tomorrow?

qa-verified-trunk http://www-dev.allizom.org/en-US/firefox/brand/ we are on track for a push tomorrow
Keywords: qawanted
(Reporter)

Comment 67

7 years ago
AWESOME 

Thanks all!
pushed to production r95563
verified fixed http://www.mozilla.org/en-US/firefox/brand/
Status: RESOLVED → VERIFIED
Component: www.mozilla.org/firefox → www.mozilla.org
Product: Websites → Websites
Component: www.mozilla.org → General
Product: Websites → www.mozilla.org
You need to log in before you can comment on or make changes to this bug.