791251 - [feature request] Make SUMO logo in the header localizable

Status: RESOLVED FIXED

(support.mozilla.org - Lithium :: Localization, defect, P2)

Description

[Pavel Cvrcek [:JasnaPaka]]

Attachment: Logo

In the new SUMO design there is logo as image which we cannot localize. It is better to see something like "Podpora Mozilly" and not image with english text "Support Mozilla".

Comment 1

[Kadir Topal [:atopal]]

Bram, can we do this? Or are there restrictions we have to adhere to?

Comment 2

[Bram Pitoyo [:bram]]

On the old design, we used the Meta Black font to render the text ‘FIREFOX’ on the sentence ‘Need help with Firefox?’ which serves as a page title.

On the surface, this seemed like a simple problem: let’s use Meta Black as a web fonts (the old design did it) and it will be done.

There are a few problems with this:
* The new design called for not one, but two weights of the Meta font: Meta Medium and Meta Normal (reference: http://www.mozilla.org/en-US/styleguide/communications/typefaces/)
* I don’t think that we have the license to use Meta Medium and Meta Normal as webfonts
* Adding two webfonts on top of the various weights we will use for Open Sans will add to the site’s load time
* Different languages will have different word order. How do we set the CSS rule so that the right part of the text gets rendered in the right weight of the font?

There are a few solutions:
1. Use Open Sans rather than Meta. Our site will not look like other Mozilla properties, but it will support different languages, and we won’t need to embed Meta Medium and Meta Normal as webfonts
2. Render the text ‘Mozilla Support’ in all language, in transparent PNG (don’t forget to make @2x file for high resolution devices), and then different locales would use different title PNGs to render their SUMO title
3. Embed Meta Medium and Meta Normal as webfonts, figure out an algorithm that will detect what word will be rendered with what weight of Meta, then proceed as usual

To me, solution #2 is the best compromise between making our site still conform to Mozilla’s branding guideline, but not embed two extra web fonts that will significantly increase page loading time.

With solution #2, I will have to get the spelling of ‘Mozilla Support’ from every locale we have, set the title correctly, then generate a PNG image of that. It’s tedious, but not that hard. Plus, I imagine that a lot of locales will just elect to have “Mozilla Support” spelled in Latin alphabet, without change.

This issue runs deeper than it initially seems because the designers have been working from an English-centric set of assumption. In an English-speaking world, Using one PNG image that says ‘Mozilla Support’ is the solution that makes the most sense. But when we’re trying to support a lot of locales, things aren’t so simple anymore.

Comment 3

[Kadir Topal [:atopal]]

I like the idea of creating pngs. Ricky, what do you think?

Comment 4

[Ricky Rosario [:rrosario, :r1cky]]

I don't particularly like having to go with PNGs but it doesn't seem there is a better solution that will satisfy branding requirements, does there?

We would have to create a PNG file for every single locale we support (logo-<locale code>.png). Then, when we add new locales we have to be sure to add the logo for the new locale (even if it is just a copy of the en-US one initially.)

Another option might be to default to en-US for everybody and then override specific locales in the CSS.

Can't we just make it Comic Sans?

Comment 5

[Sean Martell]

Hey all,

We no longer use Meta fonts on any of our properties and our wordmarks are always in graphic form going forward.

http://www.mozilla.org/en-US/styleguide/communications/typefaces/

If there is a portion of this site that requires localization, it should be in Open Sans.

We don't usually localize our wordmarks, so mozilla support wordmark at the top should remain English, but it can be localized in text throughout the site, or in a welcome message.

If you don't want the mozilla support wordmark to remain english at all times, I'd recommend using simply "mozilla" as the wordmark and having the title support in another location where it could be localized. We can work to tweak the design to accommodate this.

Thanks!

Comment 6

[John Slater]

+1 for what Sean wrote.

Comment 7

[Kadir Topal [:atopal]]

Hi Sean, your last suggestion sounds good to me. Can we use this bug for the work on that? Who can I assign this to?

Comment 8

[Michał Frontczak [:fxa90id] ♥]

Maybe @font-face would help here :) ?

Comment 9

[Andrew Truong [:feer56] [:andrewtruong] [:atruong]]

Any update on this?

Comment 10

[Scoobidiver (away)]

Tabzilla tells us that we are on Mozilla, and also the search field.

Can we use only the localizable Support string like in http://support.microsoft.com/?ln=en or eventually Mozilla (logo) | Support like in http://support.google.com/?hl=en?

Comment 11

[vesper]

I don't want to derail Scoobidiver's idea, but maybe we could use the SUMO branding we've had designed at some point? http://www.musingt.com/sumo-identity/?rq=sumo

Comment 12

[Underpass]

Hello, is there any plan to have this bug solved?

Comment 13

[Michal Stanke (Mozilla.cz) [:mstanke][:MikkCZ]]

So, what's the current decision. Is making the logo translatable enough, or do we want to add some logo/branding too?

Comment 14

[Bram Pitoyo [:bram]]

Provided that we can use the webfont to render the word “support” accurately, this would be the best way to localise. The word “mozilla” can still be an image that remains unchanged in every locale.

Thoughts?

Comment 15

[Michal Stanke (Mozilla.cz) [:mstanke][:MikkCZ]]

If localizers can choose the word order (support mozilla / mozilla support) it should work for a lot of locales, but:
- not for most Slavic languages because of declension (in Czech we translate as Podpora Mozilly),
- looking in Pontoon how "Mozilla Support" string is translated, "mozilla" logotype do not start with capital "M", which is used in all locales. IMO having the top headline all lowercase does not look good (even now it looks weird to me).

Do not know how string the Mozilla policies are, but IMO the whole logo should be localizable, or replaced by some more locale neutral SUMO branding.

Comment 16

[vesper]

Hi everyone,

I think that comment #5 by Sean is the best guideline here, and we should instead try using an existing string (for example the one below) to add it as a tagline or extension to the untranslatable graphics.

This would also avoid the l10n complications mentioned by Michal in comment #15.

"Mozilla Support"
Context site_title
#: kitsune/sumo/jinja2/base.html:15
#: kitsune/sumo/jinja2/mobile/base.html:17
#: kitsune/sumo/jinja2/mobile/minimal.html:14
#: kitsune/wiki/jinja2/wiki/document.html:11
Resource path LC_MESSAGES/django.po

Comment 17

[vesper]

Cleaning up CC list and assigning to myself for further resolution as part of migration to Lithium

(note to self - Studio > Components > custom.logo; figure out if we can incorporate a localizable string next to an image)

Comment 18

[vesper]

+NI from Madalina for handling & prioritization.

(note to self - Studio > Components > custom.logo; figure out if we can incorporate a localizable string next to an image OR use multiple images with localized text for different sections of the KB; the former sounds more practical and easier to achieve; can text strings include referrers to images?)

Comment 19

[vesper]

The logo on Lithium should be localizable now, in image format.

Required steps for community members to have a localized version present on the site:

1) Create a localized version of the logo in (transparent) .png format (same size, colour, and transparency as the attachment)

2) Send it over to any of the Admins for upload and set up via Studio

3) Wait until the next publish of Studio changes to the prod site

Required steps for Admins to have a localized version present on the site:

1) Make sure localized image has the correct size, colour, and transparency

2) Upload the verified image with the file name "mozilla-support-XXXX.png", where XXXX is the language code (2 to 4 characters, e.g. "fr" or "ptbr") through: Studio > Community Style > Asset Library > Other Assets

3) Update the custom string for the locale through: Studio > Text Editor > Custom Text > use locale dropdown + View > Add New Text Key and use

Text Key Name: logoUrl
Text Key Value: /html/assets/mozilla-support-XXXX.png

4) Repeat steps 1-3 for any additional localized logos; review changes on stage; if working correctly, publish changes to prod via Studio > Versions

Side notes:

1) Once we finalize design decisions for branding, the format and design of the image may change, so it may be worth waiting until that happens to save extra work.

2) Another text key is used for the alternative string displayed instead of the image (if necessary): "logoAlt". Its value for English is "Mozilla Support" and it will be localized independently into available locales. If we ever decide to use formatted text instead of images for the logo, this text key can be easily reused.