Page MenuHomePhabricator

Standard and large font-sizes break the homepage layout
Closed, ResolvedPublic

Description

How might we tweak the homepage layout to work at the new font sizes?
How far off is the current homepage layout from ideal-state best practices for characters-per-line measurements?

Event Timeline

ovasileva triaged this task as Medium priority.Jan 11 2024, 8:30 AM

This was... not a concern at all. I picked the main page because it was convenient and not because it specifically displayed the issue. I have the same problem with how a page like https://en.wikipedia.org/wiki/World_of_Warcraft changes inside the content area when changing the font size.

That said, I do know of at least one editor who wants a full width main page by some sort of default (@stjn) and hasn't gotten around to making a task for that, so perhaps he might wish to use this task to explain what is wanted.

Yes, I've said many tims that main pages which typically have two-column layouts should not be subject to the same restrictions articles have for readability purposes. This makes it harder for local devs to maintain a consistent experience across skins.

JScherer-WMF raised the priority of this task from Medium to High.Jan 19 2024, 6:55 PM

Yes, I've said many tims that main pages which typically have two-column layouts should not be subject to the same restrictions articles have for readability purposes. This makes it harder for local devs to maintain a consistent experience across skins.

I agree. A quick, interim fix for this might be to default the homepage to the wide setting for page width. I'll review with the team and update.

@Jdlrobson Would this mean just updating the default config for wgVectorMaxWidthOptions? or should we actually handle this in LimitedWidthContentRequirement.php to hardcode main page as an inclusion?

@bwang for different font sizes we'd need to create something new I imagine e.g. wgVectorFontSizeOptions. We could reuse the logic in wgVectorMaxWidthOptions.

If we want to disable limited width on main page, we could just do a configuration change (optionally improving the logic there to save on the configuration requirements since many main pages are localized).

I just looked into the CPL with the full-width on for the homepage. Having the homepage be "wide" by default gets our CPL up to 33 with standard font size and 25 with large, which is satisfies the accessibility criteria, even if it still may not be optimal. So I think we're good to cut a ticket for making homepage wide-only.

The question now is: what do we do with the configuration interface?

I chatted with @ovasileva this morning about this. There are several table based pages which will only have wide versions (e.g. Revision history). Right now, the thinking is that we would remove the width setting on the "wide-only" pages, which is different from how we treat the width toggle on those pages in prod right now.

In prod currently the width toggle appears but doesn't do anything when you change it on those pages. I'm not sure which is a worse UX: a control that seemingly does nothing (seems broken), or having controls that show/hide depending on the context you open the configuration interface (inconsistent). A third option would be to disable the setting on pages where it has no effect, but then we'd need some disclaimer copy explaining why the setting is disabled, which I don't love either.

I might also be overthinking this.

I'm going to take this to design review tomorrow morning and get some more feedback.

Justin got some good feedback from designers today and will report back on a solution.

I'll propose the following solution for this ticket:

  • The home page will appear as a wide-only page like Revision History. It will always have full-width. This will improve CPL measurements for readability at all font sizes.
  • In the Appearance menu, the width radio buttons will remain active whether or not the user is on a wide-only page
  • Any changes to the width setting on a wide-only page will take effect as normal on other pages that are not wide-only. The setting remains configurable on these pages.
  • On wide-only pages a line of text will appear beneath the width control radio buttons that reads: "This page is always wide"
  • This text will only appear in the menu on wide-only pages.

I walk through the rationale for this in this video.

Screenshot 2024-02-01 at 2.38.22 PM.png (1×752 px, 83 KB)

Next steps for this ticket:

  • Internal stakeholder review from @ovasileva and @Jdlrobson
  • Translations for the new strings
  • Implement the wide-only logic
  • Implement the show/hide logic
  • Mock up in Minerva and Vector

@Jdlrobson, @JScherer-WMF - seems like we still need a ticket for implementing this. Is that right?

Correct. Sign off for this one is creating a ticket.

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

[mediawiki/skins/Vector@master] POC: Shows a warning where limited width does not apply

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

Since we need to estimate this in 15 minutes I've gone ahead and created the ticket: T357706