1108811 - Implement header for new IA

Status: RESOLVED FIXED

(Webmaker Graveyard :: webmaker.org, defect)

Description

[Bobby Richter [:secretrobotron]]

Design:
- large: https://redpen.io/bn51489ecf8bc84dc8
- small: https://redpen.io/fd009f81d2ed6a0ea1, https://redpen.io/ad1b69cf337f628b62

Details:
- on /, /explore, /tools, /about, /events
- Explore -> webmaker.org/explore
- Tools -> webmaker.org/tools
- Teach -> (click/hover opens nav)
  - Skills -> TBD
  - Training -> TBD
  - Badges -> TBD

Comment 1

[Aki Rose Braun [:akirose]]

Attachment: https://github.com/mozilla/webmaker.org/pull/1025

Comment 3

[Aki Rose Braun [:akirose]]

Per bug 1108801, new nav will not have teach

Comment 4

[Bobby Richter [:secretrobotron]]

Sorry, Aki. Check out https://redpen.io/bn51489ecf8bc84dc8. There is, in fact, a Teach button. Matthew mocked up a few options here: https://redpen.io/za8c9476a25c829bf0

Comment 5

[Bobby Richter [:secretrobotron]]

(And the last option in the winner.)

Comment 6

[Aki Rose Braun [:akirose]]

It says "this design has been deleted"

Comment 7

[Bobby Richter [:secretrobotron]]

(In reply to Aki Rose Braun [:akirose] from comment #6)
> It says "this design has been deleted"

My favourite thing about redpen.

Here's what's current. Sorry for the confusion: https://redpen.io/bn51489ecf8bc84dc8

Comment 8

[Aki Rose Braun [:akirose]]

Last piece of confusion (and I'm really sorry about this) is the whole design of the nav changing to be larger text with no icons and centered items? or is that just for ia and this is what we want? http://snaps.akibraun.com/hxvdd.png

Comment 9

[Matthew Willse [:mattheww]]

As discussed on vidyo, we will strike a balance between the old and the new during this transition. It's definitely not ideal on mobile.  

To do:
 - Drop the icons and increase the font size to match the comp 
 - Remove search

Out of scope (note to Bobby):
 - Teach subnav is bad on mobile. Acceptable now b/c it is temporary. 
 - Mobile nav includes awkward login and language picker. Keep for now.

Comment 10

[Aki Rose Braun [:akirose]]

Attachment: Screen Shot 2014-12-11 at 13.04.57.png

Comment 11

[Aki Rose Braun [:akirose]]

Attachment: Screen Shot 2014-12-11 at 13.08.09.png

Comment 12

[Matthew Willse [:mattheww]]

Comment on attachment 8535194 [details]
Screen Shot 2014-12-11 at 13.08.09.png

The top nav bar includes too much space below the text. Should be visually even with the space above the text. 

Spacing between bottom nav items feels right for mobile but too wide for desktop. Visually measuring from baseline to baseline, I'd remove 25% or so. If this is on a server somewhere, I can wrangle the ems/pixels in padding/margin.

Note: Footer feels weird with blue CTA above, but I believe Ricardo has resolved that in the splash page work.

Comment 13

[Matthew Willse [:mattheww]]

Comment on attachment 8535190 [details]
Screen Shot 2014-12-11 at 13.04.57.png

Mobile footer looks good. Mobile primary nav needs TLC beyond the scope of this bug. A few adjustments and we will be good to go:

 - Let's make the primary nav match the size, weight, and spacing in the footer nav.
 - Let's add a couple pixels below Teach and then match the space above Explore to that.

Comment 14

[Aki Rose Braun [:akirose]]

Attachment: https://sleepy-ravine-9799.herokuapp.com/en-US

Updated and (somewhat) interactive at https://sleepy-ravine-9799.herokuapp.com/en-US

Comment 15

[Matthew Willse [:mattheww]]

Comment on attachment 8535347 [details]
https://sleepy-ravine-9799.herokuapp.com/en-US

Excellent update. Almost ready for Cassie's QA!

1) The Mentor page subnav needs a little TLC. 
 - Set that font to 125%. 
 - Make those items wider and center them. Not ideal, but ok for this transition. 

2) Neglected by my comp: In the footer, the CTA and footer nav occupy the same box of soup. To match Ricardo's splash page redesign and anchor the footer nav, let's add:

.navbar-footer { 
 background:#01527d; /* @lightnavy */
 padding-top:1.5em;
}

Comment 16

[Bobby Richter [:secretrobotron]]

One thing I'm seeing on the Teach page is all of the subnav buttons over on the left: https://www.dropbox.com/s/6su5g9oxjwsbqmb/Screenshot%202014-12-12%2010.55.33.png?dl=0

Feels like they should be spread out like the primary nav.

Comment 17

[Bobby Richter [:secretrobotron]]

Couple of changes:

1. Scrap "Get Involved"
2. Add "Hive" -> http://hivelearningnetworks.org
3. "Badges" -> http://blog.webmaker.org/badges

Comment 18

[Bobby Richter [:secretrobotron]]

Also, for now, let's keep teach.webmaker.org out of the equation, and just keep everything on webmaker.org like you have on https://sleepy-ravine-9799.herokuapp.com/en-US/mentor . We can't stand up teach.webmaker.org in parallel yet, and only 1/3 of those links are within webmaker.org (i.e. hive and badges are external).

Comment 19

[Aki Rose Braun [:akirose]]

Marking this as done as it's been rolled up to the meta-bug #1104272

Comment 20

[[github robot]]

Commits pushed to master at https://github.com/mozilla/webmaker.org

https://github.com/mozilla/webmaker.org/commit/89ae456464d0661f37c9167330c568351407ba23
Bug 1108811 - Implement header for new IA

https://github.com/mozilla/webmaker.org/commit/8d38b1d0b55e4faf7dbece07d8764b250ea155ae
Bug 1108811 - Implement header for new IA