Page MenuHomePhabricator

Implement banner design for WMDE's fall 2018 editor recruitment campaign
Open, Needs TriagePublic5 Estimated Story Points

Description

For the upcoming editor recruitment campaign we need to implement the banner design. This time, there will only be one banner. The campaign start date is planned for Oct 19th.

Acceptance criteria

  • The banner is implemented as per design (see images below).
  • The banner page title on the meta-wiki and the campaign parameter passed to the target page is WMDE_neweditors_autumn_2018_lp1
  • Clicking anywhere on the banner (not only on the button) leads users to the landing page.
  • A sample of 1% of the close button clicks is tracked using Extension:EventLogging. The schema's field bannerName contains the banner page title (as defined above).

Notes

  • There is a dedicated repository for editor recruitment campaigns.

Image Resources

https://commons.wikimedia.org/wiki/File:320-asset-vorort.svg
https://commons.wikimedia.org/wiki/File:600-asset-vorort.svg
https://commons.wikimedia.org/wiki/File:900-asset-vorort.svg
https://commons.wikimedia.org/wiki/File:1200-asset-vorort.svg
https://commons.wikimedia.org/wiki/File:X-schliessen.svg

Styling

Font

Montserrat

Colors

Background: #98B213
Text: #FFFFFF
Button background: #FFFFFF
Button text: #98B213

Button Border Radius

8px

Banner Border

#919191 solid 1px

Design

SizeDesign
320px
320-Wiki-Banner-vorort.png (141×321 px, 22 KB)
600px
600-Wiki-Banner-vorort.png (240×600 px, 55 KB)
900px
900-Wiki-Banner-vorort.png (240×900 px, 70 KB)
1200px
1200-Wiki-Banner-vorort.png (241×1 px, 106 KB)

Event Timeline

@kai.nissen For the authors banners it's important that we get a list of all URLs where the banner should not be shown (like on the landing page). I can go through all the sub-links I find on their landing page but the list may be subject to change. Please make sure that the people involved in the banner send us an updated list of URLs if they add more sub-pages to their landing page and sub pages.

I tested the banner and found two "issues" that might need to be addressed:

  • The black close button is not really visible on the Wikipedia logo / can be seen as part of it. I can imagine several solutions to that: Making the container round and putting a semi-transparent white background color in it. Or making the button green. Please ask the designer.
  • The link to the landing page has a "value-less parameter", ?WMDE_neweditors_autumn_2018_lp1. Is that intentional? or should it be something like ?campaign=WMDE_neweditors_autumn_2018_lp1 or something similar?

@Tim_WMDE I will make sure, that you get the list!

Thanks! For the record, I have excluded all pages which start with Wikipedia:Wikipedia_vor_Ort for now (which includes the landing page and all city pages) and Wikipedia:Wikimedia_Deutschland/LerneWikipedia. You can also already check the banner out here, though I have not finalized the banner / campaign settings yet:

https://de.wikipedia.org/wiki/Wikipedia:Hauptseite?banner=B18WMDE_neweditors_autumn_2018_lp1

The black close button is not really visible on the Wikipedia logo / can be seen as part of it.

I had the same feeling.

The link to the landing page has a "value-less parameter", ?WMDE_neweditors_autumn_2018_lp1. Is that intentional? or should it be something like ?campaign=WMDE_neweditors_autumn_2018_lp1 or something similar?

I am fairly certain it's missing campaign=, I have added it in the latest version.

I am fairly certain it's missing campaign=, I have added it in the latest version.

Thanks! I changed the URL in the description.

I have some comments on the design implementation:

  • What @gabriel-wmde proposes to make the close button more visible, sounds reasonable.
  • In some cases, the text overlaps the image, which makes it hard to read.
  • In my opinion, the banner text should not use a fixed width, so that the green space in the middle is used.
  • I'm not sure if it was intended to align the button width with the text or with the button text.

@sonkiki, @Stefan_Schneider_WMDE Please have a look at the banner.

To the banner (T205720#4654522) I would correct the following points:

  • the text overlaps with the image when it's getting smaller. would it be possible to switch to the smaller banner a bit earlyer, so that it does not overlap?
  • The button looks quite big/long. Would it be possible to have the button as long as the text in the button? Maybe the overlap issue then changes too, because it only overlaps with the button
  • The button is not so present as a button. Would it be possible to add some shadow there?
  • In the smallest banner version in mobile view the button is not fully seen. Could you correct that?

@kai.nissen
@Tim_WMDE
@gabriel-wmde
I don't know who of you can help here, so I just contacted you all.

the text overlaps with the image when it's getting smaller. would it be possible to switch to the smaller banner a bit earlyer, so that it does not overlap?

As discussed in person, it would be best if you could let me know at which viewport width you would like to have breakpoints. That said, you need to consider that we really need to support mobile devices until 320px width like the iPhone 5 or iPhone SE. I could decrease the font size a bit more for the edge cases or we think of another way to solve this problem. Let's discuss this on Monday or so maybe?

The button looks quite big/long. Would it be possible to have the button as long as the text in the button? Maybe the overlap issue then changes too, because it only overlaps with the button

I have fixed the button length, it should now always match the content width (except on Internet Explorer / Microsoft Edge where I had to eyeball a custom width because it does not support a feature I used for this).

The button is not so present as a button. Would it be possible to add some shadow there?

Done, please let me know if it's not the kind of shadow you expected.

In the smallest banner version in mobile view the button is not fully seen. Could you correct that?

I was initially a bit confused about this but when we talked we realized that you were actually talking about the mobile version of Wikipedia. It was not clear to me that this is a requirement for this banner, please make sure this is mentioned next time (also @kai.nissen) because the mobile skin of Wikipedia actually differs in some minor details, it actually uses a different set of fonts, for example.

For testing purposes, this actually means we need to check both of these URLs (and they will look slightly different due to the different fonts used):

https://de.wikipedia.org/?banner=B18WMDE_neweditors_autumn_2018_lp1
https://de.m.wikipedia.org/?banner=B18WMDE_neweditors_autumn_2018_lp1

I have also changed the close button to have a background now but if you think it's bad we can easily change / revert it.

@Tim_WMDE Big Thanks for implementing the changes immediately!

  • I will send you the overlap-data as soon as I tested every option and system I can access
  • The button now looks great with the shadow and without the overlap
  • Regarding the mobile version and the X-Button I will consult UX on Monday and get back to you. If there is no good solution for the mobile version I will check witch my team, if we will follow through on mobile or cancell that option. In the future we will explicitly write if mobile is in scope or not.

PS: I like the X-Button version from you :)

Hey @Stefan_Schneider_WMDE, I have implemented the changes we have discussed earlier and fixed a few minor issues I found with the banner. Let me know if the banner is alright now or if you need anything else to be changed. Also, the large white button and the close button feature a very slight translucency now to not appear too bright on the mobile design. Make sure to test the banner with both the desktop and mobile link:

https://de.wikipedia.org/?banner=B18WMDE_neweditors_autumn_2018_lp1
https://de.m.wikipedia.org/?banner=B18WMDE_neweditors_autumn_2018_lp1

Hi @Tim_WMDE. Big thx for implementing the banners as discussed. Now it looks very good on the mobile version. I would prefer your idea yesterday: only to have the second link (https://de.m.wikipedia.org/?banner=B18WMDE_neweditors_autumn_2018_lp1) designed with the slight grey background. The non-mobile link looks quite good also on the smartphone and is not that small so the text don't overlap on the display. Is that possible?

Hey @Tim_WMDE thanks for the nice in person meeting we just had. For documentation purposes, I would sum up what we did.

banner design:

  • we set the break points for the banner (when it gets the grey overlay) at 500px for desktop and 450px for mobile.

central notice settings:

  • we added the countries AT and CH
  • we added the languages Austrian German, Swiss German, Bavarian, formal German

Would you be so kind as to add Alemannic (deutsch: Alemannisch, code als) as well? It's a very small detail, but a colleague mentioned that this was a topic at WikiCon, and I think it would be nice to include them as well :)

  • we set the time for the campaign. But we got it the wrong way round: UTC is 2 hrs behind our time ^_^

Would you please set the times for the start of the campaign at October 19, 10:00 UTC? (this is 12:00 our time)

Let me know when you saw this, or if there are any more questions! :)

Hi @Tim_WMDE aaaaand last little thing from my side: We would like to track the mobile people explicitly. If I got you right there will be two links for the banner. It would be good to have the another additional campaign tag for the mobile link.

To be precise here: This would be the link with the campaign tag for the mobile banner: https://de.wikipedia.org/wiki/Wikipedia:Wikipedia_vor_Ort_2018?campaign=WMDE_neweditors_autumn_2018_lp1m
Campaign tag for mobile tracking without link: ?campaign=WMDE_neweditors_autumn_2018_lp1m

Could you please change the link from the mobile banner?

Hey @sonkiki & @Stefan_Schneider_WMDE,

we set the break points for the banner (when it gets the grey overlay) at 500px for desktop and 450px for mobile.

I put some more thought into it and ended up setting the breakpoint to 410px. My reasoning was that very large iPhones models have a resolution of 414px, same as some larger Android devices. This way, we could at least keep the image colorful for them and from my testing it should be alright in terms of legibility. We can easily change this if this is not to your liking.

Would you be so kind as to add Alemannic (deutsch: Alemannisch, code als) as well? It's a very small detail, but a colleague mentioned that this was a topic at WikiCon, and I think it would be nice to include them as well :)

Sure, you can verify the settings here:

https://meta.wikimedia.org/w/index.php?title=Special:CentralNotice&subaction=noticeDetail&notice=WMDE_Editor_Autumn_2018

Would you please set the times for the start of the campaign at October 19, 10:00 UTC? (this is 12:00 our time)

Also done!

We would like to track the mobile people explicitly.

As discussed in person, I have done this by technically creating a new banner which is equal to the other banner except for its Central Notice settings and the URL it links to. This means that there are now two banners, one banner is aimed at desktop and tablet devices and the other banner specifically targets "iPhone", "Android" and "Other mobile devices".

This is the desktop banner:

https://de.wikipedia.org/?banner=B18WMDE_neweditors_autumn_2018_lp1
https://de.wikipedia.org/wiki/Wikipedia:Wikipedia_vor_Ort_2018?campaign=WMDE_neweditors_autumn_2018_lp1

And this is the mobile banner:

https://de.m.wikipedia.org/?banner=B18WMDE_neweditors_autumn_2018_lp1m
https://de.m.wikipedia.org/wiki/Wikipedia:Wikipedia_vor_Ort_2018?campaign=WMDE_neweditors_autumn_2018_lp1m

You can see that the mobile banner also links to the mobile version of Wikipedia at "de.m.wikipedia.org". I have changed this due to the fact that it would be confusing to link mobile users from the mobile Wikipedia to the desktop version of Wikipedia, as this would essentially lead them to a completely different "Wikipedia experience" and potentially upset them. However, I noticed that the landing page is not really designed with mobile users in mind. The main problem is that the map of Germany, Austria and Switzerland is somewhat broken, especially in combination with the side-by-side layout on that page.

After looking into it quickly with a colleague, we realized there is actually a bug in the "imagemap" feature which was used there which makes the element scrollable on the mobile version of Wikipedia. We have submitted a bug fix but that will not be live anytime soon, so a "live hotfix" we implemented was to move the blue little info icon to the upper right corner because that circumvents the problem. Let me know if that's a problem or if it is okay and can stay like that.

The overall quality of the Wikitext "code" of the landing page is also rather poor and there is quite some room for improvement, I think next time you could potentially also approach us for helping with this. If we can make some time available, it might be cheaper and of higher quality in the end. I do not really have any more time to spend on this issue and Stefan told me that the current mobile view is "good enough". However, I think "good enough" is not very satisfactory for something with a high reach like this 🤔 .

Anyway, went on a bit of a rant there! It should be all set up and ready to go live tomorrow.

Thanks so much @Tim_WMDE!
We really, really appreciate the work you put behind this and we at the Team Ideenförderung are very lucky to have you as our bannerman! (Excuse the bad pun, too tempting not to...)

Big thanks for offering help with the wikitext code for the landing page next time!
Your rant shall not be in vain either – I will take all of your thoughts and suggestions into our leassons learned / review doc so it can be considered in the planning of future campaigns