Foundation.mozilla.org: Make header not look bad on mobile

[alanmoo]

Right now the site header on mobile view causes the viewport to be wider than the device, so horizontal scrolling happens. That's...not desirable.

[alanmoo]

Even on an iPhone 6, the header is too wide with the sub-page titles on it.

@xmatthewx @taisdesouzalessa @sabrinang even if I remove the margin next to the hamburger button, it doesn't all fit on a 320px wide device. Something needs to go on mobile. Is the url always visible on Android like it is on iOS? If so, I vote the logo.

[xmatthewx]

@alanmoo – there's a secondary prototype with comps for small screens (refer it to layout, not for content). https://projects.invisionapp.com/share/ZKAIKN1MN

Looks like everything is a bit smaller, and page title is dropped.

[taisdesouzalessa]

@alanmoo for mobile specs, please refer to the link @xmatthewx pointed out and also the Sketch files are in Google Drive/Design Assets/_PROJECTS/Mozilla Network Site/dev/all-mobile-screens.sketch. We made the logo and "join us" button smaller for mobile version and dropped the titles of the pages. Please let me know if there is anything else I can provide.

[gvn]

I feel like we've now resolved this enough for soft launch. Reducing to P2.

[taisdesouzalessa]

Checked this header on iPhone and Windows phone. The header looks good on both. Plus the name of the page shows up on landscape mode, when we have more space to do so. Very nice!

[alanmoo]

How does the sizing feel? Is there more work to be done as refinement or does this feel like an appropriate solution?

[xmatthewx]

@taisdesouzalessa – is there more work to be done on this? or can we close this?

[taisdesouzalessa]

@alanmoo @xmatthewx I think the size feels pretty good in mobile portrait. For the landscape mode, all the way to tablet media query I was wondering if we could keep the same margin left as we have in mobile portrait.

I don't think this is a priority, more of an enhancement. Alan, please let me know if this design decision brings unnecessary complexity to the system in terms of coding.

Here is the current state:

In the current state, the "#burger" element had 50px margin-right (starting at 576px width for what I can tell in the browser).

Could we leave this margin as 16px (mobile portrait's current margin) all the way until 768px?

Desired state:

[alanmoo]

I had to change 2 whole letters but I was able to pull it off. 😉

[taisdesouzalessa]

Haha, good! Thank you so much, Alan :)