Page MenuHomePhabricator

Homepage: text style issues in recent questions list of mobile mentor and help module dialogs
Open, LowPublicBUG REPORT

Description

In the context of the mobile Newcomer homepage, the text indicating the question age in the recent questions list of the Mentorship and Help module details dialog, presents some issues.
According to mockup's specifications, font-size should be .8em and letter-spacing should be 0.

Actual Results:

Screenshot 2019-08-06 18.10.49.png (264×750 px, 34 KB)

Expected Results:

Screenshot 2019-08-12 19.19.56.png (162×750 px, 20 KB)

.question-posted-on {
  font-size: 0.8em;
  letter-spacing: 0;
}

Event Timeline

You asked for both the font-size: 0.85em and letter-spacing: 0.02em rules here: T218966#5130398.

Should these:

  • A: Stay the way they are?
  • B: Change to 0.8em and 0 on both desktop and mobile?
  • C: Change to 0.8em and 0 on mobile, but stay at 0.85em and 0.02em on desktop?

(If C, why?)

I'm answering here to your question, plus questions at T230364 and T230373.

The answer is C and here's why:

  • The request at T218966#5130398 was about trying to simulate the usage of a different font for the light text, and avoid loading another font family with the page. This other font 'Roboto' comes from legacy files by @RHo I started working with when designing the homepage. When I found out I was using a different font I decided to maintain a similar style, since the visual appearance of the lighter Roboto font on desktop actually increased legibility of smaller text.
    Screenshot 2019-08-16 09.40.46.png (686×1 px, 107 KB)
  • On the mobile module previews the light text has a different use (longer informative text, versus bite sized data on desktop), plus mobile renders fonts slightly differently which was making Roboto break the rhythm of the page. I then decided to rely on system font to increase legibility and rhythm everywhere.
    Screenshot 2019-08-16 09.43.59.png (614×2 px, 118 KB)
  • Last but not least, to be very precise text at T230373 could potentially be letter-spacing: .02em, but it's good to keep consistency within the platform just as we did for desktop and so make it letter-spacing: 0 like the other occurrences.

I hope this will explain well the decisions made.

Apologies if some of the files were in Roboto that caused the confusion, that shouldn't be the case, rather OOUI font stack should be used. It was not intentional but must have occurred since my default typeface settings in Sketch were previously for Android designs.

Change 530572 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/extensions/GrowthExperiments@master] Help/Mentor: update text size of recent question timestamp

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

Change 530572 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help/Mentor: update text size of recent question timestamp

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

Checked in betalabs - all specs seems to be in place:

mentorship 1.PNG (587×496 px, 36 KB)

Checked in betalabs on the mentor module and looks like it is still 0.85em in some places:

image.png (1×2 px, 815 KB)

Note that there should no longer be a need to add letter-spacing:0 since it should be the default, and non-zero letter-spacing styles have been removed from the newcomer homepage entirely (per T230373#5428310)

Unassigning and moving back to Ready for Development

MMiller_WMF moved this task from Inbox to Upcoming Work on the Growth-Team board.

Moving back to Upcoming Work because the newcomer tasks project is a higher priority.