Marquee(split) Enhancement - Ability to specify unique foreground Media element for Mobile

[drashti1712]

An enhancement requirement has come for the split variant of Marquee block (MWPW-140864) to be able to specify unique foreground media element for mobile devices. When viewed on Mobile, the ambient video background should be swapped with a static background and a "hidden" static image is positioned as first/top element. As per my understanding and the discussion on the jira, this is the required behaviour from the split marquee -

1. On Desktop: Ambient video as background and no subject (static) image
2. On Tablet: Same as desktop (current behaviour of split marquee)
3. On Mobile: Different (solid/gradient) background with a "hidden" static image appearing at top of the block

I would like to request some confirmation on whether my understanding is correct regarding this, especially for the tablet view.

In order to implement this, I am leveraging Milo's capability to specify unique backgrounds for different breakpoints and authoring the split marquee with one subject image which will be hidden in tablet and desktop viewports, but seen in mobile view. We are providing only 1 subject image in the authoring as we do not require other static images for tablet and desktop (since we only have an ambient bg video for them).

Here is the link to the POC I have implemented - https://marquee-split-enhancement--milo--drashti1712.hlx.page/drafts/drashti/MWPW-140864/document
I would appreciate some feedback on this approach and whether we should proceed with the proposed authoring and implementation.

@auniverseaway @chrischrischris @rgclayton @ryanmparrish @vhargrave @overmyheadandbody @jeremy @salonijain3 @dstrong23 @amitbikram @aishwaryamathuria @suhjainadobe

[Ruchika4]

Hi @drashti1712, below are few of my observations on above query:

1. What I understand from the jira ticket is that we want authors to be able to add different foreground images for different breakpoints. Mobile has been specifically called out but I believe tablet should also be supported as part of this ticket and authors should be able to author different image for tablet view too.
2. Also I think it'll be more clear if we allow authors to add three images in foreground image section of marquee, something like below may be

And we can keep the sequence same as background which is mobile, tablet, desktop. Please let me know what you think about it.

3. I also did a quick check with your current POC implementation and it breaks existing split marquee. Test page: https://marquee-split-enhancement--milo--drashti1712.hlx.page/drafts/ruchika/split-marquee

So for any enhancement approach we'll also need to make sure it is backword compatible.

cc @dstrong23 @auniverseaway @salonijain3 @rgclayton @chrischrischris @ccongerp

[drashti1712]

Hi @Ruchika4,
Thank you for your insights!

1. I have incorporated the changes for tablet view as mentioned by you above. The enhancement will allow the following capability and keep the existing functionality working -

• On Desktop: Ambient video as background and no subject (static) image
• On Tablet: Different background along with a unique image appearing on the side
• On Mobile: Different (solid/gradient) background with a "hidden" static image appearing at top or bottom (as authored) of the block

2. For the authoring we are keeping one column for each breakpoint image as it is similar to the authoring pattern followed for unique backgrounds. This is how the authoring would look -

Please let me know if this authoring works.

3. There was a new acceptance criteria that @jeremy mentioned in the jira. The authors should be able to specify whether foreground or "hidden" media item (image/video) should be positioned or stacked at top or below text part of the split variant of Marquee block. For implementing this, we are adding the classes media-top (by default) and media-bottom on top of the image in the authoring -

This is the link to the updated POC: https://marquee-split-enhancement--milo--drashti1712.hlx.page/drafts/drashti/MWPW-140864/document-columns

Kindly let me know if this works.

CC: @dstrong23 @auniverseaway @salonijain3 @rgclayton @chrischrischris

[Ruchika4]

Thanks for addressing the issues @drashti1712 . Regarding the authoring pattern, I am not an expert but I feel having all the foreground images in one column is better. We can also discuss this with Kyungwha Lee from Design team and finalize the authoring pattern. @rgclayton could you also please share your thoughts on this.

CC: @dstrong23 @auniverseaway @salonijain3 @rgclayton @chrischrischris @ccongerp

[rgclayton]

After reading the Jira ticket, my understanding of the ask is the same as what Ruchika stated.

Add the ability to have per-breakpoint (mobile, tablet, desktop) foreground images/videos. I don't see anywhere in the ticket that mentions swapping out background image with foreground image.

I also think the authoring pattern @Ruchika4 mentioned is a bit more simple. Adding more columns to the foreground section of the block really starts to complicate and constrain authoring the content.

To reiterate what Ruchika proposed.
The top image being mobile, the second image for tablet and the last image for desktop. No columns.

With this pattern I do think we would need to come up with options to NOT show an image on a specified break point. Maybe in place of the image the key word "none" is added?

So the authoring pattern to only display images on mobile and tablet would look something like:
image
image
none

If "none" is there it obviously wouldn't have a media-placement property.

Also, something to note. The marquee background image focal-point property is added below the image. Something to possibly stay consistent with when adding the media-placement property.

[Ruchika4]

Hi @drashti1712 , One suggestion regarding adding css for reverse order can we add it like below with marquee block.
Currently you have authored like below:

My suggestion is to add like below as I see few issue with localization (will have to add DNT to media-bottom text else it'll not work on localized content) with above approach also find below more clean. Authors can add reverse-order(or a text that is more relevant and agreed upon by everybody) along with block name and we can put logic to reverse the position of media and text in mobile view if it is added.

CC: @dstrong23 @auniverseaway @salonijain3 @rgclayton @chrischrischris @ccongerp

[udbroom]

Maybe 'reverse-order-mobile'?
I am aware that Aside Split stacks in mobile (tablet and desktop, they wills till two columns layout), but it might help to indicate that this variant is for mobile ONLY.

[udbroom]

This is @udbroom = Kyung lee
I agree with Ryan C. Also, splitting columns to add images might cause some potential issues.
Authoring friendly will be what Ruchika suggested. Stacking down images for different media breakpoints.

One thing to note is that how these foreground images should behave.
Current marquee background is set to:
Case 1 if one image: will be shown in desktop tablet and mobile
Case 2 if two images: 1st image -> mobile, 2nd image-> tablet and desktop
Case 3 if three images: 1st image -> mobile, 2nd image -> tablet 3rd image -> desktop

foreground image should follow the same structure:
Case 1 if one image: will be shown in desktop tablet and mobile
Case 2 if two images: top image -> mobile, last image-> tablet and desktop
Case 3 if three images: top image -> mobile, middle image -> tablet, bottom image -> desktop

When I review the POC page Ruchika provided, the page was broken to me.
I spoke with her and she found some issues as well. so I am noting it here. The page looks fine at desktop view, but screen get smaller than 1200, the images are all showing like the below image.

[drashti1712]

Hi @udbroom @Ruchika4 @rgclayton
Thank you for your feedback and suggestions regarding this. I will be changing the authoring pattern to stacking the foreground images in one column. I would be adding reverse-order-mobile as I agree that it is a cleaner way. For the case where we have an ambient video on desktop and want the image to be hidden, I would try to implement the approach suggested by @rgclayton:
image
image
none
I will provide the updates here once I have made all the changes.

Also below is the link to the current POC and the page is not breaking for me. If there are some specific issues, could you please let me know?
Link to the current POC (with columns authoring pattern) - https://marquee-split-enhancement--milo--drashti1712.hlx.page/drafts/drashti/MWPW-140864/document-columns

[rgclayton]

I know @auniverseaway and @ryanmparrish had some thoughts/opinions related to this. They are OOO this week, so their response may be delayed a bit.

[ryanmparrish]

@drashti1712 - I took a look at your POC and noticed the .marquee.quiet is broken, but I'm guessing there is an easy fix to address this.
In terms of establishing a per-viewport content authoring pattern I'm a little weary of the current direction w/ the stacked images in a single cell. We would need to carefully still support citation and image position and this raises concerns when the order and type of content is the differentiator here. This feels kind of fragile and narrow sighted since I think the copy will likely also want to be swapped per-viewport in the future. I wonder if we should approach this differently and give each viewport an additional content row.

[marquee ]
[bg asset... ]
[copy | asset] - If only one 'foreground' row, they are for all viewports.
[copy | asset] - If two or three 'foreground' rows are in the block, they represent the respective tablet/desktop views
... if the viewport content cell is empty, this would inherit its sibling content, unless it had a key word empty#_dnt or something too denote it shouldn't have content in a given VP.

This way we have a pattern that can in theory apply to other blocks and is easier to manage visually and in the .js decorator.

There are also some SEO implications w/ having these assets show/hide based on view, I don't know if this needs to be SEO first and experience second, but something to consider.

cc: @udbroom @Ruchika4 @rgclayton

[drashti1712]

Hello all,
I tried implementing the proposed authoring pattern with the stacked images in a single cell and I agree with @ryanmparrish's comment on this thread. The current marquee block lets authors add media credits below the image and make the image clickable by adding a link on top, as shown below:

If we stack the images in one cell and have different credit sources or links, then specifying them together might become an issue.

The authoring proposed above (an additional content row for each viewport) addresses this problem and takes into account potential future needs for unique copy per viewport. However, if copy is to always remain the same across viewports, we could also use different rows for each image. Something like:

cc: @ryanmparrish @udbroom @Ruchika4 @rgclayton @salonijain3 @aishwaryamathuria

[rgclayton]

I'm not sure about this authoring pattern. I understand the steps that lead to this. But, the table is getting a bit complex, possibly messy.

I left a message in the Jira ticket related to use cases. Looking at the ticket this ask appears to be related solely to the CC stack. Which makes me think if this feature is needed it's better suited living solely in CC for now.

For such a small use case:

• https://www.adobe.com/products/illustrator.html
• https://www.adobe.com/products/illustrator/campaign/pricing.html
• https://www.adobe.com/products/aftereffects.html
• https://www.adobe.com/products/aftereffects/campaign/pricing.html
• https://www.adobe.com/products/premiere/motion-graphics-templates.html

Would using MEP to do the swapping for mobile and desktop suffice?

[aishwaryamathuria]

We also have another ticket that needs to integrate the same ennhancements in the Aside block https://jira.corp.adobe.com/browse/MWPW-140593 and we would use the same authoring pattern finalised here for Asides as well.

CC: @salonijain3 @ryanmparrish @rgclayton @Ruchika4 @dstrong23 @auniverseaway

[salonijain3]

@auniverseaway Can you please look at this once, we will start implementing this as we have incorporated the comments in the final design.

cc: @dstrong23 @audi5 @ccongerp @narcis-radu

[amitbikram]

I am not an authoring expert, but a simpler way to keep the table neat might be by adding an extra row(Optional) to support multiple foregrounds.

cc: @rgclayton @auniverseaway @ryanmparrish @salonijain3 @dstrong23 @Ruchika4 @drashti1712

[auniverseaway]

My preference:

1. As I POCed it weeks ago (single cell for all three images)
2. Amit's proposal (a very very distant 2nd place)

More cells are generally a bad idea. It adds complexity when often it isn't needed. It also creates a parsing nightmare when converting to divs. The one where we are blending colspans and rowspans is very much an anti-pattern that we should not encourage. There's a reason we gave up on table-based design in the early 2000s... complex tables are the reason... I would not ask any author to use this paradigm.

From what I recall, the only thing we use cells for in background is so that we can group positioning text. With foreground, I don't see that being a need. Also, we can always use nextElementSibling to get any decoration text.

I can live with Amit's suggestion as it keeps a consistent colspan / rowspan pattern and does not blend the two, but I do not prefer it. It changes the fundamental shape of marquee content in these contexts and I think that's not ideal.