Page MenuHomePhabricator

Implement banner for technical wishes survey participation
Closed, ResolvedPublic8 Story Points

Description

Around mid of June, we want to run a banner campaign calling for participation in the 2019 survey for technical wishes.

Acceptance Criteria

Notes

  • There is no repository for technical wishes survey banners, yet.
  • We should keep in mind that users might use other skins than the default one (timeless, monobook).

Design

Text

In welchem Bereich braucht es technische Verbesserungen?

In der Umfrage „Technische Wünsche“ stehen 13 Problemfelder zur Wahl. Alle Interessierten sind eingeladen, bis zum 30. Juni mit abzustimmen. Technikkenntnisse sind dafür nicht erforderlich.

[Jetzt abstimmen]

Campaign setup

NameWMDE_techwish_voting_2019
Start Date2019-06-17
Start Time09:00
End Date2019-06-30
End Time23:59
ProjectsWikipedia
Languagesde - German
Geotargeted
User bucketing1
Prioritynormal
Limit traffic50%

Impression diet

Identifierwmde-techwish-vote
Skip impressions0
Max impressions8
Wait time0

Banners

Banner nameRespective page on meta-wikiLink to example on production wiki
WMDE_techwish_voting_2019setuppreview

Banner settings

Category
Display toLogged in users
Display ondesktop

Event Timeline

Restricted Application added a project: TCB-Team. · View Herald TranscriptMay 21 2019, 2:07 PM
Restricted Application added subscribers: Sadads, Aklapper. · View Herald Transcript
kai.nissen updated the task description. (Show Details)May 21 2019, 2:09 PM
kai.nissen updated the task description. (Show Details)May 21 2019, 2:27 PM
kai.nissen updated the task description. (Show Details)
Lea_WMDE renamed this task from Implement banner for technical wishlist survey participation to Implement banner for technical wishes survey participation.May 21 2019, 2:35 PM
kai.nissen updated the task description. (Show Details)May 22 2019, 9:47 AM
kai.nissen updated the task description. (Show Details)
kai.nissen updated the task description. (Show Details)May 22 2019, 11:39 AM
kai.nissen set the point value for this task to 5.
JStrodt_WMDE added a subscriber: JStrodt_WMDE.
JStrodt_WMDE updated the task description. (Show Details)

Concerning the text In der Umfrage „Technische Wünsche“ stehen <number> Problemfelder zur Wahl. Alle Interessierten sind eingeladen, bis zum 30. Juni mit abzustimmen. Technikkenntnisse sind dafür nicht erforderlich.

We'll know the definite number on June 4 and will add it to the description here.

@kai.nissen
Hi! https://meta.wikimedia.org/wiki/CentralNotice/Request says "Step #6 : CN Admin sets up campaign (~3 days)"

Does this mean we need to find a Central Notice admin for this step, or can you do this as well?

Best,
Johanna

@JStrodt_WMDE
The WMDE-FUN-Team is a bunch of CentralNotice admins, so this can all be left to them.

JStrodt_WMDE updated the task description. (Show Details)Jun 5 2019, 8:49 PM
Tim_WMDE moved this task from Todo to Doing on the WMDE-FUN-Sprint-2019-06-11 board.
JStrodt_WMDE updated the task description. (Show Details)Jun 11 2019, 1:48 PM

@Tim_WMDE
The banner is supposed to be displayed on desktop devices only. Did you request the other "versions" for cases of mobile users using the desktop skin? This surely adds complexity to this task, would this still be covered by the estimation?

The mobile version is indeed not needed and was never going to be implemented by me. However, what I brought up with Jan and Erdinc is that the initial design was supplied with a very low viewport width and it just did not scale very well on desktop screens, especially on common resolutions / viewport widths like 1920x1080. Additionally, I had some questions about the fonts because that also did not look to good in practice and I had to guess all the font sizes / line heights / use a color picker to get to the colors.

I did not mean to get any major redesign kicked off and mainly wanted to point out that banners should probably always be supplied via Figma or with a bit more than just a PNG file because otherwise it's really just a guessing game on our end. Essentially, the banner was basically done yesterday already but it looked so bad that I approached UX about it.

Banner is up here and can be tested:

https://de.wikipedia.org/?banner=WMDE_techwish_voting_2019

Pull request is here:

https://github.com/wmde/community-banners/pull/5

Since I am out sick, please forward all issues to @Tonina_Zhelyazkova_WMDE.

JStrodt_WMDE added a subscriber: Tim_WMDE.

Thanks, @Tim_WMDE!

@Tonina_Zhelyazkova_WMDE: I did a quick check (Chrome, Mac OS) and it looks like the characters aren't displayed according to the mock. I see differences in character spacing and I guess the font is also different:

I also noticed that the button has a line break on tablet view. This doesn't seem to be the case when I'm logged out.

This was just a quick first check. @Erdinc_Ciftci_WMDE, could you check more thoroughly if the implementation was done according to your specifications?

@Erdinc_Ciftci_WMDE and me talked about the custom font that was used in the banner and decided to use the standard font definition for pages instead, but we would not need to change the mock. I assume, that the character spacing issue is related to that. There is a style definition for that in the figma document, which I propose to just leave out.

I also noticed a line break in the button text and the button text overlapping the button area when visiting the desktop skin on mobile devices. Couldn't reproduce on any desktop browser, though.

Banner looks good on Windows browsers, too. Except for IE11, which seems to have a problem with laying out the text element:

Across all browsers, the tool bar positioning breaks:

And one last thing: The headline should end with a question mark.

@kai.nissen @JStrodt_WMDE

A new version was pushed to CN. You can have another look.
Please also look at monobook and timeless skins. Thank youuu

kai.nissen added a comment.EditedJun 14 2019, 10:16 AM

@Tonina_Zhelyazkova_WMDE
There are some MediaWiki skin specific issues:

  • On Vector, the tool bar positioning issue persists. When resizing the window, it "fixes itself".
  • On Monobook, there is too much space added to the top.
  • On Timeless, the top bar is not fixed anymore. I guess, there is no simple solution to that, but when closing the banner, the behaviour should be restored.

@JStrodt_WMDE Everything looks fine so far and regarding font selection, I actually want to learn and adopt the font usage in Wikimedia. Thanks to @Tim_WMDE 's introduction, I know more about our front-end development and implementation of designs now so I will be using our standard fonts in Figma designs in further works.

@kai.nissen there's a new version deployed on CN.

On Monobook, there is too much space added to the top.
On Timeless, the top bar is not fixed anymore. I guess, there is no simple solution to that, but when closing the banner, the behaviour should be restored.

Those two issues are fixed. The other one with the toolbar happens quite randomly and I still haven't found the culprit of the problem.
Also can you please move the start time since it says 00:00 on CN and this ticket says "tbd". Thanks!

kai.nissen updated the task description. (Show Details)Jun 14 2019, 2:35 PM

Thank you, @Tonina_Zhelyazkova_WMDE! I changed the start and end time in the description and on CN. I'd say, it's good to go.

I temporary disabled the banner, there are some fixes needed. See what DerHexer wrote in this request: https://meta.wikimedia.org/wiki/CentralNotice/Request/Technical_Wishes_survey_2019_on_dewiki Thank You :)

kai.nissen added a subscriber: gabriel-wmde.EditedJun 19 2019, 1:39 PM

@gabriel-wmde Can you please take care of that? The banner shouldn't be moved out of div#siteNotice. The banner code contains some media queries, that should be adapted, too. And the banner text alignment seems to change to center when leaving it in siteNotice. It should be aligned left, though.

I've adapted the banner. Can you use the previews for Vector, monobook and timeless to see if it's OK now?

@gabriel-wmde Thanks a lot! In monobook, the banner isn't showing for me (Mac, Chrome).

I'm not sure how to verify this - I've tested with Chrome on Mac too, both as logged in user and in private mode.

kai.nissen changed the point value for this task from 5 to 8.Jun 24 2019, 11:58 AM
kai.nissen closed this task as Resolved.Jun 26 2019, 12:36 PM