807470 - Make localized "Privacy settings" string (and maybe others) fit on Sumo Firefox/Mobile product page

Status: RESOLVED FIXED

(support.mozilla.org :: Localization, task, P3)

Description

[Ton [:Tonnes]]

The Firefox and Mobile SUmo product pages currently contain 2 rows and 3 columns of tiles. One of them carries the text "Privacy and security settings". Some locales may have trouble making this or any other long string fit the tile if they contain longer words than en-US do, like currently for nl and de. E.g. for nl, we would need to use "Privacy- en beveiligingsinstellingen" in the top right, where the last word is just too long to fit its tile.

One option is to reword the string, another would be the tiles growing dynamically. It would be obvious to break long words up in one or more of those strings, but as this one appears to be shared with the page the link points to (and probably with the on on https://support.mozilla.org/nl/home), it would not be an option to split the long word in Verbatim. Either way, the design would need a small cosmic change, or one or more extra strings could be sufficient.

Comment 1

[Ricky Rosario [:rrosario, :r1cky]]

Bram what can we do here? I know at least German has the same issue. Is it possible to have rows of two boxes on the product landing pages maybe?

Comment 2

[Bram Pitoyo [:bram]]

I think having rows of two boxes will be my last resort. The horizontally flowing text looks awesome, but then, locales that set their languages short will have a lot of vertical empty gaps in the text, which looks somewhat incomplete (ie. like something is missing) and broken.

There are several things we can do in the three-column format:
1) Reduce the box padding, which will give us more space
2) Rebalance the icon, so that they look visually similar. Right now, the chalkboard, lock and gear looks smaller than the warning, monitor and people
3) With the icon looking similar, we can reduce the text’s left margin, which will give us more space

I am going to try rebalancing the icons first and giving you the code to reduce padding and text margin. Then we’ll see if that works and looks better? Shouldn’t take more than an hour or two.

Comment 3

[Bram Pitoyo [:bram]]

Attachment: two-column help topic grid

Comment 4

[Bram Pitoyo [:bram]]

Attachment: three-column help topic grid: english, nederlands & deutsch

I made these icons smaller so they match visually:
* http://people.mozilla.com/~bpitoyo/sumo/icons/download.png
* http://people.mozilla.com/~bpitoyo/sumo/icons/gear.png
* http://people.mozilla.com/~bpitoyo/sumo/icons/error.png
* http://people.mozilla.com/~bpitoyo/sumo/icons/people.png


And tweaked some margins and paddings:

#help-topics .card-grid > li > a .title, #help-topics .card-grid > li > a:visited .title {
	margin-left: 74px /* down from 86px */
}

.card-grid > li > a {
	padding: 15px 9px 15px 5px; /* down from 20px all around */
}


The result looks great on Nederlands and Deutsch, but not so great on English and other locales with short languages.

What do you think?

Comment 5

[Ricky Rosario [:rrosario, :r1cky]]

(In reply to Bram Pitoyo [:bram] from comment #4)
> 
> What do you think?


The screenshot is the home page, but the issue is on the product landing page where you select a topic. The product landing page have less width for the boxes, which is why I suggested going with two columns but only on that page and not the home page.

Did you try your fix on the product landing pages?

Comment 6

[Ton [:Tonnes]]

(In reply to Ricky Rosario [:rrosario, :r1cky] from comment #5)

> The product landing page have less width for
> the boxes, which is why I suggested going with two columns but only on that
> page and not the home page.

Good point, though I’d prefer to see you keep three. Isn’t it possible to either move these three columns including the topics below them to the left so they start below the ‘sidebar’ column on the far left? I.o.w., the center of the screen is currently exactly between the first and second column, while there is lots of unused space below the left part already.

Comment 7

[Kadir Topal [:atopal]]

Ton, we'd need to get rid of the product picker in the left sidebar, otherwise it would be unbalanced. On the other hand, I wonder if we even need the product picker here.

Bram, what do you think about that?

Ricky, while you are right with the product page, I think we should take Bram's changes to the start page as that is currently unbalanced for many languages that are more verbose than English.

Comment 8

[Bram Pitoyo [:bram]]

Attachment: Product landing page: English, Nederlands & Deutsch

(In reply to Ricky Rosario [:rrosario, :r1cky] from comment #5)
> Did you try your fix on the product landing pages?

Hi Ricky, I am sorry for misreading your comment. I thought that the problem existed in the main page, not the product landing page.

Now I see what the problem is, and think that Kadir’s idea of completely erasing the sidebar on the product landing pages would be a good idea to resolve the spacing issue.

So, when revised, the product landing page will look exactly like the top page, except the area below the header will contain the product logo and name. The mockup is attached here.

Aside from this, I think we should still revise the spacing on the start page, which will carry over to the product landing page, and make the texts flow better. The spacing correction has not been done to this mockup.

Comment 9

[Ricky Rosario [:rrosario, :r1cky]]

We are eliminating the sidebar on the product landing pages and making the contents more like the home page. ~= 1pt

Comment 10

[Michael Cooper [:mythmon]]

Eliminating the sidebar, and implementing the style changes :bram suggested aren't enough to make all the cards the same size on the German page.

Out of curiosity, I decided to try and write a bit of JS that would normalize the height of the cards: https://gist.github.com/4229894. What it does is set the height of every card to the height of the tallest card in it's own group.

On the one hand, doing layout with JS can be icky. On the other hand, I think that since this is cosmetic only, and doesn't affect the actual content, it would be ok to do.

:bram, :rdalal, what do you think about including this, instead of trying to make room for long languages, and trying to make it look good in short languages at the same time.

Comment 11

[Michael Cooper [:mythmon]]

https://github.com/mozilla/kitsune/pull/991

Comment 12

[Michael Cooper [:mythmon]]

Landed in https://github.com/mythmon/kitsune/commit/92aa735714002d669d319007c9498abd51be8f6e.
Deployed to prod just now.