Designs for Add-on Developer Hub header

RESOLVED FIXED

Status

--
critical
RESOLVED FIXED
8 years ago
7 years ago

People

(Reporter: fligtar, Assigned: chowse)

Tracking

Details

(Reporter)

Description

8 years ago
The Developer Hub at AMO has a special navigation heading on all of its pages with up to 4 top-level menus and a search box.

http://addons.mozilla.org/developers

The new style makes this pretty ugly: http://people.mozilla.com/~mclaypotch/amo_refresh/v1/devhub.png

We need to figure out a way to keep those menus at the top and fit with the new style. The global search box can be removed or replaced with the documentation search.

Comment 1

8 years ago
Thanks Justin. Just so I totally understand, the goal is to redesign the developer toolbar rather than the main header here, right? Any design restrictions we should know about? Also, I know you need this soon but is there a specific deadline?

Assigning this to Lee...
Assignee: jslater → ltom
(Reporter)

Comment 2

8 years ago
The goal is to convert the current functionality of the Dev Hub header to the new style. And our development of the new Developer Hub is wrapping up and planned to launch before the end of the year, so would really like something this week.
Blocks: 616769

Comment 3

8 years ago
I'm having the devhub search overload the header search (aka the header search becomes the devhub search), so removing it would be a non-ideal solution.

Comment 4

8 years ago
Hi All,
Here are a couple of mock ups for you to look at. We've been using this tab-styled sub navigation on some of the new pages (this is the same stylings we're using on our Customize page http://nova.stage.mozilla.com/en-US/firefox/customize/ -scroll down to see them)

http://www.intothefuzz.com/leetom/Mozilla.com/JPG/addons_devhub_01a.jpg
http://www.intothefuzz.com/leetom/Mozilla.com/JPG/addons_devhub_01b.jpg

note: v1b I left the Search bar where it currently is, if we'll need more space for more tab options.

Let me know your thoughts, Thanks!
Lee
(Reporter)

Comment 5

8 years ago
Hi Lee,

Sorry if this wasn't clear, but the menus drop down and have a number of links under them. If you visit http://addons.mozilla.org/developers you can see that on hover.

Also, not every page of the hub fits under one of those items, so I'm not sure if a tab-based model is right.

Thanks
Blocks: 617155
bumping this to critical
Severity: normal → critical

Comment 7

8 years ago
Sorry to leave you guys hanging on this...
Please see the attached:

http://intothefuzz.com/leetom/Mozilla.com/JPG/addons_devhub_01a.jpg
http://intothefuzz.com/leetom/Mozilla.com/JPG/addons_devhub_01b.jpg

- I went with a lighter color than the universal header so as not to compete/repeat the style with another nav bar
- 01b is the Drop Down state of the menu
- Not sure if the page fonts will change. Looks like the system type of the current page is Helvetica or Arial. I mocked up Georgia in the nav bar since most of the new site pages are employing that font
- I'm unsure as to what color the page backgrounds will be. The other new pages I've redesigned have a white background with the gradated header and footers (w/ light stripes), but I see the AMO pages have a light blue background.

Comment 9

8 years ago
Thanks Lee. This works for me, but it's not my page. Flig?
(Reporter)

Comment 10

8 years ago
Thanks Lee. We had some issues with the header on AMO being too large and chowse came up with a header design for AMO that is more space efficient and doesn't require us yelling over anything.

He had some ideas for how we can work navigation like this Dev Hub nav bar into it more seamlessly, so I've asked him take a crack at that.
Assignee: ltom → chowse
(Assignee)

Comment 11

8 years ago
This change will actually be unnecessary now that we aren't showing the complete Mozilla.com header while in the DevHub (see bug 616769).

We will move the search bar (which actually behaves differently on DevHub) into the navbar and giving it the same gradient/bevel as the Mozilla.com header. This should be enough polish for v1.
(Assignee)

Updated

7 years ago
Status: NEW → RESOLVED
Last Resolved: 7 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.