Page MenuHomePhabricator

Variant C/D: homepage layout changes
Open, Needs TriagePublic

Description

For the variant tests in T246533: Variant tests: "initiation part 2" test (C vs. D), there are some layout changes to the homepage on desktop that variant C and D have in common.

  • Move the impact module to the (right-hand side) sidebar, at the top (above the mentorship module)
  • Widen the suggested edits module to take up the space where the impact module was

See this mockup.

This should only apply to variants C and D, and not variant A.

Layout specs

There are 2 breakpoints in variants C & D, which result in 3 possible layouts.

Standard
Narrow
Wide

Details on the following codepen: https://codepen.io/reets/pen/dyGaxQO?editors=1100

1. "Standard" layout

  • The .growthexperiments-homepage-container changes max and min widths:
    • { min-width: 600px; /*RH changed from 800px*/ }
    • { max-width: 1440px; /*RH changed from 1600px*/ }
  • The .growthexperiments-homepage-group-main has a width:64% (previously 75%)
  • The .growthexperiments-homepage-group-sidebar has a width:36% (previously 25%)
  • The Impact module is moved to the sidebar, on top of the help and mentor items
  • The .growthexperiments-homepage-module has reduced margins: 8px (previously 12px)

2. Narrow layout

  • This involves modifying the existing from @media (max-width: 1024px) to @media (max-width: 800px)
  • The Impact module takes up width:calc(50% - 8px); of the sidebar, the help and mentor modules are in a second column with the same width.

3. Wide layout

  • This involves adding a new breakpoint for @media (min-width:1280px)
  • Both the main and sidebar containers have width:50%
  • Within the sidebar, the Impact module takes up width:calc(50% - 8px); of the sidebar, the help and mentor modules are in a second column with the same width.

Suggested edits module changes are broken out into T258704

Event Timeline

Catrope created this task.Jul 15 2020, 12:28 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 15 2020, 12:28 AM

Open question: should this only apply to variant C/D (but not variant A), or should we make this change globally?

@MMiller_WMF says that the larger size of the suggested edits module is a major part of what's expected to attract more use, so it'd be better for analysis purposes to feature-flag it.

kostajh claimed this task.Jul 22 2020, 10:45 AM
kostajh updated the task description. (Show Details)

@RHo on my wide monitor, here is what the existing 75%/25% ratio between main and sidebar looks like with this layout change; it pushes the next module (mentorship) a bit farther down out of view.

If we change the ratio to 66% / 34% for main/sidebar it looks like this:

Do you have a preference between those?

Change 615487 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Output variant specific CSS classes for homepage modules

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

Change 615489 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Homepage: Provide shared layout for variant C and D users

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

Change 615490 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Homepage: Stretch suggested edits to 100% width for variants C/D

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

The suggested edits module changes (expanding to fill up the larger space) will be a separate task; this one is ready for code review.

Change 615487 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Output variant specific CSS classes for homepage modules

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

Change 615489 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: Provide shared layout for variant C and D users

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

Change 615490 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: Stretch suggested edits to 100% width for variants C/D

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

RHo added a comment.Jul 22 2020, 11:18 PM

@RHo on my wide monitor, here is what the existing 75%/25% ratio between main and sidebar looks like with this layout change; it pushes the next module (mentorship) a bit farther down out of view.

If we change the ratio to 66% / 34% for main/sidebar it looks like this:

Do you have a preference between those?

Actually, I would like to propose the following changes:

1. For @media (min-width: 800px) and (max-width:1280px) changing the width of .growthexperiments-homepage-group-main to width:64% (and therefore sidebar to 36%). This gives approximately the layout dimensions of the mock:

2. For @media (max-width: 800px), changing the layout so that both the "main" content and the sidebar below it are at width:100%`.
Additionally, could we make the Impact module take up 50% of one column, and the mentor and help flex to the other side, as illustrated in the mock below:

3. For @media (min-width: 1280px), could we make both the "main" content and the sidebar below it are at width:50%`, with again the Impact module taking up 50% as the left column of the sidebar container, as illustrated in the mock below:

Etonkovidova added a subscriber: Etonkovidova.

Moving to Need more work per @RHo comments.

The screenshots just to illustrate the present layout:
variants C/D

variant A

Change 615690 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Homepage: Adjust layout width

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

  1. For @media (max-width: 800px), changing the layout so that both the "main" content and the sidebar below it are at width:100%`.

Additionally, could we make the Impact module take up 50% of one column, and the mentor and help flex to the other side, as illustrated in the mock below:

We currently set the minimum width to 800px (done in 1ca13dff89812bd67f04c00cc1c6ffe190735d27), if we do this change, what would the new minimum width be? And would we fall back to single column mode at some point?

  1. For @media (min-width: 1280px), could we make both the "main" content and the sidebar below it are at width:50%`, with again the Impact module taking up 50% as the left column of the sidebar container, as illustrated in the mock below:

I think so. I took a look at the initiated impact module in that narrower form and it seems OK:

RHo updated the task description. (Show Details)Jul 23 2020, 12:59 PM
RHo added a comment.Jul 23 2020, 1:01 PM
  1. For @media (max-width: 800px), changing the layout so that both the "main" content and the sidebar below it are at width:100%`.

Additionally, could we make the Impact module take up 50% of one column, and the mentor and help flex to the other side, as illustrated in the mock below:

We currently set the minimum width to 800px (done in 1ca13dff89812bd67f04c00cc1c6ffe190735d27), if we do this change, what would the new minimum width be? And would we fall back to single column mode at some point?

Hi @kostajh - I'd propose this be reduced to 600px. Please see the updated task description where I've tried to take a bit more time to illustrate the layout changes with details in this codepen: https://codepen.io/reets/pen/dyGaxQO.

Change 615690 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: Adjust layout width

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

Change 615690 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: Adjust layout width

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

This patch only did the 64/36 change (#1 from T258005#6328261). #2 and #3 remain.

Change 616745 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] [WIP] Homepage: Variation C/D layout changes

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

Tgr added a comment.Aug 4 2020, 10:57 PM

The last patch makes the variant A sidebar narrower:

masterwith the patch

Not sure if that's intentional.

The last patch makes the variant A sidebar narrower:

masterwith the patch

Not sure if that's intentional.

That's not what I see.

With the last patch (which I made some changes to today), it now looks like this:

Variant A (wide)
Variant C/D @ 1279px (standard)
Variant C/D @ 1975px (wide)
Variant C/D @ 801px (standard)
Variant C/D @ 1281px (wide)
Variant C/D @ 799px (narrow)

You need to change the mentor message to something shorter to reproduce.

You need to change the mentor message to something shorter to reproduce.

Thanks, that exposed the issue. You were right about the cause too. Fixed in the latest patchset.

Change 616745 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: Variant C/D layout changes

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

To QA, you can opt-in to variation A/C/D with:

new mw.Api().saveOption(
	'growthexperiments-homepage-variant',
	'D' // or replace with 'A' or 'C'
);

in your browser console, press "enter", then reload the page.

For Design review - thanks @Catrope for the screenshots in this comment, I don't need to provide any additional screenshots here.

I checked on

  • different browsers- no issues were found.
  • wrapping for article titles/general text in the Impact module

and no issues were found.

Thanks all! I agree the Impact module text overflow looks not great at certain widths and layouts.
However, I'd consider the main layout task as done and have created a leftover task with a proposed change to resolve this at T262168. @MMiller_WMF perhaps this can be reviewed along with the other variant c/d leftovers tasks we've the past week to see if any should be given higher prio?