Common-voice: Global header alignment, padding and sticky(?)

[mbransn]

@Gregoor looks like the header elements are aligned at the top rather than at their middle. For padding the top and bottom should increase to 1.25rem (20px). See screenshot from Zeplin below.

Additionally, how do you feel about making the navigation sticky on scroll? This would allow for access to translation, stats and navigation at all times. On scroll, in addition to sticking it would be good to add a simple shadow -- box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.03) did the trick for me when playing in dev tools but let me know your thoughts. Noticing on mobile that our header shadow is a bit darker and harsher, possible to lighten and match to the value above?

[mbransn]

@Gregoor additional thought re: sticky header on mobile/tablet. In the past I've had success optimizing screen space by having the header move out of view on scroll down and into view on scroll back up. This is also helpful on desktop though don't know how much we do/don't want to do that here. Could be helpful for mobile though. 👍

[jf99]

I'm voting against sticky headers. In fact, I hate sticky headers. Vertical space is rare on widescreen displays. Don't waste it. If you want any elements sticky, then put them on the left / right side of the actual content. Otherwise, pressing Pos1 (Home) or manually scrolling to the top isn't that cumbersome, as the website is not very long.

[Gregoor]

I like the idea of a sticky-on-scroll-up header on mobile. What do you thin kabout that @jf99? It sounds like your worry is more desktop-related?

[jf99]

I don't really have an opinion about mobile, as I rarely access the web from mobile devices. So yes, my worry is desktop-related.

[Gregoor]

I changed the header elements alignment, the header is already kind of sticky (not the literal css attribute, but the behavior is similar) and it has a box-shadow already. Should we change something about that?

I'm a bit wary to do the hiding when scrolling down thing, because I'd have to touch some of the containing elements, which broke the iOS app last time I did it. So is it alright if we tackle that sometime in the future?

[mbransn]

@jf99 @Gregoor great thread! My mind was simply exploring the idea for desktop, glad to hear some feedback. FWIW my main concern is when a page becomes longer; e.g. the Languages page when languages listings are expanded. Nowhere else on the site is impacted the same way. Happy to leave as is for now; will keep in mind as we continue iterating on content and approach.

I changed the header elements alignment, the header is already kind of sticky (not the literal css attribute, but the behavior is similar) and it has a box-shadow already. Should we change something about that?

@Gregoor are you speaking of mobile here? If so, the mobile shadow is what I was referring to originally as being too harsh/dark. Hoping we can lighten: box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.03) If desktop has a shadow we should remove it.

So is it alright if we tackle that sometime in the future?

We should look to refine the stickiness of the mobile header in the future, yes. Understood that it's a bit more work than it's worth at the moment. Giving more space back to the page on those very tiny mobile sizes would be an improvement for our users who do use mobile. :)

[Gregoor]

Thanks for the clarification, I've created another issue for hiding the header when scrolling (-> #973) so that I can check off the critical part of this issue 🙃