Eyeo website's header misaligned at small view port sizes

[Shikitita]

Environment

Platform: iPhone 5s
Operating System: iOS 8.1.3
Browser: Safari or Adblock Browser

How to reproduce

1. Open a browser, either Safari or Adblock Browser
2. Access the website www.eyeo.com

Observed behaviour

As shown in the attached screenshot​ the logo at the top of the page is causing a concatenation with the text "About us", as well as the green button "Join us - we are hiring!" appears off screen and it cannot be read completely unless dragging the website to the left.

Please note that this occurs on a viewport size is 320 x 568 with whichever browser.

Expected behaviour

There should be a space between the logo and the text in order not to cause a concatenation, whereas the green button should be changed in size if possible and moved to the left in order for it to appear inside the screen and being able to read the text.

[saroyanm]

The solution for this issue should be to make the menu items flow vertically on smaller screens, update the position for the header to make it relative.
The question is how make sense to deal with the green "join us" Button, the easiest should be keep it in it's place and only make the other buttons flow vertically.
@Sven feel free to give suggestion in case you have special suggestion from design perspective of view, otherwise I'll go with the suggestion above and align with you whether it's looks okey for you during implementation.

[sven]

You could also add a burger menu like ​this page is doing it

[saroyanm]

Replying to sven:

You could also add a burger menu like ​this page is doing it

We also have burger menu in ​https://adblockplus.org/ I'm looking to ​theguardians current implementation, doesn't looks good, actually they had a website redesign lately, so could be a sideefect on their side.

I'll create hamburger menu, but I'm mostly thinking how it make sense to deal with the green button for Jobs page. Should it stay there ? Should I change it's style and put under the hamburger menu ?

[sven]

Should I change it's style and put under the hamburger menu ?

Sounds good to me.

[greiner]

We could make this work without a hamburger menu but in any case I'd suggest not to hide the "Join us - we are hiring!" button somewhere. Therefore I'd advise against that menu in favor of making the elements flow vertically (see screenshot​).

[juliandoucette]

I have added screenshots of my solution.

This shows:

• Generic desktop, tablet, large phone (phablet), and mobile views
  • NOTE: The actual braking points points are 768 (desktop -> tablet) and 660 (tablet -> phone)

This does not show:

• I removed the header animation on scroll in favor of a permanently fixed header
  • NOTE: I kept the same header padding difference between top and scrolled
• I exported the Eyeo logo at 2x the resolution for high DPI screens

Can I please get some feedback on this Christiane?

[christiane]

I would just make one change. see screenshot i've just attached.

just make the green button slightly smaller on mobile so that the space between Eyeo logo and button is the same as between Button and menu icon, please.

The rest looks good.

[juliandoucette]

Thanks Christiane :) . I have updated my patch in review to accommodate your suggestion.

[abpbot]

A commit referencing this issue has landed:
​Issue 2675 - Implemented responsive header for web.eyeo.com