Opened 4 years ago

Closed 3 years ago

#2675 closed defect (fixed)

Eyeo website's header misaligned at small view port sizes

Reported by: Shikitita Assignee: juliandoucette
Priority: P2 Milestone:
Module: Websites Keywords:
Cc: saroyanm, sven, greiner, gnarfer Blocked By:
Blocking: Platform: Unknown
Ready: yes Confidential: no
Tester: Unknown Verified working: no
Review URL(s):

https://codereview.adblockplus.org/29335113/

Description (last modified by 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.

Attachments (12)

IMG_0003.PNG (391.3 KB) - added by Shikitita 4 years ago.
eyeo.png (93.2 KB) - added by greiner 4 years ago.
new-desktop-scrolled.png (791.8 KB) - added by juliandoucette 4 years ago.
new-desktop-top.png (975.4 KB) - added by juliandoucette 4 years ago.
new-phablet-scrolled.png (84.2 KB) - added by juliandoucette 4 years ago.
new-phablet-top.png (166.8 KB) - added by juliandoucette 4 years ago.
new-phone-expanded.png (18.8 KB) - added by juliandoucette 4 years ago.
new-phone-scrolled.png (57.5 KB) - added by juliandoucette 4 years ago.
new-phone-top.png (130.0 KB) - added by juliandoucette 4 years ago.
new-tablet-crolled.png (461.0 KB) - added by juliandoucette 4 years ago.
new-tablet-top.png (617.1 KB) - added by juliandoucette 4 years ago.
new-phone-top-01.jpg (105.9 KB) - added by christiane 4 years ago.

Download all attachments as: .zip

Change History (30)

Changed 4 years ago by Shikitita

comment:1 Changed 4 years ago by Shikitita

  • Description modified (diff)

comment:2 Changed 4 years ago by philll

  • Summary changed from Eyeo website's header should be adjusted to Eyeo website's header misaligned at small view port sizes

comment:3 Changed 4 years ago by saroyanm

  • Priority changed from Unknown to P2
  • Ready set

comment:4 Changed 4 years ago by saroyanm

  • Cc greiner added

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.

comment:5 follow-up: Changed 4 years ago by sven

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

comment:6 in reply to: ↑ 5 Changed 4 years ago by 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 ?

Last edited 4 years ago by saroyanm (previous) (diff)

comment:7 Changed 4 years ago by sven

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

Sounds good to me.

Changed 4 years ago by greiner

comment:8 Changed 4 years ago by 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).

comment:9 Changed 4 years ago by greiner

  • Sensitive set
  • Tester set to Unknown

comment:10 Changed 4 years ago by juliandoucette

  • Owner set to juliandoucette

comment:11 Changed 4 years ago by juliandoucette

  • Review URL(s) modified (diff)
  • Status changed from new to reviewing

comment:12 Changed 4 years ago by juliandoucette

  • Cc gnarfer added

comment:13 Changed 4 years ago by philll

  • Sensitive unset

Changed 4 years ago by juliandoucette

Changed 4 years ago by juliandoucette

Changed 4 years ago by juliandoucette

Changed 4 years ago by juliandoucette

Changed 4 years ago by juliandoucette

Changed 4 years ago by juliandoucette

Changed 4 years ago by juliandoucette

Changed 4 years ago by juliandoucette

Changed 4 years ago by juliandoucette

comment:14 Changed 4 years ago by 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?

Last edited 4 years ago by juliandoucette (previous) (diff)

Changed 4 years ago by christiane

comment:15 Changed 4 years ago by 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.

comment:16 Changed 4 years ago by juliandoucette

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

comment:17 Changed 3 years ago by abpbot

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

comment:18 Changed 3 years ago by juliandoucette

  • Resolution set to fixed
  • Status changed from reviewing to closed
Note: See TracTickets for help on using tickets.