Page MenuHomePhabricator

Implement banners according to design
Closed, ResolvedPublic

Description

Layouts will be available in this folder: https://drive.google.com/drive/folders/0B0Lyyq9BipJYVW1fbmNCa3hnNGs (by 2017-09-28)
Preliminary design: https://de.wikipedia.org/wiki/Wikipedia:Wikimedia_Deutschland/Neue_Ehrenamtliche/Kampagnen/Herbstaktion#Banner&Aktionsseiten

banners need a separation line to the content part (not included in the design files)

campaign tags which need to be included in the banners: T174954
please note also the banner links, also stated in T174954 (PLEASE NOTE: Links were replaced on 29.09 - 14:28 CEST)

Event Timeline

Tobi_WMDE_SW updated the task description. (Show Details)
Tobi_WMDE_SW updated the task description. (Show Details)

here's the task from the last campaign with links to the summer-campaign banners: T168632

Kai set up these banners for testing reasons (T175911) As testing isn't fully finished it would be better to set up new templates.

Couple of questions:

  • is the "close" X part of the design, should it be exactly like the one shown in the screens, or can we use the one from the previous banner?
  • can you provide an asset for the arrow inside the call-to-action button, please?
  • is the text on the left _supposed to be_ wrapped like it is shown in the screens, or is this a result of it being confined in width?
  • how should the text-image-button interact in case or narrow screens? Are they to be considered 3 columns, or should text and buttons slide over the image?

Answers:

  • You can use the one from the previous banner.
  • I forwarded the request. Will be provided.
  • The text is supposed to be wrapped like in the screens.
  • I forwarded the question, can't answer it now.

Please note that it needs 5 templates. The orange banner will be used with different link targets (although the design is the same).

Found the drive content - thanks.
We plan to implement as much as possible as real text, so could you please provide the background images (just the center images) as PNG with alpha transparency (or SVG, if you have), as we do not have AI to extract these.

Found the assets in the drive; thanks for this. Assuming we want to use commons to host these images, what is the appropriate license to upload them with (e.g. "Creative Commons Attribution ShareAlike 4.0")? Credit the original author or us (as it is contract work)?

Creative Commons Attribution ShareAlike 4.0 is the right one. It's important to have the right source in place. We can correct that afterwards, so you don't need to do that for every image. What we would need are all the commons links you create. Could you document that for us?

Thank you! The source is the right one. The Author is Wikimedia Deutschland. We will correct that.

Todo after verification of layout of WMDE_editor_campaign_autumn17_a to prepare the entire campaign:

  • copy banner code of WMDE_editor_campaign_autumn17_a into ~_b, ~_c, ~_d, ~_e
  • in each ~_b, ~_c, ~_d, ~_e
  • in WMDE_editor_campaign_autumn17_a change ~-button-link href to the final link target

@kai.nissen Could you please look into this, if you come in on Monday, so we have some headway until Wednesday?!

@Pablo-WMDE

Thank you for the first draft. There are a few thnigs, that I would like to be different:

  • 600px - 900px could the text be a bit bigger, so that it very slightly do not get in contact to the image at 600px
  • 900px - 1200px is it possible to have the banner divided into three even sized columns that scale with the width of the window? AND have the text centered in the first column, the image centered in the second column and the button centered in the third? AND that relatively centered to the different size between the 900 and 1200?
  • > 1200px could the fixed 1200px banner be fixed right in the position the (900-1200)-banner ends. In other words: position at 1200px = position at 1199px? AND The fixed part of the 1200px banner should be centered. It seems to be a bit more left.
  • all banners they should be sticky AND have a shadow at the bottom to seperate it slightly from the page. Otherwise it would be too white.

change ~-button-link href to the final link target

Please note, that the links in T174954 are relevant AND also need to have the campaign tag included, too
For example the pink banner, you just created, the link would be: https://de.wikipedia.org/wiki/Wikipedia:Wikimedia_Deutschland/JetztMitmachen#Aktualisieren?campaign=wmde_abc2017_bt2. The right link is recognizable with the appropriate color also statet in T174954.

All the other ToDos are perfectly fine.

BIG THX for your help!

@kai.nissen
I'll have a short look on it on Monday, too.

  • 600px - 900px could the text be a bit bigger, so that it very slightly do not get in contact to the image at 600px

I assumed you want the text to be a bit smaller to avoid the text overlapping the image. The text on the left side is now a little smaller for widths between 600 and 650px.

  • 900px - 1200px is it possible to have the banner divided into three even sized columns that scale with the width of the window? AND have the text centered in the first column, the image centered in the second column and the button centered in the third? AND that relatively centered to the different size between the 900 and 1200?
  • > 1200px could the fixed 1200px banner be fixed right in the position the (900-1200)-banner ends. In other words: position at 1200px = position at 1199px? AND The fixed part of the 1200px banner should be centered. It seems to be a bit more left.

I'm not sure about this. The width of the content is different for each of the columns, so it does not really make sense to have them be even-sized. I suggest, that we center the whole banner and leave fixed spacing between the three elements.

  • all banners they should be sticky AND have a shadow at the bottom to seperate it slightly from the page. Otherwise it would be too white.

The banner is now fixed to the top and drops a shadow at the bottom.

We have a short review with the team at 10:30. I'll get back to you then.

@kai.nissen Thank you for the corrections!

The Banner is quite good. Your suggerstion about the fixed spaces is fine. We'll do that.

The only thing missing is, that the > 1200px - banner is not centered yet. Could you correct that, please?

next steps

  • create all banners (Kai)
  • final review of the banners and the links (Stefan)
  • start campaign

Ok, I can do that. The start of the campaign will be delayed, though.

No problem. Can you give us an estimation on when everything will be ready?

Tobi_WMDE_SW claimed this task.