Laika does not yet perform as well as 10h16. We believe this is due to the lengthy form and for that reason we want to make it more compact and test this change against our current form.
Draft: https://www.figma.com/file/00Bi54030b4FkqmjafLk0Cst/Fundraising-2019-Components?node-id=1583%3A194 -> Desktop version: Less height or title in front
This version won't use the address data switch on the landing page.
The banner for this test will be an updated B19_WMDE_04_laika, see separate ticket for B19_WMDE_08_laika
- Banner B19_WMDE_08_laika should be used for CTRL and VAR
- The form should be implemented as shown in Figma
- The form should be responsive (e.g. label goes to the top of input fields) - This variant might also be used for the email campaign in the first week of Nov
- provide FUN-Ops / Till with a parameter for VAR (the more compact laika form), so we can use this variant as a url target for an eMailing on the November 10th.
- The large heading "Spenden" should be removed permanently from the Control design (and also removed from the variant design, as shown in Figma)
- The h2 headlines "Spenden als" and "Anschrift" are permanently added to the Control design and are also added to the variant design (see Figma of variant banner as a reference)
Form element spec
- The title should be left of the input form
- if the input form is a list or the like, the title should be left and above of the element (not top-flush with the first element of the widget)
- The title should be right aligned
- Between title and form element should be one grid unit (18px) space
- The text input element is now 2 (2*18=36px) grid units high (previously 3)
- The input widgets should go as close as 2 grid units to the right of the form column:
- the left end of the title should have a min distance from the left end of the content column of 1 grid units. The area for the text should thus be about 180px wide (slightly smaller than on the general mock)
Notes for technical implementation of A/B test
- For the different looks, use the A/B test CSS classes of the main application, introduced & documented in https://github.com/wmde/FundraisingFrontend/pull/1643
- For the reordered elements on the donation address page, use the <feature-toggle> element, introduced in the same PR.