@Ladsgroup given the icon is different for different resolutions, I think this will require an architectural change. We either need to:

• Update the existing icons so the text portion and icon are separate and we can easily hide the text portion with CSS
• Use a picture tag to display different images based on resolution. e.g.

<picture>
  <source media="(max-width: 720px)" srcset="/w/resources/assets/compact.svg" />
  <img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy">
</picture>

I'm leaning towards the latter. Thoughts?

One note about the mocks:

• The large one uses the correct mediawiki logo but the compact one is actually using the logo for large sizes (has more petals), See https://www.mediawiki.org/wiki/Manual:MediaWiki_logo_guidelines#Icon_sizes the mediawiki logo for compact should be this instead: https://www.mediawiki.org/wiki/File:MediaWiki-2020-small-icon.svg

Regarding which way, in the long term, I would like to split the text out of the image so it can be translated but also then you need to make the font works and style it properly and all that jazz. So it's a much more long term. but how to display it differently for now, I'm honestly that good in front-end to say which direction is better, as long as it's lazy loaded, it shouldn't cause any performance degradation.

I'll aim to put a proof of concept together Friday.

In T373208#10486129, @Ladsgroup wrote:

One note about the mocks:

• The large one uses the correct mediawiki logo but the compact one is actually using the logo for large sizes (has more petals), See https://www.mediawiki.org/wiki/Manual:MediaWiki_logo_guidelines#Icon_sizes the mediawiki logo for compact should be this instead: https://www.mediawiki.org/wiki/File:MediaWiki-2020-small-icon.svg

Regarding which way, in the long term, I would like to split the text out of the image so it can be translated but also then you need to make the font works and style it properly and all that jazz. So it's a much more long term. but how to display it differently for now, I'm honestly that good in front-end to say which direction is better, as long as it's lazy loaded, it shouldn't cause any performance degradation.

thanks for the catch on petal sizes! I'll update mocks accordingly.

Small MW flower icon
WMF Logo

Worth noting: The design uses neutral-normal button variants from Codex to implement this. that's where the styling on the container around the buttons comes from.

In T373208#10486010, @Jdlrobson-WMF wrote:

@Ladsgroup given the icon is different for different resolutions, I think this will require an architectural change.

Can you clarify what’s the benefit for doing a more over-engineered solution? Is it just because the buttons would look too big on mobile or something? I feel like footer is one place where you can get away with it. Like, on a related topic, I never got why footer links differ between mobile website and desktop one. If a link is important enough for desktop version, it should be important enough on mobile as well.

Also, to bring up a more important point: currently those banner images are put last on desktop but second to last on mobile. I feel like the order on desktop is right and mobile should match it if this change is implemented.

In T373208#10487209, @stjn wrote:

Like, on a related topic, I never got why footer links differ between mobile website and desktop one. If a link is important enough for desktop version, it should be important enough on mobile as well.

This also prevents people from adding their own links to the footer, which some scripts do (including my own https://www.mediawiki.org/wiki/Translator_Buddy which I have to fix now since mw.util.addPortletLink does not add anything on Minerva). (Update: ah, no, that is instead because Minerva CSS hides most of the links via CSS and any user-generated links get hidden, too.)

Change #1113825 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] POC: Add icons to Minerva footer

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

Change #1113827 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] [POC]: Skins support responsive footer icons

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

iPhone with and without compact buttons:

(If not using compact icons we'd need to push these buttons onto new lines like so:

I can confirm in all variants the images would be lazy loaded.

There may be third parties who have more than two buttons here but I think that should be out of scope given MediaWiki:Minerva.css exists for exactly this purpose.

Sad to see that instead of something that would work for everyone at no cost, problematic Wikimedia-specific hacks are introduced for no explained reason. Also, mockup still places buttons in the incorrect place, they should not be before more specific site links.

In T373208#10489748, @stjn wrote:

Sad to see that instead of something that would work for everyone at no cost, problematic Wikimedia-specific hacks are introduced for no explained reason. Also, mockup still places buttons in the incorrect place, they should not be before more specific site links.

Thanks for your feedback! Let me look at your points above in a bit more detail and think about whether or not another revision is warranted here.

Thanks @stjn for sharing your concerns. I'm curious if you could share an instance of a site using Minerva where site specific links are currently being utilized and shown, so that @JScherer-WMF and other folks working on this project can find an optimal solution.

Taking a look at WikiIndex as an example (desktop vs mobile/Minerva) I'm noticing that site specific blue links aren't showing up on mobile (same with algorithmist.com + antwiki.org to do some quick browsing on https://www.mediawiki.org/wiki/Sites_using_MediaWiki/en)

This is to say: I'm curious if there are some other changes that need to be made to Minerva to ensure that site specific blue links are respected / shown. I'll admit my ignorance in understanding if the sites shared above overrode any defaults by utilizing custom CSS.

Also to clarify, would your ideal solution to this problem be to have the buttons placed below site specific links? I'll also defer to @Jdlrobson on what is and is not in scope for this particular project.

problematic Wikimedia-specific hacks are introduced for no explained reason.

To be clear, nothing proposed here is Wikimedia-specific. Are we talking about the same things? My interpretation of this task is making the mobile site more consistent with the desktop site (by including the icons which are currently not disabled as in https://c66647917e.catalyst.wmcloud.org/wiki/Main_Page). I think really the question is around visual design and where those buttons go.

As https://c66647917e.catalyst.wmcloud.org/wiki/Main_Page demonstrates the icons cannot be alongside the existing site logo using the existing buttons (on an iPhone we'd have a horizontal scrollbar). The buttons either need to be compacted (which is what T384619 proposes) or moved on to a new line. Currently we only support the latter.

The work proposed in T384619: Update skins to support different logos at different resolutions gives more power to site admins to control this in whichever way they prefer. Personally, I think placing these alongside the existing logo is much cleaner than creating another row below the existing links which I think is what @stjn is proposing:

Also, mockup still places buttons in the incorrect place, they should not be before more specific site links.

I don't think there is an "incorrect place". There are not any rules here around where they go, we just need to justify the best placement and I defer to the designers on what they think that is :-).

• On Monobook the icons bookcase the links before and after
  
• On Timeless they are off to the side before the links
  
• On Modern on the left and after
  
• On CologneBlue they don't appear at all

Yes, I am making a judgment based on what Vector currently does which is the latest skin out of ones developed by the WMF (i. e. by more qualified developers). Timeless might’ve put these in HTML because it uses float: right for positioning, not because there was much thought about HTML structure. Monobook is ancient.

In T373208#10493518, @Jdlrobson-WMF wrote:

As someone who often rapidly scrolls to the bottom to switch modes to check something, I'd be concerned that sandwiching links between images might make that link harder to click. I don't want to be accidentally visiting an external site.

I feel like this is solved by having clearer separation (margins etc.) between those image links and non-image links, not by putting less important links above more important ones in DOM tree. Given that one of the solutions is to develop a whole new config to make them smaller, it seems like it is recognised that they are less important to the footer. Despite that, from accessibility standpoint, they would be higher than links to terms of use and the like. Moreover, it is just simpler than developing what seems like a very specific solution that would only be used in Minerva. Those image links are already compact, whether they need compact versions is debatable.

Moreover, it is just simpler than developing what seems like a very specific solution that would only be used in Minerva.

Small misunderstanding here. T384619 would not be only used in Minerva. It would apply to all skins consistently at lower resolutions. Check out the patches carefully if you want to understand what is being proposed. The patch is also relatively simple. I suspect if we went ahead with that we'd be able to DRY up a lot of the code, as we already have images using srcset in places outside the footer.

Currently:

Slightly related, slightly unrelated. I'd really want to change the footer link to wikimedia.org before adding the footers to mobile but it requires some changes being applied. Including this really straightforward patch: https://gerrit.wikimedia.org/r/1113078 Can someone help review that please?

In T373208#10494345, @Ladsgroup wrote:

Slightly related, slightly unrelated. I'd really want to change the footer link to wikimedia.org before adding the footers to mobile but it requires some changes being applied. Including this really straightforward patch: https://gerrit.wikimedia.org/r/1113078 Can someone help review that please?

Deployed now. Feel free to switch the links.

Let me know if I can help to move this forward since wikimedia.org is in a good enough shape to replace the footer link and I want to bundle that change with this change.

I'm proposing this as it should be unblocked next sprint and I'd like to get some design review from Justin while he has capacity!

Change #1113825 abandoned by Jdlrobson:

[mediawiki/skins/MinervaNeue@master] Add footer icons to Minerva footer

Reason:

(Freeing this up for someone else to work on this week)

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

@LMora-WMF Justin asks if we can bump line height for footer from 1.6 to 2

Change #1123693 had a related patch set uploaded (by LorenMora; author: LorenMora):

[mediawiki/skins/MinervaNeue@master] Update Minerva to include footer banners

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

Test wiki created on Patch demo by Jon (WMF) using patch(es) linked to this task:
http://patchdemo.wmcloud.org/wikis/7505f6d814/w/

Change #1123693 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Update Minerva to include footer banners

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

Change #1124143 had a related patch set uploaded (by LorenMora; author: LorenMora):

[mediawiki/skins/MinervaNeue@master] Update Minerva to include footer banners

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

Change #1124143 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Update Minerva to include footer banners

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

@Edtadros FYI while reviewing I've identified two follow up tickets:

• T387795: Allow skins to configure which links appear in the footer (Wikivoyage duplicates last modified in Minerva skin)
• T387797: Stray dot in footer when page previews enabled

Let me know if you find any other issues!

After adding link to the footer, the views of main page of mediawiki.org has been quadrupled: https://pageviews.wmcloud.org/?project=mediawiki.org&platform=all-access&agent=user&redirects=0&range=latest-20&pages=MediaWiki

Status: ✅ PASS
Environment: enwiki
OS: macOS
Browser: Chrome
Device: MS

Test Case 1: Verify two icons display in the footer on mobile

1. Visit a Minerva-skinned page on a mobile device or in mobile view.
2. Scroll to the footer.
3. ✅AC1: Confirm that two icons are displayed in the footer.

Landscape:

Test Case 2: Verify footer icons change based on screen resolution

1. Visit a Minerva-skinned page.
2. Scroll to the footer.
3. Resize the browser window or use device emulation in developer tools to simulate different screen sizes.
4. ✅AC2: Confirm that the icons in the footer change based on the screen resolution.

See AC1

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

https://patchdemo.wmcloud.org//wikis/7505f6d814/w/