To implement the A/B test on the Take Action Cards in post pages (PLANET-5072) we should create the alternative design proposed by Magali (----------) inside Google Optimize. PLANET-4066
Alternative Design Specifications:
There are two styles that need to be developed:
1. Take Action Box Out Scroll
For both Desktop and Mobile the box out should appear when the use has reached 50% of the main content block.
For Desktop It should fade up and sit on the right hand side as the user scrolls (It does not move). It fades out just before the user reaches the end of the content block.
For Mobile it slides up from the bottom of the page. It remains there (in a sticky state) until the end of the content block or if the user closes it using the 'Not Now' text button. On click it closes. It does not disappear on scroll up.
2. Take Action Box Out at the bottom of the content area.
This version sits at the end of the content piece. It acts as a block of content. It does not have any animation or 'Not Now' close buttons.
There are no Tags.
Will has included measurements, however, you can also get measurements from within Sketch.
Related docs: recommended wireframes & animations
Comments from Will:
Animated version - tablet:
- The image should have white margins around if we want to be consistent with the mobile version.
- The text title can be slightly wider as we have more space.
- Shouldn't the CTA button have the same right margin as per the rest of the blocks on the page?
Static version - mobile:
- The "want to do more" title should be above the block as per the
desktop & tablet versions.
- blocks
-
PLANET-5765 Remove jQuery from post_action.js
- CLOSED
- duplicates
-
PLANET-5073 Create JS/CSS for the Take Action Boxout A/B Test
- CLOSED
- has to be done after
-
PLANET-5073 Create JS/CSS for the Take Action Boxout A/B Test
- CLOSED
- has to be done before
-
PLANET-4812 Convert Take Action Boxout to WYSIWYG
- CLOSED
-
PLANET-5072 Implement A/B Test on the Take Action boxout (posts)
- CLOSED
- relates to
-
PLANET-5083 UX recommendations for Take Action, Covers and Boxout
- CLOSED
-
PLANET-5108 Create design for Take Action Boxout A/B test
- CLOSED