Website width

[bacharakis]

The website has a different wide width on desktop compared to the wireframe (when resolution is higher than 1024x940)

As a result there is a totally different user experience rather than the one Megan designed.

[bacharakis]

[comzeradd]

The bigger breakpoint we have is at >1200px and the container for these resolutions 1140px. See the red dot on the screenshot attached.

We could add a bigger breakpoint, but that would significantly distort the current UI. For instance on the homepage we may end up with more than one Featured items.

[comzeradd]

@bacharakis layout width on that specific page (About) has beed fixed since as part of 6797c4a03171d4f9eb075fb951a7a241b00dcf1f.

Is there any other pending issue here?

[akatsoulas]

cc @m-branson

[mbransn]

Thanks @akatsoulas.

@comzeradd my preference for largest breakpoint is 1440px...I design my comps (compositions) to be this width to accommodate 15" displays and above at retina resolution. Can we please add this additional 'wide desktop' breakpoint?

I understand that there are certain responsive issues to take into account when expanding the width this much. Though, as the UI is designed to a 1440px width, this shouldn't cause too many. :) The prototype on desktop in a viewport 1440px or above will render the UI as it should be built; e.g. the homepage should not display multiple featured items.

@comzeradd if you want to have a more detailed review of this for implementation, let's schedule a call. :)

[hmitsch]

@bacharakis can you look at the sceenshot you posted in https://app.zenhub.com/workspace/o/mozilla/coss/issues/460#issuecomment-330727705 and see if the behavior changed according to your expectations?

[bacharakis]

Hi Henrik! The right question is: @m-branson , have your suggestions applied on the website?

For me not because the width is still in full screen mode when the resolution is high. The idea is that to have a fixed width after a specific resolution so the elements (logo, menu item, containers) not to expand right and left and have the actual content in the middle (as for example in the attached image). [Uploading... Screenshot from 2017-10-18 17-32-51.png ]

[mbransn]

Hi all,

TBH I didn't know this was ready for review as it's definitely not done on stage, everytime I checked this issue it was just as I left it. Have been waiting patiently for it to be updated. @comzeradd we must get better about communicating that changes are ready for design review, please leave a comment and direct my attention to a URL for review.

Please see these screenshots...

Current staging:

How it was designed at 1440px wide:

There are alignment and grid width issues that I've attempted to highlight simply with the redline(s) above. Additionally, padding needs attention above and below most content blocks (things feel tense and tight).

@comzeradd what do you need from me to better assist in getting these values dialed in?

[comzeradd]

This went through the zenhub pipeline like everything else. It should probably be better to stay on the QA column till it was signed-off by @m-branson. We can follow that for any changes that affect the overall website UI.

I'll have a look asap to the grid issues.

@bacharakis your screenshot never got uploaded. Did you want to showcase some other thing?

[comzeradd]

@m-branson I'm working on PR to fxix width issues. There have a slight difference on container width. Your design is at 1170px and on the website is 1140px right now. The PR fixes that. I also adjusted cards width accordingly.

The big difference you see on the two screenshots is due to the fact that the staging screenshot is on higher resolution so it falls under a bigger breakpoint (for >1500px resolutions) where the container width is at 1440px. We recently introduced that, as discussed a few comments above. So the question is how do we want to display the cards in these resolutions. Is it ok for the cards to be placed in the center (same as they look on the screenshot) or do we expand their width too?

[mbransn]

@comzeradd we had a miscommunication in my initial comment, apologies. For ≥1440px resolutions, the container width should be at 1170px. To answer your question about cards, we want to display them as seen in the prototype. They do not need to grow/expand past 1170px. This will ensure best usability and responsive consistency for content.

cc @bacharakis

[comzeradd]

Thanks @m-branson for clarifying this. I misinterpreted your initial comment :) The PR is now merged and you can see it live on stage.

[comzeradd]

@m-branson did you have the chance to check this? Is it ok to deploy this to production?

[mbransn]

@comzeradd looks good. :)