Page MenuHomePhabricator

Drop gradients from Vector tabs
Open, Needs TriagePublic

Description

Our style guide has moved to flat design recently, and this is one of the few remaining linear gradients on the site (see T63099).

Before:

After:

...not a particularly drastic change.

Event Timeline

Esanders created this task.Jun 20 2017, 5:00 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 20 2017, 5:00 PM

IMHO the missing top border on the tabs works well with the gradient, but doesn't look good without it, but that's just my personal view, so feel free to ignore it if you disagree.

See also the tabs on the preferences page, which don't have gradients on inactive tabs, and also OOUI tab layouts:

stjn added a subscriber: stjn.Jun 22 2017, 5:45 PM

See also the tabs on the preferences page, which don't have gradients on inactive tabs, and also OOUI tab layouts:

If there is no Special:Preferences redesign task, there should be. Beta features look out of place at current page and OOUI already has all elements to redesign the page.

This is probably OK, though, the less (gradients) the better.

Volker_E added a subscriber: Volker_E.

@Esanders I'm not too happy with the 3D blue gradients either, not sure about the recognition of those elements as tabs without further visual cue though. Thoughts, @Pginer-WMF?

Change 383018 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/Vector@master] Remove fallback color from tabs

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

Screenshots from above patch. This is only caring about the fallback color when no gradients are supported.

BeforeAfter
without any gradient or image
without any gradient, but fallback image
without fallback color

Change 383018 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Remove fallback color from tabs

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

@Esanders I'm not too happy with the 3D blue gradients either, not sure about the recognition of those elements as tabs without further visual cue though. Thoughts, @Pginer-WMF?

Removing the blue gradients provides a cleaner look that is more aligned with our visual style principles.

I don't think there should be a problem recognising the elements as tabs. The only drawback I see is that the contrast between the selected element and the unselected ones is reduced with the change: it may be easier to distinguish between white and blue than distinguishing between white and light grey. This is an aspect usually emphasised in tab usability guidelines:

Highlight the currently selected tab. Make sure that the highlighting is prominent enough so people can tell which tab is selected.

Given that the text color is different for selected and unselected tabs in our case, that may help to increase the contrast, but we may want to pay attention to possible issues in that regard.

Jdlrobson added a subscriber: Jdlrobson.

Should this task be resolved?

stjn added a comment.Thu, Aug 1, 11:03 PM

The patch above affected only background-color shown if background-image doesn’t get loaded. Issue with gradient in background-image still stands.

Thanks for the update @stjn. I appreciate all your help across phabricator! :)

Isarra added a subscriber: Isarra.Fri, Aug 2, 12:35 AM

I dunno, the tabs really do need something to distinguish them from both the active tabs and the actual page background, or they all just kinda blend into whichever they do match...

I think maybe if you want to fit the style guide, just not using Vector might be a more reasonable approach. The skin as a whole really wasn't made for this kind of design to begin with.