Page MenuHomePhabricator

Add banner text to wider viewports
Closed, ResolvedPublic3 Estimated Story Points

Description

The banners are based on the control banner of the previous test. We want to increase the banner height in larger viewports, but instead of scaling the element sizes we add more text to it.

Acceptance Criteria

  • Some changes are applied to both banners:
    • The text color of the bank data line and the link labelled as "Wohin geht meine Spende?" is changed to #000000.
    • When the form is displayed on the right side of the banner (1440+ px), it is vertically centered.
    • The rounded corners are displayed consistently for form field groups (see screenshots below).
  • Text is added to the variant banner depending on the viewport width as follows:

Liebe Leserinnen und Leser, bitte verzeihen Sie die Störung. <viewport-1200>Es ist ein bisschen unangenehm, daher kommen wir gleich zur Sache.</viewport-1200> {{ capitalizeFirstLetter weekdayPrepPhrase }} {{ currentDayName }} sind Sie in Deutschland gefragt<viewport-1200>, um Wikipedias Unabhängigkeit zu sichern </viewport-1200>:

{{ campaignDaySentence }} Wikipedia wird durch Spenden von durchschnittlich 21,48&nbsp;€ finanziert, aber 99&nbsp;% der Leserinnen und Leser spenden nicht. Wenn alle, die das jetzt lesen, einen kleinen Beitrag leisten, wäre unser Spendenziel bereits am heutigen {{ currentDayName }} erreicht. Schon der Preis einer Tasse Kaffee würde genügen. Über {{ amountBannerImpressionsInMillion }} Millionen Mal wird unser Spendenaufruf täglich angezeigt, aber nur {{ numberOfDonors }} Menschen haben bisher gespendet. <viewport-1200>Wenn Wikipedia eine kommerzielle Seite sein würde, wäre das ein riesiger Verlust für die Welt. Wikipedia ist ein Ort des Lernens – Werbung hat darin keinen Platz.</viewport-1200> Sicher könnten wir mit Werbung eine Menge Geld verdienen. Aber dann wäre Wikipedia komplett anders. Wir könnten ihr nicht vertrauen. <viewport-1400>Wikipedia bringt uns alle, die Wissen lieben, zusammen: Beitragende, Lesende und die Spendenden, die uns finanzieren.</viewport-1400> <viewport-1900>Das Herzstück von Wikipedia ist die Gemeinschaft von Menschen, die uns unbegrenzten Zugang zu verlässlichen und neutralen Informationen geben. </viewport-1900> Es ist leicht, diese Nachricht zu ignorieren und die meisten werden das wohl tun. <viewport-0> Wenn Sie Wikipedia nützlich finden, nehmen Sie sich {{ weekdayPrepPhrase }} {{ currentDayName }} bitte eine Minute Zeit und geben Wikipedia mit Ihrer Spende etwas zurück.</viewport-0> <viewport-1400> Wenn Sie Wikipedia nützlich finden, nehmen Sie sich {{ weekdayPrepPhrase }} {{ currentDayName }} bitte eine Minute Zeit. Geben Sie mit Ihrer Spende etwas zurück, damit Wikipedia weiter wachsen kann.</viewport-1400> Vielen Dank!

round-corner-bug-intervals.png (156×253 px, 13 KB)

round-corner-bug-amounts.png (38×356 px, 5 KB)

Notes
The tags used in the text above are meant as viewport width n and above. There is a special case in which "viewport-0" is used. The sentence is part of the text in all viewports, but it is being replaced by the content in "viewport-1400".

Event Timeline

kai.nissen updated the task description. (Show Details)
Tim_WMDE moved this task from Doing to Review on the WMDE-Fundraising-Funban-2018 board.
Tim_WMDE subscribed.

Thanks, @Tim_WMDE!

Can you apply the text color changes to the bank data info line, too? And one thing I missed to write down in the task description: Please increase the button height of all elements to 35px for viewports of 1400+.

@kai.nissen Done, I have increased the button size for both the VAR and the CTRL banner now, not sure if you only intended that change for VAR? Check CN.

@Tim_WMDE Sorry, the button size should not change in the control banner.

Tim_WMDE set the point value for this task to 3.Jan 3 2019, 12:26 PM