Page MenuHomePhabricator

Structured tasks - adjustments for robot icon
Closed, ResolvedPublic

Assigned To
Authored By
Etonkovidova
Nov 15 2021, 8:12 PM
Referenced Files
F34765817: Screenshot_20211124-140819_Chrome.jpg
Nov 24 2021, 10:17 PM
F34765815: Screenshot_20211124-140215_Chrome.jpg
Nov 24 2021, 10:17 PM
F34752147: image.png
Nov 17 2021, 5:17 PM
F34751885: Screen Shot 2021-11-17 at 12.53.35 PM.png
Nov 17 2021, 11:56 AM
F34751888: image.png
Nov 17 2021, 11:56 AM
F34751824: Mobile.png
Nov 17 2021, 11:37 AM
F34751826: Desktop.png
Nov 17 2021, 11:37 AM
F34749099: Screen Shot 2021-11-15 at 12.10.57 PM.png
Nov 15 2021, 8:12 PM

Description

per @RHo feedback in "Add an image" testing

Screen Shot 2021-11-15 at 12.10.57 PM.png (1×1 px, 168 KB)

  1. the icon is larger than expected
  2. the icon is not vertically centred with label
  3. the label is ~4px closer to the “Add images” checkbox than expected
  4. the label text is larger than expected

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Etonkovidova renamed this task from Structured task- adjustments for robot icon to Structured task - adjustments for robot icon .Nov 15 2021, 8:13 PM
Etonkovidova renamed this task from Structured task - adjustments for robot icon to Structured tasks - adjustments for robot icon .Nov 15 2021, 8:19 PM

Change 739281 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Structured tasks: adjustments for robot icon

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

@RHo There are some differences on the font-size and line-height scales and the vertical margin between figma desktop spec and mobile spec.

Mobile, MinervaDesktop, Vector
Mobile.png (546×1 px, 76 KB)
Desktop.png (468×1 px, 75 KB)

Could we standardize these so we can target both using relative units. Or this is intended to have a different font scaling in mobile and desktop?

@RHo There are some differences on the font-size and line-height scales and the vertical margin between figma desktop spec and mobile spec.

Mobile, MinervaDesktop, Vector
Mobile.png (546×1 px, 76 KB)
Desktop.png (468×1 px, 75 KB)

Could we standardize these so we can target both using relative units. Or this is intended to have a different font scaling in mobile and desktop?

Hi @Sgs - unfortunately there is a different base font size for Desktop and Mobile web. I try to use standard 4px grid regardless of mobile and desktop so actually it's intended that mobile and desktop have the same 4px space between the checkbox form element and the machine suggestions label (you have to measure between the entire checkbox component and the machine suggestions below):

Mobile
Screen Shot 2021-11-17 at 12.53.35 PM.png (422×1 px, 72 KB)
Desktop
image.png (514×1 px, 96 KB)

Hi @Sgs - unfortunately there is a different base font size for Desktop and Mobile web. I try to use standard 4px grid regardless of mobile and desktop so actually it's intended that mobile and desktop have the same 4px space between the checkbox form element and the machine suggestions label (you have to measure between the entire checkbox component and the machine suggestions below):

Mobile
Screen Shot 2021-11-17 at 12.53.35 PM.png (422×1 px, 72 KB)
Desktop
image.png (514×1 px, 96 KB)

My question is towards the fonts scale factor being different in mobile/desktop. Assuming base font is set by the checkbox label (14px on desktop, 16px on Mobile) the sub-label size is:

Mobile
13px/16px= 0.8125em/rem;
Desktop
12.4/14px= 0.8857em/rem;

In many situations we're just using one relative size for both mobile and desktop, ie: font-size: 0.925em; is used for the difficulty level description "Recommended for when you are first learning to edit"

Hi @Sgs - unfortunately there is a different base font size for Desktop and Mobile web. I try to use standard 4px grid regardless of mobile and desktop so actually it's intended that mobile and desktop have the same 4px space between the checkbox form element and the machine suggestions label (you have to measure between the entire checkbox component and the machine suggestions below):

Mobile
Screen Shot 2021-11-17 at 12.53.35 PM.png (422×1 px, 72 KB)
Desktop
image.png (514×1 px, 96 KB)

My question is towards the fonts scale factor being different in mobile/desktop. Assuming base font is set by the checkbox label (14px on desktop, 16px on Mobile) the sub-label size is:

Mobile
13px/16px= 0.8125em/rem;
Desktop
12.4/14px= 0.8857em/rem;

In many situations we're just using one relative size for both mobile and desktop, ie: font-size: 0.925em; is used for the difficulty level description "Recommended for when you are first learning to edit"

Yes, that's what I mean by unfortunately the base font-size being different on Mobile (16px) vs Desktop (14px) so the line-heights and font-sizes will be different across platforms. However, my preference would be for the spacing between the elements to be standard 4px instead of relative em:

image.png (98×394 px, 13 KB)

Change 739281 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Structured tasks: adjustments for robot icon

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

For @RHo quick review and any follow-ups (if needed). You may close the task if no further adjustments are needed.

The screenshots are from Android device (the fixes are in current production -wmf.9).

Screenshot_20211124-140215_Chrome.jpg (2×1 px, 381 KB)
Screenshot_20211124-140819_Chrome.jpg (2×1 px, 381 KB)

LGTM too Thanks!