Closed Bug 599024 Opened 14 years ago Closed 14 years ago

create new mozilla.com header/footer

Categories

(www.mozilla.org :: General, defect)

Product:
www.mozilla.org
Component:
General
Type:
defect
Priority:
Not set
Severity:
blocker

Tracking

(Not tracked)

Status:
VERIFIED FIXED

People

(Reporter: jslater, Assigned: sgarrity)

References

Details

(Whiteboard: [redesign])

Attachments

(3 files)

header nav drop down interaction mockup
52.26 KB, image/png
Details
header nav double drop down interaction mockup
30.98 KB, image/png
Details
Screenshot of header menu in IE
8.35 KB, image/png
Details 
As part of the site redesign process, we'll be changing the header and footer. Mike's current schedule has the WebDev portion of this beginning on 9/23 and ending on 10/7.

The latest design files (which don't include pull-down states) are available here:
mozilla.seanmartell.com/engagement/mocodotcom/mocodotcom-PSDs.zip

I think we have enough to get started, but we also need to resolve a few things before we can complete this:
- provide design direction for pull-down menu in header (Sean)
- finalize interaction model for pull-down menu (Tara, John)
- solidify header/footer content...which links go where, etc  (Tara, John)

Assigning this to silverorange. Guys, let us know what you think, what else you need and if you have any questions. Thanks!
(In reply to comment #0) 
> - finalize interaction model for pull-down menu (Tara, John)

Tara, can you share your thoughts on this subject here? Maybe just repost the email you wrote last night if that's easier.
Sure.  Here is my thinking:

Right now if you click on the header bar elements, each one has a drop down... if you click on the header link you'll be taken to a default landing page.  But what if we force users to select something from the drop down?  At least in the case of Support and AMO.  So that when I click, I get a drop down with my list of options to choose from and avoid any confusion.  I have a quick and dirty mockup of what I mean attached.

Another option would be to adjust the default homepage for those sites (SUMO and AMO) to include tabs or nav links for the various categories -- so, AMO would show tabs or links for Desktop Firefox and Mobile, for example, and SUMO's homepage would show tabs or links for Firefox, mobile, and add-ons.  But that's not a near-term project.

Alternatively... we can redirect based on what page they were previously on... so, if I were on the mobile pages and clicked "add-ons", perhaps we'd sniff that and take them directly to the mobile add-ons page.  If I'm on the Add-on pages and click "support", I'd be redirected to Add-ons support.

This raises another issue.  We currently have no support related landing page or "help" page for Add-ons.  But SUMO does have a variety of articles related to add-ons:  https://support.mozilla.com/en-US/search?q=add-on.  So, we're in discussions with the relevant teams to see how we can address this.  But we should have some sort of a landing page to send people to, and therefore we should include "add-ons" in the drop down menu.
Ok, here's my current best guess at the content for the header drop-downs and the fat footer. It's probably 90% solid, although some bits will likely shift around as the site takes shape.

Steven, since we haven't fully resolved the interaction here (as described in comment #2, and also discussed in our call today), I made the first link in each menu the same as if you clicked on the main menu item itself. We can revise that if needed, of course.

Features
* Features
* Security
* Performance
* Customization
* Download Stats
* Tour

Mobile [follows same structure as https://www-trunk.stage.mozilla.com/en-US/mobile/]
* Mobile Overview
* Download
* Features
* Customize
* Sync
* Develop
* Get Involved
* FAQ
* Blog

Add-ons
* Firefox Add-ons
* Featured Add-ons
* Extensions
* Themes
* Personas
* Search Tools
* Language Support
* Collections
* Mobile Add-ons
* Developer Hub

Support:
* Firefox Help
* Mobile Help
* Thunderbird Help

About:
* About Firefox
* Participate
* Communications
* Careers
* Partnerships
* Legal
* Contact Us
* Blog

Also, I have one late-breaking copy change to the "Let's be friends" section of the footer...the email signup text should now read "Get Monthly News".

As always, if you have any questions please ask.
One slight revision already:

Features
* Features
* Security
* Performance
* Customization
* Download Stats
* Videos
* Tour
A few questions about the header links:

Where does "Add-ons -> Extensions" go?

Is "About Firefox" just going to be /about/ ?

Is Communications pointing to the press section?
(In reply to comment #7)
> Where does "Add-ons -> Extensions" go?
I need to check with Fligtar on this one.
 
> Is "About Firefox" just going to be /about/?
Yes, although that whole system is still up for discussion. Here's what I wrote about it in comment #5: "Steven, since we haven't fully resolved the interaction here (as described in comment #2, and also discussed in our call today), I made the first link in each menu the same as if you clicked on the main menu item itself. We can revise that if needed, of course."
 
> Is Communications pointing to the press section?
That can be the link for now. We haven't done the pages yet, but ultimately that link is going to point to an expanded section that will include press info and brand stuff like the logo guide. The wireframe Tara sent around via earlier has more on this.
> (In reply to comment #7)
> > Where does "Add-ons -> Extensions" go?

https://addons.mozilla.org/firefox/extensions
Depends on: 603800
Will this navigation be used site wide? (not only /firefox/ ?)
(In reply to comment #10)
> Will this navigation be used site wide? (not only /firefox/ ?)

Yes. This navigation will also be used on AMO and SUMO as well as mozilla.com.
(In reply to comment #11)
> Yes. This navigation will also be used on AMO and SUMO as well as mozilla.com.

Understood.
And oh, the header navigation is now width: 960px. Sweet!
Is the header basically done? I'd love to get it on SUMO this week, and maybe even create a common repository for other Mozilla sites to use it.
(In reply to comment #14)
> Is the header basically done? I'd love to get it on SUMO this week, and maybe
> even create a common repository for other Mozilla sites to use it.

Still to do:

 1. Add a "selected" state to the header links.
 2. Determine hover vs. click behaviour.
 3. Determine IE support level.

Regarding #2 - there was some talk of not linking the top level elements which would allow us to switch to a click-to-open menu, which would work on touch devices.

Regarding #3, we've got an IE filter implementing the background gradient, but don't have rounded-corners. I'm wondering if this is "enough" for IE. John, what do you think?
Steven/John, do we have an ETA on the final header? We're deep into new theme work and partly blocked on this.
(In reply to comment #16)
> Steven/John, do we have an ETA on the final header? We're deep into new theme
> work and partly blocked on this.

Steven, per our recent conversations when do you think this will be finalized?
Depends on: 606400
The header navigation is ready as far as I'm concerned. As of r76108 it highlights the current section (pending adding breadcrumb nav data to the respective pages).

As long as Mozilla is comfortable with the appearance in IE, we're set. I've attached a screenshot of the menu in IE. The drop shadow and rounded corners are missing. Is this "good enough", or do we need to add images to bring these details for IE?
I'm fine with the way it looks in IE. 

Overall, thumbs up from me on the header!
One other thought on the header, actually...it seems like the menu items are positioned slightly to the left within each tab. Could you center them? It's a small thing, but would be a nice extra detail.
(In reply to comment #20)
> One other thought on the header, actually...it seems like the menu items are
> positioned slightly to the left within each tab. Could you center them? It's a
> small thing, but would be a nice extra detail.

John, this is easy to do, yes. It's how the current production site works. The left-alignment comes from the Photoshop designs. Should I just go ahead and change it?
Yes please.
(In reply to comment #22)
> Yes please.

Done.
Looks good, thanks.
Is the final HTML/JS on http://nova.stage.mozilla.com/en-US/? Are we good to start porting it to SUMO?
2 comments on links in the Add-ons section:
* Mobile Add-ons should go to https://addons.mozilla.org/mobile
* Personas should go to http://www.getpersonas.com until we finish our migration to AMO later next year
(In reply to comment #26)
> 2 comments on links in the Add-ons section:
These are updated in r76444.

(In reply to comment #25)
> Is the final HTML/JS on http://nova.stage.mozilla.com/en-US/? Are we good to
> start porting it to SUMO?
We have some final JS updates to make for IE6 - should happen today/tomorrow.
I started the porting over to SUMO. James points out there's no webkit CSS in some cases [1] -- we probably want to add that, right?

[1] http://github.com/pcraciunoiu/kitsune/commit/cba3258cd20bbe41b4ca6dc83366f99d56433213#L0R292
As of SUMO 2.3 (due out in late November), the link to Support -> Mobile Support should change to http://support.mozilla.com/mobile. Please update this on the global nav as well. Thanks!
(In reply to comment #29)
> As of SUMO 2.3 (due out in late November), the link to Support -> Mobile
> Support should change to http://support.mozilla.com/mobile. Please update this
> on the global nav as well. Thanks!

Updated in r77408.
Severity: normal → blocker
We're done with this - Bug 606400 can be tracked separately.
Status: NEW → RESOLVED
Closed: 14 years ago
Resolution: --- → FIXED
No longer depends on: 606400
Status: RESOLVED → VERIFIED
Component: www.mozilla.org/firefox → www.mozilla.org
Component: www.mozilla.org → General
Product: Websites → www.mozilla.org
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: