Page MenuHomePhabricator

Timeless: Re-evaluate width cutoffs
Open, Needs TriagePublic

Description

Concerns have been raised about the content being too narrow in various modes. Width cutoffs currently are as follows:

@mobile-width: 850px;
@desktop-small-floor: 851px;
@desktop-small-width: 1099px;
@desktop-mid-floor: 1100px;
@desktop-mid-width: 1339px;
@desktop-large-floor: 1340px;

Essentially: mobile might be fine ending at narrower, as it also happens unnecessarily on some desktop devices, where the dropdown menus already work fine. The sidebars should probably only appear at wider, and the max-width for the max should also be wider. Maybe also get rid of some of the extraneous mid-widths whitespace.

Most existing wikis are very wide, and expect very wide, and the content is not harmed much at normal widths, so should actually use more of the wide when present. Determine reasonable widths based on actual content, user expectations, etc.

Event Timeline

Isarra created this task.May 21 2017, 8:42 AM

I could have sworn this was already filed somewhere, but now I can't find it.

Isarra added a comment.EditedAug 12 2017, 9:17 PM

From wikitech-l:

One thing I noticed is that the content width is smaller than with vector.
This means on the Wikibase UI you will not see the sitelinks on the right side anymore .

(Jonas Kress)

Evad37 added a subscriber: Evad37.May 25 2018, 7:52 AM

Note that the breakpoints for WikimediaUI Base are:

  • 320px (minimum size for a modern mobile device)
  • 720px (minimum size for a tablet)
  • 1000px (minimum size for desktop screens)
  • 1200px (large desktop screen)
  • 2000px (extrawide desktop)
JLJ001 added a subscriber: JLJ001.May 28 2018, 8:28 PM
Isarra added a comment.Jun 4 2018, 3:06 PM

Thinking about this is hard. Four modes:

  • mobile: 720 is probably better. Simple.
  • desktop-small: no sidebars; use for tablets and small actual desktops?
  • desktop-mid: left sidebar. Layout like monobook/vector; for everything but really wide things.
  • desktop-full: two sidebars. WIDE TIME.

How wide do we want the content to get (when not flat-out disabling the max-width, as some users do)? Current content maximums...

  • @content-width: 100em;

The hell even is that?

Isarra added a comment.Jun 4 2018, 3:09 PM

Apparently around 1000px on this. That's tiny. Okay.

Isarra added a comment.Jun 4 2018, 8:00 PM

Max content width of 125em seems more reasonable for allowing wide content without it getting too wide. Some basic eyeballing from there leads to the following:

mobile: <720
desktop-small: =<1200 (single-column - for tablets and smaller desktop displays, based on the wmui.base)
desktop-mid: =<1600 (sidebar for normal desktop)
desktop-full: >1600 (two sidebars for extra wide)

Which also seeeeeeems more reasonable? Not sure if the extra padding needs adjusting as well.

Change 437302 had a related patch set uploaded (by Isarra; owner: Isarra):
[mediawiki/skins/Timeless@master] Redo width cutoffs to keep content wider and better match values elsewhere in mw

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

Isarra added a comment.Jun 4 2018, 8:26 PM

Someone tell me if this seems sane.

1600px seems a bit much as breakpoint for the right sidebar. (Personally, I'm kind of fond of the idea to maybe move parts of article content there in the long term, for example infoboxes, references or images maybe.) Is it possible to try the proposed settings somehow?

Isarra added a comment.Jun 4 2018, 8:32 PM

If you've a local environment for testing, the linked patch has it. I haven't put it anywhere live yet, though. Should I?

1600px is wider than I normally have my window, though, indeed... on the other hand, the content does start to get a bit narrow with lower. I dunno what we should be prioritising here.

Isarra added a comment.Jun 4 2018, 8:34 PM

It'd probably help if the whole moving infoboxes etc into sidebar thing were more than just a general floating idea that might be doable eventually. Easier to evaluate all this. I'm just going off feeling, myself.

Evad37 added a comment.EditedJun 5 2018, 3:58 AM

The desktop mid/large sizing should be based off maintaining a minimum size for the #mw-content content area, right?

The margin+padding+(padding for mw-content-block) values for this are (according to my browser):

  • Left (with sidebar) 14em+2em+1em = 212.8px+30.4px+15.2px = 258.4px
  • Right (no sidebar) 0+2em+1em = 30.4px+15.2px = 45.6px
  • Right (with sidebar) 16em+2em+1em = 243.2px+30.4px+15.2px = 288.8px

for totals of 304px (left sidebar only) and 547.2px (left and right sidebars)

Assuming this is the same in other browsers, or similar enough, then for the the breakpoints mentioned thusfar:

WidthSidebarsResulting content width
Current breakpoints
1100pxleft only796px
1340pxleft & right792.8px
WikimediaUI base
1000pxleft only696px
1200pxleft & right658.2px
1200pxleft only796px
2000pxleft & right1452.8px
Isarra's eyeballing values
1200pxleft only796px
1600pxleft & right1052.8px

To maintain minimum content widths, the values needed would be

WidthSidebarsResulting content width
750px minimum
1054pxleft only750px
1297.2pxleft & right750px
800px minimum
1104pxleft only800px
1347.2pxleft & right800px
850px minimum
1154pxleft only850px
1397.2pxleft & right850px
900px minimum
1204pxleft only900px
1447.2pxleft & right900px
950px minimum
1254pxleft only950px
1497.2pxleft & right950px
1000px minimum
1304pxleft only1000px
1547.2pxleft & right1000px

(these should be rounded to sensible values for actual breakpoints)
I think 1200px is alright for the desktop-mid floor (or maybe one step down to 1150px), but would agree with MGChecker that 1600px is too big for the desktop-large floor -- it probably only needs to be 1400px or 1450px, or maybe 1500px. Personally, I rather like having the page tools at the top-right for easy access, even if it makes the content area a little bit smaller.

Isarra added a comment.Jun 5 2018, 5:52 AM

If the difference between one and two sidebars is ~250px, then making the wide cutoff 1450px would be most consistent with the lower ones as is. Could take that and the mid down by 50px without much actual difference, of course, and also maybe kill some of the silly extra padding...

For reference, the position of the "Page tools" is discussed in T160651: Better handling for tools block, and I agree with Evad37 that I prefer them at the top-right. So I think that before making a change that would result in the one-sidebar-mode instead of two-sidebar-mode for many users, you should make sure that even in the one-sidebar-mode the "Page tools" are shown in a prominent place, and not somewhere below the fold.

Isarra added a comment.Jun 5 2018, 8:40 AM

More sidebars is better than fewer, eh?

Change 437302 merged by jenkins-bot:
[mediawiki/skins/Timeless@master] Redo width cutoffs to keep content wider and better match values elsewhere in mw

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