By the way, this is a little strange: 'A Wikimedia project' badge is a link to https://wikimediafoundation.org/ not to https://wikimedia.org/.

@Volker_E I want to hear your opinion, if you can, please :)

@Iniquity I agree with you, but bumping up the font-size would be a too-narrow solution, as those buttons have all kinds of issues, including not following any Style Guide any more, nor any of our interface guidelines. But given that MediaWiki community is a different one than Wikimedia, it would need an agreement from a lot of stakeholders to move this forward and this task would need to have widened its scope or be part of a larger task addressing above.

@Volker_E Thanks for the comment :) In my opinion, at least they can be replaced with plain text.

IMHO, changing logo in the footer is needed, doing some refinements of the old buttons is also nice (like dropping the shadows) but anything drastic is going to cause a backlash if done without a proper community-based decision making. So I recommend keeping changes to a minimum (we also need to replace the logo in a million places, let's not bloat the work too much)

In T256190#6642058, @Ladsgroup wrote:

IMHO, changing logo in the footer is needed, doing some refinements of the old buttons is also nice (like dropping the shadows) but anything drastic is going to cause a backlash if done without a proper community-based decision making. So I recommend keeping changes to a minimum (we also need to replace the logo in a million places, let's not bloat the work too much)

In any case, these buttons need to be fixed, this is the only visible interface element that violates absolutely all recommendations for accessibility :)

This is the current version with a new logo :)
https://commons.wikimedia.org/wiki/File:MediaWiki-2020-button.svg

The proposed one that got votes is this: https://commons.wikimedia.org/wiki/File:Powered_by_MediaWiki_proposal_(gradient_translucent,_capitalised).svg

We can reuse this for "Wikimedia" button as well.

In T256190#6642454, @Ladsgroup wrote:

The proposed one that got votes is this: https://commons.wikimedia.org/wiki/File:Powered_by_MediaWiki_proposal_(gradient_translucent,_capitalised).svg

We can reuse this for "Wikimedia" button as well.

We re-uploaded all logos in their pure form to keep the competition versions competitive.
https://commons.wikimedia.org/wiki/Category:MediaWiki_logo_(2020)

aha, sorry.

I think since the deployment of the logo is very close, then we can start discussing this issue. Tell me where to start a discussion? :)

I think this can go independent of the mediawiki logo change (possibly later). I think reading web (@ovasileva and @alexhollender ) can take ownership of this once they are a little bit less busy?

It would be nice if there was a template or guidelines on what the new "Powered by" images should use. For MediaWiki-Debian we have https://commons.wikimedia.org/wiki/File:Powered_by_Debian.svg and I want to make sure it stays in sync with whatever changes are implemented in core.

Related:

• T250009: Consider adding a "powered by wikibase" icon to the foot of installed wikibases
• T42465: "Powered by Mediawiki" and "a Wikimedia project" buttons and targets should be localizable

This is not at all blocked by T42465; if anything, the reverse.

Maybe we return to this issue in connection with the launch of a new design? :)

I'm sorta on it. Started the discussions about this a week ago on resourcing and timeline. No promises. It doesn't have to be done at the same time of DIP specially since it means more work for reading web team.

Thank you for answer :) I will wait!

In T256190#7926457, @Ladsgroup wrote:

I'm sorta on it. Started the discussions about this a week ago on resourcing and timeline. No promises. It doesn't have to be done at the same time of DIP specially since it means more work for reading web team.

Hello! Is there any summary of this discussion? :)

I revived the discussions, will keep you posted.

In T256190#9494819, @Ladsgroup wrote:

I revived the discussions, will keep you posted.

Thank you! :)

@Iniquity @Jdlrobson do you mind providing links to any context on this issue? I need to wrap my head around the discussion to date before we can make a decision.

@DTorsani-WMF This might be something you and I could work on. Stay tuned.

@RHo do you have any background on this?

Moving back to incoming until I have enough context to move forward on this one.

Let me know if I can help on providing more context on this.

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

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.