Page MenuHomePhabricator

Discussion: background color of .skin-vector-max-width
Open, Needs TriagePublicSpike

Description

Currently, the new Vector sets a different background color for .skin-vector-max-width, which can give users the impression that something is wrong about the site and browser when viewing in widescreen.

Also, currently, the sidebar also has a background, which feels awkward when the overall page content is too short, which makes the sidebar background ended abruptly in mid-air, removing the background should feel more consistent.

In Old Vector Skin

In Current Vector Skin

Removing background color of .skin-vector-max-width


By removing the background color and the border color, it felt more consistent.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 30 2020, 9:18 AM

Change 617401 had a related patch set uploaded (by VulpesVulpes825; owner: Junyin Chen):
[mediawiki/skins/Vector@master] Remove background color of .skin-vector-max-width

https://gerrit.wikimedia.org/r/617401

ovasileva edited subscribers, added: alexhollender; removed: ovasileva.Jul 30 2020, 3:44 PM
ovasileva added a subscriber: ovasileva.

@VulpesVulpes825 Could you clarify the statement “can give users the impression that something is wrong about the site and browser”? Why would that induce the impression of “something wrong”?

@VulpesVulpes825 Could you clarify the statement “can give users the impression that something is wrong about the site and browser”? Why would that induce the impression of “something wrong”?

Hi, can I answer? :) Due to the fact that no one uses such a solution, it seems that they forgot to stretch the page. Where did the examples of this solution come from?

VulpesVulpes825 added a comment.EditedJul 31 2020, 3:03 AM

@Volker_E In short, since the current color for background-color-secondary--modern is similar to the default background color of all major browsers when page not loaded. Having this color when viewing pages gives user the impression that either the browser failed to render the page to the full width of the window, or the website failed to stretch to the full width of the window.

After all, I am really confused of why there is a background-color-secondary--modern in the first place? To the users, the blank space in the overall page container and in the workspace container means the same thing — It is a blank space that should not have any content. Why using different color to distinguish, which adds visual distraction? It is hard to find other high volume sites using this design decision.

alexhollender added a comment.EditedAug 7 2020, 9:37 PM

@VulpesVulpes825 @Iniquity thank you both for your observations and thoughts on this topic. Super interesting point about the gray seeming like some kind of browser error, I had not considered that. This was my thought process (with the help of various team members):

  • following from the max-width on the content container we realized that the header should also have a max-width, otherwise you can end up with a header that's way in the corners which looked weird with the limited-width content column below (see screenshot below, and imagine it on an even wider screen):
  • once the header has a max-width things started to look a little weird beyond that max-width, in the sense that there was nothing framing the header/site. The white space on either side of the header felt somehow arbitrary:
  • We looked at other sites who have headers with max-widths and it seems that the common solution to alleviate the awkwardness described above is to add a border below, or background color to, the header (this is what Timeless does, as well as NY Times and many other sites):
    however this can give the impression that the header is fixed, or in some other way on a separate. We do plan to experiment with a sticky header later on in the project, so we may come back to this solution then.
  • We then had to come up with a different solution for framing the site. Realizing that the space to the right and left of the header is essentially "out of bounds" we decided that it might make sense to communicate this either via border lines or a gray background:

(all screenshots above were taken from this demo – https://di-collapsible-sidebar-4.web.app/Sam_Cooke?v1. Hover over the bottom right corner to bring up the menu that allows you to switch between the various versions)

Going forward:

  • we will be continuing to experiment with the look of the header as we work on other features (e.g. sticky header), at which point the gray may not be necessary
  • we will be continuing to modify the site header which may result in us removing the max-width on it, resulting in the gray no longer being necessary
  • we will be experimenting with adding page tools and/or table of contents on the side of the content which may result in a natural border, making the gray unnecessary

I am curious to hear your thoughts and hope you will both continue to give feedback as the project progresses.

Jdlrobson renamed this task from Remove background color of .skin-vector-max-width to Discussion: background color of .skin-vector-max-width.Aug 11 2020, 3:31 PM
Jdlrobson added a project: Spike.
Restricted Application changed the subtype of this task from "Task" to "Spike". · View Herald TranscriptAug 11 2020, 3:31 PM

Change 617401 abandoned by Jdlrobson:
[mediawiki/skins/Vector@master] Remove background color of .skin-vector-max-width

Reason:
I'm going to abandon this for now so we don't have the conversation in 2 places. Let's talk more on the phab ticket (see https://phabricator.wikimedia.org/T259240#6369878) and restore later if necessary.

https://gerrit.wikimedia.org/r/617401

@alexhollender Thank! I now understand your thoughts :) But in any case, it seems to me that this is a bad decision. You can indent with some graphic elements at the logo level.

VulpesVulpes825 added a comment.EditedAug 13 2020, 11:47 AM

@alexhollender, thank you for your detailed explanation. However, I still quite not understand the thought for going from step 3 to step 4. I believe for ordinary users, such design choice failed to communicate that " the space to the right and left of the header is essential 'out of bounds'". A simple question a user might ask is "why there also a blank white space between the outer grey one and the content itself". I personally prefer your design in picture 3 if that is possible.

For now, maybe considering adding a box-shadow: 0px 0px 10px rgba(0,0,0,.5) rather than setting background color for border-left and border-right? Such design choice should deliver the intentionality, since browser will not produce box-shadow in default view (when not loading content). It should also help reader to focus more on the content.


Add shrink down the space between mw-workspace and content container, which should follow the ideology of the Wikimedia design guide of providing paper-like feeling?

Isarra added a subscriber: Isarra.Aug 13 2020, 2:22 PM

@alexhollender Thank! I now understand your thoughts :) But in any case, it seems to me that this is a bad decision. You can indent with some graphic elements at the logo level.

Seconding this. Everyone I've talked to thought the seemingly random cutoff to grey was an implementation error.

VulpesVulpes825 provides some examples that would make the intentionality (and thus evident professionalism/polish of the overall design) much clearer; the second of which might even work without any actual border/shadow just because the whitespace margin on the content makes sense at that point.

(And if you really want to put things in those side margins, just expand them then. Or this may well be an even better argument for losing the different background/borders entirely, as this way you would maintain consistency between pages with and without...)

@Iniquity @VulpesVulpes825 @Isarra thanks again for more thoughts and ideas. Considering the upcoming changes I don't think it makes sense to try and figure out a final solution here at this point. I truly believe that once the interface has evolved a bit more things will fall into place and it will become more clear whether or not the gray "out of bounds" idea makes good sense or not. I very much like the way that the gray background is used in Timeless and am certainly keeping the other ideas above in mind. I just don't think it's worth iterating on this aspect of the interface currently.

Going forward:

  • we will be continuing to experiment with the look of the header as we work on other features (e.g. sticky header), at which point the gray may not be necessary
  • we will be continuing to modify the site header which may result in us removing the max-width on it, resulting in the gray no longer being necessary
  • we will be experimenting with adding page tools and/or table of contents on the side of the content which may result in a natural border, making the gray unnecessary