932684 - Career position pages waste vertical space

Status: VERIFIED FIXED

(Websites :: careers.mozilla.org, defect)

Description

[Nirbheek Chauhan]

Attachment: Career_position_page.png

1. Go to the newly redesigned careers website
2. Click on a position, say, https://careers.mozilla.org/en-US/position/oQ5FXfwh
3. Scroll, and observe that half the vertical space is used by two low-information-density banners making it very hard to read the position description itself.

Please see the attached screenshot.

Comment 1

[Ben (:bensternthal)]

This matches the design we got from the vendor. However that does not mean it may not be a problem.

Adding Gregory to the cc list.

Comment 2

[KLB]

I'd agree that there is a phenomenal waste of vertical space. The two sections that become fixed leave very limited space for reading actual content.  Either the very top "Mozilla" banner needs to be allowed to scroll off screen or it needs to be much smaller.  The same is true for the job title section.

Comment 3

[Craig Cook (:craigcook)]

This also makes keyboard scrolling problematic when using the space bar or page down key. When you jump down one screenful the stacked sticky headers cover a lot of the content and you have to scroll back up to read. 

Simply unsticking the job title header would help a lot, though it does mean the title and apply button scroll off screen. But that's already the behavior for tablet-sized viewports, so I think we should just do the same for larger viewports as well.

Comment 4

[Ben (:bensternthal)]

Gregory - can you provide guidance on this one.

The page was implemented as designed but I am in agreement with the above feedback. I would support removing the scroll behavior for this page.

Comment 5

[Ben (:bensternthal)]

Gregory - can you provide guidance on this one. A few more people have reported this.

Comment 7

[Gregory Jost]

Hey Ben,
Thanks for flagging. I guess we can unstick the job header then. My favorite solution though, would be to reduce the sticky area to just the job title and apply button. I don't think the back button or the team/location require to be made sticky in the first place.

Is this a possibility?

Comment 8

[Ben (:bensternthal)]

Hmm that is possible but we still have the problem of not enough space (we only gain a little) and we still have all the scrolling issues mentioned.

I will go ahead and remove the scroll here.

Comment 9

[David Ascher (:davida)]

BTW, this might be useful: https://github.com/WickyNilliams/headroom.js

Comment 10

[Gregory Jost]

Like this a lot. Thanks David!

Comment 11

[[github robot]]

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

https://github.com/mozilla/lumbergh/commit/5ec3cfe70e9c982f506bfc0d72ef893d2acb54ce
Fix Bug 932684: Removed JS that implements scrolling job detail

https://github.com/mozilla/lumbergh/commit/b01ac095d35d500f7b7c837f11807407f168b221
Merge pull request #97 from bensternthal/932684remove-scroll

Fix Bug 932684: Removed JS that implements scrolling job detail

Comment 12

[Ben (:bensternthal)]

Verified on prod.