In T256190#9638733, @Ladsgroup wrote:

The context is that if you visit any page in desktop, at the bottom there are two buttons that show "this is part of wikimedia movement" (movement awareness) and "this is powered by mediawiki" (software trademark).

The issues:

• It doesn't show up in mobile
• it is too small
• It is PNG
  • meaning it's not translatable (e.g. it's English in French Wikipedia https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Accueil_principal)
  • Nor readable by screen readers.
• the design is subpar (the old apple key look?)
• the link to wikimedia project goes to the foundation. Brand team said it'd be better for that to link to https://wikimedia.org but that aforementioned page needs a complete redesign (and more prominent link to wmf)

There are also discussions to be had around the larger footer issues. e.g. parts of the footer that's missing in mobile and lack of any branding to "wikimedia" or "wmf" in mobile. The legal text being different in mobile and desktop and generally many more footer clean ups that can be done. But I'd assume that is outside of scope of this ticket

Thanks @Ladsgroup for articulating the issues. I am going to update the task description to capture the issues as you stated, as well as update the graphic to the new status quo (the new mediawiki logo button has been changed since the task was first filed). The mobile footer differences is captured separately on T310071: Update mobile footer to be more consistent with desktop footer and T240807: Change footer of mobile

Thanks!

I spoke with @Ladsgroup about this yesterday. I have updated the footer buttons to use the Codex button component with the SVG logo (no longer a PNG), and made them slightly bigger to align with the large button size in codex.

Current design:

New design:

This addresses the following issues:

• It doesn't show up in mobile
• it is too small
• It is PNG
  • meaning it's not translatable (e.g. it's English in French Wikipedia https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Accueil_principal)
• Nor readable by screen readers.
• the design is subpar (the old apple key look?)
• the link to wikimedia project goes to the foundation. Brand team said it'd be better for that to link to https://wikimedia.org but that aforementioned page needs a complete redesign (and more prominent link to wmf)

Re: screen readers, the element should have a description that screen readers should be able to use, and that could be translated.

Re: translation, this one is a bit trickier because it's a specific logo lockup controlled by the Foundation's brand (and associated team). They would have to cut new logos for all target languages to support them, which is possible, but would take some time.

I'll have a look at the mobile footer next.

That's quite great. I don't have any SVGs but if you give me I will try to make it go through.

The svgs for the logos are:
here

and here

The large button component is specified in Codex here

The variant in the codex demo has this as its code:
<cdx-button size="large">Click me</cdx-button>

The buttons should be 44px high and the logos should have 8px of space to the button edge on both sides.

Let me know if you need anything else on this!

Change #1027150 had a related patch set uploaded (by Jforrester; author: Jforrester):

[operations/mediawiki-config@master] [WIP] Change static 'A Wikimedia project' icon to new one

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

Change #1027178 had a related patch set uploaded (by Jforrester; author: Jforrester):

[mediawiki/core@master] [WIP] Change 'powered by MediaWiki' icon to new version, wrapped in Codex buttons

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

Here's a quick screenshot of my patch above, on my local development wiki set to be a fake Wikifunctions.org (which has the longest project copyright text); it uses CSS-only Codex fake-link large buttons and the SVG images:

Notes:

• Adding extra margin between the buttons will be a pain (adding new CSS on all pages), but we can do it if needed.
• The ordering is fixed; Wikimedia then MediaWiki, not the reverse; hope this is OK.
• We'll want to deploy the Wikimedia image switch-over to production ahead of the train it runs in, so that we don't have a double-button, but unfortunately that'll mean having a chrome-less "button" image instead for a few hours/days for some wikis.

In T256190#9771033, @Jdforrester-WMF wrote:

Here's a quick screenshot of my patch above, on my local development wiki set to be a fake Wikifunctions.org (which has the longest project copyright text); it uses CSS-only Codex fake-link large buttons and the SVG images:

Hey! Nice one, thanks! This looks good to me.

Notes:

• Adding extra margin between the buttons will be a pain (adding new CSS on all pages), but we can do it if needed.

Extra margin is unnecessary. The original design has them pretty tight together, and I think the mockup you sent looks ok, visually.

• The ordering is fixed; Wikimedia then MediaWiki, not the reverse; hope this is OK.

Fine with me!

• We'll want to deploy the Wikimedia image switch-over to production ahead of the train it runs in, so that we don't have a double-button, but unfortunately that'll mean having a chrome-less "button" image instead for a few hours/days for some wikis.

I'm unsure what the impact of this would be, exactly, but it seems like it wouldn't be too serious. Maybe @Jdlrobson can have a look in code review and @ovasileva can double check this last point is ok when it's approved.

I'll also pop it into the Web Backlog so that we can move it through release, etc.

Thanks again!

We'll want to deploy the Wikimedia image switch-over to production ahead of the train it runs in, so that we don't have a double-button, but unfortunately that'll mean having a chrome-less "button" image instead for a few hours/days for some wikis.

I think I found a workaround to avoid issues. It's in the mediawiki-config patch.

If we fix the sanization in the patch, this will be the result:

Change #1030908 had a related patch set uploaded (by Ladsgroup; author: Amir Sarabadani):

[mediawiki/core@master] footer: Stop interfering with full override of mediawiki footer icon

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

I have somewhat of a plan to deploy this without breaking the footer. If someone is willing to help shepherd this to production, please let me know. Maybe @Jdforrester-WMF ? <3

In T256190#9789693, @Ladsgroup wrote:

If we fix the sanization in the patch, this will be the result:

This looks good to me!

Given the small maximum size of the SVGs I'd recommend to

• to reduce the numeric precision to 2 decimals (hope we keep the original somewhere)
• lowercase, in these two SVGS only, the hex colors for slightly better gzipping

That would save 1kb un-gzipped and def some bytes after.

I've already manually optimized one of them accordingly:

Also a bit late to the visual change discussion: @JScherer-WMF Do you think a normal button style is needed? Did we consider a quiet button style too? The border around flattened button is very stark. :} Not a blocker, more a question for curiosity.

Change #1030908 merged by jenkins-bot:

[mediawiki/core@master] footer: Stop interfering with full override of mediawiki footer icon

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

@Volker_E I used your powered by icon, do you want to work on and build a small version of wikimedia project SVG too? If we can reduce size of both even further, that'd be nice.

@Jdlrobson should this be included in the deployment testing and if so, how would I test this?

Please skip @GMikesell-WMF

Change #1027150 merged by jenkins-bot:

[operations/mediawiki-config@master] Change static footer icons to the new one

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

Mentioned in SAL (#wikimedia-operations) [2024-06-17T18:19:27Z] <ladsgroup@deploy1002> Started scap: Backport for [[gerrit:1027150|Change static footer icons to the new one (T256190)]]

Mentioned in SAL (#wikimedia-operations) [2024-06-17T18:24:55Z] <ladsgroup@deploy1002> Started scap: Backport for [[gerrit:1027150|Change static footer icons to the new one (T256190)]], [[gerrit:1046750|Remove footer override]]

Mentioned in SAL (#wikimedia-operations) [2024-06-17T18:29:49Z] <ladsgroup@deploy1002> ladsgroup, jforrester: Backport for [[gerrit:1027150|Change static footer icons to the new one (T256190)]], [[gerrit:1046750|Remove footer override]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

@Jdlrobson Actually this now needs to be adopted with dark mode:

@JScherer-WMF it's deployed now \o/

The next step is replace core's svg file. Get it reviewed and deployed and then remove the override in mw-config.

In terms of performance, it is now 3.06 + 5.5 = 8.65KB in total vs. 3.36 + 3.20 = 6.56KB (I'm counting gzip compressed) which is a small jump but not too big given that it heavily gets cached client side and it's desktop only (that should change though) and it's lazy loaded from what I'm seeing.

Mentioned in SAL (#wikimedia-operations) [2024-06-17T18:42:07Z] <ladsgroup@deploy1002> Finished scap: Backport for [[gerrit:1027150|Change static footer icons to the new one (T256190)]], [[gerrit:1046750|Remove footer override]] (duration: 17m 12s)

Change #1027178 merged by jenkins-bot:

[mediawiki/core@master] Change 'powered by MediaWiki' icon to new version, wrapped in Codex buttons

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

Adding this to the list of logo issues in T367795

Change #1047034 had a related patch set uploaded (by Ladsgroup; author: Amir Sarabadani):

[operations/puppet@production] prometheus: Change footer icon ping url

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

In T256190#9900443, @Ladsgroup wrote:

@Jdlrobson Actually this now needs to be adopted with dark mode:

Can this not use a transparent background (at least for now?) ? I don't think we are going to have time to adapt the system to invert this logo and squeeze in a fix before release.

I don't have the design expertise to say it's okay or not. It's @JScherer-WMF's domain ^_^

In T256190#9876030, @Ladsgroup wrote:

@Volker_E I used your powered by icon, do you want to work on and build a small version of wikimedia project SVG too? If we can reduce size of both even further, that'd be nice.

Sorry, sure. Didn't see the message earlier. I'll look into this. We can also just add the background statically into the SVGs.

Change #1047521 had a related patch set uploaded (by VolkerE; author: VolkerE):

[operations/mediawiki-config@master] Optimize static footer 'a Wikimedia project' icon further

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

First patch is only about SVGO optimization similar to the one already provided above in order to have clean separation of steps.

That's amazing. I will deploy this ASAP. If you can take a look at the mw one too (again, we redid it many times), I'd appreciate it.

In T256190#9903959, @Jdlrobson wrote:

In T256190#9900443, @Ladsgroup wrote:

@Jdlrobson Actually this now needs to be adopted with dark mode:

Can this not use a transparent background (at least for now?) ? I don't think we are going to have time to adapt the system to invert this logo and squeeze in a fix before release.

This seems like an easy fix. Here are the logo SVGs with the grey background. I don't know why the original files weren't exported this way.

Change #1047597 had a related patch set uploaded (by Ladsgroup; author: Amir Sarabadani):

[mediawiki/core@master] footer: Reduce the left and right padding of footer icons to 8px

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

Change #1047034 merged by Ladsgroup:

[operations/puppet@production] prometheus: Change footer icon ping url

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

Change #1049187 had a related patch set uploaded (by Ladsgroup; author: Amir Sarabadani):

[mediawiki/skins/Vector@master] Footer: Add styles for buttons

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

Change #1047597 abandoned by Ladsgroup:

[mediawiki/core@master] footer: Reduce the left and right padding of footer icons to 8px

Reason:

In favor of Iae144d554b5023f

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

In T256190#9919789, @Jdlrobson wrote:

@Ladsgroup are you able to take care of this update (without transparent background)? We are starting to get bug reports and talk page messages!

I did something slightly different, instead of changing the svg, I'm setting the background color in the element wrapping it which would fix the issue. The patch for it is in vector: https://gerrit.wikimedia.org/r/1049187

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/103e531257/w

https://patchdemo.wmflabs.org/wikis/103e531257/wiki/Main_Page?vectornightmode=1

It also means it doesn't break custom third party footer icons (like patch demo)

Change #1049187 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Footer: Add styles for buttons

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

Change #1047521 merged by jenkins-bot:

[operations/mediawiki-config@master] Optimize static footer 'a Wikimedia project' icon further

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

Mentioned in SAL (#wikimedia-operations) [2024-07-03T11:35:35Z] <ladsgroup@deploy1002> Started scap sync-world: Backport for [[gerrit:1047521|Optimize static footer 'a Wikimedia project' icon further (T256190)]]

Mentioned in SAL (#wikimedia-operations) [2024-07-03T11:39:17Z] <ladsgroup@deploy1002> volker-e, ladsgroup: Backport for [[gerrit:1047521|Optimize static footer 'a Wikimedia project' icon further (T256190)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2024-07-03T11:45:03Z] <ladsgroup@deploy1002> Finished scap: Backport for [[gerrit:1047521|Optimize static footer 'a Wikimedia project' icon further (T256190)]] (duration: 09m 28s)

Hi! It looks much better than it was, thanks! But I hope you will consider removing these buttons in the future :) Because they were unreadable for people with poor eyesight and they remain so, even I can't read the word "project" with my 100%.

Test wiki on Patch demo by Jdlrobson using patch(es) linked to this task was deleted:

https://patchdemo-legacy.wmcloud.org/wikis/103e531257/w/