1073237 - update navigation for "other" firefox pages - live Nov 10

Status: VERIFIED FIXED

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

Description

[Jennifer Bertsch [:jbertsch]]

Attachment: leagacy firefox navigation

Hi Jon and Steven-

With new pages (Sync, Android, Interest Dashboard, Tiles) using the Legacy Firefox navigation (see attached image), I'd love to update it where it exists on the live site.

The pages I know of are: 
- /dnt (I'm going to file another bug to move /dnt to /firefox/dnt) 
- /firefox/sync
- /firefox/android/faq/
- /firefox/channel/ (which has it's own bug for a redesign)

Do you have a "search and replace" sort of way to find any other pages using the existing nav?

The new nav is here:  https://docs.google.com/a/mozilla.com/spreadsheets/d/1_05e0W-FoqvEIZzQ_AuGSwKFvcwUDaPmMFC60sBSjB0/edit#gid=0

Note that the top level menu label won't link and anything in Italics is a new page that will launch in the next several months and then be added to this nav.  Also please note that under the "firefox" menu we'll have "major" links and "minor" links with a sketch uploaded to this bug to distinguish how to display major vs minor.

Is it realistic to push this out with the new Android page on Oct 10?

Flod and Pascal - how do you want to handle for L10N?

thx,
Jen

Comment 1

[Holly Habstritt Gaal [:Habber]]

Attachment: temp_global_nav.png

The following screenshot displays the new nav and sub nav options. 

For the Firefox nav item, an additional style and column will be added to our current sub nav style. Products are primary and will follow current, all-caps, text style in left column. Features (or tertiary products) will be presented in second column and not be all-caps.

Comment 2

[Francesco Lodolo [:flod]]

(In reply to Jennifer Bertsch [:jbertsch] from comment #0)
> Flod and Pascal - how do you want to handle for L10N?

Current menu strings are in a file shared across the board (main.lang), not sure if hiding the new navigation bar behind a tag a) makes sense, b) would work (never tried).

From a quick look at the spreadsheet, the main change is mobile -> android (3 strings), plus Fx Dev.

Having 2 columns is probably dangerous, the 1st column could expand a lot with the last item.

Comment 3

[Jonathan Petto [:jpetto]]

Agree with :flod that having 2 columns in dangerous. Long string length could really make the layout look poor.

Is it only the Firefox nav item with minor links? Perhaps minor links could be displayed below the major links with some kind of UI break (line, empty space) between the two groups?

The code for this menu is centralized - updating one file will update all pages with this navigation. I can find the full list of pages currently using this nav if necessary, but it sounds like we want them all updated regardless.

I can take this on and have it ready at the same time as the Android page update.

Comment 4

[Holly Habstritt Gaal [:Habber]]

Can we have a max width for each column and then have titles wrap? 

I also like Jon's suggestion about putting them below and separate with a line. When I tried it, it looked kind of funny, but if you'd like to give it a go and share, let's try it.

Comment 5

[Jonathan Petto [:jpetto]]

Yeah, I'll try out a top-down approach and post a screenshot. If we don't like it, we can go for two columns.

One thing to note - when the page reaches tablet width, the navigation changes. All items would be top to bottom at that point.

Comment 6

[Jennifer Bertsch [:jbertsch]]

Thx Jon and Holly.  Sounds good to me.

Comment 7

[Pascal Chevrel (relman team) -> :pascalc]

Do you have an estimate as to when we will get the strings for that change? Those are header changes and we also have footer changes required by the legal team in bug 1075252, I would prefer not to ping localizers on a string per string basis for the base mozilla.org template, so if string updates to the main templates could land together, that would help us :) Thanks

Comment 8

[Jennifer Bertsch [:jbertsch]]

Could we also add this nav to: https://www.mozilla.org/en-US/firefox/desktop/tips/

JPetto:  when do you think we could have strings for L10N?  Thx!

Comment 9

[Jonathan Petto [:jpetto]]

I've got the new menu coded with all strings in (https://github.com/mozilla/bedrock/blob/bug-1072953-fx-android-page-redesign/bedrock/firefox/templates/firefox/includes/top-menu.html). I was planning to push to demo1 tonight, but there's a network issue in the PHX data center that's blocking access to the chief site.

I'll attempt a push tomorrow morning.

Comment 10

[Jonathan Petto [:jpetto]]

demo1 has been updated with the new nav:

https://www-demo1.allizom.org/en-US/dnt/
https://www-demo1.allizom.org/en-US/firefox/desktop/tips/

Comment 11

[Jennifer Bertsch [:jbertsch]]

+1  Thanks Jon!

So excited to see this live.

Could you also add it to this new page:  /firefox/interest-dashboard

And will it work for dnt at the new location:  /firefox/dnt

Comment 12

[Holly Habstritt Gaal [:Habber]]

Looks good, Jon!

Comment 13

[Jonathan Petto [:jpetto]]

(In reply to Jennifer Bertsch [:jbertsch] from comment #11)
> +1  Thanks Jon!
> 
> So excited to see this live.
> 
> Could you also add it to this new page:  /firefox/interest-dashboard
> 
> And will it work for dnt at the new location:  /firefox/dnt

Thanks to good coding practices, the pages above automatically inherited the new menu. :)

https://www-demo1.allizom.org/en-US/firefox/dnt/
https://www-demo1.allizom.org/en-US/firefox/interest-dashboard/

Any page that has the old menu will automatically get the new one. Yay!

Comment 14

[Jennifer Bertsch [:jbertsch]]

Rock on!  Just wait until we get the full Firefox family navigation on these pages!

Comment 15

[Jonathan Petto [:jpetto]]

Alex brought up a good point when reviewing this PR - with JavaScript disabled, the submenus are not visible. Since the categories (Firefox, Add-ons, Support) don't link anywhere, the navigation is essentially broken for those users.

We could go a few different ways here:

1) Hide the navigation completely from non-JS users.

2) Make submenus visible at all times for non-JS users. This would require some design work, as the page header would need to increase in height, and would need to be flexible enough to accommodate possible future additions to the submenus. This option wouldn't be in scope for next week's launch, and is likely too much effort for such a small subset of users.

3) Make the category names link somewhere. Add-ons and Support could link to general top-level pages, but I'm not sure where Firefox would link (at least not until the family pages lands). Maybe to /firefox/new/ until we have a better option?

My vote would be for #3, but we could certainly do #1. Either would be easily changed in the future.

Thoughts?

Comment 16

[Jennifer Bertsch [:jbertsch]]

It is as-if the lack of a Firefox family landing page is haunting my dreams :)

Yes, agreed, #3 is the best option (but it makes me die a little inside).  Let's move forward with #3.

Comment 17

[Jonathan Petto [:jpetto]]

As Craig pointed out in IRC, another option is to make the menu CSS only - which would be the best option. I will investigate to see if we can get this in for next week's launch.

Comment 18

[Jonathan Petto [:jpetto]]

After a quick check on the current JS controlling the menu (https://github.com/mozilla/bedrock/blob/master/media/js/base/nav-main-resp.js), I'm going to say converting to a CSS only solution is beyond the scope of this change.

I'm going to move forward with option #3 from comment 15 with the following links:

Firefox: https://www.mozilla.org/firefox/new/
Add-ons: https://addons.mozilla.org/
Support: https://support.mozilla.org/

For future reference, would we prefer to have the top-most category names *not* be links, or will we be happy with them as links when the Firefox family page lands? In other words, should we file a bug to remember to re-visit this navigation, or just update the Firefox link when the family page lands?

Comment 19

[Jennifer Bertsch [:jbertsch]]

Hey Jon-

Either:
1.  we will replace this nav with the firefox family navigation OR
2.  we would want Firefox in this new navigation configuration to link the family landing page

So yes we should revisit this navigation in the context of the Firefox family navigation when that is in progress :)

Thx,
Jen

Comment 20

[Jennifer Bertsch [:jbertsch]]

Hi-

Could we please add this nav to the new Android page too?  :)

Any time between now and Nov 10?  We could combine it with this one?  https://bugzilla.mozilla.org/show_bug.cgi?id=1088190

Thx,
Jen

Comment 21

[Jennifer Bertsch [:jbertsch]]

Oh, and can it appear on the new Tiles page  https://bugzilla.mozilla.org/show_bug.cgi?id=1059518

Comment 22

[Jonathan Petto [:jpetto]]

Yep, we can include this into the anniversary push.