684925 - Devmo skin: should have "universal tab" at top right

Status: VERIFIED FIXED

(developer.mozilla.org Graveyard :: Wiki pages, defect)

Description

[Eric Shepherd [:sheppy]]

I don't know how feasible this is in the current incarnation of the site's design, but it's been pointed out that devmo doesn't currently have the grey "universal tab" that links to mozilla.org at the top right corner, like the main Firefox page here does for example:

http://www.mozilla.org/en-US/firefox/fx/

Comment 1

[John Slater]

+1

This is important.

Comment 2

[Luke Crouch [:groovecoder]]

I like the tab. Craig, what do you think?

Comment 3

[Craig Cook (:craigcook)]

It'll be a fairly significant redesign of the global header. We already have essential content in that space, and it would also interfere with our primary navigation. We can certainly add the tab, but we'll need to rethink the entire header and rearrange elements around it.

Comment 4

[Jay Patel [:jay]]

This is on my radar.

Craig:  Let's shoot to get this in for 1.3 in October.

Comment 5

[Luke Crouch [:groovecoder]]

Bumping

Comment 6

[Les Orchard [:lorchard]]

Would this come in handy for this bug?

https://github.com/mozilla/django-moz-header

AMO and SUMO use this I think

Comment 7

[Craig Cook (:craigcook)]

Attachment: First round of MDN header variations

After bumping for several sprints, we're finally working to integrate the tab into the header as we implement BrowserID. We've done our best in the past to keep the MDN header as compact as possible to keep more content visible on screen, so adding another element that takes up space means rearranging things a bit. We can potentially expand the header but we'd still like to keep it fairly compact.

The attached screenshot shows a number of variations on how different elements could be arranged.

A and B are the same, but swap positions between the login and search.

C aligns login and search on the right and leaves the tab in its own space.

D and E move search to the left in place of the title (the title was mostly present in the others to help fill a void) but have the login either under the tab or inline with it.

F is a minor variation on E, just as an example of different things we can do with the same layout. This one darkens the search box to help the navigation stand out more.

This is really just a starting point and the main thing you should consider right now is the physical arrangement of elements. And these are by no means the only choices available; we can try even more arrangements if none of these quite works out. The only caveat is that the main navigation does need to rest on the bottom, as you can see, because of the way we indicate current sections and because of the way the dropdown menus are designed (see the live site for a working example). But it can go on the left or right or anywhere along that baseline. Moving the navigation to the top of the header would entail a more significant redesign of the entire branding area and the way dropdowns work, which we can do, but I'm hoping to avoid that, at least in this release.

Once we have a sense of direction on layout we can continue to iterate other aspects of the design (spacing, sizing, coloring, enlarging the entire header if need be, etc) to get it to its final state, I just wanted to open it up for some feedback on where you think things should go. So let me know what you think and any other variations you'd like to see.

Comment 8

[Eric Shepherd [:sheppy]]

My favorite design here is (b). I like it very much.

Comment 9

[John Slater]

This great to see - thanks very much for working this in.

My thoughts:
- I really like the left side on A, B & C.
- overall, my favorite is definitely C. I like it b/c I think it's best when there's nothing immediately under the Mozilla tab. Feels a little too crowded when the search box is squeezed in there.
- another possible variant would be to use C, but flip the placement of the join/login links and the search box.
- do you need "powered by Google" on there? To me, that seems like an inessential element that could be cut and reduce clutter.

To sum up, I like C minus the 'powered by' part. Thanks again!

Comment 10

[Les Orchard [:lorchard]]

(In reply to John Slater from comment #9)

> - do you need "powered by Google" on there? To me, that seems like an
> inessential element that could be cut and reduce clutter.

IIRC, the "powered by" is a requirement to for using the Google search, which we use because we don't have our own whole-site search engine yet.

Comment 11

[Jean-Yves Perrier [:teoli]]

My thoughts:
- The browserId/login elements should really be immediately to the left of the Mozilla.
- The search box should be to the right-side (not necessary to the far right)
- Nothing should be immediately below the Mozilla tab.

The C is the one which fit that. It is quite nice.

A few questions/remarks:
- What would be the result with a search box not white but light gray (not dark gray like in the last example)? I find the one quite aggressive in this dark theme, but the dark gray makes the bar not enough visible.
- Is this header the same size than now? If not, is it possible, as there is nothing under the Mozilla tab in case C., to shrink the interlining somewhat to get to the same size?

But else, very nice. I especially like the "Mozilla Developer Network" branding. Something that was missing before.

Comment 12

[Luke Crouch [:groovecoder]]

I think I like B or C best.

Comment 13

[Craig Cook (:craigcook)]

Alas, "Powered by Google" is required. We've minimized it about as much as we can, but we can't remove it entirely. It can appear to the left, right, above, or below the field, but it has to be there somewhere.

The search box in the top examples is a light gray, but could go a bit darker without going completely dark. It's a matter of finding a balance where it stands out enough that it's easy for users to find, but doesn't completely dominate the header. We can continue tweaking the color and size of the search box to get it just right.

Comment 14

[John Slater]

I figured it was something like that. I still like C then.

Comment 15

[Jay Patel [:jay]]

I also like C best out of the first few options.   BUT, I also like the approach in E and F... for a few reasons:

- less cluttered than the others
- makes the primary nav stand out more
- search more prominent
- "Mozilla Developer Network" isn't really needed as a full-fledged title

If you make the search bar a bit wider (to fit the width of the primary nav below) and then replace the search in the bar with "Search the Mozilla Developer Network", you get to keep the full name in that space and keep the header less cluttered.

Thoughts?

Comment 16

[Luke Crouch [:groovecoder]]

Sorry this is dragging on, but what about use the C layout but make the search box grey like in F ? Gives the tab its own space, but also subdues the search box a bit so the navigation "pops" more.

Comment 17

[John Slater]

(In reply to Luke Crouch [:groovecoder] from comment #16)
> Sorry this is dragging on, but what about use the C layout but make the
> search box grey like in F ? Gives the tab its own space, but also subdues
> the search box a bit so the navigation "pops" more.

My only concern is that if the search box & Mozilla tab are basically the same color, the impact of either could be lessened. I'd be fine with option C that uses a darker grey in the search box as long as those colors are balanced correctly.

Comment 18

[Craig Cook (:craigcook)]

New MDN header can be seen on https://developer-stage9.mozilla.org and will go live with the 1.9 release.

Comment 19

[raymond [:retornam] (inactive)]

verified fixed https://developer.mozilla.org/en/DOM

Comment 20

[Marat Tanalin]

If dropdown menu (Topics | Docs | ...) is opened on click (instead of on hovering), then second click probably should close it, not reopen menu that is already open.